Tweaking grid ratios

src/css/landing.css

@@ -81,45 +81,38 @@ VARIABLES
 */
 * {
   line-height: 1.7;
-  border: dotted red 1px;
 }
 
 html {
   font-size: 12pt;
-  font-family: sans-serif;
+  font-family: "Linux Libertine", "Times New Roman", Times, serif;
 }
 
 body {
   display: grid;
-  margin: auto;
+  padding: 2em;
-  padding: 2em 0;
 }
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 768px) {
   body {
-    grid-template-columns: 1fr 2fr 1fr;
+    grid-template-columns: 2fr 3fr 2fr;
     gap: 1em;
     height: 100%;
+    padding: 2em 0;
   }
 }
 
-a {
-  color: #9ec611;
-  text-decoration: underline #9ec611 2px;
-}
-a:hover {
-  color: #beec1f;
-}
-
 nav {
   grid-row: 1;
   grid-column: 1;
   justify-self: right;
   align-self: end;
-}
-nav a {
   font-size: 1.5em;
   font-weight: bold;
-  image-rendering: pixelated;
+}
+@media screen and (min-width: 768px) {
+  nav {
+    grid-column: 2;
+  }
 }
 nav a:hover {
   font-style: italic;
@@ -128,13 +121,8 @@ nav a::after {
   content: " >>";
   font-style: normal;
 }
-@media screen and (min-width: 992px) {
-  nav {
-    grid-column: 2;
-  }
-}
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 768px) {
   main {
     grid-row: 2;
     grid-column: 2;
@@ -142,11 +130,11 @@ nav a::after {
   }
 }
 main article {
-  font-size: 1rem;
   word-wrap: break-word;
   line-height: 1.5;
   padding: 0 1.5em;
   padding: 0;
+  font-size: 1rem;
 }
 main article p,
 main article blockquote,
@@ -227,17 +215,15 @@ main article h1 {
 aside {
   grid-row: 1;
   grid-column: 1;
-  justify-self: left;
   max-width: 192px;
 }
+@media screen and (min-width: 768px) {
+  aside {
+    grid-column: 2;
+  }
+}
 aside img {
   image-rendering: pixelated;
 }
-@media screen and (min-width: 992px) {
-  aside {
-    grid-column: 2;
-    justify-self: start;
-  }
-}
 
 /*# sourceMappingURL=landing.css.map */

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;EACE;EACA;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;EACA;;ACfA;EDYF;IAMI;IACA;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;ACjDJ;EDgCF;IAsBI;;;;ACtDF;ED0DF;IAEI;IACA;IACA;;;AAGF;EACE;EC5DH;EACA;EACA;ED8DG;;AC5DF;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;;ADrBF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;ACrFF;ED8EF;IAWI;IACA","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;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"}

src/scss/landing.scss

@@ -9,40 +9,27 @@ VARIABLES
 ===============================================================================
 
 */
-$gutter: 10px;
+$gutter: 1em;
-$max-width: 750px;
-$max-height: 500px;
-$avatar-width: 256px;
 
 * {
   line-height: 1.7;
-  border: dotted red 1px;
 }
 
 html {
   font: {
     size: 12pt;
-    family: sans-serif;
+    family: "Linux Libertine", "Times New Roman", Times, serif;
   }
 }
 
 body {
   display: grid;
-  margin: auto;
+  padding: $gutter * 2;
-  padding: 2em 0;
+  @include breakpoint("md") {
-
+    grid-template-columns: 2fr 3fr 2fr;
-  @include breakpoint("lg") {
+    gap: $gutter;
-    grid-template-columns: 1fr 2fr 1fr;
-    gap: 1em;
     height: 100%;
-  }
+    padding: ($gutter * 2) 0;
-}
-
-a {
-  color: #{colors.$link};
-  text-decoration: underline #{colors.$link} 2px;
-  &:hover {
-    color: #{colors.$link-hover};
   }
 }
 
@@ -51,12 +38,13 @@ nav {
   grid-column: 1;
   justify-self: right;
   align-self: end;
-
-  a {
   font-size: 1.5em;
   font-weight: bold;
-    image-rendering: pixelated;
+  @include breakpoint("md") {
+    grid-column: 2;
+  }
 
+  a {
     &:hover {
       font-style: italic;
     }
@@ -66,25 +54,19 @@ nav {
       font-style: normal;
     }
   }
-
-  @include breakpoint("lg") {
-    grid-column: 2;
-  }
 }
 
 main {
-  @include breakpoint("lg") {
+  @include breakpoint("md") {
     grid-row: 2;
     grid-column: 2;
     justify-self: center;
   }
 
   article {
-    font-size: 1rem;
-
     @include markup;
-
     padding: 0;
+    font-size: 1rem;
 
     h1 {
       margin-top: 0;
@@ -95,15 +77,12 @@ main {
 aside {
   grid-row: 1;
   grid-column: 1;
-  justify-self: left;
   max-width: 192px;
+  @include breakpoint("md") {
+    grid-column: 2;
+  }
 
   img {
     image-rendering: pixelated;
   }
-
-  @include breakpoint("lg") {
-    grid-column: 2;
-    justify-self: start;
-  }
 }