Adding more complicated stylings

scss/_color.scss

@@ -0,0 +1,37 @@
+/*
+
+COLORS
+
+$primary: #;
+$secondary: #;
+$tertiary: #;
+$neutral: #;
+$white: #;
+$black: #;
+
+FONTS
+
+$head: ;
+$body: ;
+$mono: ;
+*/
+
+:root, [data-selected-theme="light"] {
+    --color-background: #aabf7e; //aabf7e
+    --color-normal: #191b19; //191b19
+    --color-muted: #595959; //595959
+    --color-accent: #344f1f; //344f1f
+    --color-accent2: #60941a; //60941a
+    --color-link: #309bae; //309bae
+    --color-paper: #e8efd7; //e8efd7
+}
+
+[data-selected-theme="dark"] {
+    --color-background: #191b19; //191b19
+    --color-normal: #f8ffef; //f8ffef
+    --color-muted: #8c8c8c; //8c8c8c
+    --color-accent: #60941a; //60941a
+    --color-accent2: #344f1f; //344f1f
+    --color-link: #05abc4; //05abc4
+    --color-paper: #070e07; //070e07
+}

scss/_font.scss

@@ -0,0 +1,23 @@
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "Inclusive Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/inclusive-sans.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+  
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "Inclusive Sans";
+    font-style: italic;
+    font-weight: 400;
+    src: url("../fonts/inclusive-sans-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }
+
+  @font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: "Kurale";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/kurale.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  }

scss/_theme.scss

@@ -1,27 +0,0 @@
-/*
-
-COLORS
-
-$primary: #;
-$secondary: #;
-$tertiary: #;
-$neutral: #;
-$white: #;
-$black: #;
-
-FONTS
-
-$head: ;
-$body: ;
-$mono: ;
-*/
-
-:root, [data-selected-theme="light"] {
-    --theme-background: rgb(230, 245, 230);
-    --theme-text: rgb(8, 10, 8);
-}
-
-[data-selected-theme="dark"] {
-    --theme-background: rgb(8, 10, 8);
-    --theme-text: rgb(230, 245, 230);
-}

scss/main.scss

@@ -1,12 +1,37 @@
-@use 'media';
+@use "media";
-@use 'theme';
+@use "color";
+@use "font";
+
+$font-sans: "Inclusive Sans", sans-serif;
+$font-display: "Kurale", serif;
 
 body {
-    background-color: var(--theme-background);
+  background-color: var(--color-background);
-    color: var(--theme-text);
+  color: var(--color-normal);
+  font-family: $font-sans;
 }
 
-a#skip-navigation {
+a {
+  color: var(--color-link);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-display;
+  color: var(--color-accent);
+}
+
+hr {
+  height: 1px;
+  background-color: var(--color-normal);
+  border: none;
+}
+
+#skip-navigation {
   position: fixed;
   top: -100%;
   right: 0;
@@ -19,23 +44,71 @@ a#skip-navigation {
 .site {
   display: flex;
   flex-direction: column;
+  @include media.breakpoint(large) {
+    margin: auto;
+    width: 70%;
+  }
 }
 
