Add markup mixin

src/css/global.css

@@ -102,6 +102,9 @@ body {
 main,
 article {
   font-size: 1rem;
+  word-wrap: break-word;
+  line-height: 1.5;
+  padding: 0 1em;
 }
 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.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;
 }
@@ -232,4 +277,12 @@ footer.footer-main {
   }
 }
 
+a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+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;;ACpCF;EDyBF;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;;AC/DF;EDyDA;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;;ACjIA;EDyHF;IAUI;IACA","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.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;;ACfA;EDUF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,KA7BO;EA8BP;EACA;EACA;;AC7BA;EDwBF;IAQI,WAlCQ;;;AAqCV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AC3CJ;EDmCA;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;;AC1FA;EDuFF;IAMI,QA9FS;IA+FT;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AC1HF;EDyGF;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;EACA;;AAEA;EACE;;ACzCJ;EDiCA;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;;ACxFA;EDqFF;IAMI,QA9FS;IA+FT;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;ACxHF;EDuGF;IAqBI","file":"landing.css"}

src/main.md

@@ -5,9 +5,14 @@ eleventyNavigation:
 ---
 
 <img class="gba-portrait" src="/img/gba-gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." />
+Test
 
 # 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/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "colors";
+
 $breakpoints: (
   "sm": 600px,
   "md": 768px,
@@ -17,6 +19,99 @@ $breakpoints: (
   }
 }
 
-@mixin markdown {
+@mixin markup {
+	word-wrap: break-word;
+	line-height: 1.5;
+	padding: 0 1em;
 
+  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.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;
 
@@ -147,3 +91,12 @@ footer.footer-main {
     margin: 1em;
   }
 }
+
+a {
+  color: #{colors.$link};
+  text-decoration: underline #{colors.$link} 2px;
+
+  &:hover {
+    color: #{colors.$link-hover};
+  }
+}