website: redesign part 13

website_next/learn/style.css

@@ -1,6 +1,16 @@
 main.learn {
-  --offset: 6rem;
+  --offset: 4rem;
   --content-width: 52rem;
+  --heading-padding-bottom: 0.5rem;
+  --topic-font-size: 2rem;
+  --topic-padding-top: 4.5rem;
+  --topic-sticky-size: calc(
+    var(--topic-padding-top) + var(--topic-font-size) +
+      var(--heading-padding-bottom) + 1px
+  );
+  --detail-font-size: 1.5rem;
+  --detail-padding-top: calc(var(--topic-sticky-size) + 0.75rem);
+  --detail-padding-bottom: 0.375rem;
 
   display: grid;
   grid-template-columns: 14rem minmax(0, 1fr);
@@ -15,7 +25,7 @@ main.learn {
       content: "";
       position: sticky;
       top: 0;
-      z-index: 2;
+      z-index: 4;
       display: block;
       height: var(--offset);
       margin-top: calc(-1 * var(--offset));
@@ -42,18 +52,21 @@ main.learn {
       margin-top: 8rem;
     }
 
-    section section {
+    > section > section {
       counter-increment: topic;
+      counter-reset: detail;
+      scroll-margin-top: var(--offset);
+    }
+
+    > section > section > section {
+      counter-increment: detail;
       scroll-margin-top: var(--offset);
     }
   }
 
   h1,
-  h2 {
-    position: sticky;
-    top: var(--offset);
-    padding-bottom: 0.5rem;
-    background: var(--black);
+  h2,
+  h3 {
     line-height: 1;
 
     a {
@@ -88,10 +101,19 @@ main.learn {
     }
   }
 
+  h1,
+  h2,
+  h3 {
+    position: sticky;
+    top: var(--offset);
+    background: var(--black);
+  }
+
   h1 {
     z-index: 3;
+    padding-bottom: var(--heading-padding-bottom);
     border-bottom: 1px solid var(--dark-gray);
-    font-size: 2.75rem;
+    font-size: 3rem;
 
     a::before {
       content: counter(theme, upper-roman) ". ";
@@ -99,16 +121,29 @@ main.learn {
   }
 
   h2 {
-    z-index: 1;
-    padding-top: 4.5rem;
+    z-index: 2;
+    padding-top: var(--topic-padding-top);
+    padding-bottom: var(--heading-padding-bottom);
     border-bottom: 1px dashed var(--dark-gray);
-    font-size: 1.5rem;
+    font-size: var(--topic-font-size);
 
     a::before {
       content: counter(topic) ". ";
     }
   }
 
+  h3 {
+    z-index: 1;
+    padding-top: var(--detail-padding-top);
+    padding-bottom: var(--detail-padding-bottom);
+    border-bottom: 1px dotted var(--dark-gray);
+    font-size: var(--detail-font-size);
+
+    a::before {
+      content: counter(detail, lower-alpha) ". ";
+    }
+  }
+
   p {
     margin-top: 1rem;
     color: var(--dark-white);