From dde23f91dea7dd2e175769c9c961cbf9e93bedb4 Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Sun, 28 Dec 2025 11:37:58 -0800 Subject: [PATCH] split nav css out --- 2025/solstice/index.html | 1 + css/main.css | 99 ---------------------------------------- css/nav.css | 72 +++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 99 deletions(-) create mode 100644 css/nav.css diff --git a/2025/solstice/index.html b/2025/solstice/index.html index 536d507..80ba0ac 100644 --- a/2025/solstice/index.html +++ b/2025/solstice/index.html @@ -17,6 +17,7 @@ + diff --git a/css/main.css b/css/main.css index cc072e2..47e5047 100644 --- a/css/main.css +++ b/css/main.css @@ -61,24 +61,7 @@ main { img { display: block; -} - -header img { - max-height: 25vh; max-width: 100%; - margin: 0 auto; -} - -@media (prefers-color-scheme: light) { - #logo-dark { - display: none; - } -} - -@media (prefers-color-scheme: dark) { - #logo-light { - display: none; - } } h1 { @@ -134,85 +117,3 @@ main > p { margin-left: 1.25rem; } } - -ul { - background-color: var(--color-alt); - padding: .5rem; - border-radius: 0 0 1rem 1rem; -} - -main > ul { - margin-left: 2.5rem; -} - -@media (max-width: 650px) { - main > ul { - margin-left: 1.25rem; - } -} - -li { - line-height: 2rem; -} - -nav { - margin: 0 auto 1rem; -} - -nav a { - text-decoration: none; - font-size: 1.2rem; - padding: 0 .25rem; - border: solid thin var(--color-accent); - border-radius: .25rem; -} - -@media (any-hover: hover) { - nav a:hover { - outline: solid .25rem var(--color-accent); - } -} - -footer { - width: 95%; - margin: 0 auto; - padding: 0 0 1rem; -} - -footer p { - background-color: var(--color-text); - color: var(--color-bg); - text-align: center; - margin: 1rem 0 0; -} - -footer a { - color: var(--color-bg); - text-decoration-color: var(--color-accent-flipped); -} - -footer a:focus-visible { - outline-color: var(--color-accent-flipped); -} - -#contacts { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: center; - column-gap: 3rem; - margin: 0 0 1rem; -} - -#market-list { - display: flex; -} - -#market-list li { - list-style: none; - font-size: 1rem; -} - -#market-list li:not(:last-child)::after { - content: '⦿'; -} diff --git a/css/nav.css b/css/nav.css new file mode 100644 index 0000000..c03798b --- /dev/null +++ b/css/nav.css @@ -0,0 +1,72 @@ +/* top nav */ +nav { + margin: 0 auto 1.5rem; +} + +nav a { + text-decoration: none; + font-size: 1.2rem; + padding: 0 .25rem; + border: solid thin var(--color-accent); + border-radius: .25rem; +} + +@media (any-hover: hover) { + nav a:hover { + outline: solid .25rem var(--color-accent); + } +} + +nav:has(#directory-link) { + text-align: right; +} + +header img { + max-height: 25vh; + max-width: 100%; + margin: 0 auto; +} + +@media (prefers-color-scheme: light) { + #logo-dark { + display: none; + } +} + +@media (prefers-color-scheme: dark) { + #logo-light { + display: none; + } +} + +/* footer */ +footer { + width: 95%; + margin: 0 auto; + padding: 0 0 1rem; +} + +footer p { + background-color: var(--color-text); + color: var(--color-bg); + text-align: center; + font-size: .9rem; +} + +footer a { + color: var(--color-bg); + text-decoration-color: var(--color-accent-flipped); +} + +footer a:focus-visible { + outline-color: var(--color-accent-flipped); +} + +#contacts { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + column-gap: 3rem; + margin: 1rem 0 0; +}