Styling

johanbrook · Oct 22, 2024 · 8d4839e · 8d4839e
1 parent 8ac6231
commit 8d4839e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/_includes/css/posts-list.css b/src/_includes/css/posts-list.css
@@ -17,11 +17,11 @@ POSTS LIST
         overflow: hidden;
         text-overflow: ellipsis;
     }
-    
+
     > :first-child {
         font-weight: 500;
     }
-    
+
     a:not(:hover, :focus) {
         text-decoration: none;
     }
@@ -30,6 +30,7 @@ POSTS LIST
         font-size: var(--f5);
         font-variant-numeric: tabular-nums;
         letter-spacing: -0.008em;
+        font-variation-settings: 'opsz' 20;
 
         &:not(.PostItem:hover &) {
             color: var(--color-text-detail);

diff --git a/src/_includes/css/utils.css b/src/_includes/css/utils.css
@@ -27,7 +27,7 @@
 
 .title {
     font-size: var(--f0);
-    
+
     a {
         text-decoration: none;
     }
@@ -917,8 +917,13 @@ COLOURS
 .muted {
     color: var(--color-text-detail);
 
-    &.link:hover {
-        color: var(--color-text-high-contrast);
+    &:where(a) {
+        text-decoration: underline;
+        text-underline-offset: 2px;
+
+        &:hover {
+            color: var(--color-text-high-contrast);
+        }
     }
 }
 
@@ -1040,7 +1045,7 @@ TYPOGRAPHY
     .hide-mobile {
         display: none;
     }
-    
+
     .visually-hide-mobile {
         clip-path: inset(50%) !important;
         height: 1px !important;
@@ -1058,6 +1063,24 @@ TYPOGRAPHY
     }
 }
 
+.tag-list {
+    a::before {
+        content: '#';
+    }
+}
+
+/* > 1 child */
+.sep-list:has(:nth-child(2)) {
+    > *:not(:last-child) {
+        &::after {
+            content: '·';
+            color: var(--color-text-detail);
+            display: inline-block;
+            margin: 0 0.5em;
+        }
+    }
+}
+
 .sep {
     color: var(--color-text-detail);
     display: inline-block;

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -22,7 +22,7 @@ home: true
         {% for note in search.pages("type=note", "date=desc", 3) %}
             <li class="mb2 pb2 relative border border-b h-entry" id="{{ note.url | url(true) }}">
                 <h2 class="font-sans f5 fw4 mb0">
-                    <a href="{{ note.url }}" class="muted u-url u-uid" title="Permalink"><time class="dt-published" datetime="{{ note.date | tdate('Machine', note.timezone) }}" pubdate>{{ note.date | tdate('HumanTime', note.timezone) }}</time></a>
+                    <a href="{{ note.url }}" class="muted no-underline u-url u-uid" title="Permalink"><time class="dt-published" datetime="{{ note.date | tdate('Machine', note.timezone) }}" pubdate>{{ note.date | tdate('HumanTime', note.timezone) }}</time></a>
                 </h2>
 
                 <details class="mb0">