match landing styles to globals

.eleventy.js

@@ -4,8 +4,8 @@ const { DateTime } = require("luxon");
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
-  eleventyConfig.addFilter("postDate", (dateObj) => {
+  eleventyConfig.addFilter("formatDate", (dateObj) => {
-    return DateTime.fromJSDate(dateObj).toFormat("y'-'LL'-'dd' at 'T");
+    return DateTime.fromJSDate(dateObj).toFormat("y'-'LL'-'dd");
   });
 
   eleventyConfig.addPassthroughCopy("./src/css/**/*.css");
@@ -13,10 +13,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("./src/img");
   eleventyConfig.addWatchTarget("./src/css");
 
-  eleventyConfig.addShortcode("sigil", function (name, label) {
-    return `<h3 class="sigil--${name}">${label}</h3>`;
-  });
-
   return {
     dir: {
       input: "src",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gils-nexus",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {

src/_includes/partials/footer.njk

@@ -1,5 +1,6 @@
-<footer class="footer-main">
+<footer class="footer-main"><p>
   Made with <a href="https://www.11ty.dev/">11ty</a>.
-  {% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %}
+  {% if page.date %}<i>
-  LOCALHOST
+    Last updated on <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.
-</footer>
+  </i>{% endif %}
+</p></footer>

src/_includes/partials/header.njk

@@ -1,4 +1,4 @@
-<header class="header_main">
+<header class="banner">
   <a class="logo" href="/main/">{{ meta.siteName }}</a>
   <nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav>
 </header>

src/css/global.css

@@ -102,6 +102,9 @@ body {
 main,
 article {
   font-size: 1rem;
+  word-wrap: break-word;
+  line-height: 1.5;
+  padding: 0 1.5em;
 }
 main.page,
 article.page {
@@ -111,7 +114,6 @@ article.page {
   background-color: rgb(255, 252, 240);
   color: #802659;
   box-shadow: 0 8px rgb(52, 51, 49);
-  padding: 1em;
 }
 @media screen and (min-width: 600px) {
   main,
@@ -122,17 +124,52 @@ article.page {
     box-shadow: 8px 8px rgb(52, 51, 49);
   }
 }
-main ol,
+main p,
+main blockquote,
 main ul,
+main ol,
+main dl,
+main table,
+main pre,
+article p,
+article blockquote,
+article ul,
 article ol,
-article ul {
+article dl,
-  all: revert;
+article table,
+article pre {
   margin: 1em 0;
 }
-main p,
+main ul,
-article p {
+main ol,
-  line-height: 1.5;
+article ul,
-  margin-bottom: 1em;
+article ol {
+  all: revert;
+  padding-left: 30px;
+}
+main h1,
+article h1 {
+  font-size: 2.5em;
+}
+main h2,
+article h2 {
+  font-size: 2em;
+}
+main h3,
+article h3 {
+  font-size: 1.5em;
+}
+main h4,
+article h4 {
+  font-size: 1.2em;
+}
+main h5,
+article h5 {
+  font-size: 1em;
+}
+main h6,
+article h6 {
+  font-size: 1em;
 }
 main h1,
 main h2,
@@ -146,6 +183,7 @@ article h3,
 article h4,
 article h5,
 article h6 {
+  margin: 0.5em 0 0.25em 0;
   text-align: center;
 }
 @media screen and (min-width: 768px) {
@@ -164,45 +202,52 @@ article h6 {
     text-align: left;
   }
 }
-main h1,
+main h1 + p,
-article h1 {
+main h2 + p,
-  font-size: 2em;
+main h3 + p,
+article h1 + p,
+article h2 + p,
+article h3 + p {
+  margin-top: 0.5em;
 }
-main h2,
+main img,
-article h2 {
+article img {
-  font-size: 1.5em;
+  max-width: 100%;
 }
-main h3,
+main code,
-article h3 {
+main pre,
-  font-size: 1em;
+article code,
+article pre {
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  font-family: monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0 5px;
+  white-space: pre;
 }
-main :last-child,
+main pre code,
-article :last-child {
+article pre code {
-  margin-bottom: 0;
+  border: none;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+}
+main a,
+article a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+main a:hover,
+article a:hover {
+  color: #beec1f;
 }
 
-header.header_main {
+header.banner {
   text-align: center;
 }
 
-a {
-  color: rgb(102, 128, 11);
-  border-radius: 10px;
-}
-
-a:hover,
-a:active {
-  background-color: rgba(135, 154, 57, 0.25);
-}
-
-a.logo,
-a.logo:hover,
-a.logo:active {
-  font-size: 3em;
-  color: rgb(160, 47, 111);
-  text-decoration: none;
-}
-
 nav.navbar {
   margin-bottom: 1em;
 }
@@ -219,10 +264,8 @@ footer.footer-main {
   margin: auto;
   margin-bottom: 1em;
   transform: rotate(2deg);
-  border: 4px solid #e7e2cc;
   background: white;
   box-shadow: 4px 4px 0px rgb(183, 181, 172);
-  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
@@ -234,11 +277,12 @@ footer.footer-main {
   }
 }
 
-.sigil {
+a {
-  display: inline;
+  color: #9ec611;
-  image-rendering: crisp-edges;
+  text-decoration: underline #9ec611 2px;
-  vertical-align: text-bottom;
+}
-  opacity: 0.2;
+a:hover {
+  color: #beec1f;
 }
 
 /*# sourceMappingURL=global.css.map */

src/css/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;EACA;;ACrCF;ED0BF;AAAA;IAeI;IACA;IACA;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AChEF;ED0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACpIA;ED0HF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;ECnBD;EACA;EACA;;ADmBC;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;;ACjCF;EDuBF;AAAA;IAcI;IACA;IACA;IACA;;;AC9BF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAzDF;EAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASI;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;;ADnDN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACvEA;ED+DF;IAUI;IACA;;;;AAIJ;EACE;EACA;;AAEA;EACE","file":"global.css"}

src/css/landing.css

@@ -116,38 +116,100 @@ main article {
   background: rgb(28, 27, 26);
   border-top: solid rgb(40, 39, 38);
   border-bottom: solid rgb(40, 39, 38);
-  padding: 1em;
   font-size: 1rem;
-}
+  word-wrap: break-word;
-main article:first-child {
+  line-height: 1.5;
-  margin-top: 0;
+  padding: 0 1.5em;
 }
 @media screen and (min-width: 768px) {
   main article {
     border: solid rgb(40, 39, 38);
     max-height: 600px;
     overflow: scroll;
-    padding: 2em;
-    padding-bottom: 1em;
   }
 }
-main article h1 {
+main article p,
-  font-size: 2em;
+main article blockquote,
+main article ul,
+main article ol,
+main article dl,
+main article table,
+main article pre {
+  margin: 1em 0;
 }
-main article h1 a {
+main article ul,
-  font-size: 0.5em;
+main article ol {
+  all: revert;
+  padding-left: 30px;
+}
+main article h1 {
+  font-size: 2.5em;
 }
 main article h2 {
-  font-weight: bold;
+  font-size: 2em;
 }
-main article *:not(li) + *:not(li) {
+main article h3 {
-  margin-top: 1em;
+  font-size: 1.5em;
 }
-main article ol,
+main article h4 {
-main article ul {
+  font-size: 1.2em;
-  all: revert;
+}
-  margin: 10px 0;
+main article h5 {
-  padding-left: 1em;
+  font-size: 1em;
+}
+main article h6 {
+  font-size: 1em;
+}
+main article h1,
+main article h2,
+main article h3,
+main article h4,
+main article h5,
+main article h6 {
+  margin: 0.5em 0 0.25em 0;
+  text-align: center;
+}
+@media screen and (min-width: 768px) {
+  main article h1,
+  main article h2,
+  main article h3,
+  main article h4,
+  main article h5,
+  main article h6 {
+    text-align: left;
+  }
+}
+main article h1 + p,
+main article h2 + p,
+main article h3 + p {
+  margin-top: 0.5em;
+}
+main article img {
+  max-width: 100%;
+}
+main article code,
+main article pre {
+  background-color: #f8f8f8;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  font-family: monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0 5px;
+  white-space: pre;
+}
+main article pre code {
+  border: none;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
+}
+main article a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+main article a:hover {
+  color: #beec1f;
 }
 main a {
   color: #9ec611;

src/css/landing.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KAjBO;EAkBP;;AChBA;EDWF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC9BA;EDyBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AC5CJ;EDoCA;IAYI;IACA,YAjDO;IAkDP;IACA;IACA;;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AC3FA;EDwFF;IAMI,QA9FS;IA+FT;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AC3HF;ED0GF;IAqBI","file":"landing.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KAjBO;EAkBP;;ACbA;EDQF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC3BA;EDsBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EC/BH;EACA;EACA;;AARC;EDiCA;IAOI;IACA,YA5CO;IA6CP;;;AChCJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAzDF;EAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;IASI;;;AAIJ;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADjDJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AC7DA;ED0DF;IAMI,QAnES;IAoET;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AC7FF;ED4EF;IAqBI","file":"landing.css"}

src/extra.md

@@ -4,7 +4,7 @@ layout: layouts/page.njk
 date: Last Modified
 eleventyNavigation:
   key: Extra
-  order: 111
+  order: 100
 ---
 
 Placeholder

src/index.md

@@ -2,6 +2,9 @@
 layout: layouts/landing.njk
 date: Last Modified
 entry: /main/
+eleventyNavigation:
+  key: Landing
+  order: 200
 ---
 
 # Gil's Nexus

src/lib/index.md

@@ -0,0 +1,6 @@
+---
+title: Library
+eleventyNavigation:
+  key: Library
+  order: 2
+---

src/main.md

@@ -8,6 +8,10 @@ eleventyNavigation:
 
 # Home
 
+Another test
+
 ## Support me
 
+Let's give this one more go.
+
 <a href="https://www.buymeacoffee.com/gilcaley" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important; display: inline;"></a>

src/poems/index.md

@@ -11,6 +11,6 @@ eleventyNavigation:
 {%- for poem in collections.poems reversed -%}
   {% if forloop.first == true %}<ul>{% endif %}
   <li><a href="{{ poem.url }}">{{ poem.data.title }}</a>
-  &mdash; <i>updated {{ poem.date | postDate }}</i></li>
+  &mdash; <i>updated <time datetime="{{ poem.date | formatDate }}">{{ poem.date | formatDate }}</time></i></li>
   {% if forloop.last == true %}</ul>{% endif %}
 {%- endfor -%}

src/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 $breakpoints: (
   "sm": 600px,
   "md": 768px,
@@ -11,7 +13,105 @@ $breakpoints: (
     $mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint);
   }
 
+  // Place everything inside this mixin under the appropriate @media rule
   @media screen and (min-width: #{$mq-breakpoint}) {
     @content;
   }
 }
+
+@mixin markup {
+	word-wrap: break-word;
+	line-height: 1.5;
+	padding: 0 1.5em;
+
+  p,
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre {
+    margin: 1em 0;
+  }
+
+  ul,
+  ol {
+    all: revert;
+    padding-left: 30px;
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.2em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 1em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0.5em 0 0.25em 0;
+    text-align: center;
+    @include breakpoint("md") {
+      text-align: left;
+    }
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p {
+    margin-top: 0.5em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code,
+  pre {
+    background-color: #f8f8f8;
+    border-radius: 3px;
+    border: 1px solid #ddd;
+    font-family: monospace;
+    font-size: 12px;
+    margin: 0 2px;
+    padding: 0 5px;
+    white-space: pre;
+  }
+
+  pre code {
+    border: none;
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+  }
+
+  a {
+    color: #{colors.$link};
+    text-decoration: underline #{colors.$link} 2px;
+
+    &:hover {
+      color: #{colors.$link-hover};
+    }
+  }
+}

src/scss/global.scss

@@ -48,7 +48,6 @@ article {
     background-color: #{colors.$paper};
     color: $fg;
     box-shadow: 0 8px #{colors.$base-850};
-    padding: 1em;
   }
 
   @include breakpoint("sm") {
@@ -58,68 +57,13 @@ article {
     box-shadow: 8px 8px #{colors.$base-850};
   }
 
-  ol,
+  @include markup;
-  ul {
-    all: revert;
-    margin: 1em 0;
-  }
-
-  p {
-    line-height: 1.5;
-    margin-bottom: 1em;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    text-align: center;
-    @include breakpoint("md") {
-      text-align: left;
-    }
-  }
-
-  h1 {
-    font-size: 2em;
-  }
-
-  h2 {
-    font-size: 1.5em;
-  }
-
-  h3 {
-    font-size: 1em;
-  }
-
-  :last-child {
-    margin-bottom: 0;
-  }
 }
 
-header.header_main {
+header.banner {
   text-align: center;
 }
 
-a {
-  color: #{$link};
-  border-radius: 10px;
-}
-
-a:hover,
-a:active {
-  background-color: #{$bg-hover};
-}
-
-a.logo,
-a.logo:hover,
-a.logo:active {
-  font-size: 3em;
-  color: #{$fg-logo};
-  text-decoration: none;
-}
-
 nav.navbar {
   margin-bottom: 1em;
 
@@ -137,10 +81,8 @@ footer.footer-main {
   margin: auto;
   margin-bottom: 1em;
   transform: rotate(2deg);
-  border: 4px solid #e7e2cc;
   background: white;
   box-shadow: 4px 4px 0px #{colors.$base-300};
-  padding: 8px;
   width: 100%;
   height: auto;
   max-width: 288px;
@@ -150,9 +92,11 @@ footer.footer-main {
   }
 }
 
-.sigil {
+a {
-  display: inline;
+  color: #{colors.$link};
-  image-rendering: crisp-edges;
+  text-decoration: underline #{colors.$link} 2px;
-  vertical-align: text-bottom;
+
-  opacity: 0.2;
+  &:hover {
+    color: #{colors.$link-hover};
+  }
 }

src/scss/landing.scss

@@ -51,42 +51,15 @@ main {
     background: #{colors.$base-950};
     border-top: solid #{colors.$base-900};
     border-bottom: solid #{colors.$base-900};
-    padding: 1em;
     font-size: 1rem;
 
-    &:first-child {
-      margin-top: 0;
-    }
-
     @include breakpoint("md") {
       border: solid #{colors.$base-900};
       max-height: $max-height;
       overflow: scroll;
-      padding: 2em;
-      padding-bottom: 1em;
     }
 
-    h1 {
+    @include markup;
-      font-size: 2em;
-      a {
-        font-size: 0.5em;
-      }
-    }
-
-    h2 {
-      font-weight: bold;
-    }
-
-    *:not(li) + *:not(li) {
-      margin-top: 1em;
-    }
-
-    ol,
-    ul {
-      all: revert;
-      margin: #{$gutter} 0;
-      padding-left: 1em;
-    }
   }
 
   a {

src/scss/scss.json

@@ -1,3 +0,0 @@
-{
-  "eleventyExcludeFromCollections": true
-}