From a1f6994c02d65fdd183fab422eb8faf3417aebc9 Mon Sep 17 00:00:00 2001
From: wholteza <zackarias@montell.se>
Date: Fri, 19 Sep 2025 21:42:08 +0200
Subject: [PATCH] Align note with index

---
 .../5-measuring-mash-temperatures/note.md     |   2 +-
 src/templates/index.html                      |  44 ++++---
 src/templates/note.html                       | 108 +++++++++++++++---
 3 files changed, 118 insertions(+), 36 deletions(-)
diff --git a/src/notes/5-measuring-mash-temperatures/note.md b/src/notes/5-measuring-mash-temperatures/note.md
index 6256bbe..26bf4b6 100644
--- a/src/notes/5-measuring-mash-temperatures/note.md
+++ b/src/notes/5-measuring-mash-temperatures/note.md
@@ -1,4 +1,4 @@
-# Measuring mash temperatures 🍺 🌡️
+# Measuring mash temperatures
 
 _2025-02-03 - 5 minute read_
 
diff --git a/src/templates/index.html b/src/templates/index.html
index 04f3204..e2ede0f 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -7,7 +7,6 @@
   <title>Document</title>
   <style>
     html {
-      font-family: Arial, sans-serif;
       font-size: 17px;
       line-height: 26px;
       display: flex;
@@ -98,25 +97,32 @@
       font-family: monospace;
     }
 
-    .banner .title {
-      display: flex;
-      flex-direction: row;
-      flex: 1;
-    }
+    .banner {
+      .title {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
 
-    .banner .title::after {
-      background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
-      content: "";
-      display: block;
-      width: 100%;
-      margin-left: 10px;
-    }
+        .name {
+          color: #1c1b28;
+          background-color: #00FFFF;
+          white-space: nowrap;
+          padding: 5px;
 
-    .banner .title .name {
-      color: #1c1b28;
-      background-color: #00FFFF;
-      white-space: nowrap;
-      padding: 5px;
+          a {
+            color: unset;
+            text-decoration: none;
+          }
+        }
+      }
+
+      .title::after {
+        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+        content: "";
+        display: block;
+        width: 100%;
+        margin-left: 10px;
+      }
     }
   </style>
 </head>
@@ -124,7 +130,7 @@
 <body>
   <div class="banner">
     <div class="title">
-      <div class="name">Zackarias Montell</div>
+      <div class="name"><a href="/">Zackarias Montell</a></div>
     </div>
   </div>
   <div class="profile">
diff --git a/src/templates/note.html b/src/templates/note.html
index f756023..2f06436 100644
--- a/src/templates/note.html
+++ b/src/templates/note.html
@@ -1,56 +1,132 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     html {
-      font-family: Arial, sans-serif;
-      font-size: 1.3em;
+      font-family: monospace;
+      font-size: 17px;
       display: flex;
       justify-content: center;
       align-items: center;
+      line-height: 26px;
       flex-direction: column;
     }
-    @media screen and (max-width: 800px) {
-      html {
-        font-size: 0.9em;
-      } 
-    }
+
     body {
       max-width: 800px;
       color: #fbfbfe;
-      background-color: #1c1b22;
+      background-color: #1c1b28;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
+
+    pre {
+      box-sizing: border-box;
+      border: 1px solid #00FFFF;
+      padding: 1rem;
+    }
+
     img {
       max-width: 100%;
-      border-radius: 8px;
+      border-radius: 4px;
     }
-    p{
+
+    p {
       margin: 20px;
       margin-top: 20px;
       margin-bottom: 0px;
     }
-    h1, h2, h3, h4, h5, h6 {
+
+    h1 {
+      color: #00FFFF;
+    }
+
+    h1::after {
+      margin-top: 1rem;
+      content: "";
+      width: 100%;
+      display: block;
+      border-top: 3px dotted #00FFFF;
+      border-bottom: 3px dotted #00FFFF;
+      height: 8px;
+      box-sizing: border-box;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
       margin: 20px;
       margin-bottom: 0px;
       text-transform: capitalize;
     }
-    h1 + p:has(> i) {
-      font-size: smaller;
-      margin-top: 10px;
+
+    h1+p:has(> i) {
+      margin-top: 1rem;
+      color: #00FFFF;
     }
-    p:has(> img) + p:has(> i) {
+
+    p:has(> img)+p:has(> i) {
       font-size: smaller;
       margin-top: 0px;
     }
+
+    .banner {
+      margin-top: 1rem;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 1rem;
+      align-items: center;
+      flex: 1;
+      font-family: monospace;
+    }
+
+    .banner {
+      .title {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
+
+        .name {
+          color: #1c1b28;
+          background-color: #00FFFF;
+          white-space: nowrap;
+          padding: 5px;
+
+          a {
+            color: unset;
+            text-decoration: none;
+          }
+        }
+      }
+
+      .title::after {
+        background: repeating-linear-gradient(90deg, #00FFFF, #00FFFF 2px, transparent 0, transparent 10px);
+        content: "";
+        display: block;
+        width: 100%;
+        margin-left: 10px;
+      }
+    }
   </style>
 </head>
+
 <body>
+  <div class="banner">
+    <div class="title">
+      <div class="name"><a href="/">Zackarias Montell</a></div>
+    </div>
+  </div>
   {{markdown}}
 </body>
-</html>
\ No newline at end of file
+
+</html>
