From 8d5b6ef10124f83b7949202139fe0917aa880ffd Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Sat, 19 Nov 2022 17:20:35 +0100
Subject: [PATCH] Improve nav, fix some inconsistencies

---
 src/main/css/snippets/common.css | 26 +++++++++++++++++++++++---
 src/main/css/snippets/nav.css    |  1 +
 src/main/js/template.js          |  4 ++--
 src/test/index.html              |  2 ++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/main/css/snippets/common.css b/src/main/css/snippets/common.css
index 74ca9e5..a775bd8 100644
--- a/src/main/css/snippets/common.css
+++ b/src/main/css/snippets/common.css
@@ -23,6 +23,18 @@ a[target="_blank"]::after {
     display: none !important;
 }
 
+@media (min-width: 576px) {
+    .hidden-no-mobile {
+        display: none;
+    }
+}
+
+@media (max-width: 576px) {
+    .hidden-on-mobile {
+        display: none;
+    }
+}
+
 /* Input with button next to it */
 .input-with-button {
     display: flex;
@@ -39,9 +51,17 @@ a[target="_blank"]::after {
 }
 
 /* Container with table of contents */
-.container-with-toc {
-    display: grid;
-    grid-template-columns: 200px auto;
+@media (min-width: 576px) {
+    .container-with-toc {
+        display: grid;
+        grid-template-columns: 200px auto;
+    }
+}
+
+@media (max-width: 576px) {
+    .container-with-toc aside {
+        margin-bottom: var(--block-spacing-vertical);
+    }
 }
 
 
diff --git a/src/main/css/snippets/nav.css b/src/main/css/snippets/nav.css
index 4b250b1..034fc47 100644
--- a/src/main/css/snippets/nav.css
+++ b/src/main/css/snippets/nav.css
@@ -44,6 +44,7 @@ nav.fwd-nav #nav-hamburger-label {
 }
 
 nav.fwd-nav a[target="_blank"]::after {
+    margin-bottom: 0.2rem;
     background-color: white;
 }
 
diff --git a/src/main/js/template.js b/src/main/js/template.js
index 6fa5729..e22d8be 100644
--- a/src/main/js/template.js
+++ b/src/main/js/template.js
@@ -108,7 +108,7 @@ const unpackEntry = function(entry, path = "/", highlightPath = "") {
     if (entry.entries.length === 0)
         return "" +
             `<li ${shouldHighlight ? "class=\"currentPage\"" : ""}>` +
-            `<a href="${entry.link}" ${isExternalLink ? "class=\"external\"" : ""}>${entry.name}</a>` +
+            `<a href="${entry.link}" ${isExternalLink ? "target=\"_blank\"" : ""}>${entry.name}</a>` +
             `</li>`;
 
     const depth = path.split("/").length - 2;  // -1 because count parts, then another -1 because of leading `/`
@@ -178,7 +178,7 @@ const footer = function(
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
     return stringToHtml(
-        `<footer class="fwd-footer container">` +
+        `<footer class="fwd-footer">` +
         `<hr />` +
         `<small>` +
         footerLink("Made by ", author, authorURL, ". ") +
diff --git a/src/test/index.html b/src/test/index.html
index 5219f7b..318ee6f 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -34,10 +34,12 @@
 <main class="container container-with-toc">
     <aside>
         <nav>
+            <b class="hidden-no-mobile">Table of contents</b>
             <ul>
                 <li>Item 1</li>
                 <li>Item 2</li>
             </ul>
+            <hr class="hidden-no-mobile" />
         </nav>
     </aside>
     <div role="document">