From 3e3c209ac99e065b2516f7c5285c3800a6a78b1c Mon Sep 17 00:00:00 2001
From: wholteza <zackarias@montell.se>
Date: Fri, 19 Sep 2025 20:28:21 +0200
Subject: [PATCH] Finish styling index

---
 .../@zblog/toolchain/src/start-page-plugin.ts | 10 ++--
 src/templates/index.html                      | 47 +++++++++++--------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/@zblog/toolchain/src/start-page-plugin.ts b/packages/@zblog/toolchain/src/start-page-plugin.ts
index 5ebf43d..6189ab0 100644
--- a/packages/@zblog/toolchain/src/start-page-plugin.ts
+++ b/packages/@zblog/toolchain/src/start-page-plugin.ts
@@ -14,13 +14,13 @@ export class StartPagePlugin implements IPluginBuilder {
     return (builderContext) => {
       let htmlTemplate = readFileAsText(this.options.indexTemplatePath);
       const links = builderContext.menuManifest
-        .map((m) => `<a href='${m.link}'>${m.name}</a>`)
+        .map((m) => {
+          const name = m.name.slice(m.name.indexOf("-") + 1).replaceAll("-", " ");
+          return `<div class="entry"><h2>${name}</h2><a href='${m.link}'>Read here!</a></div>`
+        })
         .reverse();
-      const unorderedListItems = links.map((l) => `<li>${l}</li>`).join("\r\n");
       const html = `
-      <ul>
-        ${unorderedListItems}
-      <ul>
+        ${links.join("")}
       `;
       htmlTemplate = htmlTemplate.replace("{{content}}", html);
       writeTextAsFile(
diff --git a/src/templates/index.html b/src/templates/index.html
index 3942b3c..c8cf9be 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -30,29 +30,37 @@
       align-items: center;
     }
 
-    .content ul {
-      list-style-type: none;
-      padding: 0;
+    .content {
+      display: flex;
+      width: 100%;
+      flex: 1;
+      flex-direction: column;
     }
 
-    .content li {
-      margin: 1em 0;
-      padding: 8px;
-      border-radius: 8px;
-      border-style: solid;
-      border-width: 1px;
-      border-color: #aaa;
-    }
+    .content .entry {
+      margin-top: 1rem;
 
-    .content li::before {
-      content: "📝";
-      margin-right: 8px;
-    }
+      h2 {
+        color: #00FFFF;
+        text-transform: capitalize;
+      }
 
+      h2::after {
+        margin-top: 1rem;
+        top: 8px;
+        border-bottom: 3px dotted #00FFFF;
+        border-top: 3px dotted #00FFFF;
+        content: "";
+        width: 100%;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        height: 8px;
+      }
 
-    .content a {
-      color: #fbfbfe;
-      text-decoration: none;
+      h2 a {
+        color: white;
+      }
     }
 
     .profile {
@@ -65,6 +73,7 @@
       font-family: monospace;
       display: flex;
       flex-direction: column;
+      flex: 1;
     }
 
     .profile .picture {
@@ -78,7 +87,7 @@
     .profile li {}
 
     .banner {
-      margin-top: 2rem;
+      margin-top: 1rem;
       width: 100%;
       height: 40px;
       display: flex;