📄 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 * 💅 * 💅
2025-10-30 21:58:32 +00:00 · 2020-03-09 23:47:06 +01:00
parent 6050307a78
commit bd88c18fd0
67 changed files with 1155 additions and 433 deletions
--- a/assets/css/structures/_definition-content.scss
+++ b/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;
+}