selfdefined · kkemple · May 20, 2022 · May 20, 2022 · May 20, 2022 · May 20, 2022
diff --git a/11ty/_includes/components/base/site-footer.njk b/11ty/_includes/components/base/site-footer.njk
@@ -1,12 +1,6 @@
 <footer class="site-footer">
   <nav aria-label="Complimentary">
     <ul class="navigation-list">
-      <li>
-        <a href="/documentation/">Documentation</a>
-      </li>
-      <li>
-        <a href="/content-warning-guidelines/">Content Warning Guidelines</a>
-      </li>
       <li>
         <a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
       </li>

diff --git a/11ty/_includes/components/base/site-header.njk b/11ty/_includes/components/base/site-header.njk
@@ -0,0 +1,18 @@
+<header class="site-header">
+  <h1 class="site-header__title" id="title">
+    <a href="/">Self-Defined</a>
+  </h1>
+  <nav aria-label="Main">
+    <ul class="navigation-list">
+      <li>
+        <a href="/dictionary/">Dictionary</a>
+      </li>
+      <li>
+        <a href="/about">About</a>
+      </li>
+      <li>
+        <a href="/contribute">Contribute</a>
+      </li>
+    </ul>
+  <nav>
+</header>
diff --git a/11ty/_includes/layouts/about.njk b/11ty/_includes/layouts/about.njk
@@ -0,0 +1,9 @@
+{% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'About « ' %}
+
+{% block content %}
+  <main>
+    {{ content | safe }}
+  </main>
+
+{% endblock %}
diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
@@ -58,6 +58,7 @@
         document.documentElement.removeAttribute('data-user-theme');
       }
     </script>
+    {% include 'components/base/site-header.njk' %}
     {% block content %}{% endblock content %}
     {% include 'components/base/site-footer.njk' %}
     {% block pageScript %}

diff --git a/11ty/_includes/layouts/documentation.njk → 11ty/_includes/layouts/contribute.njk b/11ty/_includes/layouts/documentation.njk → 11ty/_includes/layouts/contribute.njk
@@ -1,13 +1,12 @@
 {% extends 'layouts/base.njk' %}
 {% set pageType = 'Page' %}
-{% set titleWithPath = title + ' « Documentation « ' %}
+{% set titleWithPath = title + ' « Contribute « ' %}
 {% block pageStyles %}
   {# Code highlighting #}
   <link rel="stylesheet" href="https://unpkg.com/prism-themes@^1.3/themes/prism-a11y-dark.css"/>
 {% endblock %}
 {% block content %}
   <div class="article-content">
-    {% include 'components/sub-page-header.njk' %}
     <main class="page">
       {%- if parent -%}
         <div>

diff --git a/11ty/_includes/layouts/definition.njk b/11ty/_includes/layouts/definition.njk
@@ -4,22 +4,20 @@
 {% 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>
-          <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>
-        </header>
-        {% include 'components/content-warning-flag.njk' %}
-        {% include 'components/definition-content.njk' %}
-        {% include 'components/alertbox.njk' %}
-        {% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
-      </article>
-    </main>
+  <main>
+    <article class="definition">
+      <header class="definition__header">
+        {% definitionFlag flag %}
+        <h1 class="main-headline" >{{ title }}</h1>
+        <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>
+      </header>
+      {% include 'components/content-warning-flag.njk' %}
+      {% include 'components/definition-content.njk' %}
+      {% include 'components/alertbox.njk' %}
+      {% renderDefinitionContentNextEntries title, slug, collections.definedWords %}
+    </article>
+  </main>
 {% endblock %}
diff --git a/11ty/_includes/layouts/dictionary.njk b/11ty/_includes/layouts/dictionary.njk
@@ -0,0 +1,30 @@
+{% extends 'layouts/base.njk' %}
+{% set titleWithPath = 'Dictionary « ' %}
+
+{% block content %}
+  <main>
+    {{ content | safe }}
+    {% include 'components/table-of-content.njk' %}
+
+  </main>
+{% endblock %}
+
+
+{% block pageScript%}
+<script>
+  // 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 %}
diff --git a/11ty/_includes/layouts/index.njk b/11ty/_includes/layouts/index.njk
@@ -4,28 +4,6 @@
 {% block content %}
   <main>
     {{ content | safe }}
-    {% include 'components/table-of-content.njk' %}
-
   </main>
 
 {% endblock %}
-
-
-{% block pageScript%}
-<script>
-  // 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 %}
diff --git a/11ty/about.njk b/11ty/about.njk
@@ -0,0 +1,23 @@
+---
+layout: layouts/about.njk
+---
+
+<section>
+  <p class="introduction__body">A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+  <div>
+    <p class="summary">
+      Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.
+    </p>
+    <p>
+      With the foundation of vocabulary, we can begin to understand lived experiences of people different than us. Words can provide us with a sense of identity and allow us to find kinship through common experiences.
+    </p>
+  </div>
+  <div class="box">
+    <h2 class="sub-headline">Ways to help</h2>
+    <ol class="list">
+      <li>Submit words and definitions or contribute to our code base through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferrer">pull requests</a> or <a href="https://github.com/tatianamac/selfdefined/issues" rel="noreferrer">issues</a>. Start with our <a href="https://github.com/selfdefined/web-app/blob/prod/CONTRIBUTING.md" rel="noreferrer">contributing guidelines</a> and <a href="/documentation/">documentation</a>.</li>
+      <li>Sponsor this work through <a href="https://opencollective.com/selfdefined">Open Collective</a> or <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>
+      <li>Follow us on Twitter <a href="https://www.twitter.com/selfdefinedapp">@SelfDefinedApp</a>.</li>
+    </ol>
+  </div>
+</section>
diff --git a/11ty/content-warning-guidelines/content-warning-guidelines.json b/11ty/content-warning-guidelines/content-warning-guidelines.json
@@ -1,3 +1,3 @@
 {
-  "layout": "layouts/documentation.njk"
+  "layout": "layouts/contribute.njk"
 }
diff --git a/11ty/contribute/contribute.json b/11ty/contribute/contribute.json
@@ -0,0 +1,3 @@
+{
+  "layout": "layouts/contribute.njk"
+}
diff --git a/11ty/documentation/development.md → 11ty/contribute/development.md b/11ty/documentation/development.md → 11ty/contribute/development.md
@@ -1,8 +1,8 @@
 ---
 title: Development & Build
 parent:
-  title: Documentation
-  href: '/documentation'
+  title: Contribute
+  href: '/contribute'
 ---
 
 This guide will walk you through the current state of the development config. Things get a bit technical here. 🤖

diff --git a/11ty/documentation/examples/basic.md → 11ty/contribute/examples/basic.md b/11ty/documentation/examples/basic.md → 11ty/contribute/examples/basic.md
@@ -2,7 +2,7 @@
 title: Basic Definition
 parent:
   title: Examples
-  href: '/documentation/examples'
+  href: '/contribute/examples'
 ---
 
 This example is the very basic variant. It is not very involved, but gets its job done.

diff --git a/11ty/contribute/examples/examples.json b/11ty/contribute/examples/examples.json
@@ -0,0 +1,3 @@
+{
+  "layout": "layouts/contribute.njk"
+}
diff --git a/11ty/documentation/examples/flagged-word.md → 11ty/contribute/examples/flagged-word.md b/11ty/documentation/examples/flagged-word.md → 11ty/contribute/examples/flagged-word.md
@@ -2,7 +2,7 @@
 title: Flagged Word
 parent:
   title: Examples
-  href: '/documentation/examples'
+  href: '/contribute/examples'
 ---
 
 As explained in the [Front Matter documentation](/documentation/front-matter/#flag) we can use different flags which inform readers at a glance how this word is used. Here are some examples.

diff --git a/11ty/documentation/examples/index.md → 11ty/contribute/examples/index.md b/11ty/documentation/examples/index.md → 11ty/contribute/examples/index.md
@@ -1,8 +1,8 @@
 ---
 title: Definition Examples
 parent:
-  title: Documentation
-  href: '/documentation'
+  title: Contribute
+  href: '/contribute'
 ---
 
 Below are links to grab-and-go examples of various common use cases.

diff --git a/...umentation/frequently-asked-questions.njk → ...contribute/frequently-asked-questions.njk b/...umentation/frequently-asked-questions.njk → ...contribute/frequently-asked-questions.njk
@@ -1,8 +1,8 @@
 ---
 title: FAQs
 parent:
-  title: Documentation
-  href: '/documentation'
+  title: Contribute
+  href: '/contribute'
 ---
 
 <p>Answers to frequently asked questions.</p>

diff --git a/11ty/documentation/front-matter.md → 11ty/contribute/front-matter.md b/11ty/documentation/front-matter.md → 11ty/contribute/front-matter.md
@@ -1,15 +1,15 @@
 ---
 title: Front Matter
 parent:
-  title: Documentation
-  href: '/documentation'
+  title: Contribute
+  href: '/contribute'
 ---
 
 We use Front Matter for a range of things. Of course, we provide basic information through it. But also more advanced stuff (technical term) such as sub terms for items in the table of content or further reading links for the definition.
 
 This page will tell you all you need to know.
 
-Note: We also maintain a list of annotated, complete example definitions, which you can grab and go. They are listed on the [Examples documentation page](/documentation/examples).
+Note: We also maintain a list of annotated, complete example definitions, which you can grab and go. They are listed on the [Examples documentation page](/contribute/examples).
 
 ## Title
 
@@ -55,9 +55,9 @@ defined: true
 
 ## Excerpt
 
-| Key     | Type    | required |
-| ------- | ------- | -------- |
-| excerpt | String  | true     |
+| Key     | Type   | required |
+| ------- | ------ | -------- |
+| excerpt | String | true     |
 
 An abbreviated version of the definition that will appear in social media previews. In the social preview, the excerpt will be prefaced with the flag level.
 

diff --git a/11ty/contribute/index.md b/11ty/contribute/index.md
@@ -0,0 +1,9 @@
+---
+title: Contribute
+---
+
+- [Development & Build](/contribute/development/): Notes for developing the site
+- [Front Matter](/contribute/front-matter/): Configuration possibilities through front matter
+- [Examples](/contribute/examples/): Grab-and-go definition examples
+- [FAQs](/contribute/frequently-asked-questions): Answers to frequently asked questions
+- [Content Warning Guidelines](/content-warning-guidelines): Guidelines for using content and trigger warnings
diff --git a/11ty/dictionary.njk b/11ty/dictionary.njk
@@ -0,0 +1,9 @@
+---
+layout: layouts/dictionary.njk
+---
+
+<div>
+  <p class="summary">
+    Should provide high-level instructions for using the dictionary.
+  </p>
+</div>
diff --git a/11ty/documentation/documentation.json b/11ty/documentation/documentation.json
diff --git a/11ty/documentation/examples/examples.json b/11ty/documentation/examples/examples.json
diff --git a/11ty/documentation/index.md b/11ty/documentation/index.md
diff --git a/11ty/index.njk b/11ty/index.njk
@@ -2,25 +2,6 @@
 layout: layouts/index.njk
 ---
 
-<header class="auto-grid introduction">
-  <h1 class="introduction__title thicc-headline" id="title">
-    Self-Defined
-  </h1>
-  <p class="introduction__body">A modern dictionary about us.<br>We define our words, but they don't define us.</p>
-  <div>
-    <p class="summary">
-      Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.
-    </p>
-    <p>
-      With the foundation of vocabulary, we can begin to understand lived experiences of people different than us. Words can provide us with a sense of identity and allow us to find kinship through common experiences.
-    </p>
-  </div>
-  <div class="box">
-    <h2 class="sub-headline">Ways to help</h2>
-    <ol class="list">
-      <li>Submit words and definitions or contribute to our code base through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferrer">pull requests</a> or <a href="https://github.com/tatianamac/selfdefined/issues" rel="noreferrer">issues</a>. Start with our <a href="https://github.com/selfdefined/web-app/blob/prod/CONTRIBUTING.md" rel="noreferrer">contributing guidelines</a> and <a href="/documentation/">documentation</a>.</li>
-      <li>Sponsor this work through <a href="https://opencollective.com/selfdefined">Open Collective</a> or <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>
-      <li>Follow us on Twitter <a href="https://www.twitter.com/selfdefinedapp">@SelfDefinedApp</a>.</li>
-    </ol>
-  </div>
-</header>
+<section class="slogan">
+  <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+</section>
diff --git a/assets/css/layouts/_pages.scss b/assets/css/layouts/_pages.scss
@@ -8,15 +8,6 @@
   }
 }
 
-.article-content {
-  display: grid;
-  grid-gap: 1rem;
-
-  @media (min-width: 800px) {
-    grid-template-columns: 10rem 45rem;
-  }
-}
-
 .wide-content {
   @media (min-width: 800px) {
     display: grid;
@@ -26,6 +17,7 @@
 }
 
 .definition {
+  margin: auto;
   max-width: 47rem;
 }
 

diff --git a/assets/css/structures/_definition-content.scss b/assets/css/structures/_definition-content.scss
@@ -18,17 +18,6 @@
       margin-top: 2rem;
     }
 
-    @supports (display: grid) {
-      // align-items: flex-start;
-      display: grid;
-      grid-gap: 1rem;
-      grid-template-columns: 1fr 4fr;
-
-      & > * {
-        margin: 0 !important;
-      }
-    }
-
     & > p,
     & > ul {
       font-family: $sans-serif;