/** * Hides Olivero's site header (branding, "Se connecter" account link, * burger/mobile-nav button) and footer everywhere on this single-purpose * app. Loaded on every page (see schoolnotes_page_attachments()), not just * the app's own routes, so it also applies to core pages like /user/login * and node add/edit forms. */ .site-header, .site-footer { display: none; } /** * Hides Drupal's local-task tabs (e.g. "Se connecter" / "Réinitialiser * votre mot de passe" on /user/login) — this app's own pages already * provide their own navigation, so these core tabs are only clutter, * wherever a core route happens to render them. * * !important for the same reason as the other overrides in this file: * this library loads before Olivero's own CSS, which also sets `display` * on .tabs (to flex), so equal specificity alone would lose to it. */ .tabs { display: none !important; } /** * Hides Olivero's "social bar" — a reserved column on the left, meant for * social-media icons, that this app never fills in and that otherwise * shows up as an empty grey block (--color--gray-100) on wide screens. * .main-content normally leaves it a fixed width (--content-left) via * calc(), so that's reclaimed here too, now that there is nothing to * reserve it for. * * !important on both for the same reason as the background override * below: this library loads before Olivero's own CSS. */ .social-bar { display: none !important; } .main-content { width: 100% !important; } /** * Replaces Olivero's default page background — a light grey with a * repeating SVG "drops" pattern, set on in * core/themes/olivero/css/base/base.css — with plain white, so it doesn't * show through around/behind this app's own cream background and on * unstyled core pages (login, node forms, ...). * * !important because this library is attached (and so loads in the page) * before Olivero's own CSS, so equal specificity alone would lose to it. */ body { background-color: #fff !important; background-image: none !important; } /** * The app's logo + name, top-left on every page (see * schoolnotes_page_top()) — the site's only "header" now that Olivero's own * one is hidden above. Colors are hardcoded rather than the --sn-* custom * properties, since those are only declared on .schoolnotes-app and this * bar sits outside it (in page_top, not the main content). */ .schoolnotes-logo-bar { display: flex; align-items: center; gap: 0.6rem; width: fit-content; /* Left padding matches .schoolnotes-app's own padding (1.5rem), so the logo lines up with the rest of the app's content below it. */ padding: 0.75rem 1rem 0.25rem 1.5rem; text-decoration: none; } .schoolnotes-logo-bar img { display: block; width: 80px; height: 80px; } .schoolnotes-logo-bar span { font-family: 'Baloo 2', 'Comic Sans MS', sans-serif; font-weight: 700; font-size: 2.6rem; color: #4A3F35; } /** * Matches the main content area's top padding to its left/right padding. * Olivero gives .main-content__container a different top value (--sp3, * --sp5 on wider screens) than its inline padding (--container-padding, * from the shared .container class) — an asymmetry tuned around the site * header, which this app hides. * * !important for the same reason as the background override above: this * library loads before Olivero's own CSS. */ .main-content__container { padding-block-start: var(--container-padding) !important; } /** * Removes the page title's top margin (Olivero's h1 rule sets margin-block, * i.e. both top and bottom, via --sp/--sp2) — now that it sits right below * the top padding just evened out above, that top margin only added extra, * redundant space. A class selector on h1 already outweighs Olivero's bare * "h1" one, so no !important needed here. */ h1.page-title { margin-block-start: 0; }