From 40b6196abf7a066e93c68f48f3109b587dad44bf Mon Sep 17 00:00:00 2001
From: Tim Schubert <dadada@dadada.li>
Date: Thu, 22 Aug 2024 16:06:19 +0200
Subject: [PATCH] feat: add page style

---
 blog/about/index.html              | 10 +----
 blog/gpg/index.html                | 15 +++-----
 blog/home-layout/index.html        | 25 +++++-------
 index.html                         | 12 ++----
 pagestyle.css                      | 62 ++++++++++++++++++++++++++++++
 talks/pad-archiver/index.html      | 12 ++----
 talks/systemd-generator/index.html | 18 +++------
 7 files changed, 90 insertions(+), 64 deletions(-)
 create mode 100644 pagestyle.css
diff --git a/blog/about/index.html b/blog/about/index.html
index 794fa4c..c275364 100644
--- a/blog/about/index.html
+++ b/blog/about/index.html
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="../../pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
diff --git a/blog/gpg/index.html b/blog/gpg/index.html
index f69184e..ed5600e 100644
--- a/blog/gpg/index.html
+++ b/blog/gpg/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="../../pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
@@ -45,7 +39,8 @@ decrypts  +----------------+     +----------+      +-----------+
     +->| SEA (master)    |
        | remote on paper |
        +-----------------+
-</pre>
+</pre
+      >
       <p>
         See
         <a
diff --git a/blog/home-layout/index.html b/blog/home-layout/index.html
index fb5cff4..cffd62d 100644
--- a/blog/home-layout/index.html
+++ b/blog/home-layout/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="../../pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
@@ -84,13 +78,12 @@
         <code>tag</code> can be used to include them in multiple workbenches.
       </p>
       <p>An example workflow</p>
-      <pre>
-$ cd tag
-$ mkdir -p course1/examples
-$ ln -s ~/src/example1 course1/examples/
-$ ln -s ~/lib/courses/course1 course1/material
-$ rm -r course1
-</pre>
+      <pre><code class="shell">cd tag</code>
+<code class="shell">mkdir -p course1/examples</code>
+<code class="shell">ln -s ~/src/example1 course1/examples/</code>
+<code class="shell">ln -s ~/lib/courses/course1 course1/material</code>
+<code class="shell">rm -r course1</code></pre
+      >
       <p>
         I create new tags for various reasons, but mostly one for each larger
         context (e.g. work, hobbies, admin foo, thesis, courseXY) and some more
diff --git a/index.html b/index.html
index 0e4d2ae..dcda003 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
diff --git a/pagestyle.css b/pagestyle.css
new file mode 100644
index 0000000..f5e00e7
--- /dev/null
+++ b/pagestyle.css
@@ -0,0 +1,62 @@
+body {
+  min-width: 30em;
+  max-width: 60em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+nav {
+  text-align: center;
+  font-size: 16pt;
+  a {
+    text-decoration: none;
+    color: black;
+  }
+  border-bottom: 2pt solid grey;
+}
+
+footer {
+  border-top: 2pt solid grey;
+  padding-block: 0.5em;
+  font-size: 10pt;
+}
+
+main {
+  padding: 0.5em;
+  code {
+    background-color: aliceblue;
+  }
+  a:visited {
+    color: darkorange;
+  }
+  a:link {
+    color: darkcyan;
+  }
+  a {
+    text-decoration: none;
+  }
+  figure {
+    font-size: 10pt;
+    figcaption {
+      padding-left: 1em;
+    }
+    figcaption:before {
+      content: "| ";
+    }
+  }
+  pre {
+    padding-block: 0.5em;
+    border-block: 1pt solid grey;
+    font-size: 8pt;
+  }
+  pre code.shell:before {
+    content: "$ ";
+  }
+  pre code.shell {
+    background-color: white;
+  }
+  h2,
+  h3 {
+    margin-top: 1.5em;
+  }
+}
diff --git a/talks/pad-archiver/index.html b/talks/pad-archiver/index.html
index 55b6797..d83949e 100644
--- a/talks/pad-archiver/index.html
+++ b/talks/pad-archiver/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="../../pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
diff --git a/talks/systemd-generator/index.html b/talks/systemd-generator/index.html
index 03f2295..ee07bc3 100644
--- a/talks/systemd-generator/index.html
+++ b/talks/systemd-generator/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -9,15 +9,9 @@
       href="https://dadada.li/feed.xml"
       title="dadada"
     />
+    <link rel="stylesheet" type="text/css" href="../../pagestyle.css" />
   </head>
-  <body
-    style="
-      min-width: 30em;
-      max-width: 60em;
-      margin-left: auto;
-      margin-right: auto;
-    "
-  >
+  <body>
     <header>
       <nav>
         <a href="https://dadada.li/">dadada</a>
@@ -99,9 +93,9 @@
       <h1 id="performance">Performance</h1>
       <p>kann Boot verlangsamen ➤ Nicht mit bash implementieren, lieber C</p>
       <h1 id="debugging">Debugging</h1>
-      <pre><code>dir=$(mktemp -d)
-SYSTEMD_LOG_LEVEL=debug /usr/lib/systemd/system-generators/systemd-fstab-generator &quot;$dir&quot; &quot;$dir&quot; &quot;$dir&quot;
-find $dir</code></pre>
+      <pre><code class="shell">dir=$(mktemp -d)</code>
+<code class="shell">SYSTEMD_LOG_LEVEL=debug /usr/lib/systemd/system-generators/systemd-fstab-generator &quot;$dir&quot; &quot;$dir&quot; &quot;$dir&quot;</code>
+<code class="shell">find $dir</code></pre>
       <ul>
         <li>syslog(3) ist nicht vefügbar</li>
         <li>keine Magie versuchen</li>
