Subtle visual enhancements

Author: joeyballentine

src/elements/components/card.module.scss

@@ -4,5 +4,8 @@
 .card {
     @include themed using($t) {
         border: 1px solid t($t, $n-200, $n-800);
+        box-shadow: t($t, 0 1px 2px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 12%));
     }
+
+    transition: box-shadow 0.2s ease-out;
 }

src/elements/components/link.module.scss

@@ -1,13 +1,23 @@
 .textLink {
     color: var(--link-color);
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: 2px;
+    transition: text-decoration-color 0.15s ease, color 0.15s ease;
 
     &:hover {
-        text-decoration: underline;
+        text-decoration-color: currentcolor;
     }
 
     .externalIcon {
         margin-bottom: -0.125em;
         margin-left: 0.1em;
         margin-right: 0.1em;
+        opacity: 0.7;
+        transition: opacity 0.15s ease;
+    }
+
+    &:hover .externalIcon {
+        opacity: 1;
     }
 }

src/elements/components/model-card.module.scss

@@ -9,14 +9,22 @@
     border-radius: 0.5rem;
     border-width: 1px;
     border-style: solid;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     z-index: 1;
 
     --inner-radius: calc(0.5rem - 1px);
 
+    @include themed using($t) {
+        box-shadow: t($t, 0 1px 3px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 15%));
+    }
+
     &:hover {
-        transform: scale(1.02);
+        transform: translateY(-4px);
         z-index: 10;
+
+        @include themed using($t) {
+            box-shadow: t($t, 0 12px 24px -8px rgb(0 0 0 / 15%), 0 12px 24px -8px rgb(0 0 0 / 40%));
+        }
     }
 
     &.overflowHidden {

src/elements/components/scroll-to-top.module.scss

@@ -14,24 +14,31 @@
     // design
     cursor: pointer;
     border: none;
-    background: none;
+    background: var(--page-bg);
     border-radius: 100%;
-    padding: 0.25rem;
-    opacity: 0.3;
-    transition: opacity 0.5s ease-in-out;
+    padding: 0.5rem;
+    opacity: 0.5;
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
 
     @media screen and (max-width: 1600px) {
-        opacity: 0.5;
+        opacity: 0.7;
     }
 
     &:hover {
         opacity: 1;
-        transition-duration: 0.2s;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
+    }
+
+    &:active {
+        transform: translateY(0);
     }
 
     svg {
-        width: 2rem;
-        height: 2rem;
+        width: 1.75rem;
+        height: 1.75rem;
         border-radius: 100%;
+        display: block;
     }
 }

src/elements/components/switch.module.scss

@@ -9,7 +9,7 @@
     width: calc(var(--switch-inner-height) * var(--switch-ratio));
     box-sizing: content-box;
     background-color: hsl(0deg 0% 40% / 50%);
-    transition: background-color 200ms linear;
+    transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
     padding: calc(var(--switch-inner-height) * 0.125);
     flex-shrink: 0;
     border: none;
@@ -21,20 +21,29 @@
         outline: none;
     }
 
+    &:hover {
+        box-shadow: 0 0 0 2px hsl(0deg 0% 50% / 20%);
+    }
+
     .circle {
         background-color: white;
         display: inline-block;
         pointer-events: none;
         border-radius: 100%;
         width: var(--switch-inner-height);
         height: var(--switch-inner-height);
-        transition: transform 200ms ease-in-out;
+        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
         transform: translate(0, 0);
+        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
     }
 
     &[data-headlessui-state='checked'] {
         background-color: var(--accent);
 
+        &:hover {
+            box-shadow: 0 0 0 2px hsl(250deg 50% 50% / 30%);
+        }
+
         .circle {
             transform: translate(calc(var(--switch-inner-height) * (var(--switch-ratio) - 1)), 0);
         }

src/elements/header.module.scss

@@ -13,11 +13,11 @@
 .header {
     @include themed using ($t) {
         background: linear-gradient(t($t, white, $fade-900), transparent)
-            t($t, color.change(white, $alpha: 0.8), color.change($fade-900, $alpha: 0.85));
+            t($t, color.change(white, $alpha: 0.85), color.change($fade-900, $alpha: 0.9));
     }
 
-    transition: background-color linear 0.2s, border-color linear 0.2s;
-    backdrop-filter: saturate(200%) blur(8px);
+    transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
+    backdrop-filter: saturate(180%) blur(12px);
     border-bottom: 1px solid var(--line-color);
     position: fixed;
     z-index: 50;
@@ -97,10 +97,14 @@
     border: none;
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: ease-in-out;
-    transition-duration: 300ms;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, transform;
+    transition-timing-function: ease-out;
+    transition-duration: 150ms;
     white-space: nowrap;
+
+    &:active {
+        transform: scale(0.97);
+    }
 }
 
 .iconLink,
@@ -111,13 +115,18 @@
     margin: 0.5em;
     font-size: 150%;
     cursor: pointer;
-    transition: color 0.1s linear;
+    transition: color 0.15s ease, transform 0.15s ease;
     width: 1em;
     height: 1em;
     line-height: 1;
 
     &:hover {
         color: var(--font-color-hover);
+        transform: scale(1.1);
+    }
+
+    &:active {
+        transform: scale(0.95);
     }
 }
 

src/elements/markdown.module.scss

@@ -4,22 +4,38 @@
 
     h2 {
         margin-top: 1.5em;
-        margin-bottom: 1em;
+        margin-bottom: 0.75em;
+        letter-spacing: -0.01em;
     }
 
     h3 {
         margin-top: 1.75em;
-        margin-bottom: 1em;
+        margin-bottom: 0.75em;
+        letter-spacing: -0.01em;
+    }
+
+    p {
+        margin-bottom: 1.25em;
+    }
+
+    ul,
+    ol {
+        margin-bottom: 1.25em;
+
+        li {
+            margin-bottom: 0.25em;
+        }
     }
 }
 
 .codeWrapper > code {
     background-color: rgb(29 31 33); // color of the theme we use for code blocks
-    font-size: 90%;
-    padding: 0.25em 0.5em;
+    font-size: 87.5%;
+    padding: 0.2em 0.45em;
     white-space: break-spaces !important;
-    border-radius: 0.25em;
+    border-radius: 0.375em;
     line-height: inherit !important;
+    font-weight: 500;
 }
 
 .linkableHeading {

src/elements/tag-selector.module.scss

@@ -34,7 +34,15 @@
     border: none;
     display: inline-flex;
     overflow: hidden;
-    transition: all 0.1s linear;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+
+    &:hover {
+        transform: translateY(-1px);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
 
     .icon {
         --extra-size: 0.2em;

src/styles/globals.scss

@@ -66,11 +66,14 @@ body {
     margin: 0;
     font-family: var(--fonts-body);
     color: var(--font-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
 }
 
 body {
     background-color: var(--page-bg);
-    transition: background-color linear 0.2s;
+    transition: background-color 0.25s ease-out;
     line-height: 1.6;
 
     // Storybook hacks
@@ -100,6 +103,12 @@ h6 {
 a {
     color: inherit;
     text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+::selection {
+    background-color: var(--accent);
+    color: white;
 }
 
 .rendering-pixelated {