diff --git a/frontend/src/assets/pagerite.css b/frontend/src/assets/pagerite.css index 3e0f5d3..64ce63b 100644 --- a/frontend/src/assets/pagerite.css +++ b/frontend/src/assets/pagerite.css @@ -122,7 +122,8 @@ body { display: flex; flex-direction: column; justify-content: flex-end; - min-height: 11rem; + height: 13rem; + box-sizing: content-box; background: linear-gradient(135deg, var(--surface), var(--bg)); border-bottom: 1px solid var(--line); } @@ -287,7 +288,8 @@ body.editing #sidebar { The panel scrolls internally. */ .editor-host { position: fixed; - top: 0; /* main.js: banner bottom while visible, else 0 */ + top: 0; + /* main.js: banner bottom while visible, else 0 */ bottom: 0; left: 0; width: var(--editor-w); @@ -894,6 +896,7 @@ article h2 { (explicit img widths still shrink-wrap), while .wide keeps its full viewport bleed. */ @media (max-width: 48rem) { + /* Nav type shrinks fluidly as space runs out. The nav font-size is em-based both in base and in every theme override, so scaling the banner's font-size (nothing else in the banner is em-sized — brand and @@ -938,7 +941,7 @@ article h2 { /* Only the main level becomes a horizontal wrapping strip; submenus stay vertical blocks attached under their parent item. */ - #sidebar > ul { + #sidebar>ul { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 0.75rem; diff --git a/pagerite/themes/corporate/banner.css b/pagerite/themes/corporate/banner.css index ef9a5a5..dad7945 100644 --- a/pagerite/themes/corporate/banner.css +++ b/pagerite/themes/corporate/banner.css @@ -3,11 +3,6 @@ SVG from the active palette (var(--accent)), so one SVG serves light and dark — and other themes too. */ -#banner { - min-height: 15rem; - border-bottom: none; -} - /* Artwork colors, light mode */ .cb-bg0 { stop-color: #ffffff; diff --git a/pagerite/themes/corporate/theme.css b/pagerite/themes/corporate/theme.css index 0798ddd..3bc887a 100644 --- a/pagerite/themes/corporate/theme.css +++ b/pagerite/themes/corporate/theme.css @@ -43,7 +43,7 @@ font-size: clamp(4rem, 11vw, 8.5rem); font-weight: 800; letter-spacing: -0.04em; - line-height: 1; + line-height: 1.1; white-space: nowrap; color: var(--accent2); filter: drop-shadow(0 0.4rem 1.4rem rgb(10 92 255 / 0.3)); diff --git a/pagerite/themes/eyes/banner.css b/pagerite/themes/eyes/banner.css index 8759669..6f89d72 100644 --- a/pagerite/themes/eyes/banner.css +++ b/pagerite/themes/eyes/banner.css @@ -1,7 +1,3 @@ /* Eyes banner design: a canvas critter watching the cursor from the grass (banner.html — markup + styles + script inlined by the backend into #page-banner). Fixed-height stage matching the canvas. */ - -#banner { - height: 240px; -} diff --git a/pagerite/themes/nitro/banner.css b/pagerite/themes/nitro/banner.css index 83c2a0d..3afbb16 100644 --- a/pagerite/themes/nitro/banner.css +++ b/pagerite/themes/nitro/banner.css @@ -5,7 +5,6 @@ /* Bezier-swept banner with wide orange stripes (inlined SVG), separated from the page by a straight orange blade. */ #banner { - height: 13rem; border-bottom: 4px solid var(--accent); } @@ -44,6 +43,7 @@ } @media (prefers-color-scheme: dark) { + /* Banner dark tones tinted to the same violet family as the page. */ .nb-base { fill: #100d18; diff --git a/pagerite/themes/purple/banner.css b/pagerite/themes/purple/banner.css index d86f792..4ea45b0 100644 --- a/pagerite/themes/purple/banner.css +++ b/pagerite/themes/purple/banner.css @@ -15,7 +15,3 @@ .banner-fade { stop-color: var(--bg); } - -#banner { - min-height: 13rem; -} diff --git a/pagerite/themes/stars/banner.css b/pagerite/themes/stars/banner.css index 015a1ac..ad44a78 100644 --- a/pagerite/themes/stars/banner.css +++ b/pagerite/themes/stars/banner.css @@ -1,7 +1,3 @@ /* Stars banner design: a drifting starfield (banner.html — canvas + script inlined by the backend into #page-banner). Fixed-height stage matching the canvas. */ - -#banner { - height: 240px; -} diff --git a/pagerite/themes/summer/banner.css b/pagerite/themes/summer/banner.css index 99118c2..dbdec8c 100644 --- a/pagerite/themes/summer/banner.css +++ b/pagerite/themes/summer/banner.css @@ -2,10 +2,6 @@ backend into #page-banner) — rolling hills, leafy bushes, swaying flowers, drifting clouds and a sun that rises as you scroll. */ -#banner { - min-height: 15rem; -} - /* The artwork fades into the page background at its bottom edge. */ .summer-fade { stop-color: var(--bg); @@ -44,9 +40,17 @@ animation: summer-sun 9s ease-in-out infinite alternate; } - #page-banner .cloud-a { animation: summer-drift 56s ease-in-out infinite alternate; } - #page-banner .cloud-b { animation: summer-drift 73s ease-in-out infinite alternate-reverse; } - #page-banner .cloud-c { animation: summer-drift 64s ease-in-out infinite alternate; } + #page-banner .cloud-a { + animation: summer-drift 56s ease-in-out infinite alternate; + } + + #page-banner .cloud-b { + animation: summer-drift 73s ease-in-out infinite alternate-reverse; + } + + #page-banner .cloud-c { + animation: summer-drift 64s ease-in-out infinite alternate; + } #page-banner .flower { transform-box: fill-box; @@ -55,21 +59,42 @@ } /* Stagger the sway so the meadow doesn't move in lockstep. */ - #page-banner .flower:nth-child(3n) { animation-delay: -1.7s; } - #page-banner .flower:nth-child(3n + 1) { animation-delay: -3.1s; animation-duration: 6s; } + #page-banner .flower:nth-child(3n) { + animation-delay: -1.7s; + } + + #page-banner .flower:nth-child(3n + 1) { + animation-delay: -3.1s; + animation-duration: 6s; + } } @keyframes summer-sun { - from { opacity: 0.22; } - to { opacity: 0.38; } + from { + opacity: 0.22; + } + + to { + opacity: 0.38; + } } @keyframes summer-drift { - from { transform: translateX(-1.6%); } - to { transform: translateX(1.6%); } + from { + transform: translateX(-1.6%); + } + + to { + transform: translateX(1.6%); + } } @keyframes summer-sway { - from { transform: rotate(-2.6deg); } - to { transform: rotate(2.6deg); } + from { + transform: rotate(-2.6deg); + } + + to { + transform: rotate(2.6deg); + } }