Refactor, update UI, and add notes

styles/recent-posts.module.css

@@ -1,28 +1,63 @@
 .container {
-    border-bottom-left-radius: 1rem;
+    border-bottom-left-radius: 0.5rem;
     border-bottom:  1px dashed var(--main-border-color);
     border-left:  1px dashed var(--main-border-color);
-    padding-top: 1.5rem;
+    padding-top: 1.25rem;
     margin-left: 0.5rem;
 }
 
 .block {
-    padding: 0.25rem 0.5rem;
-    margin: 0 0.5rem 0.25rem 0;
-    border-top:  1px dashed var(--main-border-color);
+    margin: 0;
     position: relative;
     display: flex;
     align-items: center;
 }
 
+.block+.block {
+    border-top: 1px dashed var(--main-border-color);
+}
+
+.block:first-of-type {
+    border-top-right-radius: 0.5rem;
+}
+
+.block:nth-of-type(2n) {
+    background-color: var(--table-even-color);
+}
+
+.block:nth-of-type(2n+1) {
+    background-color: var(--table-odd-color);
+}
+
 .postTitle {
-    flex-grow: 8;
-    padding: 0.1rem 0.2rem;
+    font-family: 'EB Garamond', 'Garamond', 'Times New Roman', Times, serif;
+    flex: 1 1 60%;
+    padding: .25rem 0.75rem;
+}
+
+.postTitle a {
+    text-decoration: none;
+    border: 1px dotted transparent;
+    transition: border-width 100ms ease-in-out;
+}
+
+.postTitle a:hover {
+    text-decoration: none;
+    border-bottom: 1px dotted var(--link-color);
+}
+
+.postTitle a:focus {
+    text-decoration: none;
+    border: 1px dotted var(--link-color);
 }
 
 .postDate {
+    flex: 1 1;
+    display: inline-block;
+    text-align: right;
     font-style: italic;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    padding: .25rem 0.50rem;
 }
 
 .more {