From 3d7ef57e7bddf6225c53419afe467f242e2f08c5 Mon Sep 17 00:00:00 2001
From: gil <kalanggam@proton.me>
Date: Wed, 19 Jun 2024 01:24:06 -0500
Subject: [PATCH] Change default to grid layout

---
 src/_includes/layouts/default.njk |   2 +-
 src/_includes/layouts/landing.njk |   2 +-
 src/css/global.css                | 223 ++++++++++++------------------
 src/css/global.css.map            |   2 +-
 src/css/landing.css               | 159 +++++++++++----------
 src/css/landing.css.map           |   2 +-
 src/scss/_classes.scss            |  83 +++++++++++
 src/scss/_mixins.scss             |  93 -------------
 src/scss/_vars.scss               |  12 ++
 src/scss/global.scss              | 102 +++++---------
 src/scss/landing.scss             |  23 ++-
 11 files changed, 306 insertions(+), 397 deletions(-)
 create mode 100644 src/scss/_classes.scss
 create mode 100644 src/scss/_vars.scss
diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
index 420fcd2..ab2a649 100644
--- a/src/_includes/layouts/default.njk
+++ b/src/_includes/layouts/default.njk
@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 {% include "partials/header.njk" %}
-<main class="page">
+<main class="page markup">
   <header>
     <h1>{{ title }}</h1>
   </header>
diff --git a/src/_includes/layouts/landing.njk b/src/_includes/layouts/landing.njk
index cf62b6c..704ec8b 100644
--- a/src/_includes/layouts/landing.njk
+++ b/src/_includes/layouts/landing.njk
@@ -11,7 +11,7 @@
   <body>
     <nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
     <main>
-      <article>{{ content | safe }}</article>
+      <article class="markup">{{ content | safe }}</article>
     </main>
     <aside>
       <img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
diff --git a/src/css/global.css b/src/css/global.css
index ca25d78..0589fc5 100644
--- a/src/css/global.css
+++ b/src/css/global.css
@@ -73,134 +73,61 @@ For license text, see:
   font-weight: 700;
   src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
 }
