css: add rules for small screens

static/style.css

@@ -76,16 +76,22 @@ article h2, article h3 {
   margin-top: 2.5rem;
 }
 
-main nav {
-  display: flex;
-  margin-top: 2rem;
+pre {
+  white-space: pre-wrap;
 }
 
-main nav .prev {
+main .page {
+  display: flex;
+  padding: 20px;
+  margin-top: 2rem;
+  background-color: var(--nav-bg);
+}
+
+main .page .prev {
   margin-right: auto;
 }
 
-main nav .next {
+main .page .next {
   margin-left: auto;
 }
 
@@ -125,10 +131,6 @@ footer {
 /* small screens */
 
 @media screen and (max-width: 1080px) {
-  #menu-button {
-    display: initial;
-  }
-
   main {
     margin-left: 0;
   }
@@ -137,13 +139,15 @@ footer {
     padding: 3rem 1rem;
   }
 
-  #menu-control:checked ~ aside {
-    display: initial;
+  nav {
+    padding: 0;
   }
-
-  #menu-control:checked ~ main,
-  #menu-control:checked ~ #menu-button {
-    transform: translateX(var(--aside-width));
+  nav a {
+    display: block;
+    text-align: center;
+  }
+  #title {
+    float: none;
   }
 }
 
@@ -165,7 +169,7 @@ footer {
     max-width: initial;
   }
 
-  aside, main > h1, main nav {
+  nav, footer, main .page {
     display: none;
   }
 }

templates/posts/page.html

@@ -12,7 +12,7 @@
     <article>
       <h1>{{ .Title }}</h1>
       {{ .Content | safeHTML }}
-	  <nav>
+	  <div class="page">
         {{- with .Prev }}
 		<a class="prev" href="{{ .Path }}">← {{ .Title }}</a>
         {{- end }}
@@ -20,7 +20,7 @@
         {{- with .Next }}
 		<a class="next" href="{{ .Path }}">{{ .Title }} →</a>
         {{- end }}
-	  </nav>
+	  </div>
     </article>
   </main>
   {{ partial "footer.html" . | safeHTML }}