Revamp landing

2024-06-10 13:42:50 -05:00 · 2024-06-10 13:42:50 -05:00 · 88f6485e3b
parent f010260a96
commit 88f6485e3b
10 changed files with 172 additions and 137 deletions
--- a/9
+++ b/9
@ -1,13 +1,20 @@
 # Todo

 - [ ] Add colophon and licensing info
- [ ] Clean up and polish landing page
+- [x] Clean up and polish landing page
 - [ ] Do some i18n? (e.g., English, German, Tagalog, Bisaya, Spanish, etc.)
 - [ ] Add more graphical stuff to site so it doesn't look so bland
  - [ ] Banner image
  - [ ] Landing background
+  - [ ] Landing link icons
  - [ ] Global background
  - [ ] Custom badge
 - [ ] Make a webring with ringfairy and join webrings
 - [ ] Redo about page
 - [ ] Add blog post
+
+# Changelog
+
+## 0.0.1
+
+- Added landing page
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "gils-nexus",
-  "version": "1.0.1",
+  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
--- a/src/_includes/bmac.njk
+++ b/src/_includes/bmac.njk
@ -0,0 +1,8 @@
+<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"
+    title="Buy Me A Coffee"
+    style="height: 60px !important;width: 217px !important; display: inline;"
+  >
+</a>
--- a/src/_includes/landing.njk
+++ b/src/_includes/landing.njk
@ -9,22 +9,10 @@
    <link rel="stylesheet" href="/css/landing.css">
  </head>
  <body>
+    <main><article>{{ content | safe }}</article><a href="{{ entry }}" class="entry-button">Enter</a></main>
    <aside>
-      <img
-        src="../img/gba-gil.png"
-        alt="A picture of Gil (me), taken with webgbcam"
-        title="A picture of Gil (me), taken with webgbcam"
-      >
+      <img src="../img/landing-sigil.png" alt="A sigil-esque drawing" title="A sigil-esque drawing">
+      <div class="spacer"></div>
    </aside>
-    <main>
-      <article>{{ content | safe }}</article>
-      <a href="/about">
-        <img
-          src="../img/landing-button.png"
-          alt="Enter site"
-          title="Enter site"
-        >
-      </a>
-    </main>
  </body>
 </html>
--- a/src/css/landing.css
+++ b/src/css/landing.css
@ -82,86 +82,102 @@ COLORS
 :root {
  font-size: 14pt;
  font-family: "Linux Libertine", "Times New Roman", Times, serif;
-  line-height: 1.25;
+  line-height: 1.5;
 }

 body {
  background-color: #141013;
-  width: 100vw;
-  height: 100vh;
  display: flex;
  flex-direction: column;
-  align-items: center;
-  justify-content: center;
  gap: 10px;
+  align-items: center;
 }
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 768px) {
  body {
    flex-direction: row;
+    justify-content: center;
+    height: 100vh;
  }
 }

