diff --git a/scss/_font.scss b/scss/_font.scss index a386033..5703127 100644 --- 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; } diff --git a/scss/_theme.scss b/scss/_theme.scss index 5f68ff4..34c0ebd 100644 --- 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; } \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index b5019cc..173fdb8 100644 --- 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; } diff --git a/scss/pages/_about.scss b/scss/pages/_about.scss index 577892f..42ed820 100644 --- 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; - } } diff --git a/src/_data/updates.json b/src/_data/updates.json index 5640ba8..6128ca8 100644 --- 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!" diff --git a/src/_includes/head/default-styles.njk b/src/_includes/head/default-styles.njk index 150cef5..9f17060 100644 --- a/src/_includes/head/default-styles.njk +++ b/src/_includes/head/default-styles.njk @@ -1,5 +1,2 @@ - - - \ No newline at end of file diff --git a/src/_includes/snippets/updates.njk b/src/_includes/snippets/updates.njk index 93de72c..427e608 100644 --- a/src/_includes/snippets/updates.njk +++ b/src/_includes/snippets/updates.njk @@ -1,6 +1,6 @@

{% for update in updates %} - + / {{ update.content | safe }}
{% endfor %}

\ No newline at end of file diff --git a/src/_layouts/about.njk b/src/_layouts/about.njk index f213aca..4b0cbd3 100644 --- a/src/_layouts/about.njk +++ b/src/_layouts/about.njk @@ -2,24 +2,39 @@ layout: base.njk --- -
-
{{ content | safe }}
+
+
{{ content | safe }}
-
+

Interests

@@ -32,7 +47,7 @@ layout: base.njk
  • Worldbuilding
    • -
    +

    Fun facts

    @@ -42,7 +57,7 @@ layout: base.njk
  • Languages: English (native), German, Cebuano, and Tagalog
    • -