From 42eb627e48bbde00a864387736d1680b24cf31a2 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Mon, 30 Sep 2024 22:42:57 -0500
Subject: [PATCH] finish styling the blog index

---
 blog.css        | 33 ++++++++++++++++++++++++++++++++-
 blog/index.html |  6 ++++--
 style.css       |  2 +-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/blog.css b/blog.css
index 2acd236..fe8e38e 100644
--- a/blog.css
+++ b/blog.css
@@ -6,15 +6,46 @@
     padding: 1rem;
 
     header {
-        h3 {
+        h3, h3 a {
             margin-top: unset !important;
             margin-bottom: -.6rem;
         }
 
+        h3 a {
+            color: var(--text);
+            text-decoration: unset;
+        }
+
+        h3 a:hover {
+            text-decoration: underline;
+        }
+
         p {
             margin-top: .6rem;
         }
     }
+
+    p:last-child {
+        margin-bottom: unset !important;
+    }
+
+    .ph-bold.ph-caret-right{
+        font-size: .8rem;
+        vertical-align: middle;
+    }
+
+    .tag {
+        background-color: var(--surface1);
+        padding: .2rem;
+        border-radius: 5px;
+    }
+
+    .wip {
+        background-color: color-mix(in srgb, var(--yellow) 20%, transparent);
+        color: var(--yellow);
+        padding: .2rem;
+        border-radius: 5px;
+    }
 }
 
 .article-card:not(:last-child) {
diff --git a/blog/index.html b/blog/index.html
index bba13be..45db2b5 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -59,9 +59,11 @@
         <span id="seperator"></span>
         <article class="article-card">
             <header>
-                <h3><a href="./my-thoughts-on-social-media">sigma bob!!!</a></h3>
-                <p><small>or some shit idk</small></p>
+                <h3><a href="./my-thoughts-on-social-media">my thoughts on social media</a></h3>
+                <p><small>posted XX XX XXXX <i class="ph-bold ph-dot-outline"></i> <span class="tag">rant</span> <span class="tag">social media</span> <span class="tag">fediverse</span></small></p>
             </header>
+            <p><span class="wip">WIP</span> tldr: it Sucks lol but there probably is a way</p>
+            <p><a><i class="ph-bold ph-arrow-bend-down-right"></i> read more <i class="ph-bold ph-caret-right"></i></a></p>
         </article>
     </section>
     <p aria-hidden="true" class="term-input"><span class="folder"><i class="ph-fill ph-folder-simple" style="margin-right: -8px;"></i> ~/blog</span> <span class="status"><i class="ph-fill ph-dot-outline"></i></span> <span class="blink">█</span></p>
diff --git a/style.css b/style.css
index 3a8011b..e1a6a2e 100644
--- a/style.css
+++ b/style.css
@@ -224,7 +224,7 @@ h2, h2 a {
     text-decoration: none;
 }
 
-h3 {
+h3, h3 a {
     font-size: 2rem;
 }