📄 Add Detail Pages for Definitions (#75)

* fix: untrack definitions in dist

* feat(detail pages): update item link

* feat(detail pages): add layout

* feat(detail pages): render whole definition content

* feat(detail pages): remove definitons from homepage

* 🧹 def list component

* feat(layout): render site footer in all pages

* feat(detail pages): rename definition root class && move css into partials

* chore: abstract further css into own files

* feat(detail pages): update headling level of definition content

* feat(styles): set box sizing

* feat(styles): add margin bottom utility

* feat(styles): selection

* feat(components): sub page header own component

* feat(detail pages): add sections

* feat(style): mian headline

* feat(page layout): rename page content grid

* feat(page layout): add wide content class

* feat(detail pages): set document title

* feat(detail pages): set uniform document title for docs and definitions

* feat(page title): add comment

* feat(detail pages): add meta description

* feat(detail pages): wrap def header in article tag

* chore: set up ava

* feat(filters): move permalink function into file, add test

* chore: rename _temp to _util, remove creation script

* feat(detail pages): helper function to find additional definitions

* chore: move helpers to single directory

* feat(detail pages): create shortcode for further definition navigation

* feat(detail pages): fix find defs function

* feat(detail pages): shortcode for browse nav markup

* chore: fix collection mock data

* feat(detail pages): render browse nav

* feat(detail pages): style browse nav, style improvements

* feat(detail pages): test redirect

* feat(detail pages): client side redirect

* feat(homepage): set title

* 💅

* feat(detail pages): incorporate design changes

* feat(detail pages): hide browse headlines

* feat(detail pages): label lists

* feat(footer): add aria label

* feat(detail pages): redice heading level in md

* feat(detail pages): spacing in browse nav

* feat(detail pages): reduce line height

* feat(detail pages): set max width w/o breaking homepage

* feat(detail pages): replace in-definition definition links

* 🧹

* feat(detail pages): recover spacing utility

* 🧹

* chore(packages): update ava

* config: specify nvm version

* 💅

* 💅

assets/css/base/_a.scss

@@ -0,0 +1,16 @@
+a {
+  border-bottom: $dark-grey solid 0.1em;
+  color: $black;
+  font-family: $ext-sans;
+  margin: 1rem 0;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    border-bottom: $primary-color solid 0.1rem;
+  }
+  &:focus {
+    outline: pxToRem(3) solid $primary-color;
+    outline-offset: pxToRem(5);
+  }
+}

assets/css/base/_base.scss

@@ -6,44 +6,9 @@ body {
   padding: 2rem;
 }
 
-h1 {
-  font-family: $ext-sans;
-  font-weight: $bold;
-}
-
-h1,
-h2,
-h3,
-h4 {
-  margin-bottom: 0.5em;
-  margin-top: 1em;
-}
-
-p {
-  font-size: 1.25rem;
-  line-height: 1.25;
-  margin: 0.75rem 0;
-}
-
-a {
-  border-bottom: $dark-grey solid 0.1em;
-  color: $black;
-  font-family: $ext-sans;
-  margin: 1rem 0;
-  text-decoration: none;
-
-  &:hover {
-    border-bottom: $primary-color solid 0.1rem;
-  }
-  &:focus {
-    outline: pxToRem(3) solid $primary-color;
-    outline-offset: pxToRem(5);
-  }
-}
-
 code {
   background-color: $dark-grey;
-  border: 1px solid $black;
+  border: pxToRem(1px) solid $black;
   border-radius: 0.25em;
   color: $white;
   font-size: 95%;

assets/css/base/_helpers.scss

@@ -2,12 +2,12 @@
   padding-left: 0 !important;
 }
 
-.style__italics {
-  font-style: italic;
+.u-margin-bottom-double {
+  margin-bottom: 2rem;
 }
 
-.small {
-  font-size: 0.75em;
+.style__italics {
+  font-style: italic;
 }
 
 .help {
@@ -16,3 +16,13 @@
     margin: 0.75rem 0;
   }
 }
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

assets/css/base/_selection.scss

@@ -0,0 +1,4 @@
+::selection {
+  background-color: #000000cc;
+  color: white;
+}

assets/css/base/_typography.scss

@@ -1,6 +1,72 @@
+h1 {
+  font-family: $ext-sans;
+  font-weight: $bold;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-bottom: 0.5em;
+  margin-top: 1em;
+}
+
+p {
+  font-size: 1.25rem;
+  line-height: 1.25;
+  margin: 0.75rem 0;
+}
+
+.title__thicc {
+  // a sensible base font size
+  font-size: 3rem;
+  line-height: 0.75;
+  margin: 0.5rem 0rem;
+  padding: 0;
+  // transform: rotateZ(90deg);
+  // margin: 13rem -7rem;
+}
+
+@media (min-width: 51rem) and (min-height: 400px) {
+  // a dramatic font size
+  .title__thicc {
+    font-size: 12vh;
+  }
+}
+
+@media (min-width: 51rem) and (min-height: 850px) {
+  // cap the max-height of the title
+  // at the same size that 12vh computes to
+  // when the viewport is 850px high
+  .title__thicc {
+    font-size: 6.75rem;
+  }
+}
+
+@media (min-width: 800px) {
+  .title__thicc {
+    grid-column: 1 / 3;
+  }
+
+  .title__thicc + p {
+    grid-column: 1 / 2;
+  }
+}
+
+.main-headline {
+  font-family: orpheuspro, Palatino, Times, serif;
+  font-size: 3.5rem;
+  line-height: 1.2;
+  margin: 0;
+}
+
 .subtitle {
   font-family: $ext-sans;
   font-weight: $regular;
   grid-column: span 2;
   letter-spacing: 0.1;
 }
+
+.small {
+  font-size: 0.75em;
+}

assets/css/base/_universal-selector.scss

@@ -0,0 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
+*::before {
+  box-sizing: border-box;
+}
+
+*::after {
+  box-sizing: border-box;
+}