-/*
-
-VARIABLES
-===============================================================================
-
-*/
-/*
-
-COLORS
-===============================================================================
-
-*/
-html {
-  font-size: 20px;
-  font-family: "Linux Libertine", "Times New Roman", Times, serif;
-}
-
-body {
-  background-color: #141013;
-  color: rgb(255, 252, 240);
-}
-
-::selection {
-  background: rgba(160, 47, 111, 0.25);
-}
-
-main,
-article {
-  font-size: 1rem;
+.markup {
   word-wrap: break-word;
-  line-height: 1.5;
+  line-height: 1.7;
   padding: 0 1.5em;
 }
-main.page,
-article.page {
-  border: 32px solid transparent;
-  border-image: url(/img/nine-patch.png) 32 round;
-  -webkit-border-image: url(/img/nine-patch.png) 32 round;
-  background-color: rgb(255, 252, 240);
-  color: #802659;
-  box-shadow: 0 8px rgb(52, 51, 49);
-}
-@media screen and (min-width: 600px) {
-  main,
-  article {
-    max-width: 900px;
-    width: 90%;
-    margin: 0 auto;
-    box-shadow: 8px 8px rgb(52, 51, 49);
-  }
-}
-main p,
-main blockquote,
-main ul,
-main ol,
-main dl,
-main table,
-main pre,
-article p,
-article blockquote,
-article ul,
-article ol,
-article dl,
-article table,
-article pre {
+.markup p,
+.markup blockquote,
+.markup ul,
+.markup ol,
+.markup dl,
+.markup table,
+.markup pre {
   margin: 1em 0;
 }
-main ul,
-main ol,
-article ul,
-article ol {
+.markup ul,
+.markup ol {
   all: revert;
   padding-left: 30px;
 }
-main h1,
-article h1 {
+.markup h1 {
   font-size: 2.5em;
 }
-main h2,
-article h2 {
+.markup h2 {
   font-size: 2em;
 }
-main h3,
-article h3 {
+.markup h3 {
   font-size: 1.5em;
 }
-main h4,
-article h4 {
+.markup h4 {
   font-size: 1.2em;
 }
-main h5,
-article h5 {
+.markup h5 {
   font-size: 1em;
 }
-main h6,
-article h6 {
+.markup h6 {
   font-size: 1em;
 }
-main h1,
-main h2,
-main h3,
-main h4,
-main h5,
-main h6,
-article h1,
-article h2,
-article h3,
-article h4,
-article h5,
-article h6 {
+.markup h1,
+.markup h2,
+.markup h3,
+.markup h4,
+.markup h5,
+.markup h6 {
   margin: 0.5em 0 0.25em 0;
 }
-main h1 + p,
-main h2 + p,
-main h3 + p,
-article h1 + p,
-article h2 + p,
-article h3 + p {
+.markup h1 + p,
+.markup h2 + p,
+.markup h3 + p {
   margin-top: 0.5em;
 }
-main img,
-article img {
+.markup img {
   max-width: 100%;
 }
-main code,
-main pre,
-article code,
-article pre {
+.markup code,
+.markup pre {
   background-color: #f8f8f8;
   border-radius: 3px;
   border: 1px solid #ddd;
@@ -210,21 +137,70 @@ article pre {
   padding: 0 5px;
   white-space: pre;
 }
-main pre code,
-article pre code {
+.markup pre code {
   border: none;
   margin: 0;
   padding: 0;
   white-space: pre;
 }
-main a,
-article a {
-  color: #9ec611;
-  text-decoration: underline #9ec611 2px;
+
+/******************************************************************************
+_vars.scss
+*******************************************************************************
+Global variables for the entire website
+============================================================================ */
+/* SPACING ================================================================= */
+/* FONT SIZING ============================================================= */
+html {
+  font-size: 12pt;
+  font-family: "Linux Libertine", "Times New Roman", Times, serif;
 }
-main a:hover,
-article a:hover {
-  color: #beec1f;
+
+body {
+  display: grid;
+  padding: 2em;
+}
+@media screen and (min-width: 768px) {
+  body {
+    grid-template-columns: 2fr 3fr 2fr;
+    height: 100%;
+    padding: 2em 0;
+  }
+  body > header {
+    grid-row: 1;
+    grid-column: 2;
+  }
+  body > footer {
+    grid-row: 3;
+    grid-column: 2;
+  }
+}
+
+main,
+article {
+  font-size: 1rem;
+}
+@media screen and (min-width: 768px) {
+  main,
+  article {
+    grid-row: 2;
+    grid-column: 2;
+  }
+}
+main .gba-portrait,
+article .gba-portrait {
+  margin: auto;
+  margin-bottom: 1em;
+  width: 100%;
+  height: auto;
+  max-width: 192px;
+}
+@media screen and (min-width: 768px) {
+  main .gba-portrait,
+  article .gba-portrait {
+    float: right;
+    margin: 1em;
+  }
 }
 
 header.banner {
@@ -243,29 +219,4 @@ footer.footer-main {
   text-align: center;
 }
 
-.gba-portrait {
-  margin: auto;
-  margin-bottom: 1em;
-  transform: rotate(2deg);
-  background: white;
-  box-shadow: 4px 4px 0px rgb(183, 181, 172);
-  width: 100%;
-  height: auto;
-  max-width: 288px;
-}
-@media screen and (min-width: 768px) {
-  .gba-portrait {
-    float: right;
-    margin: 1em;
-  }
-}
-
-a {
-  color: #9ec611;
-  text-decoration: underline #9ec611 2px;
-}
-a:hover {
-  color: #beec1f;
-}
-
 /*# sourceMappingURL=global.css.map */
diff --git a/src/css/global.css.map b/src/css/global.css.map
index fa9d7b9..6432384 100644
--- a/src/css/global.css.map
+++ b/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;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;;AAGF;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;;;AD/CN;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"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/_classes.scss","../scss/_vars.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;;ACxDF;EACE;EACA;EACA;;AAEA;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;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AChFJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAGA;ACHA;EAEI,WDEa;ECDb,aDEe;;;ACEnB;EACE;EACA;;ACCA;EDHF;IAII;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;;AAKN;AAAA;EAEE;;ACnBA;EDiBF;AAAA;IAII;IACA;;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AC9BF;EDyBA;AAAA;IAOI;IACA;;;;AAKN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA","file":"global.css"}
\ No newline at end of file
diff --git a/src/css/landing.css b/src/css/landing.css
index 3ffd48f..6ab2a27 100644
--- a/src/css/landing.css
+++ b/src/css/landing.css
@@ -1,3 +1,4 @@
+/* IMPORTS ================================================================= */
 /*
 
 COLORS
@@ -73,16 +74,85 @@ For license text, see:
   font-weight: 700;
   src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
 }
-/*
-
-VARIABLES
-===============================================================================
-
-*/
-* {
+.markup {
+  word-wrap: break-word;
   line-height: 1.7;
+  padding: 0 1.5em;
+}
+.markup p,
+.markup blockquote,
+.markup ul,
+.markup ol,
+.markup dl,
+.markup table,
+.markup pre {
+  margin: 1em 0;
+}
+.markup ul,
+.markup ol {
+  all: revert;
+  padding-left: 30px;
+}
+.markup h1 {
+  font-size: 2.5em;
+}
+.markup h2 {
+  font-size: 2em;
+}
+.markup h3 {
+  font-size: 1.5em;
+}
+.markup h4 {
+  font-size: 1.2em;
+}
+.markup h5 {
+  font-size: 1em;
+}
+.markup h6 {
+  font-size: 1em;
+}
+.markup h1,
+.markup h2,
+.markup h3,
+.markup h4,
+.markup h5,
+.markup h6 {
+  margin: 0.5em 0 0.25em 0;
+}
+.markup h1 + p,
+.markup h2 + p,
+.markup h3 + p {
+  margin-top: 0.5em;
+}
+.markup img {
+  max-width: 100%;
+}
+.markup code,
+.markup 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;
+}
+.markup pre code {
+  border: none;
+  margin: 0;
+  padding: 0;
+  white-space: pre;
 }
 
+/* IMPORTS ================================================================= */
+/******************************************************************************
+_vars.scss
+*******************************************************************************
+Global variables for the entire website
+============================================================================ */
+/* SPACING ================================================================= */
+/* FONT SIZING ============================================================= */
 html {
   font-size: 12pt;
   font-family: "Linux Libertine", "Times New Roman", Times, serif;
@@ -130,84 +200,9 @@ nav a::after {
   }
 }
 main article {
-  word-wrap: break-word;
-  line-height: 1.5;
-  padding: 0 1.5em;
   padding: 0;
   font-size: 1rem;
 }
-main article p,
-main article blockquote,
-main article ul,
-main article ol,
-main article dl,
-main article table,
-main article pre {
-  margin: 1em 0;
-}
-main article ul,
-main article ol {
-  all: revert;
-  padding-left: 30px;
-}
-main article h1 {
-  font-size: 2.5em;
-}
-main article h2 {
-  font-size: 2em;
-}
-main article h3 {
-  font-size: 1.5em;
-}
-main article h4 {
-  font-size: 1.2em;
-}
-main article h5 {
-  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;
-}
-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 article h1 {
   margin-top: 0;
 }
diff --git a/src/css/landing.css.map b/src/css/landing.css.map
index 6be8412..37b115b 100644
--- a/src/css/landing.css.map
+++ b/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;AAQA;EACE;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;;ACVA;EDQF;IAII;IACA,KAlBK;IAmBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ACzBA;EDmBF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;ACrCJ;ED0CF;IAEI;IACA;IACA;;;AAGF;EC3CD;EACA;EACA;ED2CG;EACA;;AC1CF;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;;AAGF;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;;ADvCF;EACE;;;AAKN;EACE;EACA;EACA;;AC/DA;ED4DF;IAKI;;;AAGF;EACE","file":"landing.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_colors.scss","../scss/_fonts.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAEA;ACDA;;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;;ACxDF;EACE;EACA;EACA;;AAEA;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;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AH9EJ;AIFA;AAAA;AAAA;AAAA;AAAA;AAMA;AAGA;AJEA;EAEI,WIHa;EJIb,aIHe;;;AJOnB;EACE;EACA;;AKJA;ELEF;IAII;IACA,KIhBK;IJiBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AKnBA;ELaF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AK/BJ;ELoCF;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AKxDA;ELqDF;IAKI;;;AAGF;EACE","file":"landing.css"}
\ No newline at end of file
diff --git a/src/scss/_classes.scss b/src/scss/_classes.scss
new file mode 100644
index 0000000..177134f
--- /dev/null
+++ b/src/scss/_classes.scss
@@ -0,0 +1,83 @@
+.markup {
+  word-wrap: break-word;
+  line-height: 1.7;
+  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;
+  }
+
+  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;
+  }
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 361d4db..6054d77 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -18,96 +18,3 @@ $breakpoints: (
     @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;
-  }
-
-  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};
-    }
-  }
-}
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
new file mode 100644
index 0000000..dc918b2
--- /dev/null
+++ b/src/scss/_vars.scss
@@ -0,0 +1,12 @@
+/******************************************************************************
+_vars.scss
+*******************************************************************************
+Global variables for the entire website
+============================================================================ */
+
+/* SPACING ================================================================= */
+$gutter: 1em;
+
+/* FONT SIZING ============================================================= */
+$font-base-size: 12pt;
+$font-stack-serif: "Linux Libertine", "Times New Roman", Times, serif;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 5cb3a10..bc2474c 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1,63 +1,55 @@
 @use "colors";
 @use "fonts";
 @use "mixins" as *;
-
-/*
-
-VARIABLES
-===============================================================================
-
-*/
-
-
-
-/*
-
-COLORS
-===============================================================================
-
-*/
-$fg: scale-color(colors.$magenta-600, $lightness: -20%);
-$fg-logo: colors.$magenta-600;
-$link: colors.$green-600;
-$bg-hover: scale-color(colors.$green-400, $alpha: -75%);
-$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
+@use "classes" as *;
+@use "vars" as *;
 
 html {
-  font-size: 20px;
-  font-family: "Linux Libertine", "Times New Roman", Times, serif;
+  font: {
+    size: $font-base-size;
+    family: $font-stack-serif;
+  }
 }
 
 body {
-  background-color: #{colors.$background};
-  color: #{colors.$paper};
-}
+  display: grid;
+  padding: $gutter * 2;
+  @include breakpoint("md") {
+    grid-template-columns: 2fr 3fr 2fr;
+    height: 100%;
+    padding: ($gutter * 2) 0;
 
-::selection {
-  background: #{$bg-highlight};
+    & > header {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    & > footer {
+      grid-row: 3;
+      grid-column: 2;
+    }
+  }
 }
 
 main,
 article {
   font-size: 1rem;
-
-  &.page {
-    border: 32px solid transparent;
-    border-image: url(/img/nine-patch.png) 32 round;
-    -webkit-border-image: url(/img/nine-patch.png) 32 round;
-    background-color: #{colors.$paper};
-    color: $fg;
-    box-shadow: 0 8px #{colors.$base-850};
+  @include breakpoint("md") {
+    grid-row: 2;
+    grid-column: 2;
   }
 
-  @include breakpoint("sm") {
-    max-width: 900px;
-    width: 90%;
-    margin: 0 auto;
-    box-shadow: 8px 8px #{colors.$base-850};
+  .gba-portrait {
+    margin: auto;
+    margin-bottom: 1em;
+    width: 100%;
+    height: auto;
+    max-width: 192px;
+    @include breakpoint("md") {
+      float: right;
+      margin: 1em;
+    }
   }
-
-  @include markup;
 }
 
 header.banner {
@@ -76,27 +68,3 @@ footer.footer-main {
   margin: 2em 1em 1em 1em;
   text-align: center;
 }
-
-.gba-portrait {
-  margin: auto;
-  margin-bottom: 1em;
-  transform: rotate(2deg);
-  background: white;
-  box-shadow: 4px 4px 0px #{colors.$base-300};
-  width: 100%;
-  height: auto;
-  max-width: 288px;
-  @include breakpoint("md") {
-    float: right;
-    margin: 1em;
-  }
-}
-
-a {
-  color: #{colors.$link};
-  text-decoration: underline #{colors.$link} 2px;
-
-  &:hover {
-    color: #{colors.$link-hover};
-  }
-}
\ No newline at end of file
diff --git a/src/scss/landing.scss b/src/scss/landing.scss
index bea529d..6317b55 100644
--- a/src/scss/landing.scss
+++ b/src/scss/landing.scss
@@ -1,24 +1,18 @@
+// landing.scss
+
+/* IMPORTS ================================================================= */
 @use "sass:math";
 @use "colors";
 @use "fonts";
+
+@use "classes" as *;
 @use "mixins" as *;
-
-/*
-
-VARIABLES
-===============================================================================
-
-*/
-$gutter: 1em;
-
-* {
-  line-height: 1.7;
-}
+@use "vars" as *;
 
 html {
   font: {
-    size: 12pt;
-    family: "Linux Libertine", "Times New Roman", Times, serif;
+    size: $font-base-size;
+    family: $font-stack-serif;
   }
 }
 
@@ -64,7 +58,6 @@ main {
   }
 
   article {
-    @include markup;
     padding: 0;
     font-size: 1rem;
 
