Update layouts again

2024-06-20 00:45:23 -05:00 · 2024-06-20 00:45:23 -05:00 · 115a00b8fc
parent 8e4011b02c
commit 115a00b8fc
20 changed files with 123 additions and 116 deletions
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@ -2,4 +2,5 @@ module.exports = {
  siteName: "Gil's Nexus",
  siteDescription: "",
  authorName: "Gil",
+  homepage: "/home/",
 };
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@ -1,11 +1,7 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="generator" content="{{ eleventy.generator }}">
-    <title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
-    <link rel="stylesheet" href="/css/reset.css">
+    {% include "partials/meta.njk" %}
    <link rel="stylesheet" href="/css/global.css">
  </head>
  <body>
--- a/src/_includes/layouts/default.njk
+++ b/src/_includes/layouts/default.njk
@ -3,9 +3,6 @@ layout: layouts/base.njk
 ---
 {% include "partials/header.njk" %}
 <main class="page markup">
-  <header>
-    <h1>{{ title }}</h1>
-  </header>
  {{ content | safe }}
 </main>
 {% include "partials/footer.njk" %}
--- a/src/_includes/layouts/landing.njk
+++ b/src/_includes/layouts/landing.njk
@ -1,15 +1,11 @@
 <!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="generator" content="{{ eleventy.generator }}">
-    <title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
-    <link rel="stylesheet" href="/css/reset.css">
+    {% include "partials/meta.njk" %}
    <link rel="stylesheet" href="/css/landing.css">
  </head>
  <body>
-    <nav><a href="{{ entry }}" class="enter-link">Enter</a></nav>
+    <nav><a href="{{ meta.homepage }}" class="enter-link">Enter</a></nav>
    <main>
      <article class="markup">{{ content | safe }}</article>
    </main>
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@ -1,4 +1,4 @@
 <header class="banner">
-  <a class="logo" href="/main/">{{ meta.siteName }}</a>
+  <a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a>
  <nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav>
 </header>
--- a/src/_includes/partials/meta.njk
+++ b/src/_includes/partials/meta.njk
@ -0,0 +1,5 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="{{ eleventy.generator }}">
+<title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
+<link rel="stylesheet" href="/css/reset.css">
--- a/src/about.md
+++ b/src/about.md
@ -1,11 +1,11 @@
 ---
-title: About
 date: Last Modified
 eleventyNavigation:
  key: About
+  order: 1
 ---

-<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." />
+# About

 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.

--- a/src/css/global.css
+++ b/src/css/global.css
@ -2,7 +2,7 @@
 .markup {
  word-wrap: break-word;
  line-height: 1.7;
-  padding: 0 1.5em;
+  padding: 0;
 }
 .markup p,
 .markup blockquote,
@ -15,7 +15,7 @@
 }
 .markup ul,
 .markup ol {
-  all: revert;
+  list-style-type: revert;
  padding-left: 30px;
 }
 .markup h1 {
@ -123,9 +123,10 @@ Full license texts:
  font-weight: 700;
  src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
 }
