From 233e09e4a1cfc17ef21dfec916f8251d9de3ae3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20-=20Le=20Filament?= <theo@le-filament.com> Date: Wed, 3 Nov 2021 11:14:08 +0000 Subject: [PATCH] Update public from 8a449698 --- public/categories/index.html | 41 ++-- public/categories/organisation/index.html | 41 ++-- public/categories/sensibilisation/index.html | 41 ++-- public/css/style.css | 190 +++++++++++++++++-- public/index.html | 41 ++-- public/posts/authentification/index.html | 44 +++-- public/posts/index.html | 41 ++-- public/posts/pourquoi-scop/index.html | 44 +++-- public/tags/anssi/index.html | 41 ++-- public/tags/authentification/index.html | 41 ++-- public/tags/bonnes-pratiques/index.html | 41 ++-- public/tags/index.html | 41 ++-- public/tags/mot-de-passe/index.html | 41 ++-- public/tags/password/index.html | 41 ++-- public/tags/scop/index.html | 41 ++-- public/tags/structure/index.html | 41 ++-- 16 files changed, 539 insertions(+), 272 deletions(-) diff --git a/public/categories/index.html b/public/categories/index.html index 096e8a0..d353715 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 6b33df1..b9db841 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 8cc872e..dadffdf 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 2a267d5..0aae1e2 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 c99caa8..b31cf3b 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 5e7deb8..8e94223 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 973d280..2cf5af8 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 4a10cce..445aaef 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 cb73224..718b945 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 7925849..ef5cca7 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 2609e7a..d8b9919 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 950344f..03c25ac 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 8ed4181..2b22b85 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 341f328..b02ea67 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 582a395..562c2ec 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 4c086ea..042f3a8 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> -- GitLab