"packages": {
"": {
"devDependencies": {
+ "alpinejs": "^3.4.2",
"autoprefixer": "^10.3.7",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==",
"dev": true
},
+ "node_modules/@vue/reactivity": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+ "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+ "dev": true,
+ "dependencies": {
+ "@vue/shared": "3.1.5"
+ }
+ },
+ "node_modules/@vue/shared": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+ "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+ "dev": true
+ },
"node_modules/@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
+ "node_modules/alpinejs": {
+ "version": "3.4.2",
+ "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.4.2.tgz",
+ "integrity": "sha512-PCTLdySJG5ercbN/g4sO+Nyo0TjzV3IP5W9L3UiSj3756VZPUctNiikLAoKX5al2NlLE2O7jPpgtakuRpLLeIQ==",
+ "dev": true,
+ "dependencies": {
+ "@vue/reactivity": "~3.1.1"
+ }
+ },
"node_modules/ansi-escapes": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
"integrity": "sha512-AZU7vQcy/4WFEuwnwsNsJnFwupIpbllH1++LXScN6uxT1Z4zPzdrWG97w4/I7eFKFTvfy/bHFStWjdBAg2Vjug==",
"dev": true
},
+ "@vue/reactivity": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+ "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+ "dev": true,
+ "requires": {
+ "@vue/shared": "3.1.5"
+ }
+ },
+ "@vue/shared": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+ "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+ "dev": true
+ },
"@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
+ "alpinejs": {
+ "version": "3.4.2",
+ "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.4.2.tgz",
+ "integrity": "sha512-PCTLdySJG5ercbN/g4sO+Nyo0TjzV3IP5W9L3UiSj3756VZPUctNiikLAoKX5al2NlLE2O7jPpgtakuRpLLeIQ==",
+ "dev": true,
+ "requires": {
+ "@vue/reactivity": "~3.1.1"
+ }
+ },
"ansi-escapes": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
"production": "mix --production"
},
"devDependencies": {
+ "alpinejs": "^3.4.2",
"autoprefixer": "^10.3.7",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
-
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
- @import 'fonts.css';
-
- html, body {
- min-height: 100%;
- }
-
- b, strong {
- @apply font-semibold;
- }
-
- h1, h2, h3, h4 {
- @apply font-semibold;
- }
-
- h1 { @apply text-6xl; }
- h2 { @apply text-4xl; }
-
- .circle-arrow {
- display: inline-block;
- width: 3em;
- height: 3em;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%230825e2'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M29.089 23.537H18'/%3E%3Cpath d='m24.555 19 4.534 4.541-4.534 4.533'/%3E%3C/g%3E%3C/svg%3E");
- }
+ @import 'common/fonts.css';
+ @import 'common/menu.css';
+ @import 'common/global.css';
}
-
-/* Variable font support: https://github.com/tailwindlabs/tailwindcss/discussions/3225 */
@layer utilities {
- .font-extralight {
- font-variation-settings: 'wght' 200;
- }
- .font-light {
- font-variation-settings: 'wght' 300;
- }
- .font-normal {
- font-variation-settings: 'wght' 400;
- }
- .font-medium {
- font-variation-settings: 'wght' 500;
- }
- .font-semibold {
- font-variation-settings: 'wght' 600;
- }
- .font-bold {
- font-variation-settings: 'wght' 700;
- }
-
- .min-h-content {
- min-height: calc(100vh - 96px); /* Allow for header and padding */
- }
+ @import 'common/utilities.css';
}
--- /dev/null
+/**
+ * @license
+ *
+ * Font Family: General Sans
+ * Designed by: Frode Helland
+ * URL: https://www.fontshare.com/fonts/general-sans
+ * © 2021 Indian Type Foundry
+ *
+ * Font Styles:
+ * General Sans Variable (Variable font)
+ * General Sans Variable Italic (Variable font)
+*/
+
+
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: 'wght' 700.0;
+*
+* available axes:
+
+* 'wght' (range from 200.0 to 700.0)
+
+*/
+
+/*=== GeneralSans-Variable ===*/
+@font-face {
+ font-family: 'GeneralSans';
+ src: url('../../fonts/GeneralSans-Variable.woff2') format('woff2'),
+ url('../../fonts/GeneralSans-Variable.woff') format('woff'),
+ url('../../fonts/GeneralSans-Variable.ttf') format('truetype');
+ font-weight: 200 700;
+ font-display: swap;
+ font-style: normal;
+}
+
+/*=== GeneralSans-VariableItalic ===*/
+@font-face {
+ font-family: 'GeneralSans';
+ src: url('../../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
+ url('../../fonts/GeneralSans-VariableItalic.woff') format('woff'),
+ url('../../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
+ font-weight: 200 700;
+ font-display: swap;
+ font-style: italic;
+}
+
+
+/*=======
+| ROBOTO - https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin
+========*/
+
+/* roboto-regular - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local(''),
+ url('../../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('../../fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-500 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: local(''),
+ url('../../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('../../fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* roboto-700 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: local(''),
+ url('../../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('../../fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
--- /dev/null
+html, body {
+ min-height: 100%;
+}
+
+b, strong {
+ @apply font-semibold;
+}
+
+h1, h2, h3, h4 {
+ @apply font-semibold;
+}
+
+h1 { @apply text-6xl; }
+h2 { @apply text-4xl; }
+
+[x-cloak] { display: none !important; }
+
+.circle-arrow {
+ display: inline-block;
+ width: 3em;
+ height: 3em;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='24' fill='%230825e2'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M29.089 23.537H18'/%3E%3Cpath d='m24.555 19 4.534 4.541-4.534 4.533'/%3E%3C/g%3E%3C/svg%3E");
+}
--- /dev/null
+.menu-open .menu-overlay {
+ @apply opacity-100 pointer-events-auto;
+}
+
+.menu-open .header-logo, .menu-open .site-header {
+ @apply text-white;
+}
--- /dev/null
+/*== Utility overrides ==*/
+.min-h-content {
+ min-height: calc(100vh - 96px); /* Allow for header and padding */
+}
+
+/* Variable font support: https://github.com/tailwindlabs/tailwindcss/discussions/3225 */
+.font-extralight {
+ font-variation-settings: 'wght' 200;
+}
+
+.font-light {
+ font-variation-settings: 'wght' 300;
+}
+
+.font-normal {
+ font-variation-settings: 'wght' 400;
+}
+
+.font-medium {
+ font-variation-settings: 'wght' 500;
+}
+
+.font-semibold {
+ font-variation-settings: 'wght' 600;
+}
+
+.font-bold {
+ font-variation-settings: 'wght' 700;
+}
+++ /dev/null
-/**
- * @license
- *
- * Font Family: General Sans
- * Designed by: Frode Helland
- * URL: https://www.fontshare.com/fonts/general-sans
- * © 2021 Indian Type Foundry
- *
- * Font Styles:
- * General Sans Variable (Variable font)
- * General Sans Variable Italic (Variable font)
-*/
-
-
-/**
-* This is a variable font
-* You can control variable axes as shown below:
-* font-variation-settings: 'wght' 700.0;
-*
-* available axes:
-
-* 'wght' (range from 200.0 to 700.0)
-
-*/
-
-/*=== GeneralSans-Variable ===*/
-@font-face {
- font-family: 'GeneralSans';
- src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
- url('../fonts/GeneralSans-Variable.woff') format('woff'),
- url('../fonts/GeneralSans-Variable.ttf') format('truetype');
- font-weight: 200 700;
- font-display: swap;
- font-style: normal;
-}
-
-/*=== GeneralSans-VariableItalic ===*/
-@font-face {
- font-family: 'GeneralSans';
- src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
- url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
- url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
- font-weight: 200 700;
- font-display: swap;
- font-style: italic;
-}
-
-
-/*=======
-| ROBOTO - https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin
-========*/
-
-/* roboto-regular - latin */
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- src: local(''),
- url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-500 - latin */
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 500;
- src: local(''),
- url('../fonts/roboto-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/roboto-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-700 - latin */
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 700;
- src: local(''),
- url('../fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
- url('../fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
+// Add AlpineJS - https://alpinejs.dev/
+import Alpine from 'alpinejs';
+window.Alpine = Alpine;
+Alpine.start();
+
+
window._ = require('lodash');
/**
--- /dev/null
+{{-- Standard Link --}}
+@php
+ if (Illuminate\Support\Str::startsWith($href, '/')) {
+ // TODO: add adapt local URLs based on environment (whether dynamic or static HTML output)
+ $href = '/front' . $href; // Prefix URLs for frontend preview
+ }
+@endphp
+
+<a href="{{ $href ?? '#' }}" {{ $attributes }}>
+ {{ $slot }}
+</a>
'title' => 'Médiathèque',
'content' => 'Consultez les médias audio et vidéo',
'image' => 'https://odl.paris.cubedesigners.com/storage/105/groupe-211-at-2x.png',
- 'link' => '#',
+ 'link' => '/mediatheque',
],
[
'title' => 'Visite guidée',
'content' => 'Laissez-vous guider dans une lecture thématique',
'image' => 'https://odl.paris.cubedesigners.com/storage/106/groupe-221-at-2x.png',
- 'link' => '#',
+ 'link' => '/tour',
],
];
@endphp
{{-- Main home content --}}
<div class="flex flex-1 justify-center -mb-16">{{-- negative margin so image shadow sits under shortcuts --}}
{{-- Left Column: logo + text + CTA --}}
- <div class="home-left flex flex-1 flex-col justify-center items-center p-6 max-w-[310px]">
+ <div class="home-left flex flex-1 flex-col justify-center items-center p-6 max-w-[360px]">
@if($logo)<img class="mb-10" src="{{ $logo }}" alt="Logo">@endif
- @if($subtitle)<p class="text-center mb-5">{{ $subtitle }}</p>@endif
- @if($button)<a class="bg-blue text-white py-4 px-10 rounded-full" href="/tools/fluidbookpreview">{{ $button }}</a>@endif
+ @if($subtitle)<p class="text-center mb-5 max-w-[280px]">{{ $subtitle }}</p>@endif
+ @if($button)<a class="bg-blue text-white py-4 px-10 rounded-full" href="#">{{ $button }}</a>@endif
</div>
{{-- Right Column: Illustration image --}}
- <div class="home-right flex-1 bg-contain bg-center bg-no-repeat max-w-[700px]" style="@if($illustration)background-image:url({{ $illustration }})@endif"></div>
+ <div class="home-right flex-1 bg-contain bg-center bg-no-repeat max-w-[550px]" style="@if($illustration)background-image:url({{ $illustration }})@endif"></div>
</div>
{{-- Link blocks --}}
<div class="flex-1 flex-shrink-0 space-y-2">
<h3 class="font-semibold uppercase">{{ $shortcut['title'] }}</h3>
<p>{{ $shortcut['content'] }}</p>
- <a href="{{ $shortcut['link'] }}" class="circle-arrow"></a>
+ <x-link :href="$shortcut['link']" class="circle-arrow"></x-link>
</div>
</div>
@endforeach
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>{{ config('app.name') }}</title>
</head>
-<body class="font-primary p-8">
- <header class="relative flex justify-between">
+<body class="font-primary p-8" :class="menuOpen && 'menu-open'" x-data="{ menuOpen: false }">
+ <header class="site-header relative flex justify-between z-10">
{{-- Burger Menu Icon --}}
- <a href="#">
- <svg class="fill-current fixed" xmlns="http://www.w3.org/2000/svg" width="33" height="26" viewBox="0 0 33.494 26.495">
- <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+ <a href="#" @click.prevent="menuOpen = !menuOpen">
+ <svg class="stroke-current fixed" xmlns="http://www.w3.org/2000/svg" width="33" height="26" viewBox="0 0 33.494 26.495">
+ <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1 1h31.494"/>
<path d="M1 13.248h31.494"/>
<path d="M1 25.495h31.494"/>
</a>
{{-- VEOLIA Logo --}}
- <a class="header-logo text-red" href="/">
+ <x-link class="header-logo text-red" href="/">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="130" height="31.878" viewBox="0 0 130 31.878"><path d="M13.704 31.795A16.13 16.13 0 0 1 .278 19.079a19.191 19.191 0 0 1-.189-5.063A16.014 16.014 0 0 1 13.598.139a19.613 19.613 0 0 1 5.536.127 16.063 16.063 0 0 1 11.993 10.7 15.252 15.252 0 0 1 .794 4.983 16.007 16.007 0 0 1-12.536 15.626 23.994 23.994 0 0 1-5.681.22Zm1.658-7.262a19.68 19.68 0 0 1-2.509-3.99 4.469 4.469 0 0 1-.4-2.247 3.587 3.587 0 0 1 .346-2.02 3.386 3.386 0 0 1 3.156-2.1c2.061-.012 3.576 1.758 3.567 4.166q-.009 2.367-2.468 5.525l-.947 1.215.914-.083a11.289 11.289 0 0 0 7.03-3.344 9.91 9.91 0 0 0 2.146-3.057 9.655 9.655 0 0 0 1.066-4.821 9.577 9.577 0 0 0-.262-2.748 11.391 11.391 0 0 0-12.229-8.536 11.425 11.425 0 0 0-9.762 8.536 13.065 13.065 0 0 0 .01 5.46 11.419 11.419 0 0 0 8.977 8.38 11.273 11.273 0 0 0 1.33.167l.468.011Zm63.629.811a12.141 12.141 0 0 1-3.307-1.111 7.234 7.234 0 0 1-3.274-5.455 16.528 16.528 0 0 1 .2-4.7 7.168 7.168 0 0 1 2.883-4.3 11.8 11.8 0 0 1 6.823-1.261c2.5.255 4.008.871 5.278 2.153a6.778 6.778 0 0 1 1.844 3.475 16.166 16.166 0 0 1 .051 5.776 6.754 6.754 0 0 1-5.2 5.254 16.019 16.019 0 0 1-5.298.17Zm4.092-3.055a3.074 3.074 0 0 0 1.737-1.57 7.571 7.571 0 0 0 .736-3.75c0-3.9-1.372-5.6-4.516-5.6a4.05 4.05 0 0 0-3.041.95c-1.035.93-1.478 2.323-1.478 4.647 0 3.219 1 5.013 3.1 5.541a7.933 7.933 0 0 0 3.461-.221Zm-39.092 2.622c-.062-.158-1.636-3.728-3.5-7.932s-3.387-7.689-3.387-7.744a6.066 6.066 0 0 1 1.548-.1c1.387 0 1.6.029 2.079.28a2.662 2.662 0 0 1 .841.753c.171.26 1.2 2.562 2.278 5.114s2.006 4.715 2.053 4.8a40.742 40.742 0 0 0 2.044-4.732c1.078-2.693 2.076-5.068 2.218-5.278a2.56 2.56 0 0 1 .789-.661c.484-.255.684-.28 2.246-.28h1.715l-3.31 7.323c-1.821 4.027-3.445 7.5-3.609 7.715-.506.666-1.126.9-2.6.966-1.278.068-1.298.062-1.406-.223Zm17.04-.007a6.749 6.749 0 0 1-4.9-5.126 12.989 12.989 0 0 1 0-5.393 7.238 7.238 0 0 1 3.253-4.507c1.366-.728 1.823-.787 6.226-.8l3.978-.008v2.893l-3.438.06-3.438.06-.794.391a2.765 2.765 0 0 0-1.13.877 4.562 4.562 0 0 0-.661 2.012v.274l4.55.032 4.55.032v2.772l-4.55.032-4.55.032v.266a5.392 5.392 0 0 0 .2.964 3.036 3.036 0 0 0 1.826 2.043c.647.257.9.276 4.094.318l3.405.045v2.873l-4.008-.013c-2.2-.007-4.279-.065-4.611-.128Zm35.54-.1a8.52 8.52 0 0 1-1.373-.486 5.251 5.251 0 0 1-1.992-2.091c-.544-1.188-.585-1.718-.59-7.609V9.073h1.266c1.094 0 1.323.036 1.688.264.806.505.777.3.844 5.943l.06 5.123.3.536a1.956 1.956 0 0 0 .9.844c.586.3.662.309 3.526.347l2.927.04v2.874l-3.345-.007a16.7 16.7 0 0 1-4.207-.233Zm9.869-7.2c.032-7.081.045-7.46.263-7.781.382-.563.851-.73 2.212-.785l1.235-.05v7.433c0 8.2.026 7.911-.759 8.39-.32.195-.609.235-1.685.236h-1.3Zm5.7 7.3c.034-.088 1.464-3.387 3.178-7.331 3.49-8.032 3.517-8.08 4.711-8.388a7.507 7.507 0 0 1 3.108-.019c.1.119 6.534 14.861 6.847 15.676.071.186-.066.2-1.505.2-2.346 0-2.719-.236-3.635-2.308l-.552-1.248-3.217-.032-3.217-.032-.124.325c-.068.179-.361.82-.652 1.426a3.114 3.114 0 0 1-1.039 1.455c-.5.345-.552.355-2.238.393-1.4.032-1.716.008-1.666-.121Zm11.231-6.518c-.92-2.207-2.181-5.116-2.249-5.19a38.91 38.91 0 0 0-2.253 4.949l-.164.392h2.365c1.844 0 2.35-.034 2.301-.151Z"/></svg>
- </a>
+ </x-link>
{{-- Search Icon --}}
<a href="#">
- <svg class="fill-current fixed top-8 right-8" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 29.414 29.414">
- <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+ <svg class="stroke-current fixed top-8 right-8" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 29.414 29.414">
+ <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1 12.25A11.25 11.25 0 1 0 12.25 1 11.25 11.25 0 0 0 1 12.25Z"/>
<path d="m28 28-7.794-7.794"/>
</g>
@yield('content')
</div>
+ {{-- MENU OVERLAY --}}
+ <div class="menu-overlay
+ fixed top-0 left-0 w-screen h-screen
+ flex items-center
+ bg-blue text-white
+ transition-opacity duration-500
+ px-30"
+ :class="menuOpen ? '' : 'opacity-0 pointer-events-none'"
+ x-cloak>
+
+ <ul class="font-medium text-6xl space-y-10">
+ @php
+ $menu_links = [
+ '/' => 'Accueil',
+ '/fluidbook' => 'Cœur de l’offre',
+ '/ressources' => 'Ressources',
+ '/mediatheque' => 'Médiathèque',
+ '/tour' => 'Visite guidée',
+ ];
+ @endphp
+
+ @foreach ($menu_links as $link => $text)
+ <li x-show="menuOpen"
+ style="transition-delay: {{ 700 + (50 * $loop->iteration) }}ms"
+ x-transition:enter="transition transform ease-out duration-1000"
+ x-transition:enter-start="opacity-0 translate-x-[-100px]"
+ x-transition:enter-end="opacity-100 translate-x-0">
+ <x-link class="text-current transition-opacity duration-200 hover:opacity-60" href="{{ $link }}">{{ $text }}</x-link>
+ </li>
+ @endforeach
+ </ul>
+ </div>
+
+ <script src="{{ asset('js/app.js') }}"></script>
+
</body>
</html>
spacing: {
'15': '3.75rem', // 60px
'22': '5.5rem', // 88px
+ '30': '7.5rem', // 120px
}
},
fontFamily: {
projects / odl.git / commitdiff