add responsive and dark theme support

themes/le_filament/layouts/partials/header.html

@@ -2,7 +2,13 @@
   <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 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">
@@ -11,4 +17,5 @@
         </div>
       {{ end }}
     </div>
+  </div>
 </nav>

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>

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
+  }
+}