Move tag styles to blog.css

content/blog/blog.css

@@ -3,10 +3,19 @@
 
 :root {
     --post-item-highlight-color: #efefef;
+
+    --tag-text-color: #666;
+    --tag-background-color: #eee;
+    --tag-hover-background-color: #bbb;
 }
 @media (prefers-color-scheme: dark) {
     :root {
         --post-item-highlight-color: #121212;
+
+        --tag-text-color: #888;
+        --tag-background-color: rgb(40, 40, 40);
+        --tag-hover-background-color: rgb(73, 73, 73);
+        --tag-hover-foreground-color: #666;
     }
 }
 
@@ -84,3 +93,37 @@
 .post-list a {
     color: inherit;
 }
+
+.blog footer .tags {
+    display: flex;
+    padding-inline-start: 0;
+}
+
+.blog footer .tags li {
+    background-color: var(--tag-background-color);
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 75%;
+    letter-spacing: 2px;
+}
+
+.blog footer .tags li:hover {
+    background-color: var(--tag-hover-background-color);
+}
+
+.blog footer .tags li a {
+    color: var(--tag-text-color);
+    display: block;
+    height: 100%;
+    width: 100%;
+    padding: 0.75rem 1rem;
+}
+
+.blog footer .tags li a:hover {
+    color: var(--tag-hover-foreground-color);
+    text-decoration: none;
+}
+
+.blog footer .tags li + li {
+    margin-inline-start: 1rem;
+}

static/styles/main.css

@@ -344,39 +344,6 @@ pre {
     margin-block-start: 3.5rem;
 }
 
-ul.post-tags {
-    display: flex;
-    padding-inline-start: 0;
-}
-
-ul.post-tags li {
-    background-color: var(--tag-background-color);
-    border-radius: 4px;
-    display: inline-block;
-    letter-spacing: 2px;
-}
-
-ul.post-tags li:hover {
-    background-color: var(--tag-hover-background-color);
-}
-
-ul.post-tags li a {
-    color: var(--tag-text-color);
-    display: block;
-    font-size: 1.75rem;
-    height: 100%;
-    width: 100%;
-    padding: 0.75rem 1rem;
-}
-
-ul.post-tags li a:hover {
-    text-decoration: none;
-}
-
-ul.post-tags li + li {
-    margin-inline-start: 1rem;
-}
-
 .post-title {
     align-items: baseline;
     display: flex;