/* Mdbook brand integration for */ /* ================================================================ Override mdbook theme CSS variables with brand colors. Uses !important to beat the built-in theme-specific selectors (html.ayu, html.light, html.navy, html.coal, html.rust). ================================================================ */ html { --bg: #f5e6d3 !important; --fg: #2d1810 !important; --sidebar-bg: #4a2c2a !important; --sidebar-fg: #f5e6d3 !important; --sidebar-non-existant: #8b6f6a !important; --sidebar-active: #d4a574 !important; --sidebar-spacer: #6b4438 !important; --scrollbar: #6b4438 !important; --icons: #f5e6d3 !important; --icons-hover: #d4a574 !important; --links: #6b4438 !important; --inline-code-color: #2d1810 !important; --theme-popup-bg: #e8dcc8 !important; --theme-popup-border: #4a2c2a !important; --theme-hover: #d4a574 !important; --quote-bg: #e8dcc8 !important; --quote-border: #d4a574 !important; --table-border-color: #4a2c2a !important; --table-header-bg: #4a2c2a !important; --table-alternate-bg: #e8dcc8 !important; --searchbar-border-color: #d4a574 !important; --searchbar-bg: #f5e6d3 !important; --searchbar-fg: #2d1810 !important; --searchbar-shadow-color: #d4a574 !important; --searchresults-header-fg: #6b4438 !important; --searchresults-border-color: #d4a574 !important; --searchresults-li-bg: #e8dcc8 !important; --search-mark-bg: #d4a574 !important; --warning-border: #d4a574 !important; } /* ================================================================ Header — logo-container + navigation from brand.css. Mdbook inserts our header.html right after , so reset the margin that the theme applies to the first child. ================================================================ */ .logo-container { margin-bottom: 0; } /* Navigation styles are now handled in the menu-bar section below. */ /* ================================================================ Content area ================================================================ */ /* The page content wrapper — remove extra top padding since the header already provides it */ .page-wrapper { padding-top: 0; } /* Override mdbook content padding to match brand spacing */ .content { padding: 1.5em 2em; } .content main { margin: 0 auto; } /* Headings in content use mdbook's native styles but inherit the brand's font family and color via the CSS cascade. brand.css already styles h1/h2/h3 with Plus Jakarta Sans. */ /* Make sure inline code and code blocks use Fira Code */ code, pre, .program { font-family: 'Fira Code', monospace !important; } /* ================================================================ Tables — match brand.css table styles ================================================================ */ table { border-collapse: collapse; width: 100%; } table th { background-color: #4a2c2a; color: #f5e6d3; } table tbody tr:nth-child(odd) { background-color: #e8dcc8; } table tbody tr:nth-child(even) { background-color: #f5e6d3; } table th, table td { border: 1px solid #4a2c2a; padding: 8px; } /* ================================================================ Links — use brand colors ================================================================ */ .content a { color: #6b4438; } .content a:visited { color: #4a2c2a; } .content a:hover { color: #2d1810; } /* ================================================================ Sidebar layout — fixed left panel ================================================================ */ /* Hidden checkbox for toggling sidebar */ #sidebar-toggle-anchor { display: none; } /* Sidebar element */ #sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 300px; background-color: #4a2c2a; color: #f5e6d3; overflow-y: auto; z-index: 10; transition: transform 0.3s ease; border-right: 2px solid #2d1810; } /* Sidebar hidden — slide off-screen */ .sidebar-hidden #sidebar { transform: translateX(-300px); } .sidebar-hidden #sidebar .sidebar-resize-handle { display: none; } /* Sidebar visible */ .sidebar-visible #sidebar { transform: translateX(0); } /* Page wrapper adjusts to sidebar visibility */ .sidebar-visible .page-wrapper { margin-left: 300px; } .sidebar-hidden .page-wrapper { margin-left: 0; } /* Sidebar resize handle */ #sidebar-resize-handle { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; cursor: col-resize; z-index: 10; } #sidebar-resize-handle .sidebar-resize-indicator { width: 2px; height: 100%; background-color: #6b4438; margin: 0 auto; } /* Sidebar content */ .sidebar-scrollbox { padding: 0.5em 0; } /* Chapter items */ #sidebar .chapter-item { list-style: none; } #sidebar .chapter-item a, #sidebar .chapter-item button { color: #f5e6d3; display: block; padding: 0.5em 1em; text-decoration: none; font-family: Verdana, sans-serif; font-size: 15px; } #sidebar .chapter-item a:hover { color: #d4a574; background-color: #6b4438; } /* Active chapter */ #sidebar .chapter-item a.active { color: #d4a574; font-weight: 600; } /* Section headers in sidebar */ #sidebar .sidebar-scrollbox .section-header { color: #d4a574; font-weight: 600; padding: 0.5em 1em; } /* Spacer between sections */ .sidebar-scrollbox .section-spacer { background-color: #6b4438; height: 1px; margin: 0.5em 1em; } /* Ordered list inside sidebar — mdBook wraps chapters in

*/ #sidebar ol { list-style: none; margin: 0; padding: 0; } /* ================================================================ Menu bar (top toolbar with org navigation links) ================================================================ */ .menu-bar { background-color: #4a2c2a; color: #f5e6d3; border-bottom: 2px solid #2d1810; display: flex; align-items: center; padding: 0; position: relative; z-index: 10; border-radius: 8px; margin: 8px; overflow: hidden; justify-content: space-between; } .menu-left { display: flex; align-items: center; gap: 2px; min-width: 72px; } .menu-center { display: flex; align-items: center; justify-content: center; flex: 1; } .menu-right { display: flex; align-items: center; min-width: 72px; } .menu-bar a { color: #f5e6d3; text-decoration: none; padding: 0.7ex 1.4ex; text-align: center; display: block; font-family: Verdana, sans-serif; font-size: 16px; } .menu-bar a:hover { color: #d4a574; background-color: #6b4438; } /* Icon buttons (hamburger, search toggle) */ .icon-button { background: none; border: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; justify-content: center; color: #f5e6d3; line-height: 1; } .icon-button:hover { color: #d4a574; background-color: #6b4438; } /* Hamburger icon */ .hamburger-icon { display: flex; flex-direction: column; gap: 3px; width: 18px; } .hamburger-icon span { display: block; height: 2px; background-color: currentColor; border-radius: 1px; } /* Search icon */ .search-icon { font-size: 16px; line-height: 1; } /* ================================================================ Search bar ================================================================ */ #search-wrapper { position: relative; z-index: 20; margin: 8px; margin-top: 0; } #search-wrapper.hidden { display: none; } .searchbar-outer { display: flex; } #searchbar { width: 100%; padding: 10px 14px; font-size: 16px; border: 2px solid #d4a574; border-radius: 8px; background-color: #f5e6d3; color: #2d1810; font-family: Verdana, sans-serif; outline: none; } #searchbar:focus { border-color: #6b4438; box-shadow: 0 0 0 2px rgba(107, 68, 56, 0.2); } .searchresults-outer { position: absolute; top: 100%; left: 0; right: 0; background-color: #e8dcc8; border: 2px solid #d4a574; border-top: none; border-radius: 0 0 8px 8px; max-height: 400px; overflow-y: auto; z-index: 100; } .searchresults-outer.hidden { display: none; } .searchresults-header { padding: 8px 14px; font-size: 14px; color: #6b4438; border-bottom: 1px solid #d4a574; } #searchresults { list-style: none; margin: 0; padding: 0; } #searchresults li { padding: 8px 14px; border-bottom: 1px solid #d4a574; } #searchresults li:last-child { border-bottom: none; } #searchresults li a { color: #6b4438; text-decoration: none; font-weight: 600; } #searchresults li a:hover { color: #2d1810; } #searchresults li .searchresult { font-size: 14px; color: #2d1810; margin-top: 4px; } #searchresults li .searchresult mark { background-color: #d4a574; padding: 1px 3px; border-radius: 2px; color: #2d1810; } /* ================================================================ Footer ================================================================ */ .coffee-footer { clear: both; margin-top: 2em; padding-top: 1em; text-align: center; } .coffee-footer p { margin: 0.5em 0; } #help { font-size: 16px; color: #6b4438; } #about { font-size: 14px; color: #6b4438; } .xhr { border: none; border-top: 2px solid #4a2c2a; margin: 1em auto; max-width: 80%; } /* ================================================================ Logo in header — smaller for docs context (brand.css sets 120x120) ================================================================ */ .logo-container .logo img { width: 80px; height: 80px; } /* ================================================================ Code blocks ================================================================ */ pre { background-color: #2d1810; color: #f5e6d3; border-radius: 6px; padding: 1em; overflow-x: auto; } pre code { background: none; color: inherit; padding: 0; } /* ================================================================ Utility classes ================================================================ */ .hidden { display: none !important; } /* ================================================================ Responsive adjustments ================================================================ */ @media screen and (max-width: 600px) { .logo-container { flex-direction: column; text-align: center; } .logo-container .logo img { width: 60px; height: 60px; } .tagline { text-align: center; margin-top: 5px; } .tagline h1 { font-size: 24px; } .tagline p { font-size: 14px; } .menu-bar { flex-direction: column; align-items: stretch; border-radius: 0; margin: 0; } .menu-left { justify-content: flex-start; padding: 4px 0; border-bottom: 1px solid #2d1810; } .menu-center { flex-direction: column; } .menu-center a { text-align: left; padding: 0.7ex 1.4ex; } .menu-right { display: none; } }