collection, tag, and print styles

site/_includes/css/site.css

@@ -251,6 +251,21 @@ ul.collection {
   padding-left: 0;
   > li {
     list-style-type: none;
+    @media screen {
+      position: relative;
+      background-color: oklch(from var(--c-accent) calc(l * 0.4) calc(c * 0.33) h / 0.67);
+      box-shadow: inset 0 0 2rem -1rem var(--c-accent);
+      padding: 0.5rem;
+      border-radius: 0.25rem;
+      > a:first-of-type {
+        position: static;
+        &::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+        }
+      }
+    }
     > aside {
       display: inline;
     }
@@ -258,7 +273,9 @@ ul.collection {
       &::before {
         content: none;
       }
-      color: var(--c-text-dim);
+      @media screen {
+        color: var(--c-text-dim);
+      }
       width: 100%;
     }
     + li {
@@ -266,6 +283,7 @@ ul.collection {
     }
   }
 }
+
 p {
   margin: 0;
 }
@@ -349,56 +367,6 @@ body > header > nav {
   flex-direction: row;
   font-size: var(--s-1);
 }
-@media print {
-  :root {
-    font-size: 10pt;
-  }
-  * {
-    text-shadow: none !important;
-  }
-  body {
-    --c-highlight: white --c-dark: white;
-    --c-accent: black;
-    --c-body-background: white;
-
-    --c-text: black;
-
-    --content-width: 100vw;
-  }
-  body {
-    background: none;
-  }
-  h1,
-  h2,
-  h3,
-  h4 {
-    opacity: 0.8;
-  }
-  :is(h1, h2, h3, h4, blockquote, .aside)::after {
-    content: none !important;
-  }
-  body > header > nav {
-    display: none;
-  }
-  body > footer {
-    display: none;
-  }
-  a[href^="http"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.75em;
-    word-break: break-all;
-    font-family: "Commit Mono", monospace;
-    .footnotes & {
-      display: block;
-    }
-  }
-  .isso-postbox {
-    display: none;
-  }
-  .tag {
-    color: inherit;
-  }
-}
 
 body > footer {
   position: relative;
@@ -682,7 +650,8 @@ button, a.button {
   margin: 0 0.2em 0.2em 0;
 }
 .tag {
-  display: inline-flex;
+  display: inline-block;
+  position: relative;
   &::before {
     content: "#";
   }
@@ -694,13 +663,22 @@ button, a.button {
   &:hover {
     color: var(--c-text);
   }
+  &.button:has(.tagCount) {
+    padding-right: 2em;
+  }
   .tagCount {
-    display: inline-flex;
+    display: flex;
-    justify-content: center;
     align-items: center;
-    font-size: calc(1em / var(--ratio));
+    position: absolute;
-    color: var(--c-text);
+    overflow: hidden;
-    width: 2em;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 0;
+    font-size: calc(3.3em);
+    font-weight: bold;
+    padding-right: 0.1em;
+    opacity: 0.175;
   }
 }
 
@@ -778,3 +756,64 @@ body .isso-post-action {
     font-weight: 200;
   }
 }
+
+@media print {
+  :root {
+    font-size: 10pt;
+  }
+  * {
+    text-shadow: none !important;
+  }
+  body {
+    --c-highlight: white;
+    --c-dark: white;
+    --c-accent: black;
+    --c-body-background: white;
+    --c-text: black;
+    --content-width: 100vw;
+    --ratio: 1.2;
+    background: none;
+  }
+  h1,
+  h2,
+  h3,
+  h4 {
+    opacity: 0.8;
+    margin-top: 1rem;
+  }
+  main {
+    margin-top: 0;
+  }
+  :is(h1, h2, h3, h4, blockquote, .aside)::after {
+    content: none !important;
+  }
+  body > header > nav {
+    display: none;
+  }
+  body > footer {
+    display: none;
+  }
+  a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.75em;
+    word-break: break-all;
+    font-family: "Commit Mono", monospace;
+    .footnotes & {
+      display: block;
+    }
+  }
+  .isso-postbox {
+    display: none;
+  }
+  .tag {
+    background: none !important;
+    color: inherit !important;
+    .tagCount {
+      color: inherit;
+      opacity: 0.25;
+    }
+  }
+  .button {
+    border: 1px solid #aaa !important;
+  }
+}