From d4ffca4b5ba401f6fd7c4802dd42fa801cebcf9c Mon Sep 17 00:00:00 2001 From: Devin Haska Date: Tue, 6 Feb 2024 14:08:17 -0800 Subject: [PATCH] feat: footer refactor --- src/_data/meta.js | 1 - src/_includes/partials/footer.html | 36 +- src/_includes/svgs/rss.svg | 5 + src/_includes/svgs/social-github.svg | 2 + src/_includes/svgs/social-mastodon.svg | 2 + src/assets/css/blocks/footer.css | 11 - src/assets/css/blocks/site-footer.css | 38 + src/assets/css/blocks/site-nav.css | 2 +- src/assets/css/global/global-styles.css | 9 +- src/assets/css/global/variables.css | 4 + src/assets/css/utils/visually-hidden.css | 15 + src/assets/images/favicon.png | Bin 368 -> 0 bytes src/assets/images/logo.svg | 4803 ---------------------- 13 files changed, 94 insertions(+), 4834 deletions(-) create mode 100644 src/_includes/svgs/rss.svg create mode 100644 src/_includes/svgs/social-github.svg create mode 100644 src/_includes/svgs/social-mastodon.svg delete mode 100644 src/assets/css/blocks/footer.css create mode 100644 src/assets/css/blocks/site-footer.css create mode 100644 src/assets/css/utils/visually-hidden.css delete mode 100644 src/assets/images/favicon.png delete mode 100644 src/assets/images/logo.svg diff --git a/src/_data/meta.js b/src/_data/meta.js index f085f9d..a74c9a1 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -18,7 +18,6 @@ module.exports = { feed: "", }, social: { - rss: "", github: "", mastodon: "", }, diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html index 31e56c1..424dd8d 100644 --- a/src/_includes/partials/footer.html +++ b/src/_includes/partials/footer.html @@ -1,21 +1,8 @@ {% set socialLinks = meta.social | entries %} diff --git a/src/_includes/svgs/rss.svg b/src/_includes/svgs/rss.svg new file mode 100644 index 0000000..2d66f78 --- /dev/null +++ b/src/_includes/svgs/rss.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/_includes/svgs/social-github.svg b/src/_includes/svgs/social-github.svg new file mode 100644 index 0000000..33b2d63 --- /dev/null +++ b/src/_includes/svgs/social-github.svg @@ -0,0 +1,2 @@ + + diff --git a/src/_includes/svgs/social-mastodon.svg b/src/_includes/svgs/social-mastodon.svg new file mode 100644 index 0000000..0b5ee7a --- /dev/null +++ b/src/_includes/svgs/social-mastodon.svg @@ -0,0 +1,2 @@ + + diff --git a/src/assets/css/blocks/footer.css b/src/assets/css/blocks/footer.css deleted file mode 100644 index 89336d3..0000000 --- a/src/assets/css/blocks/footer.css +++ /dev/null @@ -1,11 +0,0 @@ -.footer { - background-color: var(--color-bg-soft); - margin-block-start: 1.5rem; - padding-block: 1.5rem; -} - -.footer-links { - margin: 0; - padding: 0; - gap: 0.5rem; -} diff --git a/src/assets/css/blocks/site-footer.css b/src/assets/css/blocks/site-footer.css new file mode 100644 index 0000000..788d796 --- /dev/null +++ b/src/assets/css/blocks/site-footer.css @@ -0,0 +1,38 @@ +.footer { + background-color: var(--color-bg-soft); + margin-block-start: 1.5rem; + padding-block: 1.5rem; +} + +.footer-links { + margin: 0; + padding: 0; +} + +.footer-gap { + gap: 0.5rem; +} + +.footer-grid { + display: grid; +} + +.footer-socials { + grid-column: 1 / -1; +} + +.footer-pages .footer-links { + flex-direction: column; +} + +@media (min-width: 32rem) { + .footer-grid { + grid-template-columns: 1fr 1fr; + } + + .footer-pages .footer-links { + flex-direction: row; + gap: 1rem; + justify-content: flex-end; + } +} diff --git a/src/assets/css/blocks/site-nav.css b/src/assets/css/blocks/site-nav.css index 3cdfca2..7737f96 100644 --- a/src/assets/css/blocks/site-nav.css +++ b/src/assets/css/blocks/site-nav.css @@ -11,5 +11,5 @@ .navbar .links { list-style-type: none; - gap: 1.5rem; + gap: 1rem; } diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css index 1e0d273..54db66a 100644 --- a/src/assets/css/global/global-styles.css +++ b/src/assets/css/global/global-styles.css @@ -73,11 +73,11 @@ ul li::marker { } ol li::marker { - color: rgba(0, 0, 0, 0.6); + color: var(--color-text-soft); } blockquote { - border-inline-start: 2px solid var(--color-text-soft); + border-inline-start: 2px solid var(--color-bg-faded); margin-inline-start: 0; padding-inline: 1rem; } @@ -105,6 +105,11 @@ img[width][height] { height: auto; } +hr { + border-style: solid; + color: var(--color-bg-faded); +} + @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css index 214f9df..ca21765 100644 --- a/src/assets/css/global/variables.css +++ b/src/assets/css/global/variables.css @@ -7,6 +7,7 @@ --color-dark: var(--color-neutral-950); --color-bg: var(--color-light); + --color-bg-faded: var(--color-neutral-300); --color-bg-soft: var(--color-neutral-100); --color-text: var(--color-dark); --color-text-soft: var(--color-neutral-600); @@ -20,7 +21,10 @@ @media (prefers-color-scheme: dark) { :root { --color-bg: var(--color-dark); + --color-bg-soft: var(--color-neutral-900); + --color-bg-faded: var(--color-neutral-800); --color-text: var(--color-light); + --color-text-soft: var(--color-neutral-500); --color-primary: var(--color-aqua-300); --color-primary-highlight: var(--color-aqua-200); diff --git a/src/assets/css/utils/visually-hidden.css b/src/assets/css/utils/visually-hidden.css new file mode 100644 index 0000000..0b964a2 --- /dev/null +++ b/src/assets/css/utils/visually-hidden.css @@ -0,0 +1,15 @@ +/* +VISUALLY HIDDEN UTILITY +Info: https://piccalil.li/quick-tip/visually-hidden/ +*/ +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 0; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png deleted file mode 100644 index e0b25cff685969b6239e413214ed519b8adac112..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 368 zcmV-$0gwKPP)Px$DoI2^R5*>5QZa6WKoA^GZV{z_fSWY#xEC0m;)h_Qq;TgV!Y)!dg^^GmVsvs| z0F~3Y$_tzl@qkUW$8ivpOm(-rGdsI?fP>R{MW^$M{u=k(BK!Wl{_v*a05EeErvxX# z7Kw=F%PkQRO~sfe+)jBJ<9qawed&=O7E0VB%`Ko5kx+ky2b8r!_(uX zN6gC@uP+a#CWw4|y=R^XlZ;YT^~hu66k1|;xEXS)DuhW!!d{SV-`=`?wrf&Vb+5p) z6 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file