📄 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/structures/_definition-content.scss

@@ -0,0 +1,129 @@
+.definition-content {
+  --word-signal-color: currentColor;
+  --marker-height: 0.25rem;
+
+  &__title {
+    font-family: $serif;
+    font-size: 2.5rem;
+    font-weight: 900;
+    line-height: 1.25;
+    margin-bottom: 1rem;
+    margin-top: 0;
+  }
+
+  &__content {
+    align-items: stretch;
+
+    & + & {
+      margin-top: 2rem;
+    }
+
+    @supports (display: grid) {
+      // align-items: flex-start;
+      display: grid;
+      grid-gap: 1rem;
+      grid-template-columns: 1fr 4fr;
+
+      & > * {
+        margin: 0 !important;
+      }
+    }
+
+    & > p {
+      font-family: $sans-serif;
+      font-size: 1.5rem;
+      grid-column: 1 / -1;
+      line-height: 1.4;
+    }
+
+    & h2 {
+      flex: 0 1 auto;
+      font-family: $con-sans;
+      font-size: 0.85rem;
+      font-weight: normal;
+      grid-column: 1;
+      text-transform: uppercase;
+      transform: translateY(0.4em);
+
+      @supports (display: grid) {
+        text-align: right;
+      }
+    }
+
+    & h2,
+    & h2 + * {
+      margin-top: 1rem;
+    }
+
+    & h2 ~ p,
+    & h2 ~ ul {
+      font-size: inherit;
+      // border-left: 0.1rem solid lightgrey;
+      // padding-left: 1rem;
+      grid-column: 2;
+    }
+  }
+
+  &__speech {
+    // font-size: 0.5em;
+    font-family: $sans-serif;
+    font-weight: 500;
+  }
+
+  &__signal {
+    border-top: 0.15rem solid var(--word-signal-color);
+    color: var(--word-signal-color);
+    display: block;
+    font-family: $ext-sans;
+    font-size: 0.75rem;
+    letter-spacing: 0.15rem;
+    padding: 0.5rem 0.75rem;
+    text-transform: uppercase;
+
+    &--avoid {
+      --word-signal-color: #a40000;
+
+      &:before {
+        @include icon__avoid();
+        @include icon__hanging();
+      }
+    }
+
+    &--better {
+      --word-signal-color: green;
+
+      &:before {
+        @include icon__alt();
+        @include icon__hanging();
+      }
+    }
+
+    &--tool {
+      &:before {
+        @include icon__tool();
+        @include icon__hanging();
+      }
+    }
+  }
+}
+
+.definition-content__type {
+  font-family: $con-sans;
+  font-size: 0.85rem;
+  padding-right: 1rem;
+  text-align: right;
+  text-transform: uppercase;
+}
+
+.definition-content__link {
+  border-bottom: darkgrey solid 0.1em;
+  color: black;
+  font-family: $ext-sans;
+  text-decoration: none;
+}
+
+.definition-content__breakdown {
+  border-left: 0.1rem solid lightgrey;
+  font-family: $sans-serif;
+  padding-left: 1rem;
+}

assets/css/structures/_definition-navigation.scss

@@ -0,0 +1,33 @@
+.definition-navigation {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  & > div {
+    flex: 0 1 15rem;
+  }
+
+  @supports (display: grid) {
+    display: grid;
+    grid-gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, 15rem);
+    width: 100%;
+  }
+}
+
+.definition-navigation__sub-headline {
+  color: #333;
+  font-size: 1rem;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.01em;
+  margin-top: 0;
+  word-spacing: 0.01em;
+}
+
+.definition-navigation__nav {
+  flex: 0 0 max-content;
+
+  & li + li {
+    // margin-top: 0.5rem;
+  }
+}

assets/css/structures/_grid.scss

@@ -1,8 +1,3 @@
-:root {
-  --auto-grid-min-size: 17rem;
-  --l-gap: 1rem;
-}
-
 .grid {
   display: grid;
   grid-column-gap: 4rem;