labsite: Tweak CSS and scrolling behavior

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) {