style: tweak colors, hovers & snipets

2 files changed, 156 insertions, 37 deletions

diff --git a/src/tour.gleam b/src/tour.gleam
index 9dabc58..0b09e1c 100644
--- a/src/tour.gleam
+++ b/src/tour.gleam
@@ -529,7 +529,9 @@ fn everything_chapter_lesson_html(lesson: Lesson, index: Int, end_index: Int) {
 
   let lesson_content =
     h("article", [#("class", "lesson"), #("id", slugify_path(lesson.path))], [
-      h("h2", [#("class", "lesson-title")], [text(lesson.name)]),
+      h("a", [#("href", "#" <> slugify_path(lesson.path)), #("class", "link")], [
+        h("h2", [#("class", "lesson-title")], [text(lesson.name)]),
+      ]),
       htmb.dangerous_unescaped_fragment(string_builder.from_string(lesson.text)),
       h("pre", [#("class", "lesson-snippet")], [
         h("code", [], [text(lesson.code)]),
@@ -596,9 +598,14 @@ fn everything_html(chapters: List(Chapter)) -> String {
             [],
             list.map(chapter.lessons, fn(lesson) {
               h("li", [], [
-                h("a", [#("href", "#" <> slugify_path(lesson.path))], [
-                  text(lesson.name),
-                ]),
+                h(
+                  "a",
+                  [
+                    #("href", "#" <> slugify_path(lesson.path)),
+                    #("class", "link"),
+                  ],
+                  [text(lesson.name)],
+                ),
               ])
             }),
           ),
diff --git a/static/style.css b/static/style.css
index e850eef..ae16c9c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -34,9 +34,20 @@
   --gap-quarter: calc(0.25 * var(--gap));
   --navbar-height: calc(var(--gap-double) + 20px);
 
+  --hot-pink: #d900b8;
+  --light-pink: #fff8fe;
+  --gray-light: #dfdfdf;
+
+  --drop-shadow: 0 0 var(--gap-quarter) var(--color-background), var(--gap) var(--gap) 0 var(--color-drop-shadow); 
+
   --color-navbar-background: var(--faff-pink);
   --color-navbar-text: var(--light-theme-text);
   --color-navbar-link: var(--light-theme-text);
+
+  --color-accent: var(--faff-pink);
+  --color-accent-light: var(--light-pink);
+  --color-accent-hot: var(--hot-pink);
+  --color-accent-dark: var(--unexpected-aubergine);
 }
 
 html.theme-light {
@@ -48,6 +59,9 @@ html.theme-light {
   --color-link-decoration: var(--faff-pink);
   --color-code: var(--light-theme-code);
   --color-divider: var(--faff-pink);
+  --color-drop-shadow: var(--gray-light);
+  --color-accent-muted: var(--color-accent-light);
+  --color-text-accent: var(--color-accent-dark);
   color-scheme: light;
 }
 
@@ -60,6 +74,9 @@ html.theme-dark {
   --color-link-decoration: var(--faff-pink);
   --color-code: var(--dark-theme-code);
   --color-divider: var(--unexpected-aubergine);
+  --color-drop-shadow: var(--blacker);
+  --color-accent-muted: var(--color-accent-dark);
+  --color-text-accent: var(--color-accent);
   color-scheme: dark;
 }
 
@@ -107,6 +124,7 @@ h6 {
   justify-content: space-between;
   align-items: center;
   height: var(--navbar-height);
+  min-height: var(--navbar-height);
   padding: var(--gap);
   background: var(--color-navbar-background);
   color: var(--color-navbar-text);
@@ -392,6 +410,14 @@ html.theme-dark .codeflask .token.attr-value {
   color: #abb2bf;
 }
 
+/*
+ * utility classes
+ */
+
+ /*
+ * dims the background of any element it its applied to
+ */
+
 .dim-bg {
   position: relative;
 }
@@ -405,7 +431,7 @@ html.theme-dark .codeflask .token.attr-value {
   content: "";
   position: absolute;
   inset: 0;
-  background: var(--color-background);
+  background: inherit;
   filter:  brightness(0.4) saturate(1.3);
   z-index: 0;
   opacity: 0.3;
@@ -416,26 +442,58 @@ html.theme-dark .codeflask .token.attr-value {
 }
 
 /*
+ * highlights an element (usually a link) on hover
+ */
+
+ .link {
+  color: var(--color-text-accent);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: background 150ms linear 0s, color 150ms ease-out 0s;
+ }
+
+ .link:hover {
+  color: var(--color-link);
+  background: var(--color-accent-muted);
+  text-decoration-color: var(--color-accent);
+ }
+
+
+/*
  * /everything page
  * inline chapters & lessons
  */
 
+ body:has(#everything) {
+  /* max-height: 100%; */
+  overflow: hidden;
+  min-height: 100vh;
+  /* mobile viewport bug fix */
+  min-height: -webkit-fill-available;
+ }
+
+ html:has(#everything) {
+  min-height: -webkit-fill-available;
+ }
+
 
 /* set navbar to position: fixed */
 body:has(#everything) .navbar {
   z-index: 100;
   position: fixed;
   inset: 0;
-  bottom: unset;
+  bottom: 0;
 }
 
 /* everything wrapper, 2x2 responsive grid layout */
 main#everything {
   display: grid;
-  max-height: 100vh;
+  max-height: 100%;
+  min-height: -webkit-fill-available;
+  /* height: -webkit-fill-available; */
   grid-template-columns: minmax(0, max-content) 1fr;
-  padding-top: var(--navbar-height);
   overflow: hidden;
+  padding-top: var(--navbar-height)
 }
 
 #everything p,
@@ -458,12 +516,15 @@ main#everything {
 #everything-contents, #everything-lessons {
   grid-column-end: span 1;
   grid-row: 1 / span 1;
+  max-height: 100%;
   padding: var(--gap);
   padding-bottom: var(--gap-double);
   overflow-y: auto;
   display: flex;
   background: var(--color-background);
   flex-direction: column;
+  transition: background 150ms linear 0s;
+  position: relative;
 }
 
 /* table of contents on the left, scrollable */
@@ -496,6 +557,7 @@ main#everything {
   list-style: none;
   padding: 0;
   color: var(--color-text-secondary);
+  transition: color 150ms linear 0s;
 }
 
 #everything-contents .chapter ul {
@@ -504,33 +566,27 @@ main#everything {
   gap: var(--gap-half);
 }
 
-#everything-contents a {
-  color: var(--color-text-secondary);
-  transition: color 150ms ease-out 0s;
-}
-
-#everything-contents a:hover {
-  color: var(--color-link);
-}
-
 #everything-lessons {
   grid-column-start: 2;
   container-type: inline-size;
   container-name: lessons-list;
   padding-top: 0;
   scroll-behavior: smooth;
-  scroll-padding-block-start: var(--gap-double);
+  scroll-snap-type: y proximity;
+  scroll-padding-block-start: calc(2 * var(--navbar-height));
+  /* scroll-padding-block-start: var(--gap-double); */
 }
 
 
 #everything-lessons .chapter-title {
   margin: 0;
   padding-top: var(--gap);
-  color: var(--faff-pink);
+  color: var(--color-text-accent);
   position: sticky;
   height: var(--gap-triple);
   top: 0;
   background: var(--color-background);
+  transition: background 150ms linear 0s, color 150ms linear 0s;
   z-index: 3;
 }
 
@@ -542,6 +598,7 @@ main#everything {
   margin: var(--gap) 0;
   padding: var(--gap) 0;
   padding-bottom: var(--gap-triple);
+  scroll-snap-align: center top;
 }
 
 #everything-lessons .lesson * {
@@ -552,13 +609,19 @@ main#everything {
   position: sticky;
   top: var(--gap-triple);
   background: var(--color-background);
+  transition: background 150ms linear 0s, color 150ms ease-out 0s;
+  color: var(--color-link);
   z-index: 2;
   padding: var(--gap) 0;
   margin-bottom: var(--gap-double);
 }
 
+#everything-lessons .lesson:target  {
+  animation: highlight-block 900ms ease-in-out 300ms 1;
+}
+
 #everything-lessons .lesson:target .lesson-title {
