/* The ONLY hand-written CSS in this build. * * Duda serves two HTML documents here (desktop/tablet share one, mobile has its * own) and each contains just its own header, so neither needs to hide the * other. This build serves ONE document carrying both — the standard bar and * the hamburger bar/drawer/overlay — so exactly one has to be switched off at * each width. That is all these rules do; no layout, spacing, colour or type * value is set here. * * THE BREAKPOINT IS 1025, NOT 768. Eyring's desktop header is .showOnLarge * (>=1025) and the hamburger is .showOnMedium (<=1024) — a tablet at 900px gets * the HAMBURGER, not the standard bar. Duda's own rules already switch * .showOnLarge/.showOnMedium correctly inside the ported bundles, but the * mobile fragments were captured from the MOBILE document, where the hamburger * chrome carries no .showOnMedium class (it does not need one — nothing else is * in that document). So the hamburger side must be switched off explicitly here. * * Loaded last so it wins over the ported bundles. */ /* Desktop only: the hamburger chrome is not part of that document. */ @media (min-width: 1025px) { #hamburger-header-container, #mobile-hamburger-drawer, #layout-drawer-overlay, #layout-drawer-hamburger, #dmBackToTop { display: none !important; } } /* Tablet and mobile (<=1024): the standard header is not part of that document. */ @media (max-width: 1024px) { .dmHeaderContainer { display: none !important; } } /* Duda ships TWO hamburger bars — genuinely different markup, not one bar * restyled. The mobile document's is three columns (small-2 / small-8 / * small-2); the desktop document's, shown at 768-1024 via .showOnMedium, is two * (medium-6 / large-6). Shipping only the mobile one made it wrap at 768 and * render 220px tall against live's 115. Both are emitted; pick one per width. * Above 1024 the block at the top of this file hides both. */ @media (max-width: 767px) { .dm-bar-wide { display: none !important; } } @media (min-width: 768px) { .dm-bar-narrow { display: none !important; } } /* Duda's hamburger bar is position:fixed and it clears it with a top margin on * .site_content. That element carries the union of both documents' * dmtemplateid values here, so the rule would otherwise also fire at desktop, * where the hamburger is hidden and there is nothing to clear. */ @media (min-width: 1025px) { #site_content > .site_content { margin-top: 0; } } /* Duda animates the drawer open by adding a class to . Its runtime is not * shipped, so reproduce the two states it toggles. The drawer slides in from * the RIGHT and pushes the page left 144px on this site * (layout-drawer_push-content + hamburger-reverse). */ body.dmDrawerOpen #mobile-hamburger-drawer, body.dmDrawerOpen #hamburger-drawer { transform: translateX(0) !important; } body.dmDrawerOpen #layout-drawer-overlay { opacity: 1; pointer-events: auto; } #layout-drawer-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Blog listing: the posts behind SHOW MORE ARTICLES. * * Duda renders 9 (visible-items="9") and fetches the remaining 53 from its own * API on click — there is no page-2 URL. This build ships all 62 and hides the * rest, so the button needs no network call, and the initial paint the gate * measures is byte-for-byte the 9 Duda renders. display:none, not visibility: * they must cost no layout at all; see tools/blog-more.mjs. */ [data-dm-hidden-post] { display: none !important; } /* Duda ships TWO hamburger drawers as well as two bars, and the difference is * not cosmetic: the width rule is keyed on the ID, so the mobile drawer * (#mobile-hamburger-drawer, 80vw) matches nothing in the desktop bundle at * 768-1024 and falls through to the runtime default of 75vw — 576px against * live's 345.594px (45vw). Being off-canvas that is invisible, but a drawer * 576px past the right edge lets the gate's scrollIntoView pass scroll the * document sideways, which moves the whole capture. See tools/convert.mjs. */ @media (max-width: 767px) { .dm-drawer-wide { display: none !important; } } @media (min-width: 768px) { .dm-drawer-narrow { display: none !important; } }