Redo landing css, move about to its own page

2024-06-17 16:11:23 -05:00 · 2024-06-17 16:11:23 -05:00 · 67246cc3ce
parent 9f28e4d5a8
commit 67246cc3ce
10 changed files with 157 additions and 174 deletions
--- a/src/_includes/layouts/landing.njk
+++ b/src/_includes/layouts/landing.njk
@ -9,9 +9,12 @@
    <link rel="stylesheet" href="/css/landing.css">
  </head>
  <body>
+    <nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
+    <main>
+      <article>{{ content | safe }}</article>
      <aside>
-      <img src="/img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
+        <img src="/img/landing.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
      </aside>
-    <main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main>
+    </main>
  </body>
 </html>
--- a/src/about.md
+++ b/src/about.md
@ -0,0 +1,28 @@
+---
+title: About
+date: Last Modified
+eleventyNavigation:
+  key: About
+---
+
+<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." />
+
+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.
+
+## Links
+
+- Microblog: <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
+- Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
+- Matrix: [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org)
+- Photos: [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam)
+- Reading: [bookwyrm.social/user/kalanggam](https://bookwyrm.social/user/kalanggam)
+
+## Support me
+
+<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>
+
+## Colophon
+
+I first started building this site in mid 2023, and I've been gradually tweaking it since then.
+
+This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then built into plain HTML. I used [Sass](https://sass-lang.com/) to build the CSS. Source files are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).
--- a/src/css/global.css
+++ b/src/css/global.css
@ -184,23 +184,6 @@ article h4,
 article h5,
 article h6 {
  margin: 0.5em 0 0.25em 0;
-  text-align: center;
-}
-@media screen and (min-width: 768px) {
-  main h1,
-  main h2,
-  main h3,
-  main h4,
-  main h5,
-  main h6,
-  article h1,
-  article h2,
-  article h3,
-  article h4,
-  article h5,
-  article h6 {
-    text-align: left;
-  }
 }
 main h1 + p,
 main h2 + p,
--- a/src/css/global.css.map
+++ b/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;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"}
+{"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;;AAGF;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;;;AD/CN;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"}
--- a/src/css/landing.css
+++ b/src/css/landing.css
@ -86,30 +86,73 @@ html {
 }

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

-main {
-  width: 100%;
-  gap: 10px;
-  color: rgb(255, 252, 240);
-  display: flex;
-  flex-direction: column;
+a {
+  color: #9ec611;
+  text-decoration: underline #9ec611 2px;
+}
+a:hover {
+  color: #beec1f;
+}
+
+nav {
+  align-self: flex-end;
+  margin-right: 1em;
+  text-align: right;
 }
@media screen and (min-width: 768px) {
+  nav {
+    margin: 0;
+  }
+}
+nav .enter-link {
+  font-size: 1.5em;
+  font-weight: bold;
+  image-rendering: pixelated;
+}
+nav .enter-link:hover {
+  font-style: italic;
+}
+nav .enter-link::after {
+  content: " >>";
+  font-style: normal;
+  text-decoration: underline #141013 2px;
+  color: #525252;
+}
+
 main {
-    max-width: 600px;
+  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 {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    max-height: 500px;
  }
 }
 main article {
@ -124,8 +167,9 @@ main article {
@media screen and (min-width: 768px) {
  main article {
    border: solid rgb(40, 39, 38);
-    max-height: 600px;
+    max-height: 500px;
    overflow: scroll;
+    max-width: 750px;
  }
 }
 main article p,
@ -167,17 +211,6 @@ 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,
@ -211,54 +244,10 @@ main article a {
 main article a:hover {
  color: #beec1f;
 }
-main a {
-  color: #9ec611;
-  text-decoration: underline #9ec611 2px;
-}
-main a:hover {
-  color: #beec1f;
-}
-
-aside {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  width: 256px;
-}
-@media screen and (min-width: 768px) {
-  aside {
-    height: 600px;
-    margin-top: 0;
-    margin-right: 2em;
-  }
-}
-aside img {
+main aside img {
  width: 100%;
  image-rendering: pixelated;
  max-width: 256px;
 }

-.entry-button {
-  display: inline-block;
-  height: 2em;
-  margin: auto;
-  margin-bottom: 10px;
-  image-rendering: pixelated;
-  font-size: 1.5em;
-  font-weight: bold;
-}
-.entry-button:hover {
-  font-style: italic;
-}
-.entry-button::after {
-  content: " >>";
-  color: #525252;
-  font-style: normal;
-  text-decoration: underline #141013 2px;
-}
-@media screen and (min-width: 768px) {
-  .entry-button {
-    margin-right: 0;
-  }
-}
-
 /*# 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,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"}
+{"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"}
--- a/src/css/reset.css
+++ b/src/css/reset.css
@ -169,23 +169,6 @@ button,
  -webkit-appearance: button;
 }

-/**
-Remove the inner border and padding in Firefox.
-*/
-
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
-Restore the focus styles unset by the previous rule.
-*/
-
-:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
 Remove the additional ':invalid' styles in Firefox.
 See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
--- a/src/img/landing-sigil.png
+++ b/src/img/landing-sigil.png
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@ -71,10 +71,6 @@ $breakpoints: (
  h5,
  h6 {
    margin: 0.5em 0 0.25em 0;
-    text-align: center;
-    @include breakpoint("md") {
-      text-align: left;
-    }
  }

  h1 + p,
--- a/src/scss/landing.scss
+++ b/src/scss/landing.scss
@ -10,8 +10,8 @@ VARIABLES

 */
 $gutter: 10px;
-$max-width: 600px;
-$max-height: 600px;
+$max-width: 750px;
+$max-height: 500px;
 $avatar-width: 256px;

 html {
@ -23,28 +23,72 @@ html {
 }

 body {
-  background-color: #{colors.$background};
  display: flex;
  flex-direction: column;
-  gap: $gutter;
  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin: auto;
+  padding: 1em 0;
+  background-color: #{colors.$background};

  @include breakpoint("md") {
-    flex-direction: row;
-    justify-content: center;
-    min-height: 100vh;
+    width: $max-width;
+  }
+
+  @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 {
+  align-self: flex-end;
+  margin-right: 1em;
+  text-align: right;
+
+  @include breakpoint("md") {
+    margin: 0;
+  }
+
+  .enter-link {
+    font-size: 1.5em;
+    font-weight: bold;
+    image-rendering: pixelated;
+
+    &:hover {
+      font-style: italic;
+    }
+
+    &::after {
+      content: " >>";
+      font-style: normal;
+      text-decoration: underline #{colors.$background} 2px;
+      color: #{colors.$muted};
+    }
  }
 }

 main {
-  width: 100%;
-  gap: $gutter;
-  color: #{colors.$text};
  display: flex;
  flex-direction: column;
+  align-items: center;
+  gap: 2em;
+  margin: 1em 0;
+  color: #{colors.$text};

-  @include breakpoint("md") {
-    max-width: $max-width;
+  @include breakpoint("lg") {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    max-height: $max-height;
  }

  article {
@ -57,60 +101,17 @@ main {
      border: solid #{colors.$base-900};
      max-height: $max-height;
      overflow: scroll;
+      max-width: $max-width;
    }

    @include markup;
  }

-  a {
-    color: #{colors.$link};
-    text-decoration: underline #{colors.$link} 2px;
-
-    &:hover {
-      color: #{colors.$link-hover};
-    }
-  }
-}
-
  aside {
-  margin-top: #{$gutter * 2};
-  margin-bottom: #{$gutter * 2};
-  width: #{$avatar-width};
-
-  @include breakpoint("md") {
-    height: $max-height;
-    margin-top: 0;
-    margin-right: 2em;
-  }
-
    img {
      width: 100%;
      image-rendering: pixelated;
      max-width: #{$avatar-width};
    }
  }
-
-.entry-button {
-  display: inline-block;
-  height: 2em;
-  margin: auto;
-  margin-bottom: #{$gutter};
-  image-rendering: pixelated;
-  font-size: 1.5em;
-  font-weight: bold;
-
-  &:hover {
-    font-style: italic;
-  }
-
-  &::after {
-    content: " >>";
-    color: #{colors.$muted};
-    font-style: normal;
-    text-decoration: underline #{colors.$background} 2px;
-  }
-
-  @include breakpoint("md") {
-    margin-right: 0;
-  }
 }