Use grid layout on landing

2024-06-18 13:47:06 -05:00 · 2024-06-18 13:47:06 -05:00 · 4281620c08
parent 67246cc3ce
commit 4281620c08
5 changed files with 95 additions and 113 deletions
--- a/src/_includes/layouts/landing.njk
+++ b/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>
--- a/src/css/landing.css
+++ b/src/css/landing.css
@ -79,31 +79,26 @@ VARIABLES
 ===============================================================================

 */
+* {
+  line-height: 1.7;
+  border: dotted red 1px;
+}
+
 html {
-  font-size: 14pt;
-  font-family: "Linux Libertine", "Times New Roman", Times, serif;
-  line-height: 1.5;
+  font-size: 12pt;
+  font-family: sans-serif;
 }

 body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
+  display: grid;
  margin: auto;
-  padding: 1em 0;
-  background-color: #141013;
-}
-@media screen and (min-width: 768px) {
-  body {
-    width: 750px;
-  }
+  padding: 2em 0;
 }
@media screen and (min-width: 992px) {
  body {
-    height: 100vh;
-    width: 1006px;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: 1em;
+    height: 100%;
  }
 }

@ -116,61 +111,42 @@ a:hover {
 }

 nav {
-  align-self: flex-end;
-  margin-right: 1em;
-  text-align: right;
+  grid-row: 1;
+  grid-column: 1;
+  justify-self: right;
+  align-self: end;
 }
-@media screen and (min-width: 768px) {
-  nav {
-    margin: 0;
-  }
-}
-nav .enter-link {
+nav a {
  font-size: 1.5em;
  font-weight: bold;
  image-rendering: pixelated;
 }
-nav .enter-link:hover {
+nav a:hover {
  font-style: italic;
 }
-nav .enter-link::after {
+nav a::after {
  content: " >>";
  font-style: normal;
-  text-decoration: underline #141013 2px;
-  color: #525252;
-}
-
-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) {
+  nav {
+    grid-column: 2;
+  }
+}
+
@media screen and (min-width: 992px) {
  main {
-    flex-direction: row-reverse;
-    align-items: flex-start;
-    max-height: 500px;
+    grid-row: 2;
+    grid-column: 2;
+    justify-self: center;
  }
 }
 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;
-}
-@media screen and (min-width: 768px) {
-  main article {
-    border: solid rgb(40, 39, 38);
-    max-height: 500px;
-    overflow: scroll;
-    max-width: 750px;
-  }
+  padding: 0;
 }
 main article p,
 main article blockquote,
@ -244,10 +220,24 @@ main article a {
 main article a:hover {
  color: #beec1f;
 }
-main aside img {
-  width: 100%;
+main article h1 {
+  margin-top: 0;
+}
+
+aside {
+  grid-row: 1;
+  grid-column: 1;
+  justify-self: left;
+  max-width: 192px;
+}
+aside img {
  image-rendering: pixelated;
-  max-width: 256px;
+}
+@media screen and (min-width: 992px) {
+  aside {
+    grid-column: 2;
+    justify-self: start;
+  }
 }

 /*# sourceMappingURL=landing.css.map */
--- 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;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"}
+{"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"}
--- a/src/index.md
+++ b/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 bottom to view my full website.
+This landing page hosts links for where I can be found online. Use the button at the top to view my full website.

 ## Links

--- a/src/scss/landing.scss
+++ b/src/scss/landing.scss
@ -14,31 +14,27 @@ $max-width: 750px;
 $max-height: 500px;
 $avatar-width: 256px;

+* {
+  line-height: 1.7;
+  border: dotted red 1px;
+}
+
 html {
  font: {
-    size: 14pt;
-    family: "Linux Libertine", "Times New Roman", Times, serif;
+    size: 12pt;
+    family: sans-serif;
  }
-  line-height: 1.5;
 }

 body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
+  display: grid;
  margin: auto;
-  padding: 1em 0;
-  background-color: #{colors.$background};
-
-  @include breakpoint("md") {
-    width: $max-width;
-  }
+  padding: 2em 0;

  @include breakpoint("lg") {
-    height: 100vh;
-    width: $max-width + $avatar-width;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: 1em;
+    height: 100%;
  }
 }

@ -51,15 +47,12 @@ a {
 }

 nav {
-  align-self: flex-end;
-  margin-right: 1em;
-  text-align: right;
+  grid-row: 1;
+  grid-column: 1;
+  justify-self: right;
+  align-self: end;

-  @include breakpoint("md") {
-    margin: 0;
-  }
-
-  .enter-link {
+  a {
    font-size: 1.5em;
    font-weight: bold;
    image-rendering: pixelated;
@ -71,47 +64,46 @@ nav {
    &::after {
      content: " >>";
      font-style: normal;
-      text-decoration: underline #{colors.$background} 2px;
-      color: #{colors.$muted};
    }
  }
+
+  @include breakpoint("lg") {
+    grid-column: 2;
+  }
 }

 main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2em;
-  margin: 1em 0;
-  color: #{colors.$text};
-
  @include breakpoint("lg") {
-    flex-direction: row-reverse;
-    align-items: flex-start;
-    max-height: $max-height;
+    grid-row: 2;
+    grid-column: 2;
+    justify-self: center;
  }

  article {
-    background: #{colors.$base-950};
-    border-top: solid #{colors.$base-900};
-    border-bottom: solid #{colors.$base-900};
    font-size: 1rem;

-    @include breakpoint("md") {
-      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};
+    padding: 0;
+
+    h1 {
+      margin-top: 0;
    }
  }
 }
+
+aside {
+  grid-row: 1;
+  grid-column: 1;
+  justify-self: left;
+  max-width: 192px;
+
+  img {
+    image-rendering: pixelated;
+  }
+
+  @include breakpoint("lg") {
+    grid-column: 2;
+    justify-self: start;
+  }
+}