src/_includes/layouts/landing.njk

@@ -12,9 +12,9 @@
     <nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
     <main>
       <article>{{ content | safe }}</article>
+      <aside>
+        <img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
+      </aside>
     </main>
-    <aside>
-      <img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
-    </aside>
   </body>
 </html>

src/css/landing.css

@@ -79,62 +79,98 @@ VARIABLES
 ===============================================================================
 
 */
-* {
-  line-height: 1.7;
-}
-
 html {
-  font-size: 12pt;
+  font-size: 14pt;
   font-family: "Linux Libertine", "Times New Roman", Times, serif;
+  line-height: 1.5;
 }
 
 body {
-  display: grid;
+  display: flex;
-  padding: 2em;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin: auto;
+  padding: 1em 0;
+  background-color: #141013;
 }
 @media screen and (min-width: 768px) {
   body {
-    grid-template-columns: 2fr 3fr 2fr;
+    width: 750px;
-    gap: 1em;
-    height: 100%;
-    padding: 2em 0;
   }
 }
+@media screen and (min-width: 992px) {
+  body {
+    height: 100vh;
+    width: 1006px;
+  }
+}
+
+a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+a:hover {
+  color: #beec1f;
+}
 
 nav {
-  grid-row: 1;
+  align-self: flex-end;
-  grid-column: 1;
+  margin-right: 1em;
-  justify-self: right;
+  text-align: right;
-  align-self: end;
-  font-size: 1.5em;
-  font-weight: bold;
 }
 @media screen and (min-width: 768px) {
   nav {
-    grid-column: 2;
+    margin: 0;
   }
 }
