🧪 labsite: Tweak CSS and scrolling behavior (#425)

Refactor labsite CSS to use more modern CSS features, especially nesting.

Finally fix the broken looking light-theme sample selection on the playsite and
labsite.

Tweak the scrolling behavior for Next button clicks: we always scroll to top of
notes section. We also use "smooth" scrolling (rather than immediate jumping to
target), which makes it more obvious what's going on. Tested to work on iOS and
MacOS, Chrome, Safari, Firefox. Unfortunately no dice on my Ubuntu laptop with
Smooth scrolling on any browser 🤷‍♀.

This merges the following commits:
* playsite: Fix light-theme sample selection
* labsite: Refactor CSS to use nesting
* labsite: Improve scrolling on Next click

     frontend/lab/css/overrides.css | 126 ++++++++++++++++-----------------
     frontend/play/css/index.css    |  20 ++++--
     frontend/play/index.js         |   2 +-
     3 files changed, 79 insertions(+), 69 deletions(-)

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
Pull-request: #425

frontend/lab/css/overrides.css

@@ -26,6 +26,12 @@ html {
   height: 100%;
   padding: 8px 16px var(--editor-padding-bottom) 16px;
   scroll-behavior: smooth;
+  position: relative;
+}
+.notes:after {
+  content: "";
+  display: block;
+  height: 80%;
 }
 
 @media (min-width: 768px) {
@@ -55,19 +61,6 @@ html {
   font-size: 0.875rem;
 }
 
-.notes details {
-  margin-bottom: 12px;
-}
-.notes details pre {
-  margin: 0;
-}
-.notes details[open] > summary + * {
-  margin-top: 8px;
-}
-.notes details[open] {
-  margin-bottom: 16px;
-}
-
 .notes h4 {
   color: var(--color-slightly-dimmed);
 }
@@ -104,20 +97,11 @@ html {
   &:hover code {
     color: var(--color-accent-hover);
   }
-}
-
-.notes a > code {
-  color: var(--color-accent);
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.notes pre {
-  margin: 16px 0 24px;
-  padding: 16px;
-  border-left: 6px solid var(--border-color);
-  overflow-x: auto;
-  background: var(--background-code);
+  & > code {
+    color: var(--color-accent);
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .notes code {
@@ -128,12 +112,18 @@ html {
   color: var(--color);
 }
 
-.notes pre code {
-  padding: 0;
-  color: var(--color);
-  background: none;
-  margin-bottom: 24px;
-  pointer-events: none;
+.notes pre {
+  margin: 16px 0 24px;
+  padding: 16px;
+  border-left: 6px solid var(--border-color);
+  overflow-x: auto;
+  background: var(--background-code);
+  & code {
+    padding: 0;
+    background: none;
+    margin-bottom: 24px;
+    pointer-events: none;
+  }
 }
 
 .notes img {
@@ -143,17 +133,14 @@ html {
 
 .notes table {
   border-collapse: collapse;
-  margin: 16px 0 36px;
+  margin: 16px 0;
   display: block;
   overflow-x: auto;
   white-space: nowrap;
 }
-.notes tr {
+.notes tr:not(:first-child) {
   border-top: 1px solid var(--border-color);
 }
-.notes tr:first-child {
-  border-top: none;
-}
 .notes th {
   border-bottom: 1px solid var(--border-color);
   font-weight: 600;
@@ -166,39 +153,31 @@ html {
   &:first-child {
     padding-left: 0px;
   }
-}
-.notes :is(th, td):has(img) {
-  padding: 2px;
-}
-.notes :is(th, td):has(img) {
-  padding: 2px;
-  border: none;
+  &:has(img) {
+    padding: 2px;
+    border: none;
+  }
 }
 .notes table img {
   padding: 0;
   width: 100%;
   max-width: 100%;
 }
+.notes details {
+  margin-bottom: 12px;
+  & pre {
+    margin: 0;
+  }
 
-.youtube {
-  --youtube-width: 380px;
-  --aspect-ratio: calc(16 / 9);
-  margin: 32px auto;
-  display: block;
-  width: var(--youtube-width);
-  height: calc(var(--youtube-width) / var(--aspect-ratio));
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-}
-.notes summary {
-  list-style: none;
-  display: block;
-}
-summary::-webkit-details-marker {
-  display: none;
+  &[open] {
+    margin-bottom: 16px;
+    & summary + * {
+      margin-top: 8px;
+    }
+  }
 }
-.notes summary,
-.notes .next-btn {
+
+.notes :is(summary, .next-btn) {
   background: none;
   border: 1px solid var(--color-accent-hover);
   color: var(--color-accent-hover);
@@ -211,10 +190,29 @@ summary::-webkit-details-marker {
   width: fit-content;
   text-align: center;
   font-size: 1rem;
+  &.hidden {
+    display: none;
+  }
+}
+/* Remove <details> triangle */
+.notes summary {
+  list-style: none;
 }
-.next-btn.hidden {
+summary::-webkit-details-marker {
   display: none;
 }
+
+.youtube {
+  --youtube-width: 380px;
+  --aspect-ratio: calc(16 / 9);
+  margin: 32px auto;
+  display: block;
+  width: var(--youtube-width);
+  height: calc(var(--youtube-width) / var(--aspect-ratio));
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+}
+
 @media (max-width: 767px) {
   .notes {
     display: none;

frontend/play/css/index.css

@@ -25,8 +25,19 @@
   --sample-selector-width: 180px;
   --sample-selector-index-width: 32px;
   --sample-selector-gap: 6px;
+  --sample-selector-color: hsl(210deg 5% 15%);
+  --sample-selector-background: hsl(0deg 0% 100%);
+  --sample-selector-border-width: 0;
+  --sample-selector-index-background: hsl(0deg 0% 85%);
+}
+/* light theme colors
+   minimal example: frontend/css/switch.html */
+:root:has(#dark-theme:not(:checked)) {
+  --sample-selector-color: hsl(0deg 0% 0%);
+  --sample-selector-background: hsl(0deg 0% 92%);
+  --sample-selector-index-background: hsl(0deg 0% 100%);
+  --sample-selector-border-width: 1px;
 }
-
 @media (max-width: 767px) {
   /* responsive mobile */
   :root {
@@ -92,12 +103,13 @@ button.arrow svg {
   padding: 0 var(--sample-selector-gap);
   font-size: 0.875rem;
   width: var(--sample-selector-width);
-  background: var(--color);
-  color: var(--background);
+  background: var(--sample-selector-background);
+  color: var(--sample-selector-color);
   margin-left: 6px;
   margin-right: 6px;
   border-radius: 6px;
   height: 28px;
+  border: var(--sample-selector-border-width) solid var(--border-color);
 }
 #sample-selector:hover {
   color: var(--color-accent);
@@ -107,7 +119,7 @@ button.arrow svg {
   border-radius: 6px;
   width: var(--sample-selector-index-width);
   font-size: 0.75rem;
-  background: hsl(0deg 0% 85%);
+  background: var(--sample-selector-index-background);
   padding: 0 2px;
 }
 #sample-index.hidden {

frontend/play/index.js

@@ -478,7 +478,7 @@ function handleNotesNextClick(e) {
     if (el.querySelector(".next-btn")) break
     el = el.nextElementSibling
   }
-  btn.nextElementSibling?.scrollIntoView({ behavior: "smooth" })
+  document.querySelector("#notes").scrollTo({ top: btn.offsetTop + 38, behavior: "smooth" })
 }
 
 function updateEditor(content, opts) {