-.contentarea {
+.box {
+  border: solid var(--color-normal) 2px;
+  border-bottom-width: 5px;
+  border-radius: 5px;
+}
+
+.navbar {
   display: flex;
-    flex-direction: column;
-
-    main {
   width: 100%;
+  margin: 5px 0;
+  gap: 5px;
+  a {
+    @extend .box;
+    display: inline;
+    width: 100%;
+    background-color: var(--color-paper);
+    color: var(--color-accent);
+    padding: 10px;
+    font-weight: bold;
+    text-decoration: none;
+    &:hover {
+      background-color: var(--color-accent2);
+    }
+    &[aria-current="page"] {
+      background-color: var(--color-accent);
+      color: var(--color-background);
+      margin-top: 2px;
+      border-bottom-width: 2px;
     }
-
-    @include media.breakpoint(medium) {
-        flex-direction: row-reverse;
   }
 }
 
-ul#updates {
+.page-footer {
-    time {
+  @extend .box;
-        color: rgb(110, 110, 110); // Muted color
+  background-color: var(--color-paper);
+  padding: 10px;
+  margin: 5px 0;
+  :first-child {
+    margin-top: 0;
   }
 }
+
+.site-footer {
+  @extend .page-footer;
+  margin: 0 0 50px 0;
+}
+
+.page-container {
+  main {
+    @extend .box;
+    width: 100%;
+    background-color: var(--color-paper);
+    padding: 10px;
+    :first-child {
+      margin-top: 0;
+    }
+  }
+}
+
+.muted {
+  color: var(--color-muted); // Muted color
+}

src/404.md

@@ -0,0 +1,11 @@
+---
+title: 'Error 404: Not found'
+layout: base.njk
+permalink: '404.html'
+---
+
+# Error 404
+
+Uh-oh! Couldn't find that URL on this server. Maybe you had a typo?
+
+[Go home](/)

src/_data/updates.json

@@ -1,4 +1,8 @@
 [
+    {
+        "date": "2025-04-29",
+        "content": "Oh, it's getting a little more stylish in here..."
+    },
     {
         "date": "2025-04-28",
         "content": "Finally have a functioning `/now` page!"

src/_includes/footer.njk

@@ -1,6 +1,14 @@
-<p><a href="#top">Jump to top</a>
+<footer class="page-footer">
-<p>Created {{ page.date | formatDate }}
+    <p>
-<br>
+        <a href="#top" id="jump-top">Jump to top</a><br/>
-{% if lastmod %}Last modified {{ lastmod | formatDate }}{% endif %}</p>
+        <strong>Created</strong>
-{% include 'theme-switcher.njk' %}
+        <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
-<p>Made by {{ meta.author }}</p>
+        {% if lastmod %}•
+            <strong>Last modified</strong>
+            <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
+        {% endif %}
+    </p>
+</footer>
+<footer class="site-footer">
+    <p>Made by me with Eleventy</p>
+    {% include 'theme-switcher.njk' %}</footer>

src/_includes/head.njk

@@ -0,0 +1,5 @@
+<head>
+    {% include 'head/meta.njk' %}
+    {% include 'head/reset.njk' %}
+    {% include 'head/styles.njk' %}
+</head>

src/_includes/head/reset.njk

@@ -0,0 +1 @@
+<link rel="stylesheet" href="/assets/css/reset.css" type="text/css" media="screen" title="no title">

src/_includes/head/styles.njk

@@ -0,0 +1,9 @@
+<link rel="preload" href="/assets/fonts/inclusive-sans.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
+<link
+    rel="preload"
+    href="/assets/fonts/inclusive-sans-italic.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin="anonymous"/>
+<link rel="preload" href="/assets/fonts/kurale.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
+<link rel="stylesheet" href="/assets/css/main.css" type="text/css" media="screen" title="no title"/>

src/_includes/header.njk

@@ -1 +0,0 @@
-<h1 id="top" tabindex="-1">Gil.Ink</h1>

src/_includes/nav.njk

@@ -1,13 +1,4 @@
 {% set navPages = collections.all | eleventyNavigation %}
-<nav>
+<nav class="navbar">{% for entry in navPages %}
-    <ul>
+    <a href="{{ entry.url }}" {% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a>
-        {% for entry in navPages %}<li>
+{% endfor %}</nav>
-            <a href="{{ entry.url }}" {% if entry.url == page.url %} aria-current="page" {% endif %}>{{ entry.title }}</a>
-            {% if entry.children %}<ul>
-                {% for subEntry in entry.children %}<li>
-                    <a href="{{ subEntry.url }}" {% if subEntry.url == page.url %} aria-current="page" {% endif %}>{{ subEntry.title }}</a>
-                </li>{% endfor %}
-            </ul>{% endif %}
-        </li>{% endfor %}
-    </ul>
-</nav>

src/_includes/snippets/socials.njk

@@ -0,0 +1,7 @@
+**Microblogging** <a href="https://hol.ogra.ph/@gil" rel="me">@gil@hol.ogra.ph</a>
+**Forgejo** [ide.ogra.ph/gil](https://ide.ogra.ph/gil)
+**Matrix** [@kalanggam:matrix.org](https://matrix.to/#/@kalanggam:matrix.org)
+**Pixelfed** [pixelfed.social/kalanggam](https://pixelfed.social/kalanggam)
+**Bookwyrm** [bookwyrm.social/user/kalanggam](https://bookwyrm.social/user/kalanggam)
+**Bluesky** [@kalanggam.bsky.social](https://bsky.app/profile/kalanggam.bsky.social)
+**Newsletter** [gilosophies.ghost.io](https://gilosophies.ghost.io/) (forthcoming)

src/_includes/snippets/updates.njk

@@ -0,0 +1,3 @@
+{% for update in updates -%}
+<time class="muted" datetime="{{ update.date }}">[{{ update.date }}]</time> {{ update.content | mdinline }}
+{% endfor %}

src/_includes/theme-switcher.njk

@@ -1 +1,6 @@
-Theme Switcher
+<div class="theme-switcher">
+    Theme:
+    <button data-theme="system" aria-pressed="true">System</button>
+    <button data-theme="light" aria-pressed="false">Light</button>
+    <button data-theme="dark" aria-pressed="false">Dark</button>
+</div>

src/_includes/updates.njk

@@ -1,6 +0,0 @@
-<ul id="updates">
-{% for update in updates %}<li>
-    <time datetime="{{ update.date }}">[{{ update.date }}]</time>
-    {{ update.content | mdinline }}
-</li>{% endfor %}
-</ul>

src/_layouts/base.njk

@@ -1,17 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
+    {% include 'head.njk' %}
-        {% include 'meta.njk' %}
-        <link rel="stylesheet" href="/assets/css/reset.css" type="text/css" media="screen" title="no title">
-        <link rel="stylesheet" href="/assets/css/main.css" type="text/css" media="screen" title="no title">
-    </head>
     <body>
         <div class="site">
-            {% include 'header.njk' %}
+            <a href="#page-container" id="skip-navigation">Skip navigation</a>
-            <a href="#main-content" id="skip-navigation">Skip navigation</a>
+            <h1 id="top" tabindex="-1">Gil•INK</h1>
-            <div class="contentarea">
+            {% include 'nav.njk' %}
-                {% include 'sidebar.njk' %}
+            <div class="page-container" id="page-container">
-                <main id="main-content">{{ content | safe }}</main>
+                <main class="main-content">{{ content | safe }}</main>
             </div>
             {% include 'footer.njk' %}
         </div>

src/about.md

@@ -1,9 +1,9 @@
 ---
-title: '/about'
+title: 'About'
 layout: base.njk
 lastmod: 2025-02-20T02:11:25.00-06:00
 eleventyNavigation:
-  key: '/about'
+  key: 'About'
 ---
 
 * Gil
@@ -14,9 +14,7 @@ Distro: EndeavourOS
 DE: KDE Plasma
 HW: Custom PC + Thinkpad
 
-Discord: kalanggam
+{% include 'snippets/socials.njk' %}
-Matrix: @kalanggam:matrix.org
-Fedi: @gil@hol.ogra.ph
 
 Creating
 - Printmaking- linocut/woodblock prints

src/assets/css/main.css

@@ -16,27 +16,79 @@ $body: ;
 $mono: ;
 */
 :root, [data-selected-theme=light] {
-  --theme-background: rgb(230, 245, 230);
+  --color-background: #aabf7e;
-  --theme-text: rgb(8, 10, 8);
+  --color-normal: #191b19;
+  --color-muted: #595959;
+  --color-accent: #344f1f;
+  --color-accent2: #60941a;
+  --color-link: #309bae;
+  --color-paper: #e8efd7;
 }
 
 [data-selected-theme=dark] {
-  --theme-background: rgb(8, 10, 8);
+  --color-background: #191b19;
-  --theme-text: rgb(230, 245, 230);
+  --color-normal: #f8ffef;
+  --color-muted: #8c8c8c;
+  --color-accent: #60941a;
+  --color-accent2: #344f1f;
+  --color-link: #05abc4;
+  --color-paper: #070e07;
 }
 
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inclusive Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/inclusive-sans.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inclusive Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/inclusive-sans-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Kurale";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/kurale.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
 body {
-  background-color: var(--theme-background);
+  background-color: var(--color-background);
-  color: var(--theme-text);
+  color: var(--color-normal);
+  font-family: "Inclusive Sans", sans-serif;
 }
 
-a#skip-navigation {
+a {
+  color: var(--color-link);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Kurale", serif;
+  color: var(--color-accent);
+}
+
+hr {
+  height: 1px;
+  background-color: var(--color-normal);
+  border: none;
+}
+
+#skip-navigation {
   position: fixed;
   top: -100%;
   right: 0;
   padding: 10px;
 }
-a#skip-navigation:focus {
+#skip-navigation:focus {
   top: 0;
 }
 
@@ -44,22 +96,68 @@ a#skip-navigation:focus {
   display: flex;
   flex-direction: column;
 }
-
+@media only screen and (min-width: 992px) {
-.contentarea {
+  .site {
-  display: flex;
+    margin: auto;
-  flex-direction: column;
+    width: 70%;
-}
-.contentarea main {
-  width: 100%;
-}
-@media only screen and (min-width: 768px) {
-  .contentarea {
-    flex-direction: row-reverse;
   }
 }
 
-ul#updates time {
+.box, .page-container main, .page-footer, .site-footer, .navbar a {
-  color: rgb(110, 110, 110);
+  border: solid var(--color-normal) 2px;
+  border-bottom-width: 5px;
+  border-radius: 5px;
+}
+
+.navbar {
+  display: flex;
+  width: 100%;
+  margin: 5px 0;
+  gap: 5px;
+}
+.navbar a {
+  display: inline;
+  width: 100%;
+  background-color: var(--color-paper);
+  color: var(--color-accent);
+  padding: 10px;
+  font-weight: bold;
+  text-decoration: none;
+}
+.navbar a:hover {
+  background-color: var(--color-accent2);
+}
+.navbar a[aria-current=page] {
+  background-color: var(--color-accent);
+  color: var(--color-background);
+  margin-top: 2px;
+  border-bottom-width: 2px;
+}
+
+.page-footer, .site-footer {
+  background-color: var(--color-paper);
+  padding: 10px;
+  margin: 5px 0;
+}
+.page-footer :first-child, .site-footer :first-child {
+  margin-top: 0;
+}
+
+.site-footer {
+  margin: 0 0 50px 0;
+}
+
+.page-container main {
+  width: 100%;
+  background-color: var(--color-paper);
+  padding: 10px;
+}
+.page-container main :first-child {
+  margin-top: 0;
+}
+
+.muted {
+  color: var(--color-muted);
 }
 
 /*# sourceMappingURL=main.css.map */

src/assets/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;;;AAGJ;EACI;EACA;;;ACtBJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;ACvBF;EDkBN;IASQ;;;;AAKJ;EACI","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnCJ;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACdJ;EACE;EACA;EACA,aANU;;;AASZ;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAlBa;EAmBb;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;ACrCI;EDmCN;IAII;IACA;;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;;AAKN;EAEE;EACA;EACA;;AACA;EACE;;;AAIJ;EAEE;;;AAIA;EAEE;EACA;EACA;;AACA;EACE;;;AAKN;EACE","file":"main.css"}

src/changelog.md

@@ -1,9 +1,9 @@
 ---
-title: '/changelog'
+title: 'Changelog'
 layout: base.njk
-lastmod: 2025-04-28T07:59:00.00-06:00
+lastmod: 2025-04-29T17:38:00.00-05:00
 eleventyNavigation:
-  key: '/changelog'
+  key: 'Changelog'
   parent: '/slashes'
 ---
 
@@ -18,3 +18,4 @@ This is a list of changes to my website, organized by date.
 
 ## 0.0.2 (pending)
 - Added a media query to move the navigation sidebar to the top on smaller screens, to the right on larger screens
+- Used fonts [Kurale](https://github.com/etunni/kurale) (display, headers), [Inclusive Sans](https://www.oliviaking.com/inclusivesans) (sans serif, body)

src/index.md

@@ -6,26 +6,18 @@ eleventyNavigation:
   key: 'Home'
   order: -1
 ---
-Howdy!
+
+# Howdy!
 
 My name's Gil ([he/they](https://en.pronouns.page/@kalanggam)). I write things, make games, and study engineering. I like building community offline and online.
 
-Find me:
+{% include 'snippets/socials.njk' %}
-
-- 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)
-- Reads: [bookwyrm.social/user/kalanggam](https://bookwyrm.social/user/kalanggam)
-- Bluesky: [@kalanggam.bsky.social](https://bsky.app/profile/kalanggam.bsky.social)
-
-Subscribe to my (forthcoming) newsletter: [gilosophies.ghost.io](https://gilosophies.ghost.io)
 
 ---
 
-## Recent updates
+## Updates
 
-{% include 'updates.njk' %}
+{% include 'snippets/updates.njk' %}
 
 ---
 

src/now.md

@@ -7,4 +7,4 @@ eleventyNavigation:
   parent: '/slashes'
 ---
 
-{% include 'updates.njk' %}
+{% include 'snippets/updates.njk' %}

src/slashes.md

@@ -6,6 +6,7 @@ eleventyNavigation:
   key: '/slashes'
   order: 999
 ---
+# Slashpages
 
 From [slashpages.net](https://slashpages.net/):