📄 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

* 💅

* 💅

.eleventy.js

@@ -1,5 +1,6 @@
+const definitionPermalink = require('./11ty/helpers/definitionPermalink');
+const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
 const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
-const definitionPermalink = require('./11ty/filters/definitionPermalink');
 
 module.exports = function(config) {
   // Add a filter using the Config API
@@ -68,12 +69,17 @@ module.exports = function(config) {
       const sep = flag.text && info.text ? '—' : '';
       const text = flag.text ? [info.text, flag.text].join(sep) : info.text;
 
-      return `<p class="word__signal word__signal--${info.class}">${text}</p>`;
+      return `<p class="definition-content__signal definition-content__signal--${info.class}">${text}</p>`;
     }
 
-    return '<p class="word__signal"></p>';
+    return '<p class="definition-content__signal"></p>';
   });
 
+  config.addShortcode(
+    'renderDefinitionContentNextEntries',
+    renderDefinitionContentNextEntries
+  );
+
   // NOTE (ovlb): this will not be remembered as the best code i’ve written. if anyone seeing this has a better solution then the following to achieve sub groups of the definitions: i am happy to get rid of it
   config.addCollection('tableOfContent', (collection) => {
     const allItems = collection

.nvmrc

@@ -0,0 +1 @@
+12

11ty/_includes/components/definition-content.njk

@@ -0,0 +1,32 @@
+<section class="definition-content">
+  <section class="u-margin-bottom-double" aria-labelledby="definition-speech">
+    <h2 id="definition-speech" class="visually-hidden">Speech</h2>
+    <p class="definition-content__speech">{{ speech }}</p>
+  </section>
+  <section class="definition-content__content">
+    {{ content | safe }}
+    {# <p>{{ alt_words }}</p> #}
+  </section>
+  {%- if alt_words -%}
+    <section class="definition-content__content">
+      <h2 id="alt-words">Alt Words</h2>
+      <ul class="list-semicolon" aria-labelledby="alt-words">
+        {% for word in alt_words %}
+          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+  {%- if reading -%}
+    <section class="definition-content__content">
+      <h2 id="further-reading">Further Reading</h2>
+      <ul class="list-semicolon" aria-labelledby="further-reading">
+        {% for link in reading %}
+          <li>
+            <a href="{{link.href}}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+</section>

11ty/_includes/components/definition.njk

@@ -1,29 +0,0 @@
-<article id="{{ definition.data.slug }}" class="block__word word">
-  {% definitionFlag definition.data.flag %}
-  <h3 class="word__title">
-    {{ definition.data.title}}
-    <span class="word__speech">{{ definition.data.speech}}</span>
-  </h3>
-  <div class="word__content">
-    {{ definition.templateContent | safe }}
-    {# <p>{{ definition.data.alt_words }}</p> #}
-    {%- if definition.data.alt_words -%}
-      <h4>Alt Words</h4>
-      <ul class="list-semicolon">
-        {% for word in definition.data.alt_words %}
-          <li>{{ word | linkIfExistsInCollection(collections.definedWords) | safe }}</li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {%- if definition.data.reading -%}
-      <h4>Further Reading</h4>
-      <ul class="list-semicolon">
-        {% for link in definition.data.reading %}
-          <li>
-            <a href="{{link.href}}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-  </div>
-</article>

11ty/_includes/components/defintions-list.njk

@@ -1,5 +0,0 @@
-<div class="auto-grid">
-  {% for definition in collections.definedWords %}
-    {% include 'components/definition.njk' %}
-  {% endfor %}
-</div>

11ty/_includes/components/sub-page-header.njk

@@ -0,0 +1,4 @@
+<div id="title">
+  <a href="/">Self-Defined</a>
+  <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+</div>

11ty/_includes/layouts/base.njk

@@ -4,12 +4,28 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>{{ renderData.title or title or metadata.title }}</title>
+    {# Use title with path, or append a space to the page title to avoid collpasing with the meta title #}
-    <meta name="description" content="{{ renderData.description or description or metadata.description }}">
+    {% set pageTitle = titleWithPath or title + ' ' or '' %}
+    <title>{{ pageTitle + metadata.title }}</title>
+    <meta
+      name="description"
+      content="{{ renderData.description or description or metadata.description }}"
+    >
 
     <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
   </head>
   <body>
     {% block content %}{% endblock content %}
+    <footer class="site-footer">
+      <nav aria-label="Complimentary">
+        <ul class="navigation-list">
+          <li>
+            <a href="/documentation/">Documentation</a>
+          </li>
+        </ul>
+      </nav>
+    </footer>
+    {% block pageScript %}
+    {% endblock pageScript %}
   </body>
 </html>

11ty/_includes/layouts/definition.njk

@@ -0,0 +1,19 @@
+{% extends 'layouts/base.njk' %}
+{% set pageType = 'Definition' %}
+{% set titleWithPath = title + ' « Definitions « ' %}
+{% set description = 'The definition of ' + title + ' in Self-Defined, a modern dictionary about us.'%}
+
+{% block content %}
+  <div class="wide-content">
+    {% include 'components/sub-page-header.njk' %}
+    <main>
+      <article class="definition">
+        <header class="definition__header">
+          {% definitionFlag flag %}
+          <h1 class="main-headline" >{{ title }}</h1>
+        </header>
+        {% include 'components/definition-content.njk' %}
+        {% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
+      </article>
+    </main>
+{% endblock %}

11ty/_includes/layouts/documentation.njk

@@ -1,12 +1,10 @@
 {% extends 'layouts/base.njk' %}
 {% set pageType = 'Page' %}
+{% set titleWithPath = title + ' « Documentation « ' %}
 
 {% block content %}
-  <div class="small-left-grid">
+  <div class="article-content">
-    <div id="title">
+    {% include 'components/sub-page-header.njk' %}
-      <a href="/">Self-Defined</a>
-      <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
-    </div>
     <main class="page">
       {%- if parent -%}
         <div>
@@ -16,4 +14,4 @@
       <h1 class="title__thicc" >{{ title }}</h1>
       {{ content | safe }}
     </main>
-{% endblock %}
+  {% endblock %}

11ty/_includes/layouts/index.njk

@@ -1,19 +1,31 @@
 {% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'Home « ' %}
 
 {% block content %}
   <main>
     {{ content | safe }}
     {% include 'components/table-of-content.njk' %}
-    <section>
+
-      <h2>Words</h2>
-      {% include 'components/defintions-list.njk' %}
-    </section>
   </main>
-  <footer class="site-footer">
+
-    <nav aria-label="">
+{% endblock %}
-      <ul class="navigation-list">
+
-        <li><a href="/documentation/">Documentation</a></li>
+
-      </ul>
+{% block pageScript%}
-    </nav>
+<script>
-  </footer>
+  // don't use es6+ here because it will not be transpiled
+  window.addEventListener('DOMContentLoaded', function() {
+    if (location.hash) {
+      var allLinks = Array.from(document.querySelectorAll('.toc__list-item > a'));
+
+      for (var i = 0; i < allLinks.length; i++) {
+        var link = allLinks[i]
+
+        if (link.href.includes(location.hash.replace('#', ''))) {
+          window.location = link.href
+        }
+      }
+    }
+  })
+</script>
 {% endblock %}

11ty/definitions/ableism.md

@@ -9,11 +9,11 @@ a system that places value on people’s bodies and minds based on societally co
 
 — Talia "TL" Lewis
 
-#### Impact
+## Impact
 
 To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
 
-#### Further reading
+## Further reading
 
 - [Longmore Lecture: Context, Clarity & Grounding](https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding)
 - [Ableism 2020: An Updated Definition](https://www.talilalewis.com/blog/ableism-2020-an-updated-definition)

11ty/definitions/barbaric.md

@@ -7,9 +7,9 @@ flag:
 defined: true
 speech: adjective
 reading:
-  - text: "is the word barbarian a slur?"
+  - text: 'is the word barbarian a slur?'
     href: https://seetobehumanityearth.wordpress.com/2015/07/16/is-the-term-barbarian-a-slur/
-  - text: "Barbarian wiki"
+  - text: 'Barbarian wiki'
     href: https://en.wikipedia.org/wiki/Barbarian
 alt_words:
   - cruel
@@ -17,20 +17,21 @@ alt_words:
   - obscene
   - feral
 ---
+
 something which is obscenely cruel; primitive; unsophisticated
 
-#### Issues
+## Issues
 
-Barbarian originates from the Greek word *bárbaros* meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
+Barbarian originates from the Greek word _bárbaros_ meaning "babbler", to denote the "unintelligible sounds" (_"bar bar bar"_) made by foreign speakers.
 Similar words exist in many other languages, for the identical purpose labeling a "strange"/"foreign" person/culture.
 
 In modern day usage, you can notice this rhetoric being employed almost always for the purpose of demonizing "foreign" (more often than not from the global south) cultures - cultures that need to be civilized;
 cultures that need to be colonized to rescue them from themselves. A perfect lingual weapon for warmongers and racists alike. Equally repulsive sibling of "savage".
 
-#### Impact
+## Impact
 
 When you use words, that are in vogue primarily inside circles of bigots, with racist etymologies, it's a wilful act of violence, ignorance and an indication to the vilified and minoritised communities that their history of wounds and abuses are inconsequential to our words.
 
-#### Usage Tip
+## Usage Tip
 
 Avoid words that have obscene etymologies. There is almost always a better alternative: an inclusive and a less hurtful one.

11ty/definitions/biromantic.md

@@ -14,8 +14,8 @@ reading:
 
 of, relating to, or characterised by being romantically attracted to more than one gender.
 
-#### Note
+## Note
 
-Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](#bisexual), [pansexual](#pan-sexual), etc.
+Biromantic does not imply any particular kind of sexual attraction, or sexual attraction at all. A biromantic person may be asexual, homosexual, heterosexual, [bisexual](/definitions/bisexual), [pansexual](/definitions/pan-sexual), etc.
 
-Biromantic does not preclude romantic attraction to [non-binary](#non-binary) or [transgender](#transgender) people.
+Biromantic does not preclude romantic attraction to [non-binary](/definitions/non-binary) or [transgender](/definitions/transgender) people.

11ty/definitions/bisexual.md

@@ -7,10 +7,10 @@ defined: true
 
 of, relating to, or characterised by being sexually attracted to more than one gender.
 
-#### Note
+## Note
 
-Bisexuality does not preclude attraction to [non-binary](#non-binary) or [transgender](#transgender) people.
+Bisexuality does not preclude attraction to [non-binary](/definitions/non-binary) or [transgender](/definitions/transgender) people.
 
-#### Further Reading
+## Further Reading
 
 [Am I Bisexual?](http://www.bisexualindex.org.uk/index.php/AmIBisexual)

11ty/definitions/cisgender.md

@@ -7,4 +7,4 @@ defined: true
 
 of, relating to, or characterised by being a gender that matches the gender they were assigned at birth.
 
-The opposite of [transgender](/#transgender).
+The opposite of [transgender](/definitions/transgender).

11ty/definitions/crazy.md

@@ -27,14 +27,14 @@ alt_words:
 
 mentally deranged; demented; insane.
 
-#### Issues
+## Issues
 
 Crazy is very commonly used as an adjective to embody a vast array of ideas, often not specifically. It is used so frequently that it sometimes is a filler. Crazy can also be used in a derogatory manner for someone with mental or psychiatric disabilities.
 
-#### Impact
+## Impact
 
 By using ableist language, we are perpetuating violence against people who experience mental or psychological disabilities. Using this language perpetuates those systems and language of harm, regardless of our intent.
 
-#### Usage Tip
+## Usage Tip
 
 Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling.

11ty/definitions/definitions.json

@@ -0,0 +1,3 @@
+{
+  "layout": "layouts/definition.njk"
+}

11ty/definitions/english-as-second-language.md

@@ -16,10 +16,10 @@ reading:
 
 the teaching of English to people who speak a different language and who live in a country where English is the main language spoken
 
-#### Issues
+## Issues
 
 Monolinguist, English-only speakers often refer to people who don't speak English natively as "ESL" or say they are learning a "second language". More often than not, this is not true, as many people are multi-lingual with 3 or more languages
 
-#### Impact
+## Impact
 
 It makes false assumptions about English learners, centres English as the "default" or "expected" first language, ignoring that many people learn multiple (>3), non-English languages first.

11ty/definitions/fatphobia.md

@@ -13,11 +13,11 @@ reading:
 
 the fear, hatred, and stigmitasation of fat people.
 
-#### Issues
+## Issues
 
 Fatphobia is the racialised, classist, and ableist tool of oppression that codifies a “ideal” body type that centres a white, Western aesthetic, demands time and resources that people may not have, and attempts to correlate thinness and heathliness—perpetuating white supremacist violence against people of colour, perpetuates classist oppression of people living with limited resources, and the ableist idea of healthiness as an indicator of human value.
 
-#### Impact
+## Impact
 
 A history of being ignored and shamed prevents many fat people from visiting medical professionals even if they have the financial and physical means to do so. Medical professionals hold fatphobic biases and often prescribe weight loss as a default instead of listening to their fat patients' concerns.
 

11ty/definitions/gaslighting.md

@@ -15,7 +15,7 @@ reading:
 
 psychological manipulation tactic used to abuse by instilling doubt in the victim's own thoughts, observations, feelings by denying, misdirecting, and lying to them; originated from the Gaslight play (1933) and film (1944), where a man changes the lights in the house, while denying her observations of the changes.
 
-#### Impact
+## Impact
 
 Gaslighting reinforces systems of power, as gaslighting abusers will tend to be in systematically dominant positions where they are intrinsically believed over their victim (e.g., white person over person of colour, man over woman, abled person over disabled person, parent over child, manager over worker, etc). Gaslighting is an abusive and oppressive behaviour and tactic.
 

11ty/definitions/hysterical.md

@@ -14,23 +14,27 @@ reading:
   - text: Hysteria, Is the Medical Condition Mental, Physical, or Made Up?
     href: https://www.newsweek.com/hysteria-medical-condition-mental-physical-or-made-66277
 ---
+
 feeling or showing uncontrollable outburst of emotion; casually: very funny
 
-#### Issues
+## Issues
-Hysteria originates from the Greek word *hysterikos* or "of the womb." The Greeks believed that hysteria was something that moved through a woman's body and caused ailments.
 
-Hysteria was once an official medical condition that was primarily diagnosed in women. (It has since been disbanded into other disorders, such as conversion and disassociative disorders.) So, as medical professionals believed men did not have uteruses*, medical professionals would not diagnose men with hysteria (even though they were experiencing the same symptoms of conversion disorder).
+Hysteria originates from the Greek word _hysterikos_ or "of the womb." The Greeks believed that hysteria was something that moved through a woman's body and caused ailments.
 
-*Editor's Note: This concept that men cannot have uteruses is reflective of the medical context, not the belief of the editor.
+Hysteria was once an official medical condition that was primarily diagnosed in women. (It has since been disbanded into other disorders, such as conversion and disassociative disorders.) So, as medical professionals believed men did not have uteruses\*, medical professionals would not diagnose men with hysteria (even though they were experiencing the same symptoms of conversion disorder).
+
+\*Editor's Note: This concept that men cannot have uteruses is reflective of the medical context, not the belief of the editor.
+
+## Impact
 
-#### Impact
 Gender-codified and sexist language perpetuates harmful stereotypes that reinforce patriarchical ideas. In the case of hysteria, it perpetuates the false stereotype of women as being unreasonable, irrational, and not in control of their emotions. Harmful stereotypes can cause women to not be believed, to have their experiences invalidated, and be tone-policed.
 
 Defining gender by sexual organs can also perpetuate transphobic and anti-trans definitions, where gender is falsely defined by sexual organs.
 
 Medical conditions believed to be defined by sex and gender are reductive and can lead to misdiagnosis.
 
-#### Alt Words
+## Alt Words
+
 If intending **funny** connotation, try: funny; hilarious; comedic.
 
 If intending **panic** connotation, try: panicked, petrified, startled.

11ty/definitions/minorities.md

@@ -12,12 +12,12 @@ alt_words:
 
 the smaller in number of two groups constituting a whole
 
-#### Issues
+## Issues
 
 Minorities is not always accurate and is vague. As it deals with numbers, the term minorities can often be inaccurate, as is the case when speaking of communities of colour, who often outnumber white communities.
 
 By referring to a group as 'minorities,' it can suggest the group hasn't taken initiative to show up, thereby blaming the oppressed for systemic issues that prevent their participation.
 
-#### Impact
+## Impact
 
 By repeatedly referring to groups as "minorities," they are being infantised to their numerical representation and made to feel minor. The vagueness also abstracts the identify of the marginalised group, making it difficult to address why they are minoritised to begin with.

11ty/definitions/minoritised.md

@@ -13,10 +13,10 @@ reading:
 
 groups resulting from social constructs have grant less power or representation compared to other members or groups in society
 
-#### Benefits
+## Benefits
 
 Minoritised places the emphasis on the power struggle, and on the systemic issues at play. It's also an adjective, which requires you to add "group" or "people" so it's people-first language
 
-#### Impact
+## Impact
 
 It removes the pejorative nature of "minorities".

11ty/definitions/non-binary.md

@@ -9,8 +9,8 @@ of, relating to, or characterised by being any gender that does not fit into the
 
 For example, a non-binary person may have some gender between male and female, have multiple genders, no gender, a culturally-specific gender (e.g., two-spirit).
 
-#### Note
+## Note
 
-Non-binary people may or may not also identify as [transgender](/#transgender).
+Non-binary people may or may not also identify as [transgender](/definitions/transgender).
 
 Although non-binary is commonly used as an umbrella term, just because someone identifies as a term under the umbrella, does not necessarily imply that they identify as non-binary as well. For example, someone may be agender, but not identify with the term "non-binary".

11ty/definitions/obsessive-compulsive-disorder.md

@@ -21,14 +21,14 @@ alt_words:
 
 a mental illness usually embodied by unwanted repeated thoughts (obsession) coupled with repeated behaviour, routine, or action (compulsion)
 
-#### Issues
+## Issues
 
 OCD is commonly misused to highlight personality quirks or fussiness, usually involving a preference for order or cleanliness. Use of 'OCD' as a noun or adjective in this manner diminishes the actual condition, resulting in reductive and over-normalised perception of a someone with these specific mental or psychiatric disabilities.
 
-#### Impact
+## Impact
 
 By conflating arbitrary quirks or behaviours with OCD, we are invalidating OCD as a medical condition and the people who experience it. Generally by using medically appropriative language, we are invalidating the existences of people with OCD, minimising their experiences, perpetuating violence against people who experience mental or psychological disabilities. Using this language perpetuates those systems and language of harm, regardless of our intent.
 
-#### Usage Tip
+## Usage Tip
 
 Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling. In this case, be particularly aware if the behaviour is actually unwanted or uncontrollable.

11ty/definitions/ok-hand.md

@@ -16,17 +16,17 @@ alt_words:
 
 hand gesture where right thumb and right index finger form a circle, remaining fingers fan out; in American Sign Language, gesture means number nine; in diving, gesture indicates “OK” as question or confirmation; gesture is used in an innocuous children's game called “[The Circle Game](https://www.vice.com/en_uk/article/wj8e74/searching-for-the-man-behind-the-circle-game),” where the gesture is held low—if another child looks at it, they get punched.
 
-In 2017, the hand gesture was [appropriated by White Supremacists on 4chan](https://knowyourmeme.com/memes/ok-symbol-%F0%9F%91%8C) to mean White Power (the three fingers forming at 'W' and thumb and index forming the circle of the 'P'). It was framed as a hoax to "own" Leftists through trickery and [gaslighting](#gaslighting).
+In 2017, the hand gesture was [appropriated by White Supremacists on 4chan](https://knowyourmeme.com/memes/ok-symbol-%F0%9F%91%8C) to mean White Power (the three fingers forming at 'W' and thumb and index forming the circle of the 'P'). It was framed as a hoax to "own" Leftists through trickery and [gaslighting](/definitions/gaslighting).
 
 The hand gesture has been used by White Supremacists as a dogwhistle to identify other White Supremacists [at rallies](https://mashable.com/article/milo-yiannopoulos-banned-from-furry-convention/), [in forums](https://www.splcenter.org/hatewatch/2018/09/18/ok-sign-white-power-symbol-or-just-right-wing-troll), and even [at court hearings](https://nypost.com/2019/03/15/suspected-new-zealand-shooter-appears-in-court/). In 2019, the hand gesture was added to the [Anti-Defamation League's list of official symbols of hate](https://www.adl.org/news/press-releases/ok-and-other-alt-right-memes-and-slogans-added-to-adls-hate-symbols-database).
 
-#### Issues
+## Issues
 
 While it can be argued that the symbol's origins and many of its uses do not imply racist connotations, and that the 4chan-ers "framed it as a hoax," it is undeniable that the symbol has evolved and become a gesture used sincerely by white supremacists.
 
 The uncertainty created by the 4chan-ers is a critical part of their strategy. The strategy employs plausible deniability: Because they self-identified it as a hoax, they can fall back on that explanation. Meanwhile, if people begin to adapt the symbol, as they did, it becomes a dogwhistle for White Supremacists. It should be noted that this approach of indoctrinating symbols of hate is one long-documented, and [used for the Swastika as well](https://theconversation.com/how-nazis-twisted-the-swastika-into-a-symbol-of-hate-83020).
 
-#### Impact
+## Impact
 
 The people most vulnerable to the oppressive impact of White Supremacy will never know for certain if the symbol is being used in one of its non-violent manners or if it's being used in its racist violent manners. The oppressed must choose the option that protects them, which is typically erring on the side of caution.
 

11ty/definitions/performative-allyship.md

@@ -17,6 +17,6 @@ reading:
 
 when an individual or group of power/majority/privilege (e.g., white, male, abled, unqueer, etc) loudly profess(es) their actions in the name of 'allyship,' while actively conducting harm to, taking focus away from, and generally being unhelpful towards the group they claim to support, often to receive praise and attention, without taking critical action to dismantle the systems of harm.
 
-#### Impact
+## Impact
 
 Performative allyship detracts from the stories of the oppressed and the impact that oppression has on them in favour of the stories of the oppressors and their intent to help. The cost of performative allyship can also be that the stories of the oppressed people are appropriated, watered down, and inaccurately retold by people who should not be telling those stories.

11ty/definitions/polyamory.md

@@ -14,6 +14,6 @@ reading:
 
 belief that romantic and/or sexual exclusivity is not necessary for a happy, committed relationship; an umbrella term for various types of relationships (coded as romantic or quasi-romantic, sexual or non-sexual) where all partners involved consent to ethical non-monogamy, such as polycules, throuples, group marriages, etc.
 
-#### Note
+## Note
 
 One can be polyamorous despite currently being single or in a monogamous relationship.

11ty/definitions/spaz.md

@@ -15,14 +15,14 @@ alt_words:
 
 irrationally nervous person; hyperactive
 
-#### Issues
+## Issues
 
 The origin of the word “Spaz” is a shortened version of “Spastic.” Spastic refers to an alteration in muscle tone affected by the medical condition spasticity, which is seen in spastic diplegia and many other forms of cerebral palsy.
 
-#### Impact
+## Impact
 
 By using ableist language, we are perpetuating violence against people who experience mental or psychological disabilities. Using this language perpetuates those systems and language of harm, regardless of our intent.
 
-#### Usage Tip
+## Usage Tip
 
 Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling.

11ty/definitions/transgender.md

@@ -7,4 +7,4 @@ defined: true
 
 of, relating to, or characterised by a gender that does not match the gender they were assigned at birth.
 
-The opposite of [cisgender](/#cisgender).
+The opposite of [cisgender](/definitions/cisgender).

11ty/definitions/white-fragility.md

@@ -15,6 +15,6 @@ reading:
 
 the tendency for dominant white culture to respond to racism with defensive, dismissive, and angry responses; “a state in which even a minimum amount of racial stress becomes intolerable, triggering a range of defensive moves.” (Robin DiAngelo).
 
-#### Impact
+## Impact
 
 White fragility detracts from critical conversations about the systemic oppressors at play. The cost of white fragility is that it centres the feelings of white people while ignoring and invalidating the systemic harm conducted towards people of colour. White fragility also prevents white people from doing anti-racist work to unpack their socially internalised racism.

11ty/definitions/women-and-people-of-colour.md

@@ -15,10 +15,10 @@ alt_words:
 
 often used as a phrase to encompass “non-white, non-men,” seeking to provide solidarity for these two groups
 
-#### Issues
+## Issues
 
 What happens to women of colour? As a woman of colour, I am split between both women and people of colour.
 
-#### Impact
+## Impact
 
-As such, it elicits feelings of erasure for women of colour. It also neglects [non-binary](/#non-binary) individuals.
+As such, it elicits feelings of erasure for women of colour. It also neglects [non-binary](/definitions/non-binary) individuals.

11ty/documentation/documentation.json

@@ -1,3 +1,3 @@
 {
-  "layout": "layouts/page.njk"
+  "layout": "layouts/documentation.njk"
 }

11ty/documentation/examples/examples.json

@@ -1,3 +1,3 @@
 {
-  "layout": "layouts/page.njk"
+  "layout": "layouts/documentation.njk"
 }

11ty/documentation/examples/flagged-word.md

@@ -41,15 +41,15 @@ alt_words:
 
 mentally deranged; demented; insane.
 
-#### Issues
+## Issues
 
 Crazy is very commonly used as an adjective to embody a vast array of ideas, often not specifically. It is used so frequently that it sometimes is a filler. Crazy can also be used in a derogatory manner for someone with mental or psychiatric disabilities.
 
-#### Impact
+## Impact
 
 By using ableist language, we are perpetuating violence against people who experience mental or psychological disabilities. Using this language perpetuates those systems and language of harm, regardless of our intent.
 
-#### Usage Tip
+## Usage Tip
 
 Be more specific. Typically we can find an alternate definition by simply reflecting on what emotion we're really feeling.
 ```
@@ -80,7 +80,7 @@ reading:
 
 when an individual or group of power/majority/privilege (e.g., white, male, abled, unqueer, etc) loudly profess(es) their actions in the name of 'allyship,' while actively conducting harm to, taking focus away from, and generally being unhelpful towards the group they claim to support, often to receive praise and attention, without taking critical action to dismantle the systems of harm.
 
-#### Impact
+## Impact
 
 Performative allyship detracts from the stories of the oppressed and the impact that oppression has on them in favour of the stories of the oppressors and their intent to help. The cost of performative allyship can also be that the stories of the oppressed people are appropriated, watered down, and inaccurately retold by people who should not be telling those stories.
 ```

11ty/helpers/__tests__/definitionPermalink.spec.js

@@ -0,0 +1,7 @@
+import test from 'ava';
+
+import definitionPermalink from '../definitionPermalink';
+
+test('constructs correct detail link', (t) => {
+  t.is(definitionPermalink('test-slug'), '/definitions/test-slug/');
+});

11ty/helpers/__tests__/findDefinitionContentNextItems.spec.js

@@ -0,0 +1,122 @@
+import test from 'ava';
+
+import testCollection from '../../../_util/_mocks/testCollection.json';
+
+import findDefinitionContentNextItems from '../findDefinitionContentNextItems';
+
+test('finds no previous previous elements for the first item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[0].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, []);
+});
+
+test('finds one previous element for the second item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[1].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [testCollection[0].data]);
+});
+
+test('finds two previous elements for the third item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[2].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [testCollection[0].data, testCollection[1].data]);
+});
+
+test('finds three previous elements for the fourth item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[3].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [
+    testCollection[0].data,
+    testCollection[1].data,
+    testCollection[2].data
+  ]);
+});
+
+test('finds three previous elements for the eigth item', (t) => {
+  const { previous } = findDefinitionContentNextItems(
+    testCollection[7].data,
+    testCollection
+  );
+
+  t.deepEqual(previous, [
+    testCollection[4].data,
+    testCollection[5].data,
+    testCollection[6].data
+  ]);
+});
+
+test('finds three next elements for the eigth item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[7].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[8].data,
+    testCollection[9].data,
+    testCollection[10].data
+  ]);
+});
+
+test('finds three next elements for the fourth to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 4].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[testCollection.length - 3].data,
+    testCollection[testCollection.length - 2].data,
+    testCollection[testCollection.length - 1].data
+  ]);
+});
+
+test('finds two next elements for the third to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 3].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [
+    testCollection[testCollection.length - 2].data,
+    testCollection[testCollection.length - 1].data
+  ]);
+});
+
+test('finds one next elements for the second to last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 2].data,
+    testCollection
+  );
+
+  t.deepEqual(next, [testCollection[testCollection.length - 1].data]);
+});
+
+test('finds no next elements for the last item', (t) => {
+  const { next } = findDefinitionContentNextItems(
+    testCollection[testCollection.length - 1].data,
+    testCollection
+  );
+
+  t.deepEqual(next, []);
+});
+
+test('throws if no slug has been given', (t) => {
+  const error = t.throws(() =>
+    findDefinitionContentNextItems({ test: 'no-slug' })
+  );
+
+  t.is(error.message, 'E_NO_SLUG');
+});

11ty/helpers/definitionPermalink.js

@@ -0,0 +1,3 @@
+module.exports = function(slug) {
+  return `/definitions/${slug}/`;
+};

11ty/helpers/findDefinitionContentNextItems.js

@@ -0,0 +1,31 @@
+module.exports = function findDefinitionContentNextItems({ slug }, collection) {
+  if (!slug) throw new Error('E_NO_SLUG');
+
+  let previous = [];
+  let next = [];
+
+  const flattenedCollection = collection.map((d) => d.data);
+  const index = flattenedCollection.findIndex((def) => def.slug === slug);
+
+  // make this a no-op if we are at the beginning
+  if (index > 0) {
+    // a negative start index would start searching at the end of the array
+    // stop at zero to avoid this
+    const start = Math.max(0, index - 3);
+    // never get more than three items
+    const end = start + Math.min(index, 3);
+
+    previous = flattenedCollection.slice(start, end);
+  }
+
+  // make this a no-op if we are at the end
+  if (index < collection.length - 1) {
+    const start = index + 1;
+    // end overflow doesn't matter too much, cap it still because it feels right
+    const end = Math.min(start + 3, collection.length);
+
+    next = flattenedCollection.slice(start, end);
+  }
+
+  return { previous, next };
+};

11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js

@@ -0,0 +1,67 @@
+import test from 'ava';
+
+import testCollection from '../../../_util/_mocks/testCollection.json';
+
+import renderDefinitionContentNextEntries from '../renderDefinitionContentNextEntries';
+
+test('first item', (t) => {
+  const { title, slug } = testCollection[0].data;
+
+  t.is(
+    renderDefinitionContentNextEntries(title, slug, testCollection),
+    `<section class="definition-navigation definition__further-definitions_nav">
+    <h2 class="visually-hidden">Browse</h2>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
+        </nav>
+    </div>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"><ul class="definition-navigation__list"><li><a href=/definitions/ableism/>Ableism</a></li><li><a href=/definitions/barbaric/>Barbaric</a></li><li><a href=/definitions/biromantic/>Biromantic</a></li></ul></nav>
+    </div>
+    </section>`
+  );
+});
+
+test('last item', (t) => {
+  const { title, slug } = testCollection[testCollection.length - 1].data;
+  t.is(
+    renderDefinitionContentNextEntries(title, slug, testCollection),
+    `<section class="definition-navigation definition__further-definitions_nav">
+    <h2 class="visually-hidden">Browse</h2>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
+        <ul class="definition-navigation__list"><li><a href=/definitions/transgender/>Transgender</a></li><li><a href=/definitions/unreal/>unreal</a></li><li><a href=/definitions/white-fragility/>White Fragility</a></li></ul></nav>
+    </div>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"></nav>
+    </div>
+    </section>`
+  );
+});
+
+test('throws if no title has been passed', (t) => {
+  const error = t.throws(() => {
+    renderDefinitionContentNextEntries();
+  });
+
+  t.is(error.message, 'E_NO_TITLE');
+});
+
+test('throws if no slug has been passed', (t) => {
+  const error = t.throws(() => {
+    renderDefinitionContentNextEntries('title');
+  });
+
+  t.is(error.message, 'E_NO_SLUG');
+});
+
+test('throws if no collection has been passed', (t) => {
+  const error = t.throws(() => {
+    renderDefinitionContentNextEntries(
+      testCollection[0].data.title,
+      testCollection[0].data.slug
+    );
+  });
+
+  t.is(error.message, 'E_NO_COLLECTION');
+});

11ty/shortcodes/renderDefinitionContentNextEntries.js

@@ -0,0 +1,42 @@
+const definitionPermalink = require('../helpers/definitionPermalink');
+const findDefinitionContentNextItems = require('../helpers/findDefinitionContentNextItems');
+
+const makeListItem = (item) =>
+  `<li><a href=${definitionPermalink(item.slug)}>${item.title}</a></li>`;
+
+module.exports = function definitionContentNextEntries(
+  title,
+  slug,
+  collection
+) {
+  if (!title) throw new Error('E_NO_TITLE');
+  if (!slug) throw new Error('E_NO_SLUG');
+  if (!collection) throw new Error('E_NO_COLLECTION');
+
+  const entry = { title, slug };
+
+  const { next, previous } = findDefinitionContentNextItems(entry, collection);
+
+  return `<section class="definition-navigation definition__further-definitions_nav">
+    <h2 class="visually-hidden">Browse</h2>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
+        ${
+          previous.length
+            ? `<ul class="definition-navigation__list">${previous
+                .map((item) => makeListItem(item))
+                .join('')}</ul>`
+            : ''
+        }</nav>
+    </div>
+    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next">${
+        next.length
+          ? `<ul class="definition-navigation__list">${next
+              .map((item) => makeListItem(item))
+              .join('')}</ul>`
+          : ''
+      }</nav>
+    </div>
+    </section>`;
+};

_util/_mocks/testCollection.json

@@ -0,0 +1,44 @@
+[
+  { "data": { "slug": "ok-hand", "title": "👌 [ok-hand]" } },
+  { "data": { "slug": "ableism", "title": "Ableism" } },
+  { "data": { "slug": "barbaric", "title": "Barbaric" } },
+  { "data": { "slug": "biromantic", "title": "Biromantic" } },
+  { "data": { "slug": "bisexual", "title": "Bisexual" } },
+  { "data": { "slug": "cisgender", "title": "Cisgender" } },
+  { "data": { "slug": "crazy", "title": "crazy" } },
+  {
+    "data": {
+      "slug": "english-as-second-language",
+      "title": "English as Second Language (ESL)"
+    }
+  },
+  { "data": { "slug": "fatphobia", "title": "Fatphobia" } },
+  { "data": { "slug": "gaslighting", "title": "Gaslighting" } },
+  { "data": { "slug": "minorities", "title": "minorities" } },
+  { "data": { "slug": "minoritised", "title": "minoritised" } },
+  { "data": { "slug": "non-binary", "title": "Non-binary" } },
+  {
+    "data": {
+      "slug": "obsessive-compulsive-disorder",
+      "title": "Obsessive Compulsive Disorder (OCD)"
+    }
+  },
+  { "data": { "slug": "pan-sexual", "title": "Pansexual" } },
+  {
+    "data": {
+      "slug": "performative-allyship",
+      "title": "performative allyship"
+    }
+  },
+  { "data": { "slug": "polyamory", "title": "Polyamory" } },
+  { "data": { "slug": "spaz", "title": "Spaz" } },
+  { "data": { "slug": "transgender", "title": "Transgender" } },
+  { "data": { "slug": "unreal", "title": "unreal" } },
+  { "data": { "slug": "white-fragility", "title": "White Fragility" } },
+  {
+    "data": {
+      "slug": "women-and-people-of-colour",
+      "title": "women and people of colour"
+    }
+  }
+]

assets/css/base.scss

@@ -1,45 +1,32 @@
 @charset 'UTF-8';
-@import '~prism-themes/themes/prism-a11y-dark';
 
 // 1. Configuration and helpers
-@import
+@import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
-  'abstracts/variables',
-  'abstracts/functions',
-  'abstracts/mixins',
   'abstracts/universal-selector';
 
 // 2. Vendors
 // @import
-  // 'vendors/normalize';
+// 'vendors/normalize';
 
 // 3. Base stuff
-@import
+@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
-  'base/custom-properties',
+  'base/typography', './base/a', 'base/helpers';
-  'base/fonts',
-  'base/base',
-  'base/typography',
-  'base/helpers';
 
 // 4. Layout-related sections
-@import
+@import 'structures/header', 'structures/footer', 'structures/grid',
-  'structures/header',
+  'structures/multi-column', 'structures/table-of-content',
-  'structures/footer',
+  './structures/definition-content', './structures/definition-navigation';
-  'structures/grid',
-  'structures/multi-column',
-  'structures/table-of-content';
 
 // 5. Components
-@import
+@import 'components/word', 'components/lists', 'components/definitions',
-  'components/word',
-  'components/lists',
-  'components/definitions',
   'components/flag';
 
+// 5.1 Code Highlighting
+@import '~prism-themes/themes/prism-a11y-dark';
+
 // 6. Page-specific styles
-// @import
+@import './layouts/pages';
-//   'pages/home';
 
 // 7. Themes
 // @import
 //   'themes/default';
-

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 {
+.u-margin-bottom-double {
-  font-style: italic;
+  margin-bottom: 2rem;
 }
 
-.small {
+.style__italics {
-  font-size: 0.75em;
+  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;
+}

assets/css/components/_flag.scss

@@ -4,8 +4,8 @@
   display: inline-block;
   font-size: 0.9rem;
   font-weight: bold;
+  margin: 0.5rem 0.75rem 0.25rem 0;
   padding: 0.45rem 0.65rem;
-  margin: 0.50rem 0.75rem 0.25rem 0;
   text-transform: lowercase;
 
   &:before {

assets/css/components/_lists.scss

@@ -1,9 +1,9 @@
-  ol {
+ol {
   margin: 0;
   padding: 0 0 0 1em;
-  }
+}
 
-  li {
+li {
   list-style: none;
   padding-bottom: 0.5em;
 
@@ -19,7 +19,7 @@
     content: '\21B3';
     padding-right: pxToRem(5);
   }
-  }
+}
 
 .list-semicolon {
   list-style: none;
@@ -34,4 +34,3 @@
     }
   }
 }
-

assets/css/layouts/_pages.scss

@@ -0,0 +1,38 @@
+.page {
+  align-items: start;
+  display: grid;
+  grid-template-columns: 1fr;
+
+  & > * {
+    grid-column: 1;
+  }
+}
+
+.article-content {
+  display: grid;
+  grid-gap: 1rem;
+
+  @media (min-width: 800px) {
+    grid-template-columns: 10rem 45rem;
+  }
+}
+
+.wide-content {
+  @media (min-width: 800px) {
+    display: grid;
+    grid-gap: 5rem;
+    grid-template-columns: 10rem 1fr;
+  }
+}
+
+.definition {
+  max-width: 47rem;
+}
+
+.definition__further-definitions_nav {
+  margin-top: 3rem;
+}
+
+.definition__header {
+  font-family: orpheuspro, Palatino, Times, serif;
+}

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;

assets/css/utilities/_spacing.scss

@@ -1,7 +0,0 @@
-.u-no-padding-left {
-  padding-left: 0 !important;
-}
-
-.u-margin-bottom-double {
-  margin-bottom: 2rem !important;
-}

bin/create-definitions

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-require = require('esm')(module /*, options*/);
-
-require('../_temp/create-empty-definitions').createDefinitions()

netlify.toml

@@ -10,3 +10,10 @@
 
   # Default build command.
   command = "npm run build"
+
+[[redirects]]
+  from = "/#ok-hand"
+  to = "/definitions/ok-hand/"
+  status = 301
+  force = true
+  headers = {X-From = "Netlify"}

package.json

@@ -55,7 +55,7 @@
     "prism-themes": "^1.3.0"
   },
   "devDependencies": {
-    "ava": "^3.3.0",
+    "ava": "^3.5.0",
     "concurrently": "^5.0.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",