diff --git a/scss/_color.scss b/scss/_color.scss deleted file mode 100644 index 98d0b8f..0000000 --- a/scss/_color.scss +++ /dev/null @@ -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 -} \ No newline at end of file diff --git a/scss/_font.scss b/scss/_font.scss index 121c71e..62a4bc3 100644 --- a/scss/_font.scss +++ b/scss/_font.scss @@ -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+ */ - } \ No newline at end of file +@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+ */ +} diff --git a/scss/_layout.scss b/scss/_layout.scss deleted file mode 100644 index 3885475..0000000 --- a/scss/_layout.scss +++ /dev/null @@ -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; - } - } -} diff --git a/scss/_theme.scss b/scss/_theme.scss new file mode 100644 index 0000000..5f68ff4 --- /dev/null +++ b/scss/_theme.scss @@ -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); +} \ No newline at end of file diff --git a/scss/main.scss b/scss/main.scss index fc7873a..f1f671c 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -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; } diff --git a/scss/_media.scss b/scss/mixins/_media.scss similarity index 100% rename from scss/_media.scss rename to scss/mixins/_media.scss diff --git a/scss/pages/_about.scss b/scss/pages/_about.scss new file mode 100644 index 0000000..c0099f9 --- /dev/null +++ b/scss/pages/_about.scss @@ -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; + } +} diff --git a/scss/pages/_home.scss b/scss/pages/_home.scss new file mode 100644 index 0000000..d29a800 --- /dev/null +++ b/scss/pages/_home.scss @@ -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; + } + } +} diff --git a/scss/print.scss b/scss/print.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/_data/neighbors.json b/src/_data/neighbors.json index abf39f7..85aa9a5 100644 --- a/src/_data/neighbors.json +++ b/src/_data/neighbors.json @@ -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/" } ] diff --git a/src/_data/updates.json b/src/_data/updates.json index 699b40e..a06f036 100644 --- a/src/_data/updates.json +++ b/src/_data/updates.json @@ -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 /now page!" - }, { "date": "2025-02-20", "content": "Hello world!" diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index a3e0078..d2267b6 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -1,19 +1,7 @@ -