Publish 0.0.2 (2025-05-17)

2025-05-17 09:17:44 -05:00 · 2025-05-17 09:17:44 -05:00 · c142eb8167
parent 9ba658a3ae
commit c142eb8167
19 changed files with 345 additions and 212 deletions
--- a/scss/_font.scss
+++ b/scss/_font.scss
@ -1,107 +1,137 @@
 /* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
-  src: url('../fonts/poppins-v23-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
-  src: url('../fonts/poppins-v23-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* poppins-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
-  src: url('../fonts/poppins-v23-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* poppins-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
-  src: url('../fonts/poppins-v23-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-700italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* poppins-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
-  src: url('../fonts/poppins-v23-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* poppins-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Poppins';
+  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
-  src: url('../fonts/poppins-v23-latin_latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/poppins-v23-latin_latin-ext-900italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
-  src: url('../fonts/inter-v18-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
-  src: url('../fonts/inter-v18-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
-  src: url('../fonts/inter-v18-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
-  src: url('../fonts/inter-v18-latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
-  src: url('../fonts/inter-v18-latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* inter-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Inter';
+  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
-  src: url('../fonts/inter-v18-latin_latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+  src: url("../fonts/inter-v18-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-bold-italic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
 }
--- a/scss/_theme.scss
+++ b/scss/_theme.scss
@ -1,23 +1,35 @@
-/*
-COLORS
-*/
-
+@use "sass:color";
 /*
 Themes
 */

