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);
+  }
 }