From 20e76897ffd212346a3bcc6e458ae8546cc049e6 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sat, 30 Sep 2023 11:56:45 -0700 Subject: [PATCH] Move site header layout styles to columns; fix nav spacing Do a bit of testing on Chrome too. --- assets/styles/root.css | 12 --- assets/styles/root/002_colors.css | 16 +++- assets/styles/root/002_columns.css | 95 +++++++++++++++++++++-- assets/styles/root/050_site_header.css | 103 ++----------------------- assets/styles/root/050_typography.css | 15 +++- layouts/partials/header.html | 19 +++-- layouts/partials/site_nav.html | 10 ++- 7 files changed, 141 insertions(+), 129 deletions(-) diff --git a/assets/styles/root.css b/assets/styles/root.css index d8ded0a..50e5ae2 100644 --- a/assets/styles/root.css +++ b/assets/styles/root.css @@ -1,14 +1,2 @@ @layer reset, typography, root, layout, section, page, utility; -:root { - --menu-icon-size: 20px; -} - -@media (prefers-color-scheme: dark) { - :root { - --twitter-icon: url(/icons/twitter-dark.svg); - --github-icon: url(/icons/github-dark.svg); - --instagram-icon: url(/icons/instagram-dark.svg); - --feed-icon: url(/icons/rss-dark.svg); - } -} diff --git a/assets/styles/root/002_colors.css b/assets/styles/root/002_colors.css index 5c986a1..87e4d7e 100644 --- a/assets/styles/root/002_colors.css +++ b/assets/styles/root/002_colors.css @@ -156,6 +156,10 @@ background-clip: text; color: transparent; } + + h1.gradient a[href] { + color: inherit; + } } header.site nav > li { @@ -198,12 +202,16 @@ background-color: inherit; } - .title, .title a { - color: var(--color); - } - .post header a, .post header a:visited { color: inherit; } + + .social > li + li:before { + color: var(--dark); + } + + .title, .title a { + color: var(--color); + } } diff --git a/assets/styles/root/002_columns.css b/assets/styles/root/002_columns.css index b08e46d..5230862 100644 --- a/assets/styles/root/002_columns.css +++ b/assets/styles/root/002_columns.css @@ -6,6 +6,7 @@ --list-item-block-gap: var(--body-item-spacing); --margin-min-width: var(--body-item-spacing); --margin-max-width: 1fr; + --menu-icon-size: 20px; --nav-bulleted-spacing: 0.75rem; } @@ -159,6 +160,60 @@ width: 100%; } + header.site { + display: flex; + width: 100%; + } + + header.site h1 { + margin: 0; + order: 1; + } + + header.site > .grid { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 0 0.5em; + margin: 0 auto; + max-width: var(--content-width); + padding: 1.5rem 3rem; + width: 100%; + } + + header.site > .grid > nav { + align-items: center; + display: flex; + justify-content: start; + list-style: none; + } + + header.site nav > li { display: block; } + + header.site nav:first-of-type { + justify-content: start; + order: 2; + } + @media (max-width: 435px) { + header.site nav:first-of-type { order: 5; } + } + + header.site nav:last-of-type { + justify-content: end; + order: 3; + } + + @media (max-width: 516px) { + header.site > .platter { + border-left: none; + border-radius: 0; + border-right: none; + border-top: none; + } + + header.site > .grid { max-width: none; } + } + img { height: auto; max-width: 100%; @@ -192,12 +247,16 @@ padding-block-start: 0.5em; } - nav.bulleted>li:first-child::before { - margin-inline: 0; + nav.bulleted > li:not(:first-child)::before { + margin-inline-start: var(--nav-bulleted-spacing); } - nav.bulleted>li::before { - margin-inline: var(--nav-bulleted-spacing); + nav.social > li { + margin-inline-start: var(--nav-bulleted-spacing); + } + + nav.social > li:first-child { + margin-inline-start: 0; } ul, ol { @@ -240,6 +299,10 @@ display: grid; grid-template-columns: subgrid; } + + .list .post header h1 { + grid-column: content-start / content-end; + } } .list .post time { @@ -329,12 +392,30 @@ grid-column: gutter-start / gutter-end; } - .post p, - .post .tags, - .post .title { + .post > * { grid-column: content-start / content-end; } + .social { + display: block flex; + margin-left: auto; + order: 2; + } + + .social > li > a { + display: block; + height: var(--menu-icon-size); + width: var(--menu-icon-size); + } + + .social > li > a > span { + display: none; + } + + .social > li + li:before { + padding: 0 0.5rem; + } + .youtube iframe { aspect-ratio: 16 / 9; margin-bottom: -3px; diff --git a/assets/styles/root/050_site_header.css b/assets/styles/root/050_site_header.css index 7d95f3a..05eda7f 100644 --- a/assets/styles/root/050_site_header.css +++ b/assets/styles/root/050_site_header.css @@ -17,104 +17,13 @@ } } - - header.site a[href], - header.site a[href]:hover { - color: inherit; - text-decoration: none; - } - - header.site { - display: flex; - width: 100%; - z-index: 10000; - } - - header.site h1 { - margin: 0; - order: 1; - } - - header.site > .grid { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 0.5em; - margin: 0 auto; - max-width: var(--content-width); - padding: 1.5rem 3rem; - width: 100%; - } - - header.site > .grid > nav { - align-items: center; - display: flex; - justify-content: start; - list-style: none; - } - - header.site nav > li { display: block; } - - header.site nav:first-of-type { - justify-content: start; - order: 2; - } - - header.site nav:last-of-type { - justify-content: end; - order: 3; - } - - @media (max-width: 516px) { - header.site > .platter { - border-left: none; - border-radius: 0; - border-right: none; - border-top: none; - } - - header.site > .grid { max-width: none; } - } - - @media (max-width: 435px) { - header.site nav:first-of-type { order: 5; } - } - - nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); } - nav.social > li:first-child { margin-inline-start: 0; } - - .social { - display: block flex; - letter-spacing: 2px; - margin-left: auto; - order: 2; - } - - .social > li > a { - background-image: var(--url); - background-repeat: no-repeat; - background-size: var(--menu-icon-size); - display: block; - height: var(--menu-icon-size); - width: var(--menu-icon-size); - } - - .social > li > a > span { - display: none; - } - - .social > li + li:before { - color: var(--dark); - padding: 0 0.5rem; - } - - #social-menu-mastodon img { - content: var(--mastodon-icon); - position: relative; - top: 1px; - } - + #social-menu-mastodon img { content: var(--mastodon-icon); } #social-menu-github img { content: var(--github-icon); } #social-menu-instagram img { content: var(--instagram-icon); } #social-menu-feed img { content: var(--feed-icon); } + + #social-menu-mastodon img { + position: relative; + top: 1px; + } } diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css index d654763..273d22e 100644 --- a/assets/styles/root/050_typography.css +++ b/assets/styles/root/050_typography.css @@ -80,7 +80,17 @@ content: "↳"; } - header.site nav > .active { font-weight: bold; } + header.site h1 > a:hover { + text-decoration: none; + } + + header.site nav { + list-style: none; + } + + header.site nav > .active { + font-weight: bold; + } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); @@ -157,6 +167,9 @@ line-height: var(--line-height); } + .social { + letter-spacing: 2px; + } .title { font-size: var(--h5-size); diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 090748c..50856b3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -9,13 +9,18 @@ diff --git a/layouts/partials/site_nav.html b/layouts/partials/site_nav.html index 0b9deac..1307664 100644 --- a/layouts/partials/site_nav.html +++ b/layouts/partials/site_nav.html @@ -3,7 +3,15 @@