An array of small changes

Notably, a couple blog posts and a new page in
/uses

Oh, and the mysterious addition of a byline to the
blog.

1 files changed, 56 insertions, 2 deletions

diff --git a/style.css b/style.css
index 2c24d12..4f6f76a 100644
--- a/style.css
+++ b/style.css
@@ -1,43 +1,51 @@
 @font-face {
   font-family: b612;
   src: url(https://bugwo.men/stuff/fonts/B612/B612-Regular.ttf);
+  font-display: swap;
 }
 @font-face {
   font-family: b612;
   src: url(https://bugwo.men/stuff/fonts/B612/B612-Bold.ttf);
   font-weight: bold;
+  font-display: swap;
 }
 @font-face {
   font-family: b612;
   src: url(https://bugwo.men/stuff/fonts/B612/B612-Italic.ttf);
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: b612;
   src: url(https://bugwo.men/stuff/fonts/B612/B612-BoldItalic.ttf);
   font-weight: bold;
   font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: b612_mono;
   src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
+  font-display: swap;
 }
 @font-face {
   font-family: b612_mono;
   src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
   font-weight: bold;
+  font-display: swap;
 }
 @font-face {
   font-family: b612_mono;
   src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
   font-style: italic;
+  font-display: swap;
 }
 @font-face {
   font-family: b612_mono;
   src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
   font-weight: bold;
   font-style: italic;
+  font-display: swap;
 }
 
 
@@ -62,6 +70,7 @@
   --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
   --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
   --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+  --fg00: light-dark(black, white);
 
   --bg0: var(--background);
   --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
@@ -719,16 +728,22 @@ summary:hover {
   flex-wrap: wrap;
   gap: var(--stdpadding);
   width: 100%;
-  justify-content: space-around;
+  justify-content: center;
   margin: calc(3 * var(--stdpadding)) 0;
 }
 .ring {
   display: flex;
-  gap: 1ch;
+  gap: .3rem;
 }
 .ring * {
   text-wrap: nowrap;
 }
+.ring > a {
+  padding: .5rem .85rem;
+  /* background-color: var(--bg1); */
+  box-shadow: 0 0 1rem var(--shadow) inset;
+  text-align: center;
+}
 .buttons {
   display: flex;
   flex-wrap: wrap;
@@ -739,6 +754,41 @@ summary:hover {
   max-height: 31px;
 }
 
+/* People */
+
+.ada, .hannah, .spider, .astrid {
+  --hmc: var(--fg0);
+  --hme: "×";
+  border: .15ch solid var(--hmc);
+  border-left-width: .6ch;
+  padding-left: .4167ch;
+  padding-right: .4167ch;
+}
+.ada::before, .hannah::before, .spider::before, .astrid::before {
+  content: var(--hme);
+  margin-right: .4167ch;
+}
+p.ada, p.hannah, p.spider, p.astrid {
+  padding: .3rem .6rem;
+}
+
+.ada {
+  --hmc: #ff64ce;
+  --hme: "🦀";
+}
+.hannah {
+  --hmc: #bc7204;
+  --hme: "🦋";
+}
+.spider{
+  --hmc: #0a8d70;
+  --hme: "🕷️";
+}
+.astrid {
+  --hmc: #f6d205;
+  --hme: "🐝";
+}
+
 /* Music page stuff */
 .musicpage section {
   min-height: 23rem;
@@ -1035,6 +1085,10 @@ time.entrydate, .entrydate time {
     width: 100%;
   }
 
+  .ring, .ring > a {
+    flex: 1;
+  }
+
   /* Footer stuff */
   footer {
     position: initial;