diff --git a/scss/_color.scss b/scss/_color.scss
new file mode 100644
index 0000000..98d0b8f
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/scss/_font.scss b/scss/_font.scss
new file mode 100644
index 0000000..121c71e
--- /dev/null
+++ b/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+ */
+ }
\ No newline at end of file
diff --git a/scss/_theme.scss b/scss/_theme.scss
deleted file mode 100644
index 3e1a69c..0000000
--- a/scss/_theme.scss
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
index 64419d6..d1c1296 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,41 +1,114 @@
-@use 'media';
-@use 'theme';
+@use "media";
+@use "color";
+@use "font";
+
+$font-sans: "Inclusive Sans", sans-serif;
+$font-display: "Kurale", serif;
body {
- background-color: var(--theme-background);
- color: var(--theme-text);
+ background-color: var(--color-background);
+ color: var(--color-normal);
+ font-family: $font-sans;
}
-a#skip-navigation {
- position: fixed;
- top: -100%;
- right: 0;
- padding: 10px;
- &:focus {
- top: 0;
- }
+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;
+ padding: 10px;
+ &:focus {
+ top: 0;
+ }
}
.site {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
+ @include media.breakpoint(large) {
+ margin: auto;
+ width: 70%;
+ }
}
-.contentarea {
- display: flex;
- flex-direction: column;
-
- main {
- width: 100%;
- }
-
- @include media.breakpoint(medium) {
- flex-direction: row-reverse;
- }
+.box {
+ border: solid var(--color-normal) 2px;
+ border-bottom-width: 5px;
+ border-radius: 5px;
}
-ul#updates {
- time {
- color: rgb(110, 110, 110); // Muted color
+.navbar {
+ display: flex;
+ 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);
}
-}
\ No newline at end of file
+ &[aria-current="page"] {
+ background-color: var(--color-accent);
+ color: var(--color-background);
+ margin-top: 2px;
+ border-bottom-width: 2px;
+ }
+ }
+}
+
+.page-footer {
+ @extend .box;
+ 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
+}
diff --git a/src/404.md b/src/404.md
new file mode 100644
index 0000000..8c3d050
--- /dev/null
+++ b/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](/)
\ No newline at end of file
diff --git a/src/_data/updates.json b/src/_data/updates.json
index 97bbba6..0cf98e2 100644
--- a/src/_data/updates.json
+++ b/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!"
diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
index 6c1c16e..5610439 100644
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -1,6 +1,14 @@
-
Jump to top
-
Created {{ page.date | formatDate }}
-
-{% if lastmod %}Last modified {{ lastmod | formatDate }}{% endif %}
-{% include 'theme-switcher.njk' %}
-Made by {{ meta.author }}
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/_includes/head.njk b/src/_includes/head.njk
new file mode 100644
index 0000000..5422f6e
--- /dev/null
+++ b/src/_includes/head.njk
@@ -0,0 +1,5 @@
+
+ {% include 'head/meta.njk' %}
+ {% include 'head/reset.njk' %}
+ {% include 'head/styles.njk' %}
+
\ No newline at end of file
diff --git a/src/_includes/meta.njk b/src/_includes/head/meta.njk
similarity index 100%
rename from src/_includes/meta.njk
rename to src/_includes/head/meta.njk
diff --git a/src/_includes/head/reset.njk b/src/_includes/head/reset.njk
new file mode 100644
index 0000000..0be8e58
--- /dev/null
+++ b/src/_includes/head/reset.njk
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/_includes/head/styles.njk b/src/_includes/head/styles.njk
new file mode 100644
index 0000000..4ebd89a
--- /dev/null
+++ b/src/_includes/head/styles.njk
@@ -0,0 +1,9 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/_includes/header.njk b/src/_includes/header.njk
deleted file mode 100644
index 7ef7e43..0000000
--- a/src/_includes/header.njk
+++ /dev/null
@@ -1 +0,0 @@
-Gil.Ink
\ No newline at end of file
diff --git a/src/_includes/nav.njk b/src/_includes/nav.njk
index b930b6e..bde401c 100644
--- a/src/_includes/nav.njk
+++ b/src/_includes/nav.njk
@@ -1,13 +1,4 @@
{% set navPages = collections.all | eleventyNavigation %}
-
-
- {% for entry in navPages %}
- {{ entry.title }}
- {% if entry.children %}{% endif %}
- {% endfor %}
-
-
\ No newline at end of file
+{% for entry in navPages %}
+ {{ entry.title }}
+{% endfor %}
\ No newline at end of file
diff --git a/src/_includes/snippets/socials.njk b/src/_includes/snippets/socials.njk
new file mode 100644
index 0000000..02ea208
--- /dev/null
+++ b/src/_includes/snippets/socials.njk
@@ -0,0 +1,7 @@
+**Microblogging** @gil@hol.ogra.ph
+**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)
\ No newline at end of file
diff --git a/src/_includes/snippets/updates.njk b/src/_includes/snippets/updates.njk
new file mode 100644
index 0000000..38d17f3
--- /dev/null
+++ b/src/_includes/snippets/updates.njk
@@ -0,0 +1,3 @@
+{% for update in updates -%}
+[{{ update.date }}] {{ update.content | mdinline }}
+{% endfor %}
\ No newline at end of file
diff --git a/src/_includes/theme-switcher.njk b/src/_includes/theme-switcher.njk
index 922d142..6035bbf 100644
--- a/src/_includes/theme-switcher.njk
+++ b/src/_includes/theme-switcher.njk
@@ -1 +1,6 @@
-Theme Switcher
\ No newline at end of file
+
+ Theme:
+ System
+ Light
+ Dark
+
\ No newline at end of file
diff --git a/src/_includes/updates.njk b/src/_includes/updates.njk
deleted file mode 100644
index 81636bc..0000000
--- a/src/_includes/updates.njk
+++ /dev/null
@@ -1,6 +0,0 @@
-
-{% for update in updates %}
- [{{ update.date }}]
- {{ update.content | mdinline }}
- {% endfor %}
-
\ No newline at end of file
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index 7d60554..8e3fef4 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -1,17 +1,13 @@
-
- {% include 'meta.njk' %}
-
-
-
+ {% include 'head.njk' %}
- {% include 'header.njk' %}
-
Skip navigation
-
- {% include 'sidebar.njk' %}
-
{{ content | safe }}
+
Skip navigation
+
Gil•INK
+ {% include 'nav.njk' %}
+
+ {{ content | safe }}
{% include 'footer.njk' %}
diff --git a/src/about.md b/src/about.md
index 7b68a71..faea622 100644
--- a/src/about.md
+++ b/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
-Matrix: @kalanggam:matrix.org
-Fedi: @gil@hol.ogra.ph
+{% include 'snippets/socials.njk' %}
Creating
- Printmaking- linocut/woodblock prints
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b2f6d15..03bb0f2 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -16,27 +16,79 @@ $body: ;
$mono: ;
*/
:root, [data-selected-theme=light] {
- --theme-background: rgb(230, 245, 230);
- --theme-text: rgb(8, 10, 8);
+ --color-background: #aabf7e;
+ --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);
- --theme-text: rgb(230, 245, 230);
+ --color-background: #191b19;
+ --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);
- color: var(--theme-text);
+ background-color: var(--color-background);
+ 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;
}
-
-.contentarea {
- display: flex;
- flex-direction: column;
-}
-.contentarea main {
- width: 100%;
-}
-@media only screen and (min-width: 768px) {
- .contentarea {
- flex-direction: row-reverse;
+@media only screen and (min-width: 992px) {
+ .site {
+ margin: auto;
+ width: 70%;
}
}
-ul#updates time {
- color: rgb(110, 110, 110);
+.box, .page-container main, .page-footer, .site-footer, .navbar a {
+ 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 */
diff --git a/src/assets/css/main.css.map b/src/assets/css/main.css.map
index a9a0f64..dbac5d8 100644
--- a/src/assets/css/main.css.map
+++ b/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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/src/assets/fonts/inclusive-sans-italic.woff2 b/src/assets/fonts/inclusive-sans-italic.woff2
new file mode 100644
index 0000000..1acfa44
Binary files /dev/null and b/src/assets/fonts/inclusive-sans-italic.woff2 differ
diff --git a/src/assets/fonts/inclusive-sans.woff2 b/src/assets/fonts/inclusive-sans.woff2
new file mode 100644
index 0000000..432c977
Binary files /dev/null and b/src/assets/fonts/inclusive-sans.woff2 differ
diff --git a/src/assets/fonts/kurale.woff2 b/src/assets/fonts/kurale.woff2
new file mode 100644
index 0000000..b7c7560
Binary files /dev/null and b/src/assets/fonts/kurale.woff2 differ
diff --git a/src/changelog.md b/src/changelog.md
index a50142e..1cb07bb 100644
--- a/src/changelog.md
+++ b/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'
---
@@ -17,4 +17,5 @@ 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 (pending)
-- Added a media query to move the navigation sidebar to the top on smaller screens, to the right on larger screens
\ No newline at end of file
+- 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)
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index 8001e1f..4ce25a0 100644
--- a/src/index.md
+++ b/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:
-
-- Microblog:
@gil@hol.ogra.ph
-- 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)
+{% include 'snippets/socials.njk' %}
---
-## Recent updates
+## Updates
-{% include 'updates.njk' %}
+{% include 'snippets/updates.njk' %}
---
diff --git a/src/now.md b/src/now.md
index e793ef7..3051e9b 100644
--- a/src/now.md
+++ b/src/now.md
@@ -7,4 +7,4 @@ eleventyNavigation:
parent: '/slashes'
---
-{% include 'updates.njk' %}
\ No newline at end of file
+{% include 'snippets/updates.njk' %}
\ No newline at end of file
diff --git a/src/slashes.md b/src/slashes.md
index 85673cd..6283ee6 100644
--- a/src/slashes.md
+++ b/src/slashes.md
@@ -6,6 +6,7 @@ eleventyNavigation:
key: '/slashes'
order: 999
---
+# Slashpages
From [slashpages.net](https://slashpages.net/):