Huge overhaul of layouts and styles

This commit is contained in:
Gil 2025-05-12 01:31:17 -05:00
parent 5f6e73ad23
commit 8a2bb795b3
41 changed files with 671 additions and 504 deletions

View file

@ -1,37 +0,0 @@
/*
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
}

View file

@ -1,23 +1,47 @@
@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-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: "Kurale";
font-style: normal;
font-weight: 400;
src: url("../fonts/kurale.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: "Inclusive Sans";
font-style: normal;
font-weight: 800;
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: 800;
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+ */
}
@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: italic;
font-weight: 400;
src: url("../fonts/kurale.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

View file

@ -1,101 +0,0 @@
@use "media";
$gap: 5px;
.box {
padding: $gap * 2;
:first-child {
margin-top: 0;
}
}
.column-container {
display: flex;
flex-direction: column;
gap: $gap;
width: 100%;
}
.row-container {
@extend .column-container;
@include media.breakpoint(small) {
flex-direction: row;
}
}
.site {
display: flex;
flex-direction: column;
@include media.breakpoint(medium) {
margin: auto;
width: 75%;
}
@include media.breakpoint(x-large) {
width: 60%;
}
&-header {
width: 100%;
.navbar {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: $gap 0;
gap: $gap;
@include media.breakpoint(small) {
flex-wrap: nowrap;
}
&-link {
color: var(--color-accent);
font-weight: bold;
text-decoration: none;
&:hover {
background-color: var(--color-accent2);
border-color: var(--color-accent);
color: var(--color-paper);
}
&[aria-current="page"] {
background-color: var(--color-accent);
color: var(--color-paper);
margin-top: 2px;
border-bottom-width: 2px;
&:hover {
border-color: var(--color-normal);
}
}
@include media.breakpoint(small) {
width: 100%;
}
}
}
}
&-footer {
gap: $gap;
margin: 0 0 $gap * 2 0;
}
}
.page {
&-footer {
margin: $gap 0;
}
}
.home-container {
display: flex;
flex-direction: column;
gap: $gap;
@include media.breakpoint(large) {
display: grid;
grid-template-columns: repeat(2, 1fr);
main {
grid-column: 1 / 3;
}
}
}

88
scss/_theme.scss Normal file
View file

@ -0,0 +1,88 @@
/*
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;
}
[data-selected-theme="light"] {
--color-background: #aabf7e; //aabf7e
--text-normal: #191b19; //191b19
--text-invert: #fff;
--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; //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);
}
a {
color: var(--color-link);
}
h1 {
color: var(--color-primary);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--color-secondary);
}
hr {
background-color: var(--text-normal);
border: none;
}
.muted {
color: var(--text-subtle); // Muted color
}
.site {
color: var(--text-normal);
}

View file

@ -1,95 +1,48 @@
@use "color";
@use "theme";
@use "font";
@use "layout";
@use "media";
@use "mixins/media";
@use "pages/about";
@use "pages/home";
$font-sans: "Inclusive Sans", sans-serif;
$font-display: "Kurale", serif;
$gap: 5px;
$border-radius: 10px;
$font-disp: "Kurale", serif;
$font-mono: monospace;
body {
background-color: var(--color-background);
color: var(--color-normal);
font-family: $font-sans;
}
a {
color: var(--color-link);
&:hover {
text-decoration-thickness: 3px;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-display;
font-family: $font-disp;
}
h1 {
color: var(--color-accent);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--color-accent2);
a:hover {
text-decoration-thickness: 3px;
}
hr {
height: 1px;
background-color: var(--color-normal);
border: none;
.monospace {
font-family: $font-mono;
}
#skip-navigation {
position: fixed;
top: -100%;
right: 0;
padding: $gap * 2;
&:focus {
top: 0;
}
}
.box {
border: solid var(--color-normal) 2px;
border-bottom-width: 5px;
border-radius: $border-radius;
background-color: var(--color-paper);
}
.site {
display: flex;
flex-direction: column;
.muted {
color: var(--color-muted); // Muted color
}
width: min(1000px, 100vw);
.about {
&-image {
flex: 1;
background-image: url("../../assets/img/about-profile.png");
background-size: cover;
background-position: 0;
min-height: 250px;
aspect-ratio: 1;
@include media.breakpoint(small) {
min-height: auto;
}
}
&-name {
text-align: center;
width: 100%;
}
&-pronouns {
width: 100%;
text-align: center;
}
&-age {
width: 100%;
text-align: center;
}
margin: 1em auto;
}

85
scss/pages/_about.scss Normal file
View file

@ -0,0 +1,85 @@
@use "../mixins/media";
.page--about {
display: flex;
flex-direction: column;
@include media.breakpoint(small) {
display: grid;
grid:
"main idcard" auto
"main ." auto
"interests funfacts" auto
"social social" auto
/ 1fr 1fr;
}
@include media.breakpoint(medium) {
grid:
"main main idcard" auto
"main main ." auto
"interests funfacts funfacts" auto
". social ." auto
/ 1fr 1fr 1fr;
}
.main-content {
grid-area: main;
}
.social {
grid-area: social;
}
.interests {
grid-area: interests;
}
.funfacts {
grid-area: funfacts;
}
}
.idcard {
display: grid;
max-width: 400px;
grid-area: idcard;
grid:
"header header" auto
". bio" auto
"photo bio" auto
". bio" auto
/ auto 1fr;
.idcard__picture {
padding: 50px;
background: url("../img/about-profile.png");
background-size: cover;
background-position: center;
@include media.breakpoint(small) {
padding: 75px;
}
}
.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;
}
}

31
scss/pages/_home.scss Normal file
View file

@ -0,0 +1,31 @@
@use "../mixins/media";
.page--home {
display: grid;
@include media.breakpoint(small) {
grid:
"main ." auto
"main social" auto
". social" auto
"badges updates" auto
". updates" auto
/ 1fr auto;
.home__main {
grid-area: main;
}
.home__social {
grid-area: social;
}
.home__updates {
grid-area: updates;
}
.home__badges {
grid-area: badges;
}
}
}

0
scss/print.scss Normal file
View file

View file

@ -1,7 +1,12 @@
[
{
"label": "Gil dot Ink",
"image": "stamp-gildotink.gif",
"link": "https://gil.ink/"
},
{
"label": "Rust Red River",
"image": "https://rustredriver.com/assets/webbutton.gif",
"image": "stamp-rustredriver.gif",
"link": "https://rustredriver.com/"
}
]

View file

@ -3,10 +3,6 @@
"date": "2025-04-29",
"content": "Oh, it's getting a little more stylish in here..."
},
{
"date": "2025-04-28",
"content": "Finally have a functioning <code>/now</code> page!"
},
{
"date": "2025-02-20",
"content": "Hello world!"

View file

@ -1,19 +1,7 @@
<footer>
<div class="box page-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>
</div>
<div class="box site-footer">
<p>Made by me with
<a href="https://www.11ty.dev/">Eleventy</a>
</p>
{% include 'theme-switcher.njk' %}
<a href="#top" id="jump-top">Jump to top</a>
</div>
<footer class="footer">
<p>Made by me with
<a href="https://www.11ty.dev/">Eleventy</a>
</p>
{% include 'theme-switcher.njk' %}
<a href="#top" id="jump-top">Jump to top</a>
</footer>

View file

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

View file

@ -1,9 +1,5 @@
<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/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/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"/>

View file

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

View file

@ -1,4 +0,0 @@
<header class="site-header">
<h1 id="top" tabindex="-1">Gil•INK</h1>
{% include 'nav.njk' %}
</header>

View file

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

View file

@ -1,3 +0,0 @@
<aside>
{% include 'nav.njk' %}
</aside>

View file

@ -1,11 +1,11 @@
<p>
{% for neighbor in neighbors %}
{% if neighbor.link %}
{% for neighbor in neighbors -%}
{%- if neighbor.link -%}
<a href="{{ neighbor.link }}" rel="noreferrer nofollow noopener external" target="_blank">
{% endif %}
<img src="{{ neighbor.image }}" alt="{{ neighbor.label }}"/>
{% if neighbor.link %}
{%- endif -%}
<img src="/assets/img/{{ neighbor.image }}" alt="{{ neighbor.label }}"/>
{%- if neighbor.link -%}
</a>
{% endif %}
{% endfor %}
{%- endif -%}
{%- endfor %}
</p>

43
src/_layouts/about.njk Normal file
View file

@ -0,0 +1,43 @@
---
layout: base.njk
---
<main class="page--about">
<main class="main-content">{{ content | safe }}</main>
<aside class="idcard">
<header class="idcard__header">Identification card</header>
<div class="idcard__picture"></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>
</main>
</aside>
<section class="interests">
<header><h2>Interests</h2></header>
<ul>
<li>Writing - poetry, prose, essays, etc.</li>
<li>Music</li>
<li>Gaming</li>
<li>Game development</li>
<li>Languages</li>
<li>Worldbuilding</li>
</ul>
</section>
<section class="funfacts">
<header><h2>Fun facts</h2></header>
<ul>
<li>Filipino American</li>
<li>Texan</li>
<li>Languages: English (native), German, Cebuano, and Tagalog</li>
</ul>
</section>
<aside class="social">
<header><h2>Social links</h2></header>
{% include 'snippets/socials.njk' %}
</aside>
</main>

View file

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

12
src/_layouts/blank.njk Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% include 'head/meta.njk' %}
{% include 'head/reset.njk' %}
</head>
<body>
<div class="site">
{{ content | safe }}
</div>
</body>
</html>

View file

@ -2,16 +2,27 @@
layout: base.njk
---
<div class="home-container">
<main class="box main-content">{{ content | safe }}</main>
<aside class="box widget-socials">
<div class="page--home">
<main class="home__main">{{ content | safe }}</main>
<aside class="home__social">
{% include 'snippets/socials.njk' %}
</aside>
<aside class="box widget-updates">
<aside class="home__updates">
<h2>Updates</h2>
{% include 'snippets/updates.njk' %}
</aside>
<aside class="box widget-badges">
<aside class="home__badges">
{% include 'snippets/badges.njk' %}
</aside>
</div>
</div>
<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>

View file

@ -2,4 +2,15 @@
layout: base.njk
---
<main class="box page-single">{{ content | safe }}</main>
<main class="box page page-single">{{ content | safe }}</main>
<footer class="box page-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>

View file

@ -1,56 +1,30 @@
---
title: "About"
layout: base.njk
layout: about.njk
lastmod: 2025-02-20T02:11:25.00-06:00
eleventyNavigation:
key: "About"
order: 0
---
<main class="main-content row-container">
# Me
My name's Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a Filipino american wizard, spell developer, and cowboy mage based in the southern united states.
<div class="column-container">
I am a writer, managing editor of a local grassroots newspaper, community organizer, and game developer.
<div class="box about-image"></div>
<div class="row-container">
<aside class="box about-name">Gil</aside>
<aside class="box about-age">26</aside>
<aside class="box about-pronouns">he/they</aside>
</div>
<main class="box about-description">
Professionally I am working as a part-time/seasonal tax preparer, but in the past I've worked as a student leadership educator, a student ambassador for my school's DEI program, and *very* briefly in a package delivery warehouse.
Likes-making-things-person
I'm also a leading member of the ogra.ph collective, a group of people interested in alternatives to mainstream corporate-operated social media. Together we host a microblogging platform called [hol.ogra.ph](https://hol.ogra.ph) and we have a Git service called [ide.ogra.ph](https://ide.ogra.ph).
Tech hobbyist
## This website
</main>
</div>
Gil•INK is an arcane mirror that reflects my personal interests and related shenanigans.
<div class="column-container">
<aside class="box">{% include 'snippets/socials.njk' %}</aside>
</div>
</main>
You can take a look at my [journal](/journal), teleport through [portals](/portals) to other websites, read tomes and grimoires in the [library]() (coming soon), or [explore]() (coming soon) other parts of the surrounding town.
<aside class="box">{% include 'snippets/socials.njk' %}</aside>
## Colophon
<aside class="box">
This mystic plane was created primarily using [Eleventy](https://www.11ty.dev/), a static site generator, and [Sass](https://sass-lang.com/), a CSS extension language. Hosting is provided by [IONOS](https://www.ionos.com/). All of the templates were made by me and the source scrolls are [publicly available](https://ide.ogra.ph/gil/gil.ink). This website additionally contains no trackers. The only cookie this website will ever use is one that stores your preferred theme. Besides a bit of JS to provide theme stuff, my website is mostly static HTML and CSS files.
Distro: EndeavourOS
DE: KDE Plasma
HW: Custom PC + Thinkpad
</aside>
<aside class="box">
## Creating
Printmaking- linocut/woodblock prints
Game development- Godot games
Writing- poetry, manifestos, essays, news/journalism, novels/worldbuilding
Doodling in the margins
Podcasting/streaming (soon)
</aside>
</main>
The fonts used are [Kurale](https://github.com/etunni/kurale) (display) and [Inclusive Sans](https://www.oliviaking.com/inclusivesans/feature) (body). Both fonts are licensed under the [SIL Open Font License, Version 1.1](https://openfontlicense.org/open-font-license-official-text/).

View file

@ -1,40 +1,91 @@
/*
COLORS
$primary: #;
$secondary: #;
$tertiary: #;
$neutral: #;
$white: #;
$black: #;
FONTS
$head: ;
$body: ;
$mono: ;
*/
:root, [data-selected-theme=light] {
/*
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;
}
[data-selected-theme=light] {
--color-background: #aabf7e;
--color-normal: #191b19;
--color-muted: #595959;
--color-accent: #344f1f;
--color-accent2: #60941a;
--text-normal: #191b19;
--text-invert: #fff;
--text-subtle: #595959;
--color-primary: #344f1f;
--color-secondary: #60941a;
--color-link: #309bae;
--color-paper: #e8efd7;
}
[data-selected-theme=dark] {
--color-background: #191b19;
--color-normal: #f8ffef;
--color-muted: #8c8c8c;
--color-accent: #60941a;
--color-accent2: #344f1f;
--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);
}
a {
color: var(--color-link);
}
h1 {
color: var(--color-primary);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--color-secondary);
}
hr {
background-color: var(--text-normal);
border: none;
}
.muted {
color: var(--text-subtle);
}
.site {
color: var(--text-normal);
}
@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";
@ -49,6 +100,20 @@ $mono: ;
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: "Inclusive Sans";
font-style: normal;
font-weight: 800;
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: 800;
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";
@ -56,117 +121,98 @@ $mono: ;
font-weight: 400;
src: url("../fonts/kurale.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.box {
padding: 10px;
@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: italic;
font-weight: 400;
src: url("../fonts/kurale.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.box :first-child {
margin-top: 0;
}
.column-container, .row-container {
.page--about {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.row-container {
flex-direction: row;
.page--about {
display: grid;
grid: "main idcard" auto "main ." auto "interests funfacts" auto "social social" auto/1fr 1fr;
}
}
.site {
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 768px) {
.site {
margin: auto;
width: 75%;
.page--about {
grid: "main main idcard" auto "main main ." auto "interests funfacts funfacts" auto ". social ." auto/1fr 1fr 1fr;
}
}
@media only screen and (min-width: 1200px) {
.site {
width: 60%;
}
.page--about .main-content {
grid-area: main;
}
.site-header {
width: 100%;
.page--about .social {
grid-area: social;
}
.site-header .navbar {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 5px 0;
gap: 5px;
.page--about .interests {
grid-area: interests;
}
@media only screen and (min-width: 600px) {
.site-header .navbar {
flex-wrap: nowrap;
}
}
.site-header .navbar-link {
color: var(--color-accent);
font-weight: bold;
text-decoration: none;
}
.site-header .navbar-link:hover {
background-color: var(--color-accent2);
border-color: var(--color-accent);
color: var(--color-paper);
}
.site-header .navbar-link[aria-current=page] {
background-color: var(--color-accent);
color: var(--color-paper);
margin-top: 2px;
border-bottom-width: 2px;
}
.site-header .navbar-link[aria-current=page]:hover {
border-color: var(--color-normal);
}
@media only screen and (min-width: 600px) {
.site-header .navbar-link {
width: 100%;
}
}
.site-footer {
gap: 5px;
margin: 0 0 10px 0;
.page--about .funfacts {
grid-area: funfacts;
}
.page-footer {
margin: 5px 0;
.idcard {
display: grid;
max-width: 400px;
grid-area: idcard;
grid: "header header" auto ". bio" auto "photo bio" auto ". bio" auto/auto 1fr;
}
.idcard .idcard__picture {
padding: 50px;
background: url("../img/about-profile.png");
background-size: cover;
background-position: center;
}
@media only screen and (min-width: 600px) {
.idcard .idcard__picture {
padding: 75px;
}
}
.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;
}
.home-container {
display: flex;
flex-direction: column;
gap: 5px;
.page--home {
display: grid;
}
@media only screen and (min-width: 992px) {
.home-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
@media only screen and (min-width: 600px) {
.page--home {
grid: "main ." auto "main social" auto ". social" auto "badges updates" auto ". updates" auto/1fr auto;
}
.home-container main {
grid-column: 1/3;
.page--home .home__main {
grid-area: main;
}
.page--home .home__social {
grid-area: social;
}
.page--home .home__updates {
grid-area: updates;
}
.page--home .home__badges {
grid-area: badges;
}
}
body {
background-color: var(--color-background);
color: var(--color-normal);
font-family: "Inclusive Sans", sans-serif;
}
a {
color: var(--color-link);
}
a:hover {
text-decoration-thickness: 3px;
}
h1,
h2,
h3,
@ -176,69 +222,28 @@ h6 {
font-family: "Kurale", serif;
}
h1 {
color: var(--color-accent);
a:hover {
text-decoration-thickness: 3px;
}
h2,
h3,
h4,
h5,
h6 {
color: var(--color-accent2);
}
hr {
height: 1px;
background-color: var(--color-normal);
border: none;
.monospace {
font-family: monospace;
}
#skip-navigation {
position: fixed;
top: -100%;
right: 0;
padding: 10px;
}
#skip-navigation:focus {
top: 0;
}
.box {
border: solid var(--color-normal) 2px;
border-bottom-width: 5px;
border-radius: 10px;
background-color: var(--color-paper);
}
.muted {
color: var(--color-muted);
}
.about-image {
flex: 1;
background-image: url("../../assets/img/about-profile.png");
background-size: cover;
background-position: 0;
min-height: 250px;
aspect-ratio: 1;
}
@media only screen and (min-width: 600px) {
.about-image {
min-height: auto;
}
}
.about-name {
text-align: center;
width: 100%;
}
.about-pronouns {
width: 100%;
text-align: center;
}
.about-age {
width: 100%;
text-align: center;
.site {
display: flex;
flex-direction: column;
width: min(1000px, 100vw);
margin: 1em auto;
}
/*# sourceMappingURL=main.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/_layout.scss","../../../scss/_media.scss","../../../scss/main.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;;ACjBJ;EACE;;AACA;EACE;;;AAIJ;EACE;EACA;EACA,KAZI;EAaJ;;;ACbE;EDgBJ;IAGI;;;;AAIJ;EACE;EACA;;ACrBE;EDmBJ;IAKI;IACA;;;ACjBA;EDWJ;IAUI;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,KA5CA;;ACAF;EDuCA;IAQI;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;ACjER;EDkDE;IAmBI;;;AAMR;EACE,KA5EE;EA6EF;;;AAKF;EACE;;;AAIJ;EACE;EACA;EACA,KA1FI;;ACQF;ED+EJ;IAKI;IACA;;EACA;IACE;;;;AEvFN;EACE;EACA;EACA,aARU;;;AAWZ;EACE;;AACA;EACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aAvBa;;;AA0Bf;EACE;;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA,eAtDc;EAuDd;;;AAGF;EACE;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;;AD3EA;ECqEF;IAQI;;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA","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":"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;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AC3CF;EACE;EACA;;ACFE;EDAJ;IAKI;IACA,MACE;;;ACHF;EDJJ;IAeI,MACE;;;AAOJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA,MACE;;AAMF;EACE;EACA;EACA;EACA;;ACvDA;EDmDF;IAOI;;;AAIJ;EACE;EACA;EACA;;AAGE;EAEE;;AAKN;EACE;;AAGF;EACE;;;AEhFJ;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"}

3
src/assets/css/print.css Normal file
View file

@ -0,0 +1,3 @@
/*# sourceMappingURL=print.css.map */

View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"print.css"}

View file

@ -1,7 +1,12 @@
/** RESET.CSS
Andy Bell's CSS reset
Source: https://piccalil.li/blog/a-more-modern-css-reset/ (published 2023 Sep 18, retrieved 2025 Feb 20) */
Modified from source: https://piccalil.li/blog/a-more-modern-css-reset/ (published 2023 Sep 18, retrieved 2025 Feb 20) */
/* Root font size */
:root {
font-size: 100%;
}
/* Box sizing rules */
*,
@ -31,8 +36,8 @@ ol[role='list'] {
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
margin: 0;
}
/* Set shorter line heights on headings and interactive elements */

Binary file not shown.

After

Width:  |  Height:  |  Size: 507 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View file

@ -1,9 +0,0 @@
---
title: 'Blog'
layout: single.njk
lastmod: 2025-02-20T02:29:17.00-06:00
eleventyNavigation:
key: 'Blog'
order: 1
---
# Blog

View file

@ -17,11 +17,11 @@ This is a list of changes to my website, organized by date.
- First slashpages, see [/slashes](/slashes) and [slashpages.net](https://slashpages.net/)
## 0.0.2 (pub. 2025-05-01)
- 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)
- Rearranged top-level navigation
- Did another style update, more rounded corners, redid colors to prepare for theme picker
- Gave unique layouts to home and about pages
- Overhauled entire style
- Gave unique layouts to home and about pages, moved layout Sass to its own directory
- Rearranged navbar and renamed some top-level pages
- Created 404 page
- Added badges to frontpage
- Adjusted Open Graph metadata, e.g. separating site name from title into its own property
- Added [Journal](/journal)

View file

@ -8,4 +8,10 @@ eleventyNavigation:
# 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.
My name's Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a Filipino american wizard, spell developer, and cowboy mage based in the southern united states.
Gil•INK is an arcane mirror that reflects my personal interests and related shenanigans.
You can take a look at my [journal](/journal), teleport through [portals](/portals) to other websites, read tomes and grimoires in the [library]() (coming soon), or [explore]() (coming soon) other parts of the surrounding town.
You can also read more about me on my [About](/about) page.

View file

@ -0,0 +1,19 @@
---
title: "Stream of consciousness 1"
layout: single.njk
lastmod: 2025-05-12T00:31:00.00-05:00
tags:
- post
---
# Stream of consciousness 1
This is my first public attempt at stream of consciousness. Now I dont *feel* as creative of a mind as I mightve been as a kid. Somewhere between now and adolescence I suppose Ive become caught up in life and the world. Perhaps I still have a creative spirit, but Ive been experiencing so much blockage with the creative process lately that I feel completely disconnected from it. Its like when you look at an empty canvas or a blank page, and your mind goes just as blank. I get a bit paralyzed at the thought of actually creating something, unless I come prepared with an already well-formed idea. It could be just that my inner critic is taking over before I even begin.
Thats precisely why I want to start writing more stream of consciousness, so that I can silence my inner critic, unlearn that sense of “cringe” that inhibits me from creating, and develop my creative process more — which itself is part of the art and art in its own right. To me and many others, art is a means of touching truth, a way to convey the soul of something, someone, or the world around us. I feel that learning to express myself authentically and with less restraint is essential to creating, since I am not as capable of revealing other peoples truths as I can my own.
Knowing that, I chose to frame this writing with two quotes from Tita Lacambra-Ayala, an Ilocano/Filipina poet whose work I discovered through her children Cynthia Alexander and Joey Ayala, Filipino musicians who themselves have found ways to articulate the weaves of truth that run through their souls. The first is, “The art is always you.” The second is about her poetry practice and what she sought to do through poetry:
> “Actually my poetry was a nocturnal activity taking the place of evening prayers. It was an attempt to tie together, to rationalize all the internal and external happenings of ones life into a sensible whole. It was a try at preserving my own identity and sanity in my given space, role, and environment.”
Ive always seen myself as a writer and a poet at heart, mostly because I am desperate to express some parcel of the truth, to see the world as it is and be seen by it as I am, to connect with the tapestry that links our souls together and with the world around us. I know Ive touched it before and often, which makes moments of disconnection and blockage all the more frustrating, but each time Ive kept steadfast in my hope that I would be able to connect with the soul of the universe again. I am comforted by knowing that every relationship and every life has its highs and lows, the creative process ebbs and it flows. It doesnt mean any less that I would like to spend more time involved in the truth, so even in low spirits I can keep a strong connection to the human and to the divine. To me, its part of the point of creating—so that others might find a portal to the divine, and not just one in my work but within themselves, other people, the world around, nature, and so on. So that others might see the world too as a moving whole, a beautiful tempest of “glorious miscellanea” (this is the title of an album by Filipino-Canadian artist Ruru that always lingers in my mind).

View file

@ -0,0 +1,17 @@
---
title: "Stream of consciousness 2"
layout: single.njk
lastmod: 2025-05-12T00:34:00.00-05:00
tags:
- post
---
# Stream of consciousness 2
As the wheel of american politics turns, the more inclined I am to view the u.s. as a plastic country, a plastic culture, one that has been hollowed out. Along with our identities and our abilities to create meaning from our experiences, they've been metabolized into social control, to feed systems that funnel wealth and power back to the already wealthy and powerful. Everything we have has been becoming more and more empty, more removed from substance and truth, concealing our society's most pain-inducing contradictions. As I listen to Justin Scott (@cypher.j on TikTok) discussing the kind of moment we're living in, I feel the current state of the world highlights important conflicts in the human condition that we've been grappling with for ages, especially how we survive as humans, whose survival do we strive for, and who gets to decide.
This time is yet another where we are confronted with the darker aspects of the human condition, where we are faced with the consequences of apathy, distrust, (false) individualism, unreality, deception, domination, obedience, exploitation, etc., and the violence that emerges from them. When these appear, they are readily exploited to satiate ruling class appetites for power, to line their pockets while our people suffer and our planet is scorched. The ruling class designs crisis, manufacturing consent for the expansion of their control. They feign dissent and engineer distractions to conceal the project of continuing and expanding enslavement, so that they can pursue endless material gain without accountability and in plain sight. Against this inhumanity, we have to reach for truth, seek understanding, and become conscious with the world. We have to tell our stories, create our own meaning beyond the systems they have set up for us, and reclaim our collective soul. We have to give new substance to love, to healing, to emotion, to power, to labor, to freedom and liberation, rather than accepting the hollow facsimiles that we have to rent from the moneyed few.
Our societies are big, but our villages have become small. We have to grow our village and nurture it. We have to pool together our material resources, raise our spirits, and foster connection, so that we can resist the forces of domination, control, and violence, and the impulses that lead to them. If we want to resist them, there is no out from the work of truth-telling and holding ourselves and others accountable to justice and to reality; this is a condition of our freedom, just as our freedom rests on the freedom of all others. We can't liberate ourselves if we aren't in right relationship to each other and to the world around us. We can't be in right relationship to each other without acting against senseless harm, cruelty, and violence. We can't work against these without also acknowledging ourselves as participants and perpetrators in harm and violence against other humans. The bystander who watches another's abuse or murder and does nothing to prevent it or respond to it is an abuser or murderer in their own way. We have to reject narratives that enable us to claim a false innocence, propaganda that lionizes us or aggrandizes our acts.
To love others and ourselves in a way that is true demands truth, honesty, responsibility, care, and commitment. While the autocrat, the dictator, the emperor, the fascist, and their servants and functionaries work against truth, take no responsibility for anyone other than their own glory, exploit others, coerce, intimidate, brutally force, hone apathy, and thrive on building an indifferent, unconscious world; we must raise consciousness and improve material circumstances for all, in order to build a world in which all may live, one in which it will be easier to love.

View file

@ -0,0 +1,19 @@
---
title: "Stream of consciousness 3"
layout: single.njk
lastmod: 2025-05-12T00:40:00.00-05:00
tags:
- post
---
# Stream of consciousness 3
Life sometimes feels like its simply tugging me along, towards some unknown and incomprehensible destiny. I get the sense that Im just along for the ride. Its bound to get wilder and rougher, harder to recognize for what it was. So many surprises, things I couldnt predict. Anxiety that comes with that, but so does beauty — little things to appreciate along the way, like looking out the window on a road trip or stopping on a hike to gaze at the sky or admire plants and rocks and animals. You get small, private joys that you dont have to share with anyone else but yourself. Secret euphoria. As crazy as life is at times, I wouldnt trade mine for any other; I will never get to be anyone but myself, and thats the best part. It doesnt always make sense, and it doesnt have to. I really felt this strongly when I was sitting in the parking lot outside my dads appointment with the doctor, a mundane event that feels heavy not just in light of whats happening in the world, but also because when youre young you dont always picture yourself doing these things.
As I sat in my truck listening to “Ventura Highway,” I thought about ikigai, a Japanese concept of life purpose that literally means reason for being. Recently, I had seen a video discussing how ikigai had been erroneously conflated with a Venn diagram depicting aspects of life purpose, conceived by Spanish astrologer Andrés Zuzunaga. This misconception erased the cultural nuance surrounding ikigai and tied it closely to work which, though part of ikigai, is only one possible component. (Ikigai could also involve volunteering, spiritual pursuits, art, etc.; it doesnt have to be just compensated labor.) In any case, the food for thought I found in the discussion was that, ikigai conveys a little bit different of an idea of life purpose from how western minds might view it. Its not like our western idea of purpose, something that we chase or pursue or extract, but something we notice through our day-to-day lived experiences and discover for ourselves.
I have a mental image related to this. I tend to view our habits, the system of our being, as a circle. And like ikigai, our purpose is the center of this circle, the anchor for our process of life. We revolve around it as we go through the process of our life, whether we notice it or not. Recognizing what our purpose is — noticing how it manifests in our behaviors, habits, personalities, etc. — could be a purpose in itself.
We are often not fully content with our current situations, and that discontent seems to force us into moments of crisis, moments where we question our habits and our relationships with others and our stories we tell about ourselves. Its like life telling us we have to abandon something in order for things to change. The life we had has to die for the life we want to be born. And it doesnt always mean succeeding at growth, or even that we want to grow in the first place. I wonder if our growth, the shifting and changing of our personalities, is like evolution. Like evolution is a messy series of accidents not always beneficial but often purposeful, we grow into versions of ourselves tailored to the environment we find ourselves in. Our purpose evolves just as our biology does to adapt to the earth we call home.
So then, life is never truly linear, and it comes with its own side quests and excursions. It gets complicated, since our lives are always intertwining with each other, and the more moving parts there are, the harder it is to discern what is actually going on. I wouldnt really say that anyone “fails forward” generally, but more like we are slowly discovering (or not discovering) new selves to become. We have the option to become more and more conscious of ourselves and the realities we inhabit. Not everyone is open to this process of discovery, but if you commit to it, maybe that is a way to connect more with our human nature — by simply noticing how we are alive and so is the world, all the ways that is true and all the beauty in and around us. And maybe by embracing this spiritual growth in ourselves and in others, we become closer to love, loving ourselves and others.

20
src/journal/index.md Normal file
View file

@ -0,0 +1,20 @@
---
title: "Journal"
layout: single.njk
lastmod: 2025-05-12T00:50:00.00-05:00
eleventyImport:
collections: ["post"]
eleventyNavigation:
key: "Journal"
order: 1
---
# Journal
All my posts.
<ol>
{% for post in collections.post reversed %}
<li>{{ post.date | date: "%Y-%m-%d" }}: <a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>

View file

@ -1,12 +1,12 @@
---
title: 'Links'
title: 'Portals'
layout: single.njk
lastmod: 2025-04-30T00:06:00.00-05:00
eleventyNavigation:
key: 'Links'
key: 'Portals'
order: 2
---
# Links
# Portals
## ogra\.ph collective

View file

@ -19,7 +19,6 @@ From [slashpages.net](https://slashpages.net/):
[changelog](/changelog) - Gil.Ink changelog
`feeds` - Feeds for Gil.Ink
[ideas](/ideas) - Braindump of ideas
[links](/links) - Things I found on the web
[now](/now) - What Im currently up to
`slashes` - An index of my slash pages (<-- you are here)
[tip](/tip) - How you can support me