336 lines
10 KiB
CSS
336 lines
10 KiB
CSS
#blazor-error-ui {
|
|
color-scheme: light only;
|
|
background: lightyellow;
|
|
bottom: 0;
|
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
|
box-sizing: border-box;
|
|
display: none;
|
|
left: 0;
|
|
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#blazor-error-ui .dismiss {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 0.75rem;
|
|
top: 0.5rem;
|
|
}
|
|
|
|
/* Header: pinned to the top while the page scrolls, so the brand and (on mobile)
|
|
the hamburger button are always reachable. It is a plain block child of <body>
|
|
(NOT a flex item) -- a stretched flex child fills its cell and never sticks.
|
|
z-index keeps it above the content; the opaque background stops content showing
|
|
through as it scrolls underneath. */
|
|
.site-header {
|
|
/* The brand gradient, blue into green -- the strongest, most visible cue that
|
|
carries the school's colours across every page. Built on --color-header, so
|
|
it stays deep in dark mode too (see app.css). No accent underline any more:
|
|
the gradient already ends in green, and the active menu item carries the
|
|
green stroke. */
|
|
background: var(--gradient-brand);
|
|
box-shadow: var(--shadow);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
padding: var(--space-3) 1.25rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
|
|
/* Signet and two-line lettering side by side. The lettering is a column of its
|
|
own, so the name and the school line up on the left edge. */
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--color-on-header);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brand:hover {
|
|
color: var(--color-on-header);
|
|
}
|
|
|
|
/* On the blue gradient the global brand-blue focus ring would vanish; white
|
|
stays visible on both ends of it. */
|
|
.brand:focus-visible {
|
|
outline-color: var(--color-focus-inverse);
|
|
}
|
|
|
|
/* The signet lives in its own component (Signet.razor), so its <svg> carries that
|
|
component's scope attribute, not this one's; ::deep reaches it from here. */
|
|
.brand ::deep .signet {
|
|
flex-shrink: 0;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.brand-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 1.35rem;
|
|
font-weight: var(--font-weight-heading);
|
|
letter-spacing: var(--letter-spacing-heading);
|
|
}
|
|
|
|
.brand-school {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* The links are pills with their own padding (see app.css), so the gap between
|
|
them can stay small. */
|
|
.main-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-1) var(--space-2);
|
|
}
|
|
|
|
/* The hamburger button and its state checkbox are hidden on wide screens; the
|
|
media query below turns them on for narrow ones. display:none (beating the
|
|
global .visually-hidden the checkbox also carries) takes the checkbox out of the
|
|
tab order here, where there is no menu to open. */
|
|
.nav-toggle,
|
|
.nav-toggle-label {
|
|
display: none;
|
|
}
|
|
|
|
/* The link colours/states for .main-nav a live in the GLOBAL app.css, not here.
|
|
Reason: NavLink renders plain <a> elements that carry no scoped-CSS attribute
|
|
(b-xxxxx), so a scoped rule ".main-nav a" would not match them. See app.css. */
|
|
|
|
/* Content: at least tall enough that the footer sits at the bottom of the viewport
|
|
on short pages. 100dvh - 5rem leaves room for the header with its signet (which
|
|
sits above in normal flow); dvh follows the mobile browser's shrinking toolbar.
|
|
On long pages the content simply grows past this and pushes the footer down
|
|
naturally. */
|
|
.content {
|
|
min-height: calc(100dvh - 5rem);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
padding: var(--space-4) 1.25rem var(--space-6);
|
|
}
|
|
|
|
/* Footer: a dark brand-blue band with light text, so the page visibly ends here.
|
|
Its own tokens (--color-footer, --color-on-footer...) keep it dark in both
|
|
colour schemes, like the header. position:relative anchors the wave. */
|
|
.site-footer {
|
|
position: relative;
|
|
margin-top: var(--space-6);
|
|
background: var(--color-footer);
|
|
color: var(--color-on-footer-soft);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* The wave sits just above the footer's top edge (bottom: 100%), drawn over the
|
|
page background in the footer colour, so the band seems to rise softly instead
|
|
of starting with a hard line. Fixed height, full width: on a phone it simply
|
|
flattens out. Overlapped by 1px so no hairline gap shows between wave and band
|
|
when the browser rounds. */
|
|
.footer-wave {
|
|
position: absolute;
|
|
bottom: calc(100% - 1px);
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
fill: var(--color-footer);
|
|
}
|
|
|
|
/* Three columns: brand, quick links, further pages. The brand gets a bit more room
|
|
because it holds the signet. A missing link column simply leaves its cell empty,
|
|
so the others keep their place. */
|
|
.footer-inner {
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
padding: var(--space-5) 1.25rem var(--space-4);
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr 1fr;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.footer-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: start;
|
|
gap: var(--space-2);
|
|
color: var(--color-on-footer);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer-brand ::deep .signet {
|
|
flex-shrink: 0;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
/* Column headings label the lists; they are not a second page heading, so they
|
|
stay small and quiet. */
|
|
.footer-heading {
|
|
margin: 0 0 var(--space-2);
|
|
color: var(--color-on-footer);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.footer-nav li + li {
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.footer-nav a {
|
|
color: var(--color-on-footer-soft);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-nav a:hover {
|
|
color: var(--color-on-footer);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Same reason as the brand link in the header: a light ring on the dark band. */
|
|
.footer-nav a:focus-visible {
|
|
outline-color: var(--color-focus-inverse);
|
|
}
|
|
|
|
/* Copyright: a thin rule separates it from the columns. The rule spans the content
|
|
width, not the whole window, so it lines up with the columns above. */
|
|
.footer-copyright {
|
|
box-sizing: border-box;
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
padding: var(--space-3) 1.25rem;
|
|
border-top: 1px solid var(--color-footer-border);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Mobile: on narrow screens the nav collapses behind a hamburger button. This is
|
|
pure CSS -- the #nav-toggle checkbox holds the open/closed state and its
|
|
:checked state reveals the nav. No JavaScript, so it works under static SSR. */
|
|
@media (max-width: 40rem) {
|
|
/* The brand stays on the left, the hamburger goes to the right, and the nav
|
|
occupies its own full-width row below both. */
|
|
.header-inner {
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* The checkbox comes back as a real, focusable control -- only visually hidden
|
|
(global .visually-hidden), so Tab stops on it and Space toggles the menu. It
|
|
lives under the label, so the focus ring is drawn there instead. */
|
|
.nav-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.nav-toggle:focus-visible + .nav-toggle-label {
|
|
outline: 3px solid var(--color-focus-inverse);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* Show the hamburger button. */
|
|
.nav-toggle-label {
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
margin: -0.5rem; /* keep the tap target large without shifting layout */
|
|
}
|
|
|
|
/* The three-bar icon, drawn with one element plus its ::before/::after. */
|
|
.nav-toggle-bar,
|
|
.nav-toggle-bar::before,
|
|
.nav-toggle-bar::after {
|
|
display: block;
|
|
width: 1.5rem;
|
|
height: 2px;
|
|
background: var(--color-on-header);
|
|
content: "";
|
|
transition: transform var(--transition), background-color var(--transition);
|
|
}
|
|
|
|
.nav-toggle-bar::before {
|
|
transform: translateY(-6px);
|
|
}
|
|
|
|
.nav-toggle-bar::after {
|
|
transform: translateY(4px); /* 6px minus the bar's own 2px height */
|
|
}
|
|
|
|
/* Open: the hamburger turns into an X. The middle bar fades out and the outer
|
|
two meet in the middle and cross. Only the icon changes shape; nothing around
|
|
it moves. The checkbox sits right before the label, hence the + combinator. */
|
|
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar::after {
|
|
transform: translateY(-2px) rotate(-45deg); /* back up by its own height */
|
|
}
|
|
|
|
/* The nav takes its own row and is hidden until the checkbox is checked.
|
|
max-height:0 alone would only hide it from the eye: its links would still
|
|
be Tab stops and still be read out. visibility:hidden takes them out of
|
|
both. Transitioning visibility delays the switch to hidden until the fold
|
|
has finished, so closing still animates. Opening uses the transition of the
|
|
:checked rule below, which leaves visibility out: the links must be Tab
|
|
stops the moment Space is pressed, not 0.2s later. */
|
|
.main-nav {
|
|
flex-basis: 100%;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
transition: max-height 0.2s ease, visibility 0.2s;
|
|
}
|
|
|
|
/* Checked state: reveal the stacked links. The max-height caps the open menu
|
|
to the space below the sticky header; a longer list scrolls inside it
|
|
instead of running off the screen. */
|
|
.nav-toggle:checked ~ .main-nav {
|
|
visibility: visible;
|
|
transition: max-height 0.2s ease;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Mobile per-link spacing for .main-nav a is in the global app.css too, for
|
|
the same scoped-attribute reason as above. */
|
|
|
|
/* The footer columns stack: one column, brand on top. */
|
|
.footer-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|