-nav a:hover {
+nav .enter-link {
+  font-size: 1.5em;
+  font-weight: bold;
+  image-rendering: pixelated;
+}
+nav .enter-link:hover {
   font-style: italic;
 }
-nav a::after {
+nav .enter-link::after {
   content: " >>";
   font-style: normal;
+  text-decoration: underline #141013 2px;
+  color: #525252;
 }
 
-@media screen and (min-width: 768px) {
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2em;
+  margin: 1em 0;
+  color: rgb(255, 252, 240);
+}
+@media screen and (min-width: 992px) {
   main {
-    grid-row: 2;
+    flex-direction: row-reverse;
-    grid-column: 2;
+    align-items: flex-start;
-    justify-self: center;
+    max-height: 500px;
   }
 }
 main article {
+  background: rgb(28, 27, 26);
+  border-top: solid rgb(40, 39, 38);
+  border-bottom: solid rgb(40, 39, 38);
+  font-size: 1rem;
   word-wrap: break-word;
   line-height: 1.5;
   padding: 0 1.5em;
-  padding: 0;
+}
-  font-size: 1rem;
+@media screen and (min-width: 768px) {
+  main article {
+    border: solid rgb(40, 39, 38);
+    max-height: 500px;
+    overflow: scroll;
+    max-width: 750px;
+  }
 }
 main article p,
 main article blockquote,
@@ -208,22 +244,10 @@ main article a {
 main article a:hover {
   color: #beec1f;
 }
-main article h1 {
+main aside img {
-  margin-top: 0;
+  width: 100%;
-}
-
-aside {
-  grid-row: 1;
-  grid-column: 1;
-  max-width: 192px;
-}
-@media screen and (min-width: 768px) {
-  aside {
-    grid-column: 2;
-  }
-}
-aside img {
   image-rendering: pixelated;
+  max-width: 256px;
 }
 
 /*# 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;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"}
+{"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;EACA;EACA;EACA;EACA;;AChBA;EDQF;IAWI,OAvBQ;;;ACIV;EDQF;IAeI;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;;ACvCA;EDoCF;IAMI;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;ACrEA;ED+DF;IASI;IACA;IACA,YA7ES;;;AAgFX;EACE;EACA;EACA;EACA;EC3EH;EACA;EACA;;AARC;ED6EA;IAOI;IACA,YAxFO;IAyFP;IACA,WA3FM;;;ACcV;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;;ADCF;EACE;EACA;EACA","file":"landing.css"}

src/extra.md

@@ -1,5 +1,6 @@
 ---
 title: Extra
+layout: layouts/page.njk
 date: Last Modified
 eleventyNavigation:
   key: Extra

src/index.md

@@ -11,7 +11,7 @@ eleventyNavigation:
 
 Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software developer, game developer, and writer based in Texas. I'm one of the sysadmins for the [ogra.ph collective](https://ogra.ph/), an online collective of folk building an inclusive community centered around digital rights and liberation.
 
-This landing page hosts links for where I can be found online. Use the button at the top to view my full website.
+This landing page hosts links for where I can be found online. Use the button at the bottom to view my full website.
 
 ## Links
 

src/ograph.md

@@ -1,5 +1,6 @@
 ---
 title: Ograph Collective
+layout: layouts/page.njk
 date: Last Modified
 eleventyNavigation:
   key: Ograph

src/poems/index.md

@@ -1,5 +1,6 @@
 ---
 title: Poetry
+layout: layouts/page.njk
 permalink: /poetry/
 override:tags: []
 eleventyNavigation:

src/scss/landing.scss

@@ -9,42 +9,61 @@ VARIABLES
 ===============================================================================
 
 */
-$gutter: 1em;
+$gutter: 10px;
-
+$max-width: 750px;
-* {
+$max-height: 500px;
-  line-height: 1.7;
+$avatar-width: 256px;
-}
 
 html {
   font: {
-    size: 12pt;
+    size: 14pt;
     family: "Linux Libertine", "Times New Roman", Times, serif;
   }
+  line-height: 1.5;
 }
 
 body {
-  display: grid;
+  display: flex;
-  padding: $gutter * 2;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin: auto;
+  padding: 1em 0;
+  background-color: #{colors.$background};
+
   @include breakpoint("md") {
-    grid-template-columns: 2fr 3fr 2fr;
+    width: $max-width;
-    gap: $gutter;
+  }
-    height: 100%;
+
-    padding: ($gutter * 2) 0;
+  @include breakpoint("lg") {
+    height: 100vh;
+    width: $max-width + $avatar-width;
+  }
+}
+
+a {
+  color: #{colors.$link};
+  text-decoration: underline #{colors.$link} 2px;
+  &:hover {
+    color: #{colors.$link-hover};
   }
 }
 
 nav {
-  grid-row: 1;
+  align-self: flex-end;
-  grid-column: 1;
+  margin-right: 1em;
-  justify-self: right;
+  text-align: right;
-  align-self: end;
+
-  font-size: 1.5em;
-  font-weight: bold;
   @include breakpoint("md") {
-    grid-column: 2;
+    margin: 0;
   }
 
-  a {
+  .enter-link {
+    font-size: 1.5em;
+    font-weight: bold;
+    image-rendering: pixelated;
+
     &:hover {
       font-style: italic;
     }
@@ -52,37 +71,47 @@ nav {
     &::after {
       content: " >>";
       font-style: normal;
+      text-decoration: underline #{colors.$background} 2px;
+      color: #{colors.$muted};
     }
   }
 }
 
 main {
-  @include breakpoint("md") {
+  display: flex;
-    grid-row: 2;
+  flex-direction: column;
-    grid-column: 2;
+  align-items: center;
-    justify-self: center;
+  gap: 2em;
+  margin: 1em 0;
+  color: #{colors.$text};
+
+  @include breakpoint("lg") {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    max-height: $max-height;
   }
 
   article {
-    @include markup;
+    background: #{colors.$base-950};
-    padding: 0;
+    border-top: solid #{colors.$base-900};
+    border-bottom: solid #{colors.$base-900};
     font-size: 1rem;
 
-    h1 {
+    @include breakpoint("md") {
-      margin-top: 0;
+      border: solid #{colors.$base-900};
+      max-height: $max-height;
+      overflow: scroll;
+      max-width: $max-width;
+    }
+
+    @include markup;
+  }
+
+  aside {
+    img {
+      width: 100%;
+      image-rendering: pixelated;
+      max-width: #{$avatar-width};
     }
   }
 }
-
-aside {
-  grid-row: 1;
-  grid-column: 1;
-  max-width: 192px;
-  @include breakpoint("md") {
-    grid-column: 2;
-  }
-
-  img {
-    image-rendering: pixelated;
-  }
-}

src/src.json

@@ -1,3 +1,3 @@
 {
-  "layout": "layouts/default.njk"
+  "layout": "layouts/page.njk"
 }