-html {
+:root {
  font-size: 12pt;
  font-family: "Linux Libertine", "Times New Roman", Times, serif;
+  color-scheme: light dark;
 }

 body {
@ -134,17 +135,24 @@ body {
 }
@media (min-width: 769px) {
  body {
-    grid-template-columns: 2fr 3fr 2fr;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: 3;
+    column-gap: 1em;
    height: 100%;
    padding: 2em 0;
  }
  body > header {
    grid-row: 1;
-    grid-column: 2;
+    grid-column: 1/-1;
  }
  body > footer {
    grid-row: 3;
-    grid-column: 2;
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1025px) {
+  body {
+    grid-template-columns: repeat(12, 1fr);
  }
 }

@ -155,39 +163,39 @@ article {
@media (min-width: 769px) {
  main,
  article {
+    display: grid;
+    grid-template-columns: subgrid;
    grid-row: 2;
-    grid-column: 2;
+    grid-column: 2/span 8;
+  }
+  main *,
+  article * {
+    grid-column: 2/span 6;
  }
 }
-main .gba-portrait,
-article .gba-portrait {
-  margin: auto;
-  margin-bottom: 1em;
-  width: 100%;
-  height: auto;
-  max-width: 192px;
-}
-@media (min-width: 769px) {
-  main .gba-portrait,
-  article .gba-portrait {
-    float: right;
-    margin: 1em;
+@media (min-width: 1025px) {
+  main,
+  article {
+    grid-column: 2/span 10;
+  }
+  main *,
+  article * {
+    grid-column: 4/span 4;
  }
 }

 header.banner {
  text-align: center;
 }
-
-nav.navbar {
+header.banner nav {
  margin-bottom: 1em;
 }
-nav.navbar li {
+header.banner nav li {
  display: inline-flex;
 }

-footer.footer-main {
-  margin: 2em 1em 1em 1em;
+footer {
+  margin: 1em;
  text-align: center;
 }

--- a/src/css/global.css.map
+++ b/src/css/global.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACFA;EACE;EACA;EACA;;AAEA;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;;;AC/EJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AHvCF;EAEI,WEPa;EFQb,aEPe;;;AFWnB;EACE;EACA;;AIokBE;EJtkBJ;IAII;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;;AAKN;AAAA;EAEE;;AIgjBE;EJljBJ;AAAA;IAII;IACA;;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;AIqiBA;EJ1iBF;AAAA;IAOI;IACA;;;;AAKN;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;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;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AHvCF;EAEI,WEPa;EFQb,aEPe;EFSjB;;;AAGF;EACE;EACA;;AIskBE;EJxkBJ;IAII;IACA;IACA,YEzBK;IF0BL;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;AIujBF;EJxkBJ;IAsBI;;;;AAIJ;AAAA;EAEE;;AI4iBE;EJ9iBJ;AAAA;IAKI;IACA;IACA;IACA;;EAEA;AAAA;IACE;;;AImiBF;EJ9iBJ;AAAA;IAgBI;;EAEA;AAAA;IACE;;;;AAKN;EACE;;AACA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA","file":"global.css"}
--- a/src/css/landing.css
+++ b/src/css/landing.css
@ -2,7 +2,7 @@
 .markup {
  word-wrap: break-word;
  line-height: 1.7;
-  padding: 0 1.5em;
+  padding: 0;
 }
 .markup p,
 .markup blockquote,
@ -15,7 +15,7 @@
 }
 .markup ul,
 .markup ol {
-  all: revert;
+  list-style-type: revert;
  padding-left: 30px;
 }
 .markup h1 {
--- a/src/css/landing.css.map
+++ b/src/css/landing.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_classes.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACFA;EACE;EACA;EACA;;AAEA;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;;;AC/EJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AHtCF;EAEI,WERa;EFSb,aERe;;;AFYnB;EACE;EACA;;AImkBE;EJrkBJ;IAII;IACA,KExBK;IFyBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AIojBE;EJ1jBJ;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AIwiBF;EJniBJ;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AI+gBE;EJlhBJ;IAKI;;;AAGF;EACE","file":"landing.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/landing.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;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;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;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;;AH/CF;EAEI,WECa;EFAb,aECe;;;AFGnB;EACE;EACA;;AI+kBE;EJjlBJ;IAII;IACA,KEfK;IFgBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AIgkBE;EJtkBJ;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;AIojBF;EJ/iBJ;IAEI;IACA;IACA;;;AAGF;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AI2hBE;EJ9hBJ;IAKI;;;AAGF;EACE","file":"landing.css"}
--- a/src/home.md
+++ b/src/home.md
@ -0,0 +1,19 @@
+---
+date: Last Modified
+eleventyNavigation:
+  key: Home
+---
+
+# Home
+
+## Status
+
+Latest status here...
+
+## Blog
+
+- Post 1
+- Post 2
+- Post 3
+
+[feed](/rss) (not actual yet)
--- a/src/index.md
+++ b/src/index.md
@ -1,7 +1,6 @@
 ---
 layout: layouts/landing.njk
 date: Last Modified
-entry: /main/
 eleventyNavigation:
  key: Landing
  order: 200
--- a/src/main.md
+++ b/src/main.md
@ -1,17 +0,0 @@
---
-date: Last Modified
-eleventyNavigation:
-  key: Main
---
-
-<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." />
-
-# Home
-
-Another test
-
-## Support me
-
-Let's give this one more go.
-
-<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>
--- a/src/ograph.md
+++ b/src/ograph.md
@ -1,13 +0,0 @@
---
-title: Ograph Collective
-date: Last Modified
-eleventyNavigation:
-  key: Ograph
-  order: 1
---
-
-The Ograph Collective aims to build an online community focused on digital liberation, through the use of free, libre, and open-source software. I co-manage the Ograph Collective with [Kersed](https://kersed.net/), and together we operate three projects: a federated microblogging platform, a Git repository service, and a Keyoxide instance; however, we plan to offer other services in the future.
-
- Microblog on [hol.ogra.ph](https://hol.ogra.ph/@gil)
- Git projects hosted on [ide.ogra.ph](https://ide.ogra.ph/gil)
- Keyoxide profile on [aut.ogra.ph](https://aut.ogra.ph/aspe:keyoxide.org:7IW4QEA4DIBL3YORQH3HTEGDKM)
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@ -1 +1,12 @@
 // _colors.scss
+
+// Palette
+//   Red, green, white, black, etc.
+
+// Semantic/admonition/callout etc.
+//   Primary, secondary, tertiary, emphasis info, warning, shadow, quote,
+//   success, danger, etc...
+
+// $text-normal: black;
+// $text-primary: blue;
+// $text-secondary: purple;
--- a/src/scss/_classes.scss
+++ b/src/scss/_classes.scss
@ -1,7 +1,9 @@
+@use "modules/include-media" as *;
+
 .markup {
  word-wrap: break-word;
  line-height: 1.7;
-  padding: 0 1.5em;
+  padding: 0;

  p,
  blockquote,
@ -15,7 +17,7 @@

  ul,
  ol {
-    all: revert;
+    list-style-type: revert;
    padding-left: 30px;
  }

--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@ -14,71 +14,80 @@
  )
 );

-@use "classes" as *;
+@use "markup";
@use "vars" as *;
@use "fonts";

-html {
+:root {
  font: {
    size: $font-base-size;
    family: $font-stack-serif;
  }
+  color-scheme: light dark;
 }

 body {
  display: grid;
  padding: $gutter * 2;
  @include media(">md") {
-    grid-template-columns: 2fr 3fr 2fr;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: 3;
+    column-gap: $gutter;
    height: 100%;
    padding: ($gutter * 2) 0;

    & > header {
      grid-row: 1;
-      grid-column: 2;
+      grid-column: 1 / -1;
    }

    & > footer {
      grid-row: 3;
-      grid-column: 2;
+      grid-column: 1 / -1;
    }
  }
+
+  @include media(">lg") {
+    grid-template-columns: repeat(12, 1fr);
+  }
 }

 main,
 article {
  font-size: 1rem;
+
  @include media(">md") {
+    display: grid;
+    grid-template-columns: subgrid;
    grid-row: 2;
-    grid-column: 2;
+    grid-column: 2 / span 8;
+
+    * {
+      grid-column: 2 / span 6;
+    }
  }

-  .gba-portrait {
-    margin: auto;
-    margin-bottom: 1em;
-    width: 100%;
-    height: auto;
-    max-width: 192px;
-    @include media(">md") {
-      float: right;
-      margin: 1em;
+  @include media(">lg") {
+    grid-column: 2 / span 10;
+
+    * {
+      grid-column: 4 / span 4;
    }
  }
 }

 header.banner {
  text-align: center;
-}
-
-nav.navbar {
+  nav {
    margin-bottom: 1em;

    li {
      display: inline-flex;
    }
+  }
 }

-footer.footer-main {
-  margin: 2em 1em 1em 1em;
+footer {
+  margin: 1em;
  text-align: center;
 }
--- a/src/scss/landing.scss
+++ b/src/scss/landing.scss
@ -3,18 +3,9 @@
 /* IMPORTS ================================================================= */
@use "sass:math";

-@use "modules/include-media" as * with (
-  $breakpoints: (
-    xs: 0,
-    sm: 640px,
-    md: 768px,
-    lg: 1024px,
-    xl: 1280px,
-    2xl: 1536px,
-  )
-);
+@use "modules/include-media" as *;

-@use "classes" as *;
+@use "markup" as *;
@use "vars" as *;
@use "colors";
@use "fonts";
--- a/src/scss/modules/_include-media.scss
+++ b/src/scss/modules/_include-media.scss
@ -34,9 +34,12 @@
 ///  $breakpoints: ('phone': 320px);
 ///
 $breakpoints: (
-  'phone': 320px,
-  'tablet': 768px,
-  'desktop': 1024px,
+  xs: 0,
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  2xl: 1536px,
 ) !default;

 ///