Refactor links, toc

macx · Feb 9, 2022 · 506722d · 506722d
1 parent c2fd432
commit 506722d
Show file tree

Hide file tree

Showing 21 changed files with 309 additions and 96 deletions.
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
@@ -106,15 +106,15 @@ const externalLinks = document.querySelectorAll('main a[href^="http"]');
 
 const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
 const linkedSections = document.querySelectorAll(['.stage__item[id]']);
-const stageNavigation = document.querySelector('.stage__navigation');
+const stageNavigation = document.querySelector('#TableOfContents');
 
 function headlinesObserverCallback(entries) {
   const stageNavigationLinks = stageNavigation.querySelectorAll('a');
 
   entries.forEach((entry) => {
     if (entry.isIntersecting) {
       const navItem = stageNavigation.querySelector(
-        'a[href="#' + entry.target.id + '"]'
+        `a[href="#${entry.target.id}"]`
       );
 
       if (navItem) {

diff --git a/assets/styles/base/layout.scss b/assets/styles/base/layout.scss
@@ -164,32 +164,6 @@ a {
         text-transform: uppercase;
         letter-spacing: 0.1rem;
       }
-
-      ul {
-        all: unset;
-      }
-
-      li {
-        list-style: none;
-        margin: 0 0 0.5em;
-      }
-
-      a {
-        display: block;
-        padding: 0.2em 0;
-        color: var(--clr-text--light);
-
-        &:hover,
-        &:focus {
-          color: var(--clr-primary);
-          text-decoration: none;
-        }
-
-        &.is-active {
-          font-weight: var(--font-weight--bold);
-          color: var(--clr-primary);
-        }
-      }
     }
   }
 }

diff --git a/assets/styles/base/mixins.scss b/assets/styles/base/mixins.scss
@@ -1,16 +1,20 @@
-@mixin respond($breakpoint, $type: 'from') {
+@mixin respond($bp, $type: 'from', $bp2: '') {
   $layout-breakpoints: (
     small: 480px,
     medium: 600px,
     large: 1000px,
   );
 
   @if $type == 'from' {
-    @media screen and (min-width: map-get($layout-breakpoints, $breakpoint)) {
+    @media screen and (min-width: map-get($layout-breakpoints, $bp)) {
+      @content;
+    }
+  } @else if $type == 'between' {
+    @media screen and (min-width: map-get($layout-breakpoints, $bp)) and (max-width: map-get($layout-breakpoints, $bp2)) {
       @content;
     }
   } @else if $type == 'to' {
-    @media screen and (max-width: map-get($layout-breakpoints, $breakpoint)-1) {
+    @media screen and (max-width: map-get($layout-breakpoints, $bp)-1) {
       @content;
     }
   }

diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss
@@ -6,6 +6,7 @@
 
   --header-height: 3.75rem;
   --navigation-width: 15rem;
+  --content-spacing: var(--spacing);
   --content-max-width: 45rem;
   --border-radius: 0.2rem;
 
@@ -44,6 +45,7 @@
 
   --font-size: 1rem;
   --font-size--small: 0.875rem;
+  --font-size--xsmall: 0.75rem;
   --font-size--large: 1.25rem;
 
   --line-height: 1.4;
@@ -62,7 +64,7 @@
   --image-shadow: 0 0.25rem 0.75rem -0.5rem rgb(10 52 120 / 30%);
 
   @media (min-width: 600px) {
-    --spacing: 2.5rem;
+    --content-spacing: 2.5rem;
     --spacing--large: 4rem;
   }
 
@@ -73,6 +75,7 @@
     --clr-text--dark: #fff;
     --clr-line: rgba(255, 255, 255, 0.2);
     --clr-header: rgba(20, 35, 45, 0.8);
+    --clr-inverse: rgb(38, 50, 56);
 
     --clr-play-1: hsla(206, 99%, 69%, 0.1);
     --clr-play-2: hsla(123, 46%, 66%, 0.1);

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -19,5 +19,8 @@
         'modules/mode-switch',
         'modules/button',
         'modules/content',
+        'modules/reflist',
+        'modules/hint',
+        'modules/toc',
         'modules/footer',
         'syntax/chroma';
diff --git a/assets/styles/modules/content.scss b/assets/styles/modules/content.scss
@@ -2,13 +2,12 @@
   min-height: calc(100vh - 3.75rem);
   max-width: var(--content-max-width);
   margin: 0 auto;
-  padding: 0 var(--spacing);
+  padding: 0 var(--content-spacing);
   transition: padding var(--transition);
 
   a:not([class]),
   abbr {
-    color: inherit;
-    margin: 0;
+    color: var(--clr-text);
     border-bottom: 2px solid;
     border-radius: 0.2em;
     font-weight: var(--font-weight--bold);
@@ -22,7 +21,8 @@
       color: var(--clr-inverse);
       border-color: var(--clr-text--light);
       padding: 0 0.3em;
-      margin: 0 -0.3em;
+      margin-left: -0.3em;
+      margin-right: -0.3em;
     }
   }
 
@@ -33,7 +33,7 @@
   }
 
   &--full {
-    padding: var(--spacing--large) var(--spacing);
+    padding: var(--spacing--large) var(--content-spacing);
   }
 
   h2 {
@@ -87,30 +87,6 @@
     }
   }
 
-  ul:not([class]) {
-    margin: 1.5em 0 1em;
-    padding: 0;
-
-    li {
-      @include list-item();
-
-      margin: 0 0 1.2em;
-      font-size: 0.8125rem;
-      color: var(--clr-text--light);
-
-      a {
-        display: inline-block;
-        font-size: 1rem;
-        margin-bottom: 0.2em;
-
-        &:hover,
-        &:focus-visible {
-          margin-bottom: 0.2em;
-        }
-      }
-    }
-  }
-
   code {
     color: var(--clr-text--code);
     // background-color: var(--clr-code);
@@ -124,7 +100,7 @@
 
 picture {
   display: block;
-  margin: 0 0 var(--spacing);
+  margin: 0 0 var(--content-spacing);
 
   img {
     display: block;
@@ -134,9 +110,9 @@ picture {
 }
 
 figure {
-  margin-left: calc(var(--spacing) * -1);
-  margin-right: calc(var(--spacing) * -1);
-  margin-bottom: var(--spacing);
+  margin-left: calc(var(--content-spacing) * -1);
+  margin-right: calc(var(--content-spacing) * -1);
+  margin-bottom: var(--content-spacing);
   transition: all var(--transition--theme);
 
   picture {
@@ -150,7 +126,7 @@ figure {
 
   figcaption {
     font-size: var(--font-size--small);
-    padding: 0 var(--spacing);
+    padding: 0 var(--content-spacing);
     color: var(--clr-text--light);
 
     span:nth-child(2) {
@@ -182,7 +158,7 @@ figure {
 
 /*
 ┌──────────────────────────────────┐
-FOOTNOTES
+  FOOTNOTES
 └──────────────────────────────────┘
 */
 

diff --git a/assets/styles/modules/footer.scss b/assets/styles/modules/footer.scss
@@ -5,7 +5,7 @@
 .footer {
   position: relative;
   z-index: 5;
-  padding: var(--spacing);
+  padding: var(--spacing) var(--content-spacing);
   font-size: 0.8rem;
   border-top: 1px solid var(--footer-line);
   color: var(--clr-text--light);

diff --git a/assets/styles/modules/hint.scss b/assets/styles/modules/hint.scss
@@ -0,0 +1,48 @@
+[data-hint] {
+  position: relative;
+  z-index: 500;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    transform: translate(-50%, 100%);
+    transition: opacity 0.2s, transform 0.2s;
+
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  &::before {
+    margin: 0 0 10px;
+    padding: 0.4em 0.7em 0.4em;
+    border-radius: 3px;
+    background: var(--clr-text);
+    color: var(--clr-inverse);
+    content: attr(data-hint);
+
+    font-size: var(--font-size--xsmall);
+    line-height: 1;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  &::after {
+    width: 0;
+    border: 5px solid transparent;
+    border-top-color: var(--clr-text);
+    content: '';
+    font-size: 0;
+    line-height: 0;
+  }
+}
diff --git a/assets/styles/modules/reflist.scss b/assets/styles/modules/reflist.scss
@@ -0,0 +1,39 @@
+.reflist {
+  ul {
+    margin: 1.5em 0 1em;
+    padding: 0;
+  }
+
+  li {
+    @include list-item();
+
+    margin: 0 0 1.3em;
+    font-size: 0.8125rem;
+    color: var(--clr-text--light);
+
+    a:not([class]) {
+      display: inline-block;
+      font-size: 1rem;
+      margin-bottom: 0.5em;
+    }
+  }
+
+  &__item {
+    svg {
+      width: 1rem;
+      height: 1rem;
+      fill: var(--clr-text--light);
+    }
+  }
+
+  &__item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+    margin-bottom: 0.5em;
+
+    a {
+      margin-bottom: 0 !important;
+    }
+  }
+}