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 @@