diff --git a/themes/default/assets/css/base.css b/themes/default/assets/css/base.css index 17156353..f231a740 100644 --- a/themes/default/assets/css/base.css +++ b/themes/default/assets/css/base.css @@ -4,12 +4,10 @@ body { font-size: 1rem; min-height: 100vh; height: auto; - background: var(--body-bg-color) linear-gradient( - to bottom, - var(--body-bg-color2) 0%, - var(--body-bg-color3) 50%, - var(--body-bg-color) 100% - ); + background: var(--body-bg-color) linear-gradient(to bottom, + var(--body-bg-color2) 0%, + var(--body-bg-color3) 50%, + var(--body-bg-color) 100%); background-size: 100% 100%; position: relative; display: flex; @@ -34,6 +32,63 @@ main { flex-grow: 1; } +main>section:not(#hero) { + display: flex; + flex-direction: column; +} + +main>section:not(#hero)>h2 { + margin: 0 0 1rem 0; + font-size: 1.6rem; + letter-spacing: 0.02em; +} + +main>section:not(#hero)>h2 a { + color: inherit; + text-decoration: none; +} + +main>section:not(#hero)>h2 a:hover, +main>section:not(#hero)>h2 a:focus { + color: var(--accent-blue); +} + +main>section:not(#hero)>nav[aria-label] { + margin: 0; +} + +main>section:not(#hero)>nav[aria-label] ol { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + list-style: none; + padding: 0; + margin: 0; + font-size: 0.95rem; + color: var(--text-muted2); +} + +main>section:not(#hero)>nav[aria-label] ol li { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +main>section:not(#hero)>nav[aria-label] ol li+li::before { + content: "/"; + color: var(--text-muted2); +} + +main>section:not(#hero)>nav[aria-label] a { + color: inherit; + text-decoration: none; +} + +main>section:not(#hero)>nav[aria-label] a:hover, +main>section:not(#hero)>nav[aria-label] a:focus { + color: var(--accent-blue); +} + .external-link::after { content: " ↗"; font-size: 0.85em; @@ -42,3 +97,22 @@ main { vertical-align: baseline; text-decoration: none; } + +hr { + all: unset; + display: block; + width: 100%; + max-width: 30em; + height: 1rem; + margin: auto; + position: relative; + background: radial-gradient(ellipse at center -20px, + var(--accent-blue-glow), + var(--transparent) 80%); +} + +.hr-mirror { + background: radial-gradient(ellipse at center calc(100% + 20px), + var(--accent-blue-glow), + var(--transparent) 80%); +} \ No newline at end of file