-  animation: highlight 300ms ease-in-out 600ms 3;
+  animation: highlight-text 900ms ease-in-out 300ms 1;
 }
 
 #everything-lessons .lesson-snippet {
@@ -567,12 +630,10 @@ main#everything {
   margin-top: var(--gap-double);
   position: relative;
   background: var(--color-background-dim);
-  box-shadow: var(--gap) var(--gap) 0 var(--blacker);
+  transition: background 150ms linear 0s, box-shadow 150ms linear 0s;
+  box-shadow: var(--drop-shadow);
 }
 
-.theme-light #everything-lessons .lesson-snippet {
-  box-shadow: var(--gap) var(--gap) 0 var(--unexpected-aubergine);
-}
 
 #everything-lessons .lesson-snippet code {
   overflow-x: auto;
@@ -583,7 +644,7 @@ main#everything {
 }
 
 #everything-lessons .lesson-snippet-link {
-  background: var(--color-background);
+  background: var(--color-accent-muted);
   position: absolute;
   bottom: 0;
   right: 0;
@@ -603,18 +664,23 @@ main#everything {
 }
 
 #everything-lessons .lesson-snippet-link:hover {
-  color: var(--color-background);
-  background: var(--color-link);
-  transition: all 120ms ease-in 0s;
-  outline-color: var(--faff-pink);
+  color: var(--color-link);
+  background: var(--color-background);
+  transition: all 150ms ease-in 0s;
+  outline-color: var(--color-accent);
 }
 
 #everything-lessons .snippet-link-icon {
