refactor: update link colors to be more readable

diff --git a/assets/styles.css b/assets/styles.css
index bed9ab0a864bdc390ed53fad054e58a1f6a3b55e..e141cacee7047720b4cbba6d4015f615492e9e4e 100644 (file)
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -21,7 +21,14 @@ h2 {
 }
 
 a {
+  color: lightgreen;
   text-decoration: underline;
+
+  &:hover {
+    box-shadow: 
+      rgba(0 255 0 / 80%) 3px 3px 8px,
+      rgba(0 255 0 / 80%) -3px -3px 8px;
+  }
 }
 
 nav {
@@ -89,10 +96,19 @@ nav {
   inset rgba(255 255 255 / 40%) 0px 5px;
 }
 
+#posts {
+  display: flex;
+  flex-direction: column;
+}
+
 .post-preview {
   display: flex;
+  font-size: 1rem;
   align-items: center;
   gap: 0.4rem;
   margin-bottom: 0px;
-  height: fit-content;
+  
+  a {
+    height: fit-content;
+  }
 }

diff --git a/layouts/index.shtml b/layouts/index.shtml
index 5a2098f2a73e63102882d36a6b25aeb2966e9fe6..a7f6b958a739b7bf0130b1344606e42b9614b8c8 100644 (file)
--- a/layouts/index.shtml
+++ b/layouts/index.shtml
@@ -6,13 +6,13 @@
        <div :html="$page.content()"></div>
        <div>
                <h2>Posts</h2>
-               <div :loop="$page.subpages()">
-      <div class="post-preview">
-                         <span class="date" :text="$loop.it.date.format('January 02, 2006')"></span>
+               <ul :loop="$page.subpages()" id="posts">
+      <li class="post-preview">
+                         <span :text="$loop.it.date.format('January 02, 2006')"></span>
                          <a href="$loop.it.link()">
                                <h3 :text="$loop.it.title"></h3>
                          </a>
-      </div>
-               </div>
+      </li>
+               </ul>
        </div>
 </body>