Finish styling index

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(

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;
+
+      h2 {
+        color: #00FFFF;
+        text-transform: capitalize;
       }
 
-    .content li::before {
-      content: "📝";
-      margin-right: 8px;
+      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;