-:root, [data-selected-theme="grayscalelight"] {
-  --color-background: #fff;
-  --text-normal: #000;
-  --text-invert: #fff;
-  --text-subtle: #666;
-  --color-primary: #999;
-  --color-secondary: #aaa;
-  --color-link: #00f;
-  --color-paper: #fff;
-  --background: #eee;
+$white: #fff;
+$swhite: #f8f8f8;
+$lgray: #999;
+$gray: #666;
+$dgray: #333;
+$sblack: #111;
+$black: #000;
+$red: #b22;
+$orange: #b72;
+$yellow: #db3;
+$green: #594;
+$teal: #39a;
+$blue: #36c;
+$purple: #75c;
+
+:root,
+[data-selected-theme="grayscalelight"] {
+  --color-bg: #{$white};
+  --color-bg-2: #{$swhite};
+  --color-border: #{$lgray};
+  --color-tx: #{$sblack};
+  --color-link: #{$blue};
+  --color-hover: #{color.scale($blue, $lightness: -50%)};
+  --color-active: #{color.scale($blue, $lightness: +50%)};
 }

+/*
 [data-selected-theme="light"] {
  --color-background: #aabf7e; //aabf7e
  --text-normal: #191b19; //191b19
@ -28,39 +40,25 @@ Themes
  --color-link: #309bae; //309bae
  --color-paper: #e8efd7; //e8efd7
 }
-
-[data-selected-theme="dark"] {
-  --color-background: #191b19; //191b19
-  --text-normal: #f8ffef; //f8ffef
-  --text-invert: #fff;
-  --text-subtle: #8c8c8c; //8c8c8c
-  --color-primary: #60941a; //60941a
-  --color-secondary: #344f1f; //344f1f
-  --color-link: #05abc4; //05abc4
-  --color-paper: #070e07; //070e07
-}
-
-[data-selected-theme="grayscaledark"] {
-  --color-background: #fff;
-  --text-normal: #000;
-  --text-invert: #fff;
-  --text-subtle: #666;
-  --color-primary: #999;
-  --color-secondary: #aaa;
-  --color-link: #39a;
-  --color-paper: #fff;
-  --background: #eee;
-}
+*/

 /*
 Themed elements
 */
 body {
-  background: var(--background);
+  background: var(--color-bg);
 }

 a {
  color: var(--color-link);
+  text-decoration: dotted underline;
+  &:hover {
+    color: var(--color-hover);
+    text-decoration: solid underline;
+  }
+  &:active {
+    color: var(--color-active);
+  }
 }

 h1 {
@ -84,5 +82,74 @@ hr {
 }

 .site {
-  color: var(--text-normal);
+  color: var(--color-tx);
+}
+
+.idcard {
+  margin: auto;
+  background: #{color.scale($orange, $lightness: +95%)};
+  background: linear-gradient(
+    120deg,
+    #{color.scale($orange, $lightness: +95%)} 79%,
+    #{$teal} 79%,
+    #{$teal} 80%,
+    #{color.scale($orange, $lightness: +95%)} 80%,
+    #{color.scale($orange, $lightness: +95%)} 81%,
+    #{$teal} 81%,
+    #{$green} 84%,
+    #{color.scale($orange, $lightness: +95%)} 84%,
+    #{color.scale($orange, $lightness: +95%)} 85%,
+    #{$green} 78%,
+  );
+  border: solid var(--color-bg-2) 2px;
+  border-radius: 15px;
+  &__header {
+    padding: 15px;
+    border-radius: inherit;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    background-color: #{$green};
+    text-transform: uppercase;
+    font-weight: bold;
+    h3 {
+      margin-top: 0px;
+      text-align: center;
+      color: #{color.scale($orange, $lightness: +95%)};
+    }
+  }
+
+  &__picture {
+    max-width: 200px;
+    margin: auto;
+    margin-top: 20px;
+  }
+
+  &__bio {
+    padding: 15px;
+    width: max-content;
+    p {
+      margin-top: 5px;
+    }
+  }
+
+  &__label {
+    font-weight: bold;
+    font-size: 85%;
+    color: #{$blue};
+  }
+}
+
+.box {
+  border-radius: 15px; 
+  border: dashed 1px var(--color-border);
+  background-color: var(--color-bg-2);
+}
+
+.pad {
+  padding: 15px;
+  padding-top: 0;
+}
+
+.gap {
+  gap: 15px;
 }
--- a/scss/main.scss
+++ b/scss/main.scss
@ -6,7 +6,7 @@

 $font-sans: "Inter", sans-serif;
 $font-disp: "Poppins", sans-serif;
-$font-mono: monospace;
+$font-mono: "Hack", monospace;

 body {
  font-family: $font-sans;
@ -21,8 +21,8 @@ h6 {
  font-family: $font-disp;
 }

-a:hover {
-  text-decoration-thickness: 3px;
+pre, code {
+  font-family: $font-mono;
 }

 .monospace {
@ -33,6 +33,7 @@ a:hover {
  position: fixed;
  top: -100%;
  right: 0;
+
  &:focus {
    top: 0;
  }
@ -41,8 +42,6 @@ a:hover {
 .site {
  display: flex;
  flex-direction: column;
-
  width: min(1000px, 100vw);
-
-  margin: 1em auto;
+  margin: auto;
 }
--- a/scss/pages/_about.scss
+++ b/scss/pages/_about.scss
@ -8,11 +8,10 @@
    display: grid;
    grid:
      "main idcard" auto
-      "main ." auto
-                                                                                "main funfacts" auto
-      "interests funfacts" auto
+      "main funfacts" auto
+      "main interests" auto
      "social social" auto
-      / 1fr 1fr;
+      / auto auto;
  }

  @include media.breakpoint(medium) {
@ -21,7 +20,7 @@
      "main main ." auto
      "interests funfacts funfacts" auto
      ". social ." auto
-      / 1fr auto 1fr;
+      / auto auto auto;
  }

  .main-content {
@ -42,34 +41,7 @@
 }

 .idcard {
-  display: grid;
-  max-width: 400px;
+  display: flex;
+  flex-direction: column;
  grid-area: idcard;
-  grid:
-    "header header" auto
-    ". bio" auto
-    "photo bio" auto
-    ".  bio" auto
-    / auto 1fr;
-
-  .idcard__bio {
-    grid-area: bio;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-    .idcard__line {
-      &--wide {
-        @extend .idcard__line;
-        grid-column: span 2;
-      }
-    }
-  }
-
-  .idcard__header {
-    grid-area: header;
-  }
-
-  .idcard__picture {
-    grid-area: photo;
-  }
 }
--- a/src/_data/updates.json
+++ b/src/_data/updates.json
@ -1,8 +1,4 @@
 [
-  {
-    "date": "2025-04-29",
-    "content": "Oh, it's getting a little more stylish in here..."
-  },
  {
    "date": "2025-02-20",
    "content": "Hello world!"
--- a/src/_includes/head/default-styles.njk
+++ b/src/_includes/head/default-styles.njk
@ -1,5 +1,2 @@
-<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"/>
 <link rel="stylesheet" href="/assets/css/print.css" type="text/css" media="print" title="no title"/>
--- a/src/_includes/snippets/updates.njk
+++ b/src/_includes/snippets/updates.njk
@ -1,6 +1,6 @@
 <p>
  {% for update in updates %}
-    <time class="muted" datetime="{{ update.date }}">[{{ update.date }}]</time>
+    <time class="muted" datetime="{{ update.date }}">{{ update.date }}</time> /
    {{ update.content | safe }}<br/>
  {% endfor %}
 </p>
--- a/src/_layouts/about.njk
+++ b/src/_layouts/about.njk
@ -2,24 +2,39 @@
 layout: base.njk
 ---

-<main class="page--about">
-  <main class="main-content">{{ content | safe }}</main>
+<main class="page--about gap">
+  <main class="main-content box pad">{{ content | safe }}</main>
  <aside class="idcard">
-    <header class="idcard__header">Identification card</header>
+    <header class="idcard__header">
+      <h3>Identification card</h3>
+    </header>
    <div class="idcard__picture">
-      <img src="/assets/img/about-profile.png"/>
+      <img src="/assets/img/about-profile.png" />
    </div>
    <main class="idcard__bio">
-      <p class="idcard__line--wide monospace">GI0755592238</p>
-      <p class="idcard__line--wide">Gil</p>
-      <p class="idcard__line">26</p>
-      <p class="idcard__line">he/they</p>
-      <p class="idcard__line">Cancer</p>
-      <p class="idcard__line--wide monospace">07/15/2030</p>
-      <p class="idcard__line--wide monospace">05/10/2025</p>
+      <p class="idcard__number">
+        <span class="idcard__label">ID#</span>
+        <code>GI0755>>592238</code>
+      </p>
+      <p class="idcard__name">
+        <span class="idcard__label">NAME</span>
+        Gil
+      </p>
+      <p class="idcard__age">
+        <span class="idcard__label">AGE</span>
+        26
+      </p>
+      <p class="idcard__line">
+        <span class="idcard__label">EXP</span>
+        07/15/2030
+      </p>
+      <p class="idcard__line">
+        <span class="idcard__label">ISS</span>
+        05/10/2025
+      </p>
    </main>
  </aside>
-  <section class="interests">
+  <section class="interests box pad">
    <header>
      <h2>Interests</h2>
    </header>
@ -32,7 +47,7 @@ layout: base.njk
      <li>Worldbuilding</li>
    </ul>
  </section>
-  <section class="funfacts">
+  <section class="funfacts box pad">
    <header>
      <h2>Fun facts</h2>
    </header>
@ -42,7 +57,7 @@ layout: base.njk
      <li>Languages: English (native), German, Cebuano, and Tagalog</li>
    </ul>
  </section>
-  <aside class="social">
+  <aside class="social box pad">
    <header>
      <h2>Elsewhere</h2>
    </header>
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@ -5,7 +5,7 @@
    {% include 'head/default-styles.njk' %}
  </head>
  <body>
-    <div class="site">
+    <div class="site pad">
      <a href="#page" id="skip-navigation">Skip navigation</a>
      <header class="header">
        <h1 id="top" tabindex="-1">Gil•INK</h1>
--- a/src/_layouts/entry.njk
+++ b/src/_layouts/entry.njk
@ -2,7 +2,7 @@
 layout: base.njk
 ---

-<main class="box page page-journal">
+<main class="page--entry box pad">
  <header>
    <h1>{{ title }}</h1>
    <p>
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@ -2,26 +2,32 @@
 layout: base.njk
 ---

-<div class="page--home">
-  <main class="home__main">{{ content | safe }}</main>
-  <aside class="home__social">
+<div class="page--home gap">
+  <main class="home__main box pad">{{ content | safe }}</main>
+  <aside class="home__social box pad">
+    <header>
+      <h2>Elsewhere</h2>
+    </header>
    {% include 'snippets/socials.njk' %}
  </aside>
-  <aside class="home__updates">
-    <h2>Updates</h2>
+  <aside class="home__updates box pad">
+    <header>
+      <h2>Updates</h2>
+    </header>
    {% include 'snippets/updates.njk' %}
  </aside>
-  <aside class="home__badges">
+  <aside class="home__badges box pad">
+    <header>
+      <h2>Neighborhood</h2>
+    </header>
    {% include 'snippets/badges.njk' %}
  </aside>
 </div>
-<!-- <footer>
-  <p>
+<!-- <footer> <p>
    <strong>Created</strong>
    <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>
    {% if lastmod %}•
      <strong>Last modified</strong>
      <time datetime="{{ lastmod | formatDate }}">{{ lastmod | formatDate }}</time>
    {% endif %}
-  </p>
-</footer> -->
+</p> </footer> -->
--- a/src/_layouts/single.njk
+++ b/src/_layouts/single.njk
@ -2,7 +2,7 @@
 layout: base.njk
 ---

-<main class="box page page-single">{{ content | safe }}</main>
+<main class="page--single box pad">{{ content | safe }}</main>
 <!-- <footer>
  <p>
    <strong>Created</strong>
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -1,64 +1,46 @@
 /*
-COLORS
-*/
-/*
 Themes
 */
-:root, [data-selected-theme=grayscalelight] {
-  --color-background: #fff;
-  --text-normal: #000;
-  --text-invert: #fff;
-  --text-subtle: #666;
-  --color-primary: #999;
-  --color-secondary: #aaa;
-  --color-link: #00f;
-  --color-paper: #fff;
-  --background: #eee;
+:root,
+[data-selected-theme=grayscalelight] {
+  --color-bg: #fff;
+  --color-bg-2: #f8f8f8;
+  --color-border: #999;
+  --color-tx: #111;
+  --color-link: #36c;
+  --color-hover: rgb(25.5, 51, 102);
+  --color-active: rgb(153, 178.5, 229.5);
 }

-[data-selected-theme=light] {
-  --color-background: #aabf7e;
-  --text-normal: #191b19;
+/*
+[data-selected-theme="light"] {
+  --color-background: #aabf7e; //aabf7e
+  --text-normal: #191b19; //191b19
  --text-invert: #fff;
-  --text-subtle: #595959;
-  --color-primary: #344f1f;
-  --color-secondary: #60941a;
-  --color-link: #309bae;
-  --color-paper: #e8efd7;
+  --text-subtle: #595959; //595959
+  --color-primary: #344f1f; //344f1f
+  --color-secondary: #60941a; //60941a
+  --color-link: #309bae; //309bae
+  --color-paper: #e8efd7; //e8efd7
 }
-
-[data-selected-theme=dark] {
-  --color-background: #191b19;
-  --text-normal: #f8ffef;
-  --text-invert: #fff;
-  --text-subtle: #8c8c8c;
-  --color-primary: #60941a;
-  --color-secondary: #344f1f;
-  --color-link: #05abc4;
-  --color-paper: #070e07;
-}
-
-[data-selected-theme=grayscaledark] {
-  --color-background: #fff;
-  --text-normal: #000;
-  --text-invert: #fff;
-  --text-subtle: #666;
-  --color-primary: #999;
-  --color-secondary: #aaa;
-  --color-link: #39a;
-  --color-paper: #fff;
-  --background: #eee;
-}
-
+*/
 /*
 Themed elements
 */
 body {
-  background: var(--background);
+  background: var(--color-bg);
 }

 a {
  color: var(--color-link);
+  text-decoration: dotted underline;
+}
+a:hover {
+  color: var(--color-hover);
+  text-decoration: solid underline;
+}
+a:active {
+  color: var(--color-active);
 }

 h1 {
@ -83,7 +65,61 @@ hr {
 }

 .site {
-  color: var(--text-normal);
+  color: var(--color-tx);
+}
+
+.idcard {
+  margin: auto;
+  background: rgb(252.7769230769, 248.3307692308, 242.7730769231);
+  background: linear-gradient(120deg, rgb(252.7769230769, 248.3307692308, 242.7730769231) 79%, #39a 79%, #39a 80%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 80%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 81%, #39a 81%, #594 84%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 84%, rgb(252.7769230769, 248.3307692308, 242.7730769231) 85%, #594 78%);
+  border: solid var(--color-bg-2) 2px;
+  border-radius: 15px;
+}
+.idcard__header {
+  padding: 15px;
+  border-radius: inherit;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #594;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.idcard__header h3 {
+  margin-top: 0px;
+  text-align: center;
+  color: rgb(252.7769230769, 248.3307692308, 242.7730769231);
+}
+.idcard__picture {
+  max-width: 200px;
+  margin: auto;
+  margin-top: 20px;
+}
+.idcard__bio {
+  padding: 15px;
+  width: max-content;
+}
+.idcard__bio p {
+  margin-top: 5px;
+}
+.idcard__label {
+  font-weight: bold;
+  font-size: 85%;
+  color: #36c;
+}
+
+.box {
+  border-radius: 15px;
+  border: dashed 1px var(--color-border);
+  background-color: var(--color-bg-2);
+}
+
+.pad {
+  padding: 15px;
+  padding-top: 0;
+}
+
+.gap {
+  gap: 15px;
 }

 /* poppins-regular - latin_latin-ext */
@ -182,6 +218,30 @@ hr {
  font-weight: 900;
  src: url("../fonts/inter-v18-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-bold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Hack";
+  src: url("../fonts/hack-bold-italic.woff") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}
 .page--about {
  display: flex;
  flex-direction: column;
@ -189,12 +249,12 @@ hr {
@media only screen and (min-width: 600px) {
  .page--about {
    display: grid;
-    grid: "main idcard" auto "main ." auto "main funfacts" auto "interests funfacts" auto "social social" auto/1fr 1fr;
+    grid: "main idcard" auto "main funfacts" auto "main interests" auto "social social" auto/auto auto;
  }
 }
@media only screen and (min-width: 768px) {
  .page--about {
-    grid: "main main idcard" auto "main main ." auto "interests funfacts funfacts" auto ". social ." auto/1fr auto 1fr;
+    grid: "main main idcard" auto "main main ." auto "interests funfacts funfacts" auto ". social ." auto/auto auto auto;
  }
 }
 .page--about .main-content {
@ -211,24 +271,9 @@ hr {
 }

 .idcard {
-  display: grid;
-  max-width: 400px;
+  display: flex;
+  flex-direction: column;
  grid-area: idcard;
-  grid: "header header" auto ". bio" auto "photo bio" auto ".  bio" auto/auto 1fr;
-}
-.idcard .idcard__bio {
-  grid-area: bio;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-.idcard .idcard__bio .idcard__line--wide {
-  grid-column: span 2;
-}
-.idcard .idcard__header {
-  grid-area: header;
-}
-.idcard .idcard__picture {
-  grid-area: photo;
 }

 .page--home {
@ -265,12 +310,12 @@ h6 {
  font-family: "Poppins", sans-serif;
 }

-a:hover {
-  text-decoration-thickness: 3px;
+pre, code {
+  font-family: "Hack", monospace;
 }

 .monospace {
-  font-family: monospace;
+  font-family: "Hack", monospace;
 }

 #skip-navigation {
@ -286,7 +331,7 @@ a:hover {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100vw);
-  margin: 1em auto;
+  margin: auto;
 }

 /*# sourceMappingURL=main.css.map */
--- a/src/assets/css/main.css.map
+++ b/src/assets/css/main.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACtFF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;ACvGF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAgBI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,MACE;;AAMF;EACE;EACA;EACA;;AAGE;EAEE;;AAKN;EACE;;AAGF;EACE;;;AEtEJ;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE;;;AAGF;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EAEA;EAEA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/_font.scss","../../../scss/pages/_about.scss","../../../scss/mixins/_media.scss","../../../scss/pages/_home.scss","../../../scss/main.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAmBA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;AAAA;AAAA;AAGA;EACE;;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EAaA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACzJF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA,kFACmB;;AAGrB;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;ACrIF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAeI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AE3CF;EACE;;ADDE;ECAJ;IAII,MACE;;EAOF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;;ACjBN;EACE,aALU;;;AAQZ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAbU;;;AAgBZ;EACE,aAhBU;;;AAmBZ;EACE,aApBU;;;AAuBZ;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA","file":"main.css"}
--- a/src/assets/fonts/hack-bold-italic.woff
+++ b/src/assets/fonts/hack-bold-italic.woff
--- a/src/assets/fonts/hack-bold.woff
+++ b/src/assets/fonts/hack-bold.woff
--- a/src/assets/fonts/hack-italic.woff
+++ b/src/assets/fonts/hack-italic.woff
--- a/src/assets/fonts/hack-regular.woff
+++ b/src/assets/fonts/hack-regular.woff
--- a/src/changelog.md
+++ b/src/changelog.md
@ -11,15 +11,14 @@ eleventyNavigation:

 This is a list of changes to my website, organized by date.

-## 0.0.1 (pub. 2025-04-28)
+## 2025-04-28 / 0.0.1

 - Made basic setup
 - Added CSS reset, see _Piccalilli_'s [A (more) Modern CSS Reset](https://piccalil.li/blog/a-more-modern-css-reset/)
 - First slashpages, see [/slashes](/slashes) and [slashpages.net](https://slashpages.net/)

-## 0.0.2 (pub. 2025-05-16)
+## 2025-05-17 / 0.0.2

- Used fonts [Kurale](https://github.com/etunni/kurale) (display, headers), [Inclusive Sans](https://www.oliviaking.com/inclusivesans) (sans serif, body)
 - Overhauled entire style
 - Gave unique layouts to home, about, and entry pages, moved layout Sass to its own directory
 - Rearranged navbar and renamed some top-level pages
@ -27,3 +26,10 @@ This is a list of changes to my website, organized by date.
 - Added badges to frontpage
 - Adjusted Open Graph metadata, e.g. separating site name from title into its own property
 - Added [Journal](/journal)
+
+## _Planned_ / 0.0.3
+
+- Get theme switcher to work
+  - This should be system theme by default, then be overridden by user
+- Add dark theme
+- Add colorful themes