From df87565e4260aa1de50a36ee64d0efda9c1e0109 Mon Sep 17 00:00:00 2001
From: Jonas Tobias Hopusch <git@jotoho.de>
Date: Wed, 28 Jul 2021 18:23:57 +0200
Subject: [PATCH] Very far-reaching formatting and structure changes to website

---
 static/css/general.css | 46 ++++++++++++++++++++++++++++++++++--------
 templates/base.html    | 16 ++++++++-------
 templates/index.html   | 13 +++---------
 templates/page.html    | 28 ++++++++++++++-----------
 templates/section.html | 18 ++++++++---------
 5 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/static/css/general.css b/static/css/general.css
index 46bf5ff..73bcbec 100644
--- a/static/css/general.css
+++ b/static/css/general.css
@@ -1,32 +1,62 @@
+* {
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-collapse: collapse;
+    box-sizing: border-box;
+}
+
 html {
     font-family: monospace;
 }
 
 header, footer {
     text-align: center;
-    margin: 0;
-    border: 0;
+    padding: 2em 0;
 }
 
 .globalnav{
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
-    border: none;
+    border-collapse: collapse;
+    text-align: center;
 }
 
 .globalnav-element {
-    display: inline-block;
+    display: block;
+    border: 1px solid white;
+    border-collapse: collapse;
+    flex-basis: 0;
     flex-grow: 1;
+    min-width: fit-content;
+    min-height: fit-content;
     padding: 0.5em 0;
-    margin: 0 1px;
 }
 
 code {
     display: inline-block;
-    background-color: lightgray;
     color: green;
 }
 
+p {
+    padding: 0.5em;
+}
+
+article {
+    padding: 0.5em;
+}
+
+li, ul, ol {
+    margin: 1em;
+}
+
+hr {
+    border-style: inset;
+    border-width: 1px;
+    margin: 0.5em 0;
+}
+
 @media (prefers-color-scheme: dark) {
     html {
         background-color: black;
@@ -35,10 +65,10 @@ code {
 
     .globalnav-element {
         background-color: #222;
+        border-color: black;
     }
 
     code {
-        background-color: #444;
         color: lawngreen;
     }
 
@@ -54,7 +84,7 @@ code {
     }
 
     .globalnav-element {
-        background-color: #ddd;
+        border-color: white;
     }
 
     code {
diff --git a/templates/base.html b/templates/base.html
index 08f7602..6d14aa3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,17 +14,19 @@
             <div>
                 <a href="{{ config.base_url }}"><h1>jotoho.de - My personal website</h1></a>
             </div>
-            <nav class="globalnav">
-                <a class="globalnav-element" href="{{ get_url(path="@/blog/_index.md") }}">Blog</a>
-                <a class="globalnav-element" href="{{ get_url(path="@/servers.md") }}">Servers</a>
-            </nav>
-            <hr/>
         </header>
+        <nav class="globalnav">
+            <a class="globalnav-element" href="{{ get_url(path='@/blog/_index.md') }}">Blog</a>
+            <a class="globalnav-element" href="{{ get_url(path='@/servers.md') }}">Servers</a>
+        </nav>
+        <hr />
 
-        {% block content %} {% endblock %}
+        <article>
+            {% block content %} {% endblock %}
+        </article>
 
+        <hr />
         <footer>
-            <hr />
             <p>
                 Copyright {{ now() | date(format="%Y", timezone="Europe/Berlin") }} Jonas Tobias Hopusch (<a
                     rel="noreferer" href="https://gitlab.com/jotoho"
diff --git a/templates/index.html b/templates/index.html
index c25c9a3..ab2da39 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,12 +1,5 @@
 {% extends "base.html" %} {% block content %}
-    <article>
-        <p lang="en">
-            This page is a placeholder for this domain, as I am not sure
-            what to put here yet.
-        </p>
-        <p lang="de">
-            Diese Seite ist ein Platzhalter für diese Domäne, weil ich noch
-            nicht weiß, was ich hier hin packen will.
-        </p>
-    </article>
+<p>
+    This is some placeholder text because I don't know what to put here, yet.
+</p>
 {% endblock content %}
diff --git a/templates/page.html b/templates/page.html
index af486d9..7703323 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -7,16 +7,20 @@
 {% endblock %}
 
 {% block content %}
-    <h2>{{ page.title }}</h2>
-    <article>
-        {% if page.date and page.date is defined %}
-        <p>Published on: {{ page.date }}</p>
-        {% endif %}
-        {% if page.updated and page.updated != page.date %}
-        <p>Last updated on: {{ page.updated }}</p>
-        {% endif %}
-        <div>
-            {{ page.content | safe }}
-        </div>
-    </article>
+    <h2>
+        {{ page.title }}
+    </h2>
+    {% if page.date and page.date is defined %}
+    <p>
+        <em><strong>Published on</strong>: {{ page.date }}</em>
+    </p>
+    {% endif %}
+    {% if page.updated and page.updated != page.date %}
+    <p>
+        <em><strong>Last updated on</strong>: {{ page.updated }}</em>
+    </p>
+    {% endif %}
+    <div>
+        {{ page.content | safe }}
+    </div>
 {% endblock content %}
diff --git a/templates/section.html b/templates/section.html
index 50f5851..2431ac2 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -1,13 +1,11 @@
 {% extends "base.html" %} {% block content %}
 <h2>{{ section.title }}</h2>
-<article>
-    <ul>
-        {% for page in section.pages %}
-        <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
-        {% endfor %}
-    </ul>
-    <div>
-        {{ section.content | safe }}
-    </div>
-</article>
+<ul>
+    {% for page in section.pages %}
+    <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+    {% endfor %}
+</ul>
+<div>
+    {{ section.content | safe }}
+</div>
 {% endblock content %}