-  color: var(--faff-pink);
+  color: var(--color-accent);
+  transition: color 150ms ease-in 0s;
   font-weight: bold;
   text-decoration: none;
 }
 
+#everything-lessons .lesson-snippet-link:hover .snippet-link-icon {
+  color: var(--color-accent-hot);
+}
+
 #everything-lessons hr {
   width: 100%;
   height: 1px;
@@ -622,14 +688,16 @@ main#everything {
   padding: 0;
   margin: 0;
   display: block;
+  transition: border-top 150ms linear 0s;
+
 }
 
 #everything-lessons .lesson-separator {
-  border-top: 1px solid var(--color-background-dim);
+  border-top: 1px solid var(--color-accent-muted);
 }
 
 #everything-lessons .chapter-separator {
-  border-top: 1px solid var(--faff-pink);
+  border-top: 1px solid var(--color-accent);
   position: sticky;
   top: calc(var(--gap-triple) - 1px);
   z-index: 3;
@@ -658,11 +726,12 @@ main#everything {
     grid-column: 1 / span 2;
     padding-left: calc( var(--gap) + var(--gap-quad) * 2);
     transform: translateX(-100%);
-    transition: transform 300ms ease-in 0s, overflow-y 0s linear 600ms;
+    transition: transform 300ms ease-in 0s, overflow-y 0s linear 600ms, background 150ms linear 0s;
     z-index: 10;
     overflow: unset;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
     background: var(--color-background-dim);
+    padding-bottom: calc(2 * var(--gap-quad))
   }
 
   /* show / hide contents when touching on trigger */
@@ -696,7 +765,7 @@ main#everything {
     background: var(--color-background-dim);
     z-index: 60;
     opacity: 1;
-    transition: opacity 300ms ease-out 450ms;
+    transition: opacity 300ms ease-out 450ms, background 150ms linear, color 150ms linear 0s;
     pointer-events: all;
     box-sizing: border-box;
   }
@@ -714,8 +783,25 @@ main#everything {
   #everything-lessons {
     grid-column: 1 / span 2;
     padding-bottom: var(--gap-quad);
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  #everything-lessons .lesson,
+  #everything-lessons .chapter-title,
+  #everything-lessons .chapter-separator {
+    padding-left: var(--gap);
+    padding-right: var(--gap);
+  }
+
+  #everything-lessons .lesson-title,
+  #everything-lessons .chapter-title,
+  #everything-lessons .chapter-separator {
+    /* position: static; */
   }
 
+  
+
   #everything-lessons .lesson-snippet code {
     padding: var(--gap);
   }
@@ -734,10 +820,23 @@ main#everything {
     margin-right: var(--gap-quad);
     width: calc(100% - var(--gap-quad) * 2);
   }
+}
+
+@media all and (orientation: portrait) {
+  /* adjust padding and sticky element positions when a link is clicked */
+  
+  #everything:has(*:target) #everything-lessons {
+    padding-top: var(--navbar-height);
+  }
+
+  #everything:has(*:target) #everything-contents {
+    padding-top: calc(var(--navbar-height) + var(--gap));
+  }
+
   
 }
 
-@keyframes highlight {
+@keyframes highlight-text {
   0% {
     text-decoration: underline;
     text-decoration-color: transparent;
@@ -745,8 +844,9 @@ main#everything {
 
   50% {
     text-decoration: underline;
-    text-decoration-color: var(--faff-pink);
-    color: var(--faff-pink);
+    text-decoration-color: var(--color-accent);
+    color: var(--color-accent-text);
+    background: var(--color-accent-muted);
   }
 
   100% {
@@ -755,6 +855,18 @@ main#everything {
   }
 }
 
+@keyframes highlight-block {
+  0% {
+  }
+
+  50% {
+    background: var(--color-accent-muted);
+  }
+
+  100% {
+  }
+}
+
 @keyframes reveal {
   0% {
     overflow: unset;