rm old style and layouts, set up overrides

website/assets/styles/03-elements/base.scss → website/assets/custom-theme/03-elements/base.scss

@@ -1,11 +1,5 @@
-* {
-  box-sizing: border-box;
-}
 body,
 html {
-  font-family: var(--theme-font--copy);
-  font-size: 100%;
-  background-color: var(--theme-color--paper);
   background-image: url("./pictures/svgs/neons/nnneon-hex.svg"),
     url("./pictures/svgs/quads/qqquad-02.svg"),
     radial-gradient(
@@ -19,7 +13,7 @@ html {
   margin: 0;
   padding: 0;
   height: 100%;
-  animation: fade-in 0.2s;
+  animation: fade-in 0.6s;
 }
 
 html {

website/assets/styles/03-elements/buttons.scss → website/assets/custom-theme/03-elements/buttons.scss

@@ -29,7 +29,8 @@
     #{$rule}: var(--button-#{$rule});
   }
 
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+  transition:
+    all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
     border-color 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
   @include on-event {
@@ -52,9 +53,10 @@
   // sometimes buttons have an icon or are only visibly an icon
 
   &__icon,
+  &__icon svg,
   &--icon {
     // enforce tap sizing
-    $taps: height, width, min-width, max-width;
+    $taps: height, width, min-width, max-width, font-size;
     @each $rule in $taps {
       #{$rule}: var(--theme-spacing--touchtarget);
     }
@@ -64,6 +66,7 @@
     box-shadow: none;
     color: currentColor;
     place-content: center;
+    border-radius: 0;
 
     @include on-event {
       background: transparent;

website/assets/styles/03-elements/headings.scss → website/assets/custom-theme/03-elements/headings.scss

@@ -13,9 +13,16 @@ $heading__levels: 1, 2, 3, 4, 5, 6;
   }
 }
 
+h1,
+.e-heading__1,
 h4,
 .e-heading__4 {
   text-transform: uppercase;
+  background-color: transparent;
+}
+
+h4,
+.e-heading__4 {
   color: var(--theme-color--accent);
 }
 

website/assets/styles/04-components/copy.scss → website/assets/custom-theme/04-components/copy.scss

@@ -8,3 +8,11 @@
   padding: var(--theme-spacing--6);
   max-width: var(--theme-spacing--linelength);
 }
+
+span {
+  toggle-root: check self;
+}
+
+span:toggle(check) {
+  text-decoration: line-through;
+}

website/assets/custom-theme/04-components/page-header.scss

@@ -0,0 +1,42 @@
+.c-page-header {
+  &__breadcrumbs {
+    padding: 0; //no emojis on this layout so no need for extra padding
+  }
+  &__container {
+    .c-page-header--toc:not(.c-page-header--solo) & {
+      @media (min-width: $c-max) {
+        grid-template:
+          ".              " var(--gap)
+          "breadcrumbs    " min-content
+          "toc            " auto
+          ".             " var(--gap)
+          "title          " min-content
+          "subtitle       " min-content
+          "description    " min-content
+          / 1fr;
+        margin-bottom: calc(-1 * var(--theme-spacing--2));
+      }
+    }
+  }
+
+  &__toc {
+    position: sticky;
+    top: 0;
+    .c-toc {
+      max-height: none;
+    }
+  }
+  .p-home & {
+    position: absolute;
+    bottom: 0;
+    margin-bottom: calc(-1 * var(--theme-spacing--6));
+    .c-page-header__title {
+      max-width: 16ch;
+      font: var(--theme-font--brand);
+      font-size: var(--theme-type-size--1);
+      text-shadow: initial;
+      color: var(--theme-color--brand);
+      mix-blend-mode: saturation;
+    }
+  }
+}

website/assets/custom-theme/04-components/search.scss

@@ -0,0 +1,3 @@
+#search .pagefind-ui__search-input {
+  background: var(--theme-color--backdrop-to) !important;
+}

website/assets/styles/04-components/splash.scss → website/assets/custom-theme/04-components/splash.scss

@@ -1,14 +1,17 @@
 .c-splash {
-  // background: var(--theme-color--ink);
-  // color: var(--theme-color--paper);
-
+  margin-top: var(--theme-spacing--6);
+  transform: rotate(-3.5deg);
   @include backdrop(true, true, 0.6);
   border-top: var(--theme-spacing--gutter) solid var(--theme-color--pop);
   border-radius: 8px 8px 2px 2px;
+  box-shadow: var(--theme-box-shadow);
   padding: var(--theme-spacing--gutter);
   max-width: var(--theme-spacing--linelength);
+  text-wrap: balance;
   font: var(--theme-font--system);
 
+  animation: float 6s infinite alternate ease-in-out;
+
   strong,
   a {
     font-size: var(--theme-type-size--4);

website/assets/styles/04-components/toc.scss → website/assets/custom-theme/04-components/toc.scss

@@ -3,17 +3,21 @@
 
 .c-toc {
   color: var(--theme-color--accent);
-  max-width: var(--theme-spacing--container);
   border: var(--theme-border--thick);
+  padding: var(--gap);
 
   ol {
     color: var(--theme-color--ink);
-    padding-right: var(--theme-spacing--gutter);
+    text-transform: uppercase;
+    ol {
+      padding-left: var(--theme-spacing--gutter);
+    }
   }
 
   ol li {
     text-transform: uppercase;
     font-family: var(--theme-font--display);
+    font-weight: 500;
 
     a,
     a:link {

website/assets/custom-theme/layout/header.scss

@@ -0,0 +1,44 @@
+.l-header {
+  grid-template:
+    " . ......... . " var(--theme-spacing--2)
+    " . container ." minmax(0, 1fr)
+    " . ......... ." var(--theme-spacing--3) / minmax(
+      var(--theme-spacing--gutter),
+      1fr
+    )
+    var(--theme-spacing--container) minmax(var(--theme-spacing--gutter), 1fr);
+  @include pattern(dots, var(--theme-color--pop), null, false, 0.5);
+  background: initial;
+  border: initial;
+  box-shadow: initial;
+  backdrop-filter: initial;
+
+  &__container {
+    grid-template:
+      "heading . search . action" min-content/max-content var(
+        --theme-spacing--4
+      )
+      1fr var(--theme-spacing--4) min-content;
+  }
+
+  &__action {
+    background: var(--theme-color--brand);
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    align-items: flex-start;
+    padding: var(--theme-spacing--2) var(--theme-spacing--3) 0
+      var(--theme-spacing--2);
+
+    @include on-event() {
+      background-color: var(--theme-color--accent);
+      color: var(--theme-color--paper);
+    }
+
+    svg {
+      height: fit-content;
+      align-items: flex-start;
+    }
+  }
+}

website/assets/custom-theme/layout/layout.scss

@@ -0,0 +1,10 @@
+ .l-layout { 
+    grid-template:
+    " header header header header" auto
+    " ...... main   ...... ......" 1fr
+    " ...... footer ...... ......" auto /
+    minmax(var(--theme-spacing--gutter), 1fr) 
+    var(--theme-spacing--container) 
+    var(--theme-spacing--gutter)
+    minmax(var(--theme-spacing--touchtarget), 1fr);
+ }

website/assets/custom-theme/layout/menu.scss

@@ -0,0 +1,29 @@
+.l-menu {
+  @include pattern(graph, currentColor, b, false, 0.2);
+  @include backdrop(true, true, 0.6);
+  z-index: 5;
+  width: fit-content;
+  --box-shadow: var(--theme-color--ink-fade);
+  box-shadow: -20px -2px 30px var(--box-shadow);
+  text-transform: lowercase;
+
+  .is-dark-mode & {
+    --box-shadow: var(--theme-color--contrast-max);
+  }
+
+  &__container {
+    max-height: calc(100vh - 2 * var(--theme-spacing--4));
+    grid-template:
+      ". ....... ......... ......... ." var(--gap)
+      ". heading ......... action    ." min-content
+      ". ....... ......... ......... ." var(--gap)
+      ". primary primary   primary   ." 1fr
+      ". secondary secondary secondary ." var(--theme-spacing--touchtarget)
+      ". ....... ......... ......... ." var(--gap) / var(--gap)
+      1fr 1fr var(--theme-spacing--touchtarget) var(--gap);
+  }
+  &__secondary {
+    background: transparent;
+    width: auto;
+  }
+}

website/assets/custom-theme/states/inert.scss

@@ -0,0 +1,3 @@
+[inert] > * {
+  opacity: 0.5;
+}