diff --git a/themes/le_filament/layouts/partials/header.html b/themes/le_filament/layouts/partials/header.html
index 7da5997069d5e6a5a19183bd8ff68eba9f1e7ba1..1d7bfad09edf313b4bf91ffc895657ab7bc5248b 100644
--- a/themes/le_filament/layouts/partials/header.html
+++ b/themes/le_filament/layouts/partials/header.html
@@ -2,13 +2,20 @@
<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">
- {{ range .Site.Menus.main }}
- <div class="menu-item">
- <div class="menu-shadow">
- <a href="{{ .URL }}">{{ .Name }}</a>
+ <div id="menu-toggle">
+ <input type="checkbox" />
+ <span></span>
+ <span></span>
+ <span></span>
+
+ <div id="menu">
+ {{ range .Site.Menus.main }}
+ <div class="menu-item">
+ <div class="menu-shadow">
+ <a href="{{ .URL }}">{{ .Name }}</a>
+ </div>
</div>
- </div>
- {{ end }}
+ {{ end }}
+ </div>
</div>
</nav>
diff --git a/themes/le_filament/layouts/posts/single.html b/themes/le_filament/layouts/posts/single.html
index a498e31a2f5d130318997fb365f08003ce40d0f2..27b2a87e728b3b62c30bf334ffed143317d60229 100644
--- a/themes/le_filament/layouts/posts/single.html
+++ b/themes/le_filament/layouts/posts/single.html
@@ -4,6 +4,9 @@
<h1>{{ .Title }}</h1>
{{ .Content }}
</article>
+ <aside>
+ {{ .TableOfContents }}
+ </aside>
<section class="post-taxonomy">
<h3>Licence</h3>
<div>
diff --git a/themes/le_filament/static/css/style.css b/themes/le_filament/static/css/style.css
index 2a267d51f038661e8eb519c0937770ce09db828e..0aae1e2713c970f3bbc21856c29ccba3cc4df438 100644
--- a/themes/le_filament/static/css/style.css
+++ b/themes/le_filament/static/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
+ }
+}