Resolve issues with nav size, add toc, etc.

src/main/css/snippets/common.css

@@ -1,5 +1,5 @@
 /* External link icon */
-a.external::after {
+a[target="_blank"]::after {
     display: inline-block;
 
     width: 0.7em;
@@ -18,12 +18,39 @@ a.external::after {
 }
 
 
+/* Hide anything */
+.hidden {
+    display: none !important;
+}
+
+/* Input with button next to it */
+.input-with-button {
+    display: flex;
+}
+
+.input-with-button > *:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.input-with-button > *:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+/* Container with table of contents */
+.container-with-toc {
+    display: grid;
+    grid-template-columns: 200px auto;
+}
+
+
 /* Noscript */
-noscript.fwd-jsNotice img {
+noscript.fwd-js-notice img {
     position: absolute;
 }
 
-noscript.fwd-jsNotice p {
+noscript.fwd-js-notice p {
     font-weight: bold;
     text-align: center;
 }
@@ -35,30 +62,6 @@ header.fwd-header h1 > a {
 }
 
 
-/* Generic classes */
-.hidden {
-    display: none !important;
-}
-
-.inputWithButton {
-    display: flex;
-}
-
-.inputWithButton > *:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.inputWithButton > *:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-#fwd-toc {
-    position: fixed;
-}
-
-
 /* Footer */
 footer.fwd-footer #fwd-footer-version {
     float: right;

src/main/css/snippets/nav.css

@@ -1,5 +1,6 @@
 /* Base elements */
 nav.fwd-nav {
+    display: block;
     z-index: 10;
 
     margin: 0;
@@ -7,7 +8,6 @@ nav.fwd-nav {
 
     background-color: var(--fwdekker-theme-color);
     border-bottom: 1px solid #cccccc;
-    font-size: 120%;
 
     --padding: calc(2em / 3);
 }
@@ -41,11 +41,9 @@ nav.fwd-nav #nav-hamburger-label {
 
 nav.fwd-nav #nav-hamburger-label {
     float: right;
-    font-size: unset;
-    cursor: pointer;
 }
 
-nav.fwd-nav a.external::after {
+nav.fwd-nav a[target="_blank"]::after {
     background-color: white;
 }
 
@@ -67,6 +65,7 @@ nav.fwd-nav div.logo {
 
 /* First level nesting */
 nav.fwd-nav ul {
+    display: block;
     margin: 0;
     padding: 0;
 
@@ -127,13 +126,13 @@ nav.fwd-nav input[type="checkbox"] {
     display: none;
 }
 
-@media (min-width: 600px) {
+@media (min-width: 576px) {
     nav.fwd-nav #nav-hamburger-label {
         display: none;
     }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 576px) {
     nav.fwd-nav input[type="checkbox"]:not(:checked) ~ ul li:not(:first-child) {
         display: none;
     }

src/main/js/template.js

@@ -172,18 +172,21 @@ const footer = function(
     }) {
     if (author === undefined) author = "Florine W. Dekker";
     if (authorURL === undefined) authorURL = "https://fwdekker.com/";
-    if (license === undefined) license = "MIT License";
+    if (license === undefined) license = "MIT";
     if (licenseURL === undefined && vcsURL !== undefined) licenseURL = `${vcsURL}src/branch/master/LICENSE`;
     if (vcs === undefined && vcsURL !== undefined) vcs = "git";
     if (privacyPolicyURL === undefined) privacyPolicyURL = "https://fwdekker.com/privacy/";
 
     return stringToHtml(
-        `<footer class="fwd-footer container"><hr />` +
+        `<footer class="fwd-footer container">` +
+        `<hr />` +
+        `<small>` +
         footerLink("Made by ", author, authorURL, ". ") +
-        footerLink("Licensed under the ", license, licenseURL, ". ") +
+        footerLink("Licensed ", license, licenseURL, ". ") +
-        footerLink("Source code and issue tracker on ", vcs, vcsURL, ". ") +
+        footerLink("Source and support on ", vcs, vcsURL, ". ") +
-        footerLink("Consider reading the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
+        footerLink("Read the ", privacyPolicyURL && "privacy policy", privacyPolicyURL, ". ") +
-        `<div id="fwd-footer-version">${version || ""}</div>` +
+        `</small>` +
+        `<div id="fwd-footer-version"><small>${version || ""}</small></div>` +
         `</footer>`,
         "footer");
 };

src/test/index.html

@@ -17,32 +17,40 @@
     <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
     <meta name="fwd:footer:version" content="vTEST" />
 
-    <title>Tools | FWDekker</title>
+    <title>Template test | FWDekker</title>
 
     <!--suppress HtmlUnknownTarget -->
     <link rel="stylesheet" href="../../dist/template.css" />
 </head>
 <body>
-<div id="notFooter">
+<noscript class="fwd-js-notice">
-<noscript class="fwd-jsNotice">
     <p>
         This website does not function if JavaScript is disabled.
         Please check the <a href="https://www.enable-javascript.com/">
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<section><nav id="nav"></nav></section>
+<nav id="nav"></nav>
-<main class="container">
+<main class="container container-with-toc">
-    <section>
+    <aside>
-        <header id="header"></header>
+        <nav>
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+            </ul>
+        </nav>
+    </aside>
+    <div role="document">
+        <section>
+            <header id="header"></header>
 
-        <p>This <a href="./" class="external">is an external link</a> in a sentence.</p>
+            <p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
-        <p>These are some more contents.</p>
+            <p>These are some more contents.</p>
-        <p>These are the page contents.</p>
+            <p>These are the page contents.</p>
-    </section>
+        </section>
+        <footer id="footer"></footer>
+    </div>
 </main>
-</div>
-<footer id="footer"></footer>
 
 <!--suppress HtmlUnknownTarget -->
 <script src="../../dist/template.js"></script>