/** * @file * Restores the Drupal 7 chrome: pale-blue header/footer/sidebar, underline-free * blue links, and D7's red-on-yellow hover. * * Reference for every colour below is the D7 theme's own stylesheet, * sites/all/themes/omegabridgeart/css/global.css: * #E7EDFF on div.region-menu-inner (header) and div.region-sidebar-first-inner * a:link, a:visited { text-decoration: none } * a:hover, a:active { color: red; text-decoration: underline; * background-color: yellow } * One deliberate divergence: D7's footer was #EEEEEE grey * (div#region-footer-first), not blue. We use #E7EDFF there too, by request. * * A second deliberate divergence: link colour is Bootstrap's #0d6efd * (var(--bs-link-color)), the colour main-content and breadcrumb links already * use here -- not D7's #0062A0 (omega/omega/css/omega-text.css:5-8). * * This file is hand-written and NOT compiled. It must never be folded into * css/style.css, which is generated from scss/style.scss (`sass scss/style.scss * css/style.css`) and would drop these rules on the next compile. Same reason * css/megamenu.css sits outside global-styling -- see the comment in * ba_bootstrap5.libraries.yml. */ /** * --------------------------------------------------------------------------- * 1. Backgrounds. * --------------------------------------------------------------------------- * * The navbar and footer get their colours from theme settings, not from CSS: * page.html.twig builds `navbar-dark text-light bg-dark` and * `footer-dark text-light bg-secondary` out of the b5_navbar_ and b5_footer_ * theme settings (lines 50-57). Those settings only accept Bootstrap's five * named schemas * (SettingsManager.php:80-86) -- there is no way to feed them a hex value -- and * they are DB-only config that a fresh rebuild would not reproduce anyway * (see scripts/ba_enable_bootstrap5.php). So the recolour happens here. * * The utilities involved are all !important: * .bg-dark { background-color: rgba(var(--bs-dark-rgb), …) !important } * .bg-secondary { background-color: rgba(var(--bs-secondary-rgb), …) !important } * .text-light { color: rgba(var(--bs-light-rgb), …) !important } * (css/style.css:8800, 8770, 8500.) Rather than answer !important with * !important, redefine the *variables* those utilities read. Custom properties * resolve against the element the declaration lands on, so setting them on the * navbar/footer itself repaints exactly that element and nothing else. * * Caveat: custom properties inherit. Anything added inside these regions later * that uses .text-secondary / .bg-dark / .border-light etc. would pick up the * retinted value. Nothing in the current markup does. */ header nav.navbar { /* .bg-dark -> #E7EDFF, .text-light -> #212529 (the normal body colour). */ --bs-dark-rgb: 231, 237, 255; --bs-light-rgb: 33, 37, 41; } footer { /* .bg-secondary -> #E7EDFF, .text-light -> #212529. */ --bs-secondary-rgb: 231, 237, 255; --bs-light-rgb: 33, 37, 41; } /** * tb_megamenu paints its own opaque black behind the whole widget * (`.tb-megamenu { background-color: #000 }`, tb_megamenu.default.css:1-3). * On the old dark footer that was merely invisible; on a pale footer it is a * black slab. Let the footer colour through. */ footer .tb-megamenu { background-color: transparent; } /** * The sidebar. D7 coloured the region wrapper and padded it * (div.region-sidebar-first-inner, global.css:42-49); the subtheme already sets * `padding: 0 0.5rem` on .region-sidebar-first (css/style.css:12424), so only * the vertical padding is missing -- without it the blue block clips the first * and last menu items. */ .region-sidebar-first { background-color: #e7edff; padding-bottom: 1rem; padding-top: 1rem; } /** * --------------------------------------------------------------------------- * 2. Navbar text and brand colours. * --------------------------------------------------------------------------- * * .navbar-dark sets a block of --bs-navbar-* variables (css/style.css:4355) * that survive the background change and would leave white-on-pale-blue text. * * --bs-navbar-brand-color is easy to miss: it colours .navbar-brand, and the * site slogan inherits from there. It is NOT covered by the .text-light retint * above, so omitting it renders the slogan white on pale blue -- present but * effectively invisible. * * The menu links need no selector of their own: .navbar-nav maps * --bs-nav-link-color to --bs-navbar-color (css/style.css:3997-4003), so the * variables below flow all the way down to .nav-link. */ header nav.navbar { --bs-navbar-color: var(--bs-link-color); --bs-navbar-hover-color: red; --bs-navbar-active-color: var(--bs-link-color); --bs-navbar-brand-color: #212529; --bs-navbar-brand-hover-color: #212529; } /** * .navbar-dark .navbar-brand a.site-title is (0,3,1) in css/style.css:12397 and * outranks the plain .navbar-brand a.site-title above it, so the site title (if * one is ever shown -- this site uses a logo image today) needs its own rule. */ .navbar-dark .navbar-brand a.site-title, .navbar-dark .navbar-brand a.site-title:hover { color: #212529; } /** * The slogan keeps the brand colour now that it is a link to the front page * (templates/block/block--system-branding-block.html.twig). * * As a
it simply inherited --bs-navbar-brand-color from .navbar-brand * (css/style.css:3984-3989). As an it is matched *directly* by Bootstrap's * Reboot, `a { color: rgba(var(--bs-link-color-rgb), ...) }` * (css/style.css:349-352) -- and a direct match beats an inherited value however * low its specificity, so without this rule the slogan turns blue. Excluding it * from the link colour in section 3 is necessary but not sufficient on its own. * * `inherit` rather than a literal #212529 so this keeps tracking * --bs-navbar-brand-color above and there is one place to change the colour. * * Deliberately (0,2,1): heavy enough to beat Reboot, light enough that the * slogan's own hover rule in section 4, at (0,3,1), still wins over it. The * contrib theme does the same thing for a.site-title (css/style.css:12372). */ .navbar-brand a.site-slogan { color: inherit; } /** * --------------------------------------------------------------------------- * 3. Link colour, and no underlines. * --------------------------------------------------------------------------- * * Bootstrap 5.3 underlines every link by default, so content and breadcrumb * links are underlined today; sidebar menu links are #212529 rather than blue. * Both are brought onto one scheme here. * * No !important anywhere in this section -- section 4 has to be able to put the * underline back on hover. */ a { text-decoration: none; } /** * Deliberate exclusions, each of which carries its own colour for a reason: * .btn -- buttons, coloured by their variant * .page-link -- pager items (navigation/pager.html.twig) * .site-title -- handled in section 2 * .site-slogan -- likewise; it is a front-page link and keeps the brand * colour, not the link colour * .nav-link -- every menu link in the theme, plus the local task tabs in * menu-local-tasks.html.twig. Excluded wholesale here and * then re-added per region below, which is the only way to * leave the tabs alone: they are `.nav-tabs .nav-link` and * otherwise indistinguishable from menu links at this level. * * :not() takes the specificity of its argument, so this selector is (0,5,1) -- * heavier than .nav-link's own (0,1,0). Without the .nav-link exclusion it * would silently repaint the local task tabs as well. * * .skip-link a needs no exclusion: it is visually-hidden until focused * (html.html.twig:51), and blue-on-white when it appears is correct. */ a:not(.btn):not(.page-link):not(.site-title):not(.site-slogan):not(.nav-link) { color: var(--bs-link-color); } /** * Menu links, re-added per region. The navbar is not listed: its menu links are * already covered by --bs-navbar-color in section 2. * * `.active`/`.is-active` are included because Drupal marks the current trail and * Bootstrap darkens it. */ .region-sidebar-first .nav-link, .region-sidebar-first .nav-link.active, .region-sidebar-first .nav-link.is-active { color: var(--bs-link-color); } /** * The footer mega menu. Several upstream rules paint these links: * .tb-megamenu .nav > li > a #fff (default.css:19-27) * .tb-megamenu .dropdown-menu li > a #333 (default.css:265-275) * .tb-megamenu .nav li.dropdown.open > .dropdown-toggle (default.css:129) * .tb-megamenu .nav li.dropdown.active > .dropdown-toggle (default.css:133) * .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle * #fff on #e54e4b (default.css:134, 318-321) * plus footer.footer-dark a { color: #f8f9fa } from css/style.css:12411. * * The active-trail tab is the demanding one, and the `.open` variant is the * trap. `.open` is not in the server-rendered markup -- tb-megamenu-frontend.js * adds it to the top-level
  • on mouseenter and leaves it there. So the * selector that actually paints the tab red changes the moment the pointer has * touched the footer once: * at rest .nav li.dropdown.active > .dropdown-toggle (0,5,1) * after hover .nav li.dropdown.open.active > .dropdown-toggle (0,6,1) * An override written only against the at-rest form measures clean on a fresh * page load and then loses as soon as anyone moves the mouse. Both forms are * matched below, each one class heavier than the module's, via the `footer` * prefix. Verified in the browser with the pointer both outside and inside the * footer. */ footer.footer-dark a, footer .tb-megamenu .nav > li > a, footer .tb-megamenu .nav li.dropdown > .dropdown-toggle, footer .tb-megamenu .nav li.dropdown.open > .dropdown-toggle, footer .tb-megamenu .nav li.dropdown.active > .dropdown-toggle, footer .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle, footer .tb-megamenu .nav-collapse .dropdown-menu li > a { background-color: transparent; color: var(--bs-link-color); /* Not redundant. tb_megamenu predates flat design and paints its active states with Bootstrap-2-era gradients -- `.tb-megamenu .dropdown-menu .active > a` carries `background-image: linear-gradient(#08c, #0077b3)` (tb_megamenu.base.css:249-253). A background *image* paints over the background colour, so clearing the colour alone leaves the current page's item as a solid blue bar with blue text on it: invisible, and it moves from page to page with the active trail. Caught only by eye -- getComputedStyle reports backgroundColor as transparent and looks correct. */ background-image: none; } /** * --------------------------------------------------------------------------- * 4. Hover and focus: D7's red on yellow. * --------------------------------------------------------------------------- * * D7 used `a:hover, a:active`. :focus-visible is added so keyboard users get * the same affordance; :active is dropped as :hover already covers the pointer * case and :active would fire on every click of every link. * * Known trade-off: red on yellow is roughly 3.9:1, under the WCAG AA minimum of * 4.5:1. Kept for parity with the original site. * * This replaces tb_megamenu's own footer hover (white background, #e54e4b text, * default.css:29-37) and Bootstrap's --bs-navbar-hover-color. * * The site slogan gets its own pair of selectors rather than riding on the bare * `a:hover` above, for the same reason the exclusion below exists at all: it * lives inside .navbar-brand. Two things outrank (0,1,1) there and would * otherwise swallow the hover -- the exclusion itself, and the slogan's rest * colour in section 2 at (0,2,1), which would keep the text #212529 on hover * even with the exclusion narrowed. At (0,3,1) these beat both. They add no * declarations of their own; the D7 colours stay defined in this one block. * * The last selector below is the heaviest thing in this file, and has to be: * tb_megamenu hovers the open active tab at * `.tb-megamenu .nav > li.dropdown.open.active > a:hover` (0,6,1), * default.css:320. See the note in section 3 about `.open` being added by * tb-megamenu-frontend.js rather than rendered server-side. */ a:hover, a:focus-visible, .navbar-brand a.site-slogan:hover, .navbar-brand a.site-slogan:focus-visible, header nav.navbar .nav-link:hover, header nav.navbar .nav-link:focus-visible, .region-sidebar-first .nav-link:hover, .region-sidebar-first .nav-link:focus-visible, footer.footer-dark a:hover, footer.footer-dark a:focus-visible, footer .tb-megamenu .nav > li > a:hover, footer .tb-megamenu .nav > li > a:focus, footer .tb-megamenu .nav li.dropdown > .dropdown-toggle:hover, footer .tb-megamenu .nav li.dropdown > .dropdown-toggle:focus, footer .tb-megamenu .nav li.dropdown.active > .dropdown-toggle:hover, footer .tb-megamenu .nav li.dropdown.active > .dropdown-toggle:focus, footer .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle:hover, footer .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle:focus, footer .tb-megamenu .nav > li.dropdown.open.active > a:hover, footer .tb-megamenu .nav > li.dropdown.open.active > a:focus, footer .tb-megamenu .nav-collapse .dropdown-menu li > a:hover, footer .tb-megamenu .nav-collapse .dropdown-menu li > a:focus { background-color: yellow; /* See the note in section 3: the module's gradients would otherwise paint over the yellow on the active-trail item. */ background-image: none; color: red; text-decoration: underline; } /** * ...but not the branding links -- the logo and, if it is ever switched on, the * site title. The slogan is excluded from the exclusion: it is ordinary text and * takes the full scheme, per the selectors added above. * * Red text, an underline and a yellow background are a *text*-link affordance. * The logo is an image link with no text, so the only part of the scheme that * can render on it is the background -- and the logo's is 16px wider than * the image it wraps, because `.navbar-brand img` carries `margin: 0 1rem 0 0` * (css/style.css:12379) *inside* the link and the link shrink-wraps to * image + margin as a flex item. The result was a 16px yellow rectangle beside * the logo on hover, full logo height. * * D7 had the same blanket `a:hover` rule; its logo link hugged the image * exactly, so nothing showed. The strip is ours, from that margin. (It is not * a side effect of stacking the slogan in section 11 -- measured with * flex-direction forced back to row, the overhang is 16px either way. Stacking * only isolated it; before, it sat in the gap between logo and slogan.) * * Scoped to `.navbar-brand a` rather than `.site-logo` so it also covers * `a.site-title` if the site name is ever switched on, matching section 3, * which already excludes `.site-title` from the link colour. * * (0,3,1) beats the `a:hover` above at (0,1,1) -- no !important needed. The * :not() is what keeps the slogan out; it also lifts this from (0,2,1) to * (0,3,1), which is why the slogan's own hover selectors are written at (0,3,1) * too rather than (0,2,1). They never collide -- this rule cannot match the * slogan at all -- so the tie is harmless. */ .navbar-brand a:not(.site-slogan):hover, .navbar-brand a:not(.site-slogan):focus-visible { background-color: transparent; color: inherit; text-decoration: none; } /** * --------------------------------------------------------------------------- * 5. Remove tb_megamenu's rule lines from the footer. * --------------------------------------------------------------------------- * * The horizontal lines between the secondary links are a per-link top border * (tb_megamenu.default.css:94-100), suppressed on :first-child -- which is why * the first item in each column has none. The vertical hairline between the * three columns is a right border on the top-level links (default.css:19-27). * * .row-fluid + .row-fluid is dormant today (each mega menu panel renders a * single row) but is defined twice upstream -- tb_megamenu.base.css:26-29 and * default.css:141-143 -- and would draw a line the moment a second row is * configured in the mega menu builder. Zeroed here so it cannot come back. */ footer .tb-megamenu .dropdown-menu li > a, footer .tb-megamenu .nav > li > a, footer .tb-megamenu .row-fluid + .row-fluid { border: 0; } /** * --------------------------------------------------------------------------- * 6. Footer sitemap layout. * --------------------------------------------------------------------------- * * The three top-level items are the "columns". Their
      is already a flexbox, * so centring and spacing are one rule each; there is no existing gap to * increase (every level-0
    • computes margin-left: 0, and the apparent * spacing is just .mega-inner's 10px padding plus the links' own padding). * * `.tb-megamenu .nav > li { float: left }` (default.css:15-18) is inert inside a * flex container and needs no unsetting. * * Scoped to the same breakpoint css/megamenu.css uses. Below 980px tb_megamenu * switches to its collapsed single-column layout, where a 6em gap would simply * push the menu off the screen -- and where it also runs a different * indentation scheme that the alignment rules further down must not disturb: * `.mega-inner { padding: 10px 20px }` (default.css:1628-1631) and * `margin-left: 20px` on the submenu links (default.css:1660-1666). */ @media (min-width: 980px) { footer .tb-megamenu .nav-collapse ul.tb-megamenu-nav.level-0 { gap: 6em; justify-content: center; } /** * Align each column's heading with the items under it. * * Out of the box the two levels are indented differently, so the headings sit * 10px right of their own items: * heading .tb-megamenu .nav > li > a { padding: 15px 20px } * (default.css:19-27) -- text 20px in from the column's left edge * items .tb-megamenu .span12.mega-col-nav .mega-inner { padding: 10px } * (base.css:92-94) shifts the whole list 10px right, and the links * themselves are `padding: 5px 0` (default.css:144-149), so their * text starts at the box edge -- 10px in. * * Rather than split the difference, both levels are given the same box origin * and the same 20px text indent: zero the list's left padding, then hand the * links the heading's own 20px. Aligning this way rather than pulling the * heading left to 10px also lines up the yellow hover boxes, which start at * the box edge rather than at the text. * * Only padding-left is touched -- .mega-inner keeps its 10px top/right/bottom, * so the panel keeps its breathing room and the gap between a heading and its * first item is unchanged. * * `.span12.mega-col-nav` is not decoration: those are two classes in one * compound, making base.css:92 a (0,4,0) selector that outranks the plainer * `.tb-megamenu .mega-inner` (0,2,0) at default.css:138. An override written * against the short form is (0,3,1) and silently loses -- measured. */ footer .tb-megamenu .span12.mega-col-nav .mega-inner { padding-left: 0; } footer .tb-megamenu .dropdown-menu .mega-nav > li a { padding-left: 20px; } } /** * --------------------------------------------------------------------------- * 7. Collapsed (hamburger) state of the header and footer menus. * --------------------------------------------------------------------------- * * Both togglers ship white, sized for the dark chrome this theme used to have. * On #E7EDFF they are invisible. Both are repainted black below. * * Neither toggler is reachable at desktop widths -- the navbar one appears * below 992px (navbar-expand-lg) and the mega menu one below 980px * (tb_megamenu.default.css:1443) -- so none of these rules needs a media query * of its own except where noted. */ /** * Header toggler. .navbar-dark supplies both the icon and the border as custom * properties (css/style.css:4355-4364): the icon is an inline SVG whose stroke * is rgba(255,255,255,.55), the border rgba(255,255,255,.1). Overriding the * variables rather than .navbar-toggler-icon keeps this consistent with the * navbar recolour in section 2, and is the only way to change the stroke -- * it is baked into the data URI, not a CSS colour. */ header nav.navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-border-color: rgba(0, 0, 0, .15); } /** * Footer toggler. The glyph is a Font Awesome 4 font character * (``, templates/tb-megamenu.html.twig:11), so plain * `color` drives it -- no SVG involved. #fff comes from * tb_megamenu.default.css:54-66. * * background-image is not redundant: `.tb-megamenu .btn` carries a * Bootstrap-2-era `linear-gradient(#fff, #e6e6e6)` * (tb_megamenu.bootstrap.css:441-445) that survives a background-*colour* * reset and would leave a grey pill behind the glyph. Same trap as the * active-trail gradient in section 3. * * The two shadows are sized for a white glyph on a grey button: an inset white * highlight and a light text glow. Both read as dirt behind a black glyph. */ footer .tb-megamenu .btn-navbar { background-color: transparent; background-image: none; border: 1px solid rgba(0, 0, 0, .15); box-shadow: none; color: #000; text-shadow: none; } /** * Make the footer hamburger actually open the menu. * * tb_megamenu is a Bootstrap 2/3 module. Below 980px its menuResponsive() * (js/tb-megamenu-frontend.js:15-33) puts a `collapse` class on .nav-collapse, * and its button handler (:420-429) opens and closes the panel by setting * inline height/overflow on that same element. In Bootstrap 2/3 `.collapse` * meant `height: 0; overflow: hidden`, so driving height was enough. * * Bootstrap 5 redefined it: `.collapse:not(.show) { display: none }` * (css/style.css:3292-3294). The module never adds `.show`, so the panel is * display:none and the height toggle is invisible -- the handler fires, the * inline style changes, and nothing appears on screen. That is the whole bug. * * Restoring `display: block` hands control back to the module's inline * height/overflow, which then works: 0px -> click -> 339px -> click -> 0px. * * No media query on purpose: the rule is self-limiting, because the `collapse` * class only exists below 980px -- menuResponsive() strips it above. * * Bootstrap 5 also ignores the button's `data-toggle`/`data-target` attributes * (the Bootstrap 3 spelling, templates/tb-megamenu.html.twig:10). That is * harmless and left alone: the module's own jQuery handler is what drives the * button, so there is nothing for Bootstrap's collapse plugin to do. */ footer .tb-megamenu .nav-collapse.collapse { display: block; } /** * --------------------------------------------------------------------------- * 8. Render the collapsed footer menu as a plain stacked menu. * --------------------------------------------------------------------------- * * Left alone, the open hamburger panel is the desktop mega menu squeezed into a * narrow column: top-level items side by side, each submenu a black panel * overlapping its neighbour, a rule under every item, and the carets still * showing. Every cause is a tb_megamenu rule that exists ONLY below one of its * own breakpoints, which is why none of the overrides above reach it -- they * are either unscoped or @media (min-width: 980px). * * Section 6 and css/megamenu.css give the >=980px state much the same * treatment. The half-dozen declarations that coincide are intentional twins, * not copy-paste: megamenu.css exists to force submenus *open* on desktop, * which below 980px the module's own `.always-show` already does * (default.css:1405-1408). What is needed here is the cosmetic flattening plus * layout, which is a different job -- so the two live apart rather than one * file owning both behaviours. * * A note for whoever debugs this next: sampling the first submenu link to check * the borders is misleading. The module zeroes `:first-child`, so item 1 always * measures clean and the rules only appear on items 2..n. */ @media (max-width: 979px) { /** * Stack the top-level items. * * Bootstrap's `.nav { display: flex }` applies at every width, and section 6 * only sets flex-direction/gap from 980px up -- so below that this is a * default flex *row* and the three columns sit side by side in a 500px * viewport. */ footer .tb-megamenu .nav-collapse ul.tb-megamenu-nav.level-0 { flex-direction: column; } /** * Put the panel back in normal flow. * * tb_megamenu positions it `absolute; top: 27px` (default.css:1450-1455) so * that on a mobile *header* the menu overlays the page. In a footer there is * nothing to overlay, and being out of flow means the footer never grows to * contain it: measured at 500px, the footer stayed 114px tall while the open * menu was 647px, so the menu ran 602px past the footer's bottom edge and the * pale-blue background stopped mid-menu. Static instead, and the footer grows * and shrinks with the toggle (114px <-> 761px). * * `background: none` rather than a hard-coded colour: once the panel is in * flow the footer's own background shows through, so this tracks any future * change to the footer colour instead of having to be kept in sync with it. */ footer .tb-megamenu .nav-collapse { background: none; margin-top: 0; position: static; } /** * Flatten the submenu panels. The black is * `.tb-megamenu .nav-collapse .dropdown-menu { background-color: #000 }` * (default.css, this breakpoint); the rest is floating-panel chrome that * makes no sense once the panel sits inline in the footer. */ footer .tb-megamenu .nav-collapse .mega > .mega-dropdown-menu, footer .tb-megamenu .nav-collapse .dropdown-menu { background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; margin: 0; min-width: 0; padding: 0; width: auto; } /** * Remove the rule under every item. Two separate mobile-only rules draw it: * .tb-megamenu .nav-collapse .nav li a { border-top: 1px solid #d9d9d9 } * -- tb_megamenu.base.css, @media (max-width: 738px), which is why the * lines only show up on quite narrow screens * .tb-megamenu .nav-collapse .dropdown-menu a { border-top/bottom: #222 } * -- tb_megamenu.default.css, this breakpoint * * The first is (0,3,2) and OUTRANKS section 5's * `footer .tb-megamenu .dropdown-menu li > a` at (0,2,3) -- more classes * beats more elements. Hence the separate, heavier selectors here. */ footer .tb-megamenu .nav-collapse .nav li a, footer .tb-megamenu .nav-collapse .nav > li > a, footer .tb-megamenu .nav-collapse .dropdown-menu a { border: 0; } /** * Hide the disclosure carets -- nothing discloses, every submenu is already * expanded. Both implementations are present and hiding one leaves the other: * the module's `.caret` and Bootstrap's `.dropdown-toggle::after` * triangle. Same pairing as css/megamenu.css:57-81. */ footer .tb-megamenu .nav-collapse .caret, footer .tb-megamenu .nav-collapse .nav > .dropdown > .dropdown-toggle .caret, footer .tb-megamenu .nav-collapse .dropdown-toggle::after { display: none; } } /** * --------------------------------------------------------------------------- * 9. Breadcrumb gutter. * --------------------------------------------------------------------------- * * templates/layout/page.html.twig moves the breadcrumb out of the full-width * slot above `.row` and into the Main content column, so that it sits above the * content only and the sidebars start level with it. * * Once it shares that column it also has to share the column's gutter. The * theme pads .region-content, .region-sidebar-first, .region-sidebar-second and * .region-footer with `0 0.5rem` (css/style.css:12424) but leaves * .region-breadcrumb at 0 -- which was invisible while the breadcrumb sat in * the container by itself, and is an 8px misalignment now that the page title * is directly underneath it. */ .region-breadcrumb { padding: 0 0.5rem; } /** * --------------------------------------------------------------------------- * 10. Separate the content row from the header and footer. * --------------------------------------------------------------------------- * * The navbar and the sidebar_first region are both #E7EDFF and they meet with * no seam -- navbar bottom and sidebar top were both y=86 -- so the sidebar * read as a continuation of the header rather than as its own block. Same at * the other end: main's bottom edge and the footer's top edge coincide. * * The gap goes on the whole row rather than on the sidebar, so the sidebar, * breadcrumb and content all move together. Putting it on .region-sidebar-first * instead would drop the sidebar 5px below the breadcrumb and undo the * alignment that templates/layout/page.html.twig exists to create. * * Not on the blocks, either: the blue is painted on the region and the blocks * inside are transparent, so a block margin would only inset the block within a * box that still touches the navbar. (Only one of the three sidebar blocks ever * renders at a time anyway -- they carry mutually exclusive request_path * visibility conditions -- so there is no block-to-block spacing to solve.) * * This is how D7 did it too, on the whole content section rather than the * sidebar: `section#section-content { margin-top: 10px; margin-bottom: 10px }` * (omegabridgeart/css/global.css:27-30) -- the same 10px used here. * * The child combinator matters. A plain `main .row` would also catch any * Bootstrap grid row inside node or view output. Nothing does today -- the only * other row-ish elements are the footer mega menu's `.tb-megamenu-row.row-fluid` * -- but this form cannot be caught out by content markup added later. It also * survives b5_top_container being switched to `container-fluid m-0 p-0`, since * that utility lands on the container, not on the row. * * No conflict with Bootstrap's own gutter margins: the row is `.row.g-0`, whose * computed margin is already 0. */ main > div > .row { margin-bottom: 10px; margin-top: 10px; } /** * --------------------------------------------------------------------------- * 11. Stack the site slogan below the logo. * --------------------------------------------------------------------------- * * D7 put the slogan under the logo -- its header block was the logo , a *
      , then `