-main article {
+main {
  width: 100%;
  max-width: 500px;
-  height: auto;
-  max-height: 500px;
-  overflow: scroll;
-  padding: 10px;
-  border: solid white;
+  gap: 10px;
  color: white;
-  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
 }
-main article blockquote {
-  background: #30272e;
-  border-bottom: solid white;
+main article {
+  background: rgb(28, 27, 26);
  padding: 10px;
-  font-size: 1.25em;
-}
-main article blockquote h1 {
-  margin-top: 10px;
-  font-weight: bold;
-}
-main article blockquote h1::after {
-  content: "";
-  margin-left: 10px;
-  width: 10px;
-  height: 24px;
-  background: white;
-  display: inline-block;
-  vertical-align: bottom;
-  animation: cursor-blink 1.5s steps(1) infinite;
-}
-@keyframes cursor-blink {
-  0% {
-    background: transparent;
-  }
-  50% {
-    background: white;
-  }
+  padding-top: 0;
+  font-size: 1rem;
 }
 main article :first-child {
  margin-top: 0;
 }
-main article p {
-  margin-top: 10px;
+main article h1 {
+  font-size: 2em;
+}
+main article h1 a {
+  font-size: 0.5em;
+}
+main article h2 {
+  font-weight: bold;
+}
+main article *:not(li) + *:not(li) {
+  margin-top: 1em;
 }
 main article ol,
 main article ul {
  all: revert;
-  margin-bottom: 0;
+  margin: 10px 0;
  padding-left: 1em;
 }
-main img {
-  display: block;
-  margin: auto;
-  margin-top: 10px;
-  image-rendering: pixelated;
+@media screen and (min-width: 768px) {
+  main article {
+    border: solid rgb(40, 39, 38);
+    max-height: 400px;
+    overflow: scroll;
+  }
+}
+main a {
+  color: rgb(102, 128, 11);
+  text-decoration: underline rgb(102, 128, 11) 2px;
+}
+main a:hover {
+  color: rgb(135, 154, 57);
 }

 aside {
-  max-width: 216px;
+  margin-top: 20px;
+  width: 256px;
+}
+@media screen and (min-width: 768px) {
+  aside {
+    margin-top: 0;
+    margin-left: 10px;
+  }
+}
+aside img {
+  width: 100%;
  image-rendering: pixelated;
+  max-width: 256px;
+}
+
+.spacer {
+  height: 2em;
+}
+
+.entry-button {
+  font-size: 1.5em;
+  margin: auto;
+  margin-bottom: 10px;
+}
+
+.entry-button:hover {
+  font-style: italic;
 }

 /*# 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":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;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;AAYA;;AAAA;AAAA;;AAAA;AAYA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,KAlCO;;ACGP;EDuBF;IAUI;;;;AAKF;EACE;EACA,WAzCQ;EA0CR;EACA,YA3CQ;EA4CR;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA,SAzDG;EA0DH;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EASA;;AARA;EACE;IACE;;EAEF;IACE;;;AAOR;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;EACA,YAxGK;EAyGL;;;AAIJ;EACE,WA1Ga;EA2Gb","file":"landing.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;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;AAYA;;AAAA;AAAA;;AAAA;AAUA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA,KA5BO;EA6BP;;AC3BA;EDsBF;IAQI;IACA;IACA;;;;AAIJ;EACE;EACA,WAtCU;EAuCV,KAzCO;EA0CP;EACA;EACA;;AAEA;EACE;EACA,SAhDK;EAiDL;EACA;;AAEA;EACE;;AAGF;EACE;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;ACzEJ;ED4CA;IAiCI;IACA;IACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;AC/FA;ED6FF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"landing.css"}
--- a/src/img/landing-button.png
+++ b/src/img/landing-button.png
--- a/src/img/landing-sigil.png
+++ b/src/img/landing-sigil.png
--- a/src/index.md
+++ b/src/index.md
@ -1,15 +1,19 @@
 ---
 layout: landing.njk
 date: Last Modified
+entry: /about/
 ---

-> You've arrived at the edge of a clearing.
-> 
-> The air is thick with an energy, which seemingly converges on at this place.
->
-> # Continue? (Y/N)
+# Gil [[he/they]](https://en.pronouns.page/@kalanggam)

-My name is Gil (he/they), and I'm a software/game developer and writer. You can find me online at:
+Hey. I'm Gil. 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.

-* Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil)
-* Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
+This landing page hosts links for where I can be found online. Use the button at the bottom to view my full website.
+
+## Links
+
+- Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil)
+- 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)
--- a/src/scss/landing.scss
+++ b/src/scss/landing.scss
@ -1,3 +1,4 @@
+@use "sass:math";
@use "colors";
@use "fonts";
@use "mixins" as *;
@ -11,8 +12,8 @@ VARIABLES
 $gutter: 10px;
 $padding: $gutter;
 $max-width: 500px;
-$max-height: $max-width;
-$avatar-width: 216px;
+$max-height: math.div($max-width, 2);
+$avatar-width: 256px;

 /*

@ -21,103 +22,114 @@ COLORS

 */
 $fg: white;
-$fg-logo: colors.$magenta-600;
-$link: colors.$green-600;
-$bg-hover: scale-color(colors.$green-400, $alpha: -75%);
-$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
+$link-color: colors.$green-600;
+$link-color-hover: colors.$green-400;

 :root {
  font: {
    size: 14pt;
    family: "Linux Libertine", "Times New Roman", Times, serif;
  }
-  line-height: 1.25;
+  line-height: 1.5;
 }

 body {
  background-color: #{colors.$bg};
-  width: 100vw;
-  height: 100vh;
  display: flex;
  flex-direction: column;
-  align-items: center;
-  justify-content: center;
  gap: $gutter;
-  @include breakpoint("sm") {
+  align-items: center;
+
+  @include breakpoint("md") {
    flex-direction: row;
+    justify-content: center;
+    height: 100vh;
  }
 }

 main {
-  article {
  width: 100%;
  max-width: $max-width;
-    height: auto;
-    max-height: $max-height;
-    overflow: scroll;
-    padding: #{$padding};
-
-    border: solid #{$fg};
+  gap: $gutter;
  color: #{$fg};
+  display: flex;
+  flex-direction: column;

-    font-size: 1rem;
-
-    blockquote {
-      background: lighten(colors.$bg, $amount: 10%);
-      border-bottom: solid white;
+  article {
+    background: #{colors.$base-950};
    padding: $gutter;
-      font-size: 1.25em;
-
-      h1 {
-        margin-top: #{$gutter};
-        font-weight: bold;
-      }
-  
-      h1::after {
-        content: "";
-        margin-left: #{$gutter};
-        width: 10px;
-        height: 24px;
-        background: #{$fg};
-        display: inline-block;
-        vertical-align: bottom;
-        @keyframes cursor-blink {
-          0% {
-            background: transparent;
-          }
-          50% {
-            background: #{$fg};
-          }
-        }
-        animation: cursor-blink 1.5s steps(1) infinite;
-      }
-    }
+    padding-top: 0;
+    font-size: 1rem;

    :first-child {
      margin-top: 0;
    }

-    p {
-      margin-top: #{$gutter};
+    h1 { 
+      font-size: 2em;
+      a {
+        font-size: 0.5em;
+      }
+    }
+
+    h2 {
+      font-weight: bold;
+    }
+
+    *:not(li) + *:not(li) {
+      margin-top: 1em;
    }

    ol,
    ul {
      all: revert;
-      margin-bottom: 0;
+      margin: #{$gutter} 0;
      padding-left: 1em;
    }
+
+    @include breakpoint("md") {
+      border: solid #{colors.$base-900};
+      max-height: 400px;
+      overflow: scroll;
+    }
  }

-  img {
-    display: block;
-    margin: auto;
-    margin-top: $gutter;
-    image-rendering: pixelated;
+  a {
+    color: #{$link-color};
+    text-decoration: underline #{$link-color} 2px;
+
+    &:hover {
+      color: #{$link-color-hover};
+    }
  }
 }

 aside {
-  max-width: $avatar-width;
+  margin-top: #{$gutter * 2};
+  width: #{$avatar-width};
+
+  @include breakpoint("md") {
+    margin-top: 0;
+    margin-left: #{$gutter};
+  }
+
+  img {
+    width: 100%;
    image-rendering: pixelated;
+    max-width: #{$avatar-width};
+  }
+}
+
+.spacer {
+  height: 2em;
+}
+
+.entry-button {
+  font-size: 1.5em;
+  margin: auto;
+  margin-bottom: #{$gutter};
+}
+
+.entry-button:hover {
+  font-style: italic;
 }