From 8307168459c4652a63c84f1e2368aca68f3c1f84 Mon Sep 17 00:00:00 2001
From: Oscar <o@ovl.design>
Date: Tue, 12 Nov 2019 20:46:38 +0100
Subject: [PATCH] feat(11ty): apply styles to markdown output

---
 11ty/_includes/components/definition.njk | 22 ++++++------
 _site/scss/base.scss                     | 43 +++++++++++++++++++++---
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/11ty/_includes/components/definition.njk b/11ty/_includes/components/definition.njk
index 18c1daea..b02c14e7 100644
--- a/11ty/_includes/components/definition.njk
+++ b/11ty/_includes/components/definition.njk
@@ -3,14 +3,16 @@
     {{ definition.data.title}}
     <span class="word__speech">{{ definition.data.speech}}</span>
   </h3>
-  {{ 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 }}</li>
-      {% endfor %}
-    </ul>
-  {% endif %}
+  <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 }}</li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+  </div>
 </article>
diff --git a/_site/scss/base.scss b/_site/scss/base.scss
index b3d9e1b9..ca559617 100644
--- a/_site/scss/base.scss
+++ b/_site/scss/base.scss
@@ -185,10 +185,45 @@ p {
     margin: 0;
   }
 
-  & > p:first-of-type,
-  &__definition {
-    font-family: $sans-serif;
-    font-size: 1.5rem;
+  &__content {
+    align-items: stretch;
+
+    @supports (display: grid) {
+      // align-items: flex-start;
+      display: grid;
+      grid-template-columns: 1fr 4fr;
+      grid-gap: 1rem;
+
+      & > * {
+        margin: 0 !important;
+      }
+    }
+
+    & > p {
+      grid-column: 1 / -1;
+      font-family: $sans-serif;
+      font-size: 1.5rem;
+    }
+
+    & h4 {
+      grid-column: 1;
+      font-family: $con-sans;
+      font-size: 0.85rem;
+      flex: 0 1 auto;
+      text-transform: uppercase;
+
+      @supports (display: grid) {
+        text-align: right;
+      }
+    }
+
+    & h4 ~ p,
+    & h4 ~ ul {
+      border-left: 0.1rem solid lightgrey;
+      padding-left: 1rem;
+      grid-column: 2;
+      font-size: inherit;
+    }
   }
 
   &__speech {