misc design progress and testing

web/src/css/base.scss

@@ -50,11 +50,18 @@ body {
 
 a {
   color: inherit;
-  text-underline-offset: .1rem;
+  text-underline-offset: .16em;
+  text-decoration-thickness: .05em;
+  transition: opacity var(--transition-easing);
+
+  &:hover {
+    opacity: .6;
+  }
 }
 
 p {
   font-size: var(--font-size-body);
+  max-width: 36em;
 
   &.lead {
     font-size: var(--font-size-lead);
@@ -86,6 +93,16 @@ h6 {
   letter-spacing: .05em;
 }
 
+.breadcrumb {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 1rem;
+
+  a {
+    text-decoration: none;
+  }
+}
+
 button,
 .button {
   border-radius: 10rem;
@@ -96,12 +113,17 @@ button,
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
+  text-decoration: none;
   transition: opacity var(--transition-easing);
   cursor: pointer;
 
   &:hover {
     opacity: .8;
   }
+
+  a {
+    text-decoration: none;
+  }
 }
 
 blockquote {
@@ -125,6 +147,7 @@ input[type="text"] {
 
 .site-main {
   padding: var(--spacing-sitepadding);
+  min-height: 100vh;
 }
 
 .hiddenLink {
@@ -151,4 +174,12 @@ input[type="text"] {
   &:has(:focus-visible) {
     box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
   }
+}
+
+.bg-pig {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 600;
+  --color-pig: var(--color-neufPink);
 }