match landing styles to globals

src/css/global.css

@@ -104,7 +104,7 @@ article {
   font-size: 1rem;
   word-wrap: break-word;
   line-height: 1.5;
-  padding: 0 1em;
+  padding: 0 1.5em;
 }
 main.page,
 article.page {

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;;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"}
+{"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/main.md

@@ -5,7 +5,6 @@ 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
 

src/scss/_mixins.scss

@@ -22,7 +22,7 @@ $breakpoints: (
 @mixin markup {
 	word-wrap: break-word;
 	line-height: 1.5;
-	padding: 0 1em;
+	padding: 0 1.5em;
 
   p,
   blockquote,

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 {