diff --git a/public/categories/index.html b/public/categories/index.html index 096e8a04ac6bad38a86e6a40e5b08a0d06ba4737..d353715dc98547ee451735fb57d76f258661385d 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/categories/organisation/index.html b/public/categories/organisation/index.html index 6b33df1a49070ba174d8d0d64d03854777c9fe29..b9db8417cb30a5a0bf40793cb6ad8da138504f77 100644 --- a/public/categories/organisation/index.html +++ b/public/categories/organisation/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/categories/sensibilisation/index.html b/public/categories/sensibilisation/index.html index 8cc872eba537502f56d9ad32417ced9f6d1ca1d2..dadffdf47fc4a0c9f5844f31781819e8a32d7222 100644 --- a/public/categories/sensibilisation/index.html +++ b/public/categories/sensibilisation/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/css/style.css b/public/css/style.css index 2a267d51f038661e8eb519c0937770ce09db828e..0aae1e2713c970f3bbc21856c29ccba3cc4df438 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -20,21 +20,18 @@ body, button, input, select, optgroup, textarea { } body { - height:100vh; - margin:0; + min-height: 100vh; + max-width: 800px; + margin: 0 auto; display: flex; flex-direction: column; + background-color: #fff; } -a { - color: #1C2F82; +a, a:visited { + color: #1c2f82; background-color: transparent; text-decoration: none; - color: #1C2F82; -} - -a:visited { - color: #1C2F82; } p { @@ -50,21 +47,30 @@ img { } nav { + position: sticky; + top: 0; display: flex; justify-content: space-between; align-items: center; width: 800px; - margin: 25px auto; + padding: 25px 0; + background-color: inherit; + border-bottom: solid #333 1px; } nav .logo { + position: relative; + bottom: 5px; width: 155px; margin-top: 10px; + z-index: 2; +} + +nav a, nav a:visited { + color: #1c2f82; } main { - width: auto; - max-width: 750px; margin: 50px auto; } @@ -115,12 +121,19 @@ blockquote p { padding: 5px; } -.menu { +#menu-toggle input, #menu-toggle span { + display: none; +} + +#menu { display: flex; - justify-content: flex-end; + justify-content: space-between; align-items: center; width: 50%; - margin-left: 120px; +} + +.menu-item { + margin: 10px; } .menu-item a { @@ -141,14 +154,18 @@ blockquote p { width: 85%; cursor: pointer; background-color: #FFD14C; - padding-left: 3px; - padding-top: 8px; + padding-left: 6px; + padding-top: 10px; } .post { margin: 50px 0; } +.post a, .post a:visited { + color: #1c2f82; +} + .post-title { background-color: #ffd14c; border-radius: 1.2em; @@ -167,11 +184,16 @@ blockquote p { } .taxonomy { + color: #1c2f82; background-color: #ffd14c; border-radius: 1em; padding: 2px 12px; } +.taxonomy:visited { + color: #1c2f82; +} + .mastodon_button { display: block; width: 400px; @@ -185,6 +207,7 @@ blockquote p { text-transform: uppercase; text-decoration: none; text-align: center; + cursor: pointer; } .mastodon_button:visited { @@ -219,3 +242,136 @@ footer .logo { height: 20px; margin: 10px; } + +@media only screen and (any-hover: none) and (max-width: 980px) { + nav { + width: auto; + padding: 10px 30px; + } + + .menu { + flex-flow: column; + margin-left: 0; + margin-top: 20px; + } + + main { + width: auto; + margin: 0 20px; + } + + section { + margin: auto; + } + + blockquote { + margin-left: 0; + margin-right: 0; + } + + .post-info { + display: block; + margin-left: 20px; + } + + .mastodon_button { + width: auto; + } + + #menu-toggle { + display: block; + background-color: inherit; + user-select: none; + } + + #menu-toggle input { + display: block; + width: 33px; + height: 26px; + position: absolute; + top: 16px; + right: 25px; + cursor: pointer; + opacity: 0; + z-index: 2; + } + + #menu-toggle span { + position: relative; + display: block; + width: 33px; + height: 4px; + margin-bottom: 5px; + background: #cdcdcd; + border-radius: 3px; + z-index: 1; + transform-origin: 4px 0px; + transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), + opacity 0.55s ease; + } + + #menu-toggle span:first-child { + transform-origin: 0% 0%; + } + + #menu-toggle span:nth-last-child(2) { + transform-origin: 0% 100%; + } + + #menu-toggle input:checked ~ span { + opacity: 1; + transform: rotate(45deg) translate(-2px, -1px); + } + + #menu-toggle input:checked ~ span:nth-last-child(3) { + opacity: 0; + transform: rotate(0deg) scale(0.2, 0.2); + } + + #menu-toggle input:checked ~ span:nth-last-child(2) { + transform: rotate(-45deg) translate(0, -1px); + } + + #menu { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100vw; + padding-top: 75px; + padding-bottom: 10px; + background-color: inherit; + border-bottom: solid #333 1px; + transform-origin: 0% 0%; + transform: translate(0, -100%); + transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); + } + + .menu-item { + margin: 10px auto; + width: max-content; + } + + #menu-toggle input:checked ~ #menu { + transform: none; + } +} + +@media (prefers-color-scheme: dark) { + body { + background-color: #000; + } + + body, button, input, select, optgroup, textarea, a, a:visited { + color: #fff; + } + + nav { + width: 100%; + } + + blockquote { + background-color: #fff1 + } +} diff --git a/public/index.html b/public/index.html index c99caa880c1438a294f1e2ed93f85256150c56d8..b31cf3b4cc0a7a8ffa5a92183d8d8ef6ff6166b3 100644 --- a/public/index.html +++ b/public/index.html @@ -21,26 +21,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/posts/authentification/index.html b/public/posts/authentification/index.html index 5e7deb8ffd6963984b4722865526adf2008cfcd6..8e9422375d6a0313124af23d2a46929c75bf11ff 100644 --- a/public/posts/authentification/index.html +++ b/public/posts/authentification/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> @@ -128,6 +135,9 @@ <p>Bonne journée, Prenez soin de vous (et de vos mots de passe) !</p> </article> + <aside> + + </aside> <section class="post-taxonomy"> <h3>Licence</h3> <div> diff --git a/public/posts/index.html b/public/posts/index.html index 973d28081218b11be3884de66890362315b64f8b..2cf5af89273cc90bc4a4767365da8613830d0112 100644 --- a/public/posts/index.html +++ b/public/posts/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/posts/pourquoi-scop/index.html b/public/posts/pourquoi-scop/index.html index 4a10cce2513438e6445ac4ca967d6dad32f7d8d7..445aaef874747d08492934f20a5a83e1d80091b3 100644 --- a/public/posts/pourquoi-scop/index.html +++ b/public/posts/pourquoi-scop/index.html @@ -22,26 +22,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> @@ -117,6 +124,9 @@ <p>Si on devait faire un bilan après un peu plus de 4 ans en Scop, nous sommes globalement très satisfaits de ce que ce modèle nous apporte tant au niveau individuel (sens, équilibre) que collectif et ne pouvons que vous conseiller de tenter l’aventure !</p> </article> + <aside> + + </aside> <section class="post-taxonomy"> <h3>Licence</h3> <div> diff --git a/public/tags/anssi/index.html b/public/tags/anssi/index.html index cb732241a2681fe371244ead56a4fc9bf3278c01..718b94540561bb6b4b283665c18e96dab49ede6a 100644 --- a/public/tags/anssi/index.html +++ b/public/tags/anssi/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/authentification/index.html b/public/tags/authentification/index.html index 792584969a06fb273379c0d9546f7cbc5289f7d5..ef5cca712ca605683bb7d5743322626cc2ae1402 100644 --- a/public/tags/authentification/index.html +++ b/public/tags/authentification/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/bonnes-pratiques/index.html b/public/tags/bonnes-pratiques/index.html index 2609e7a89217f380fdd77f673830ac914851f0aa..d8b99190be2e078b3bdd984d1f40a6612b7f95d6 100644 --- a/public/tags/bonnes-pratiques/index.html +++ b/public/tags/bonnes-pratiques/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/index.html b/public/tags/index.html index 950344fcd20d6f64d7db67508d343d4b407ad939..03c25ac6a141bd2d79a7f8ace7821b444791ae1b 100644 --- a/public/tags/index.html +++ b/public/tags/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/mot-de-passe/index.html b/public/tags/mot-de-passe/index.html index 8ed4181d0a012cd4dc8f5060d9c937acea9919a6..2b22b8576b24ebf6680241b29b84938353d10cac 100644 --- a/public/tags/mot-de-passe/index.html +++ b/public/tags/mot-de-passe/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/password/index.html b/public/tags/password/index.html index 341f328c9d1d8555df019daae0bfcc02abae90e4..b02ea67d8ed2fa5f195e3e173ba2ec5a5981188a 100644 --- a/public/tags/password/index.html +++ b/public/tags/password/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/scop/index.html b/public/tags/scop/index.html index 582a39588f43b788e4591f3ebc0983c643172a9c..562c2ec369fce67e69ba318988de137b7a1ffd4a 100644 --- a/public/tags/scop/index.html +++ b/public/tags/scop/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav> diff --git a/public/tags/structure/index.html b/public/tags/structure/index.html index 4c086eaa91d9b471c91d35d674ebd768d05d84fe..042f3a86f39584e77b0b91654b3d35720f3b4ae3 100644 --- a/public/tags/structure/index.html +++ b/public/tags/structure/index.html @@ -20,26 +20,33 @@ <a href="/" class="logo-link" rel="home" itemprop="url"> <img src="https://le-filament.com/img/logo-lefilament-H.svg" class="logo" alt="Le Filament" > </a> - <div class="menu"> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/posts">Articles</a> + <div id="menu-toggle"> + <input type="checkbox" /> + <span></span> + <span></span> + <span></span> + + <div id="menu"> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/posts">Articles</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/categories">Catégories</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/categories">Catégories</a> + </div> </div> - </div> - - <div class="menu-item"> - <div class="menu-shadow"> - <a href="/tags">Étiquettes</a> + + <div class="menu-item"> + <div class="menu-shadow"> + <a href="/tags">Étiquettes</a> + </div> </div> - </div> - + + </div> </div> </nav>