make some fun components for rich text and events 🎷

web/src/css/base.scss

@@ -23,8 +23,7 @@ body {
   background: var(--color-background);
   font-family: var(--font-main);
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.4;
+  line-height: 1.5;
 
   @media (max-width: 1000px) {
     &.hideScroll {
@@ -58,6 +57,7 @@ p {
 
   &.lead {
     font-size: var(--font-size-lead);
+    max-width: 36em;
   }
 }
 
@@ -80,6 +80,7 @@ button {
   font-family: inherit;
   font-size: inherit;
   font-weight: 500;
+  transition: opacity var(--transition-easing);
   cursor: pointer;
 
   &:hover {
@@ -96,4 +97,30 @@ blockquote {
 
 .site-main {
   padding: var(--spacing-sitepadding);
+}
+
+.hiddenLink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  overflow: hidden;
+  text-indent: -9999px;
+  z-index: 10;
+}
+
+.linkItem {
+  transition: opacity var(--transition-easing);
+  cursor: pointer;
+
+  &:hover {
+    opacity: .6;
+    transition: opacity var(--transition-easing);
+  }
+
+  &:has(:focus-visible) {
+    box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
+  }
 }

web/src/css/variables.scss

@@ -3,9 +3,11 @@
   --font-main: 'Avenir Next', 'Avenir', sans-serif;
   --font-serif: 'p22-mackinac-pro', serif;
 
+  --font-size-caption: .8rem;
   --font-size-body: 1rem;
   --font-size-lead: 1.4rem;
 
+
   // colors
 
   // color palette
@@ -25,4 +27,10 @@
 
   // spacing
   --spacing-sitepadding: 2rem;
+  --spacing-gap-column: 2rem;
+  --spacing-gap-row: 1.5rem;
+  --spacing-section-bottom: 5rem;
+
+  // animations
+  --transition-easing: .3s ease;
 }