diff --git a/package-lock.json b/package-lock.json index f8a5e7f..2b78e4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gil.ink", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gil.ink", - "version": "0.0.1", + "version": "0.0.2", "license": "ISC", "dependencies": { "@11ty/eleventy-navigation": "^1.0.4", @@ -132,9 +132,9 @@ } }, "node_modules/@11ty/eleventy-dev-server/node_modules/@11ty/eleventy-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.2.tgz", - "integrity": "sha512-Lh/QxwoG10ElkO4WZlwlEqM/d58sreVfJ+I8bcL+QEwb5cGNHTuOlBnyZ2zcBKJohHINuo4zGMVrN83LBLIAaw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.5.tgz", + "integrity": "sha512-onKf5DMcS5Ebs5z40XfTFVu1IWFd6ILmtQE9kpduBNKLdA5SnC22JUREMaFzRpvXSo5PnOvlttSpfyh7EDkqag==", "dev": true, "license": "MIT", "engines": { @@ -178,9 +178,9 @@ } }, "node_modules/@11ty/eleventy-plugin-bundle/node_modules/@11ty/eleventy-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.2.tgz", - "integrity": "sha512-Lh/QxwoG10ElkO4WZlwlEqM/d58sreVfJ+I8bcL+QEwb5cGNHTuOlBnyZ2zcBKJohHINuo4zGMVrN83LBLIAaw==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.5.tgz", + "integrity": "sha512-onKf5DMcS5Ebs5z40XfTFVu1IWFd6ILmtQE9kpduBNKLdA5SnC22JUREMaFzRpvXSo5PnOvlttSpfyh7EDkqag==", "dev": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index 449c948..f8703b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gil.ink", - "version": "0.0.1", + "version": "0.0.2", "description": "Test", "scripts": { "watch:sass": "sass --watch scss:src/assets/css", diff --git a/scss/_layout.scss b/scss/_layout.scss new file mode 100644 index 0000000..3885475 --- /dev/null +++ b/scss/_layout.scss @@ -0,0 +1,101 @@ +@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/_media.scss b/scss/_media.scss index e0cbdc9..bbdefda 100644 --- a/scss/_media.scss +++ b/scss/_media.scss @@ -1,18 +1,21 @@ @mixin breakpoint($point) { - @if $point == small { - @media only screen and (min-width: 600px) { @content; } + @if $point == small { + @media only screen and (min-width: 600px) { + @content; } - @else if $point == medium { - @media only screen and (min-width: 768px) { @content; } + } @else if $point == medium { + @media only screen and (min-width: 768px) { + @content; } - @else if $point == large { - @media only screen and (min-width: 992px) { @content; } + } @else if $point == large { + @media only screen and (min-width: 992px) { + @content; } - @else if $point == x-large { - @media only screen and (min-width: 1200px) { @content; } - } - @else { - @error "Unknown breakpoint #{$point}."; + } @else if $point == x-large { + @media only screen and (min-width: 1200px) { + @content; } + } @else { + @error "Unknown breakpoint #{$point}."; } - \ No newline at end of file +} diff --git a/scss/main.scss b/scss/main.scss index b3ae70d..fc7873a 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -1,6 +1,7 @@ -@use "media"; @use "color"; @use "font"; +@use "layout"; +@use "media"; $font-sans: "Inclusive Sans", sans-serif; $font-display: "Kurale", serif; @@ -27,8 +28,18 @@ h4, h5, h6 { font-family: $font-display; +} + +h1 { color: var(--color-accent); } +h2, +h3, +h4, +h5, +h6 { + color: var(--color-accent2); +} hr { height: 1px; @@ -46,99 +57,39 @@ hr { } } -.site { - display: flex; - flex-direction: column; - @include media.breakpoint(small) { - margin: auto; - width: 80%; - } - @include media.breakpoint(large) { - width: 75%; - } - @include media.breakpoint(x-large) { - width: 60%; - } -} - .box { border: solid var(--color-normal) 2px; border-bottom-width: 5px; border-radius: $border-radius; background-color: var(--color-paper); - padding: $gap*2; - :first-child { - margin-top: 0; - } -} - -.navbar { - display: flex; - flex-wrap: wrap; - width: 100%; - margin: $gap 0; - gap: $gap; - a { - @extend .box; - color: var(--color-accent); - font-weight: bold; - text-decoration: none; - &:hover { - background-color: var(--color-accent2); - } - &[aria-current="page"] { - background-color: var(--color-accent); - color: var(--color-background); - margin-top: 2px; - border-bottom-width: 2px; - } - @include media.breakpoint(small) { - width: 100%; - } - } - @include media.breakpoint(small) { - flex-wrap: nowrap; - } -} - -.page-footer { - @extend .box; - margin: $gap 0; -} - -.site-footer { - @extend .box; - gap: $gap; - margin: 0 0 $gap*2 0; -} - -.page-container { - display: flex; - flex-direction: column; - gap: $gap; - main { - @extend .box; - width: 100%; - } -} - -.home-container { - display: flex; - flex-direction: column; - gap: $gap; - .widget-updates, - .widget-socials { - @extend .box; - } - @include media.breakpoint(large) { - display: grid; - grid-template-columns: repeat(2, 1fr); - main { - grid-column: 1 / 3; - } - } } .muted { color: var(--color-muted); // Muted color } + +.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; + } +} diff --git a/src/404.md b/src/404.md index 124c628..a4d976d 100644 --- a/src/404.md +++ b/src/404.md @@ -1,6 +1,6 @@ --- title: 'Error 404: Not found' -layout: default.njk +layout: single.njk permalink: '404.html' --- diff --git a/src/_data/meta.js b/src/_data/meta.js index 27af21a..d2bef93 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -1,8 +1,9 @@ export default function () { return { - name: "Gil.Ink", + name: "Gil•INK", description: "Gil's personal website", author: "Gil", fediverseAuthor: "@gil@hol.ogra.ph", + fediverseUrl: "https://hol.ogra.ph/@gil", }; } diff --git a/src/_data/neighbors.json b/src/_data/neighbors.json new file mode 100644 index 0000000..abf39f7 --- /dev/null +++ b/src/_data/neighbors.json @@ -0,0 +1,7 @@ +[ + { + "label": "Rust Red River", + "image": "https://rustredriver.com/assets/webbutton.gif", + "link": "https://rustredriver.com/" + } +] diff --git a/src/_data/updates.json b/src/_data/updates.json index 0cf98e2..699b40e 100644 --- a/src/_data/updates.json +++ b/src/_data/updates.json @@ -5,7 +5,7 @@ }, { "date": "2025-04-28", - "content": "Finally have a functioning `/now` page!" + "content": "Finally have a functioning /now page!" }, { "date": "2025-02-20", diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index be5b30e..a3e0078 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -1,15 +1,19 @@ - -