Updated docs

2024-02-24 23:16:02 +01:00
parent 435cdd10ec
commit f7b3f404fe
9 changed files with 219 additions and 30 deletions
@@ -26,8 +26,8 @@
 }

 html {
-  font-size: 100%;
-  overflow-y: scroll;
+  /* font-size: 100%; */
+  /* overflow-y: scroll; */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
 }
@@ -35,12 +35,78 @@ html {
 body {
  color: var(--fg0);
  font-family: century_supra_a, Georgia, serif;
-  font-size: 12px;
+  font-size: 16px;
  line-height: 1.7;
-  padding: 1em;
-  margin: auto;
-  max-width: 38em;
  background: var(--bge);
+  margin: 0;
+}
+
+main {
+  min-height: 100vh;
+  position: relative;
+}
+
+#header {
+  background-color: #066678;
+  padding: 0.3rem 0;
+  color: #faf8e4;
+  border-bottom: 1px solid #458587;
+  font-size: 2rem;
+}
+
+nav {
+  color: #faf8e4;
+  background-color: #054c5a;
+}
+
+nav .content {
+  display: flex;
+  padding: 0;
+}
+
+nav a {
+  color: #458587;
+  text-decoration: none;
+  font-size: 1em;
+  padding: 0.15em 1em;
+}
+
+nav a.active {
+  background-color: #458587;
+  color: #faf8e4 !important;
+}
+
+nav a:visited {
+  color: #458587;
+}
+
+footer {
+  height: 2rem;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #03333b;
+  border-top: 0.5rem solid #458587;
+  color: #faf8e4;
+  display: flex;
+  font-size: 0.8rem;
+}
+
+footer .content {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  height: 100%;
+}
+
+.content {
+  margin: auto;
+  padding: 0 0.5rem;
+  max-width: 50rem;
+}
+
+.content-wrap {
+  padding-bottom: 2.5rem;
 }

 a {
@@ -96,7 +162,7 @@ img {
 h1, h2, h3, h4, h5, h6 {
  color: var(--fg0);
  line-height: 125%;
-  margin-top: 1em;
+  /* margin-top: 1em; */
  font-weight: normal;
 }

@@ -105,7 +171,7 @@ h4, h5, h6 {
 }

 h1 {
-  font-size: 2.5em;
+  font-size: 2.25em;
 }

 h2 {
@@ -274,16 +340,6 @@ table td {
  text-align: center;
 }

-@media only screen and (min-width: 480px) {
-  body {
-    font-size: 14px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  body {
-    font-size: 16px;
-  }
-}
@media print {
  * {
    background: transparent !important;
@@ -294,9 +350,13 @@ table td {

  body {
    font-size: 12pt;
+  }
+  
+  .content {
    max-width: 100%;
  }

+
  a, a:visited {
    text-decoration: underline;
  }
@@ -349,4 +409,4 @@ table td {
  h2, h3 {
    page-break-after: avoid;
  }
-}
+}
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$" $if(dir)$ dir="$dir$" $endif$>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="generator" content="pandoc" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    $for(author-meta)$
+    <meta name="author" content="$author-meta$" />
+    $endfor$
+    $if(date-meta)$
+    <meta name="dcterms.date" content="$date-meta$" />
+    $endif$
+    $if(keywords)$
+    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+    $endif$
+    $if(description-meta)$
+    <meta name="description" content="$description-meta$" />
+    $endif$
+    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+    <style>
+        $styles.html()$
+    </style>
+    $for(css)$
+    <link rel="stylesheet" href="$css$" />
+    $endfor$
+    $for(header-includes)$
+    $header-includes$
+    $endfor$
+    $if(math)$
+    $if(mathjax)$
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    $endif$
+    $math$
+    $endif$
+    <!--[if lt IE 9]>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+    <![endif]-->
+    <script>
+        addEventListener('DOMContentLoaded', () => {
+            const fullpath = location.origin + location.pathname
+
+            document.querySelectorAll('nav a').forEach((el) => {
+                const url = new URL(el.href)
+                if (url.origin + url.pathname === fullpath) {
+                    el.classList.add('active')
+                }
+            })
+        })
+    </script>
+</head>
+
+<body>
+    <main>
+        <header id="header">
+            <div class="content">
+                Nixarr
+            </div>
+        </header>
+        <nav>
+            <div class="content">
+                <a href="/">Home</a>
+                <a href="/options.html">Options</a>
+                <a href="https://github.com/rasmus-kirk/nixarr">Github</a>
+            </div>
+        </nav>
+        <div class="content content-wrap">
+            $for(include-before)$
+            $include-before$
+            $endfor$
+            $if(title)$
+            <header id="title-block-header">
+                <h1 class="title">$title$</h1>
+                $if(subtitle)$
+                <p class="subtitle">$subtitle$</p>
+                $endif$
+                $for(author)$
+                <p class="author">$author$</p>
+                $endfor$
+                $if(abstract)$
+                <div class="abstract">
+                    <div class="abstract-title">$abstract-title$</div>
+                    $abstract$
+                </div>
+                $endif$
+            </header>
+            $endif$
+            $if(toc)$
+            <nav id="$idprefix$TOC" role="doc-toc">
+                $if(toc-title)$
+                <h2 id="$idprefix$toc-title">$toc-title$</h2>
+                $endif$
+                $table-of-contents$
+            </nav>
+            $endif$
+            $body$
+            $for(include-after)$
+            $include-after$
+            $endfor$
+        </div>
+        <footer>
+            <div class="content">
+                <div>
+                    Rasmus Kirk Jakobsen
+                </div>
+                $if(date)$
+                    <div>$date$</div>
+                $endif$
+            </div>
+        </footer>
+    </main>
+</body>
+
+</html>