/* ===================================================================== BM CONNECT — the tie between brandonmysliwiec.com and the projects that keep their own design. Two pieces, both in normal document flow and both fully namespaced: .bm-crumb a slim breadcrumb placed directly under a project's own header, so a visitor can see where they are and step back up without leaving the project's chrome behind. .bm-eco a strip above the project's own footer listing the rest of the site. Deliberately NOT position:fixed/sticky. Every project here already has a fixed or sticky header of its own; a second pinned bar would have to fight each one's offsets, its mobile drawer and its z-index. Sitting in the flow costs nothing and cannot break a layout. Everything sets its own colour, font and box-sizing so a host page's styles cannot bleed in, and nothing here is more specific than it needs to be. ===================================================================== */ .bm-crumb,.bm-crumb *,.bm-eco,.bm-eco *{box-sizing:border-box} /* ---- Breadcrumb ------------------------------------------------------ */ .bm-crumb{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:.82rem;line-height:1.5; background:#0b0b0e;color:rgba(243,243,245,.6); border-bottom:1px solid rgba(255,255,255,.09); } .bm-crumb-inner{ max-width:1280px;margin-inline:auto;padding:.62rem clamp(16px,4vw,40px); display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; } .bm-crumb ol{display:flex;align-items:center;gap:.42rem;flex-wrap:wrap;list-style:none;margin:0;padding:0} .bm-crumb li{display:flex;align-items:center;gap:.42rem} .bm-crumb li+li::before{content:"\203A";color:rgba(255,255,255,.3);font-size:.95em} .bm-crumb a{color:rgba(243,243,245,.6);text-decoration:none;border-radius:4px;transition:color .18s} .bm-crumb a:hover{color:#ee6c2b;text-decoration:underline;text-underline-offset:3px} .bm-crumb a:focus-visible{outline:2px solid #ee6c2b;outline-offset:2px} .bm-crumb [aria-current="page"]{color:rgba(243,243,245,.92);font-weight:600} .bm-crumb-mark{width:16px;height:16px;flex:none;border-radius:4px;display:block} /* ---- Ecosystem strip -------------------------------------------------- */ .bm-eco{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#0b0b0e;color:rgba(243,243,245,.62); border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); } .bm-eco-inner{ max-width:1280px;margin-inline:auto;padding:clamp(18px,2.6vw,26px) clamp(16px,4vw,40px); display:flex;align-items:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap; } .bm-eco-brand{display:flex;align-items:center;gap:.6rem;color:#f3f3f5;text-decoration:none;flex:none} .bm-eco-brand img{width:30px;height:30px;display:block;filter:drop-shadow(0 0 9px rgba(238,108,43,.5))} .bm-eco-brand span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,245,.45);font-weight:600} .bm-eco-brand strong{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:#f3f3f5} .bm-eco-brand:hover strong{color:#ee6c2b} .bm-eco-nav{display:flex;flex-wrap:wrap;gap:.35rem .4rem;margin-left:auto} .bm-eco-nav a{ color:rgba(243,243,245,.68);text-decoration:none;font-size:.86rem;font-weight:500; padding:.42em .85em;border-radius:9px;border:1px solid transparent;transition:.18s;white-space:nowrap; } .bm-eco-nav a:hover{color:#f3f3f5;background:rgba(238,108,43,.14);border-color:rgba(238,108,43,.3)} .bm-eco-nav a:focus-visible{outline:2px solid #ee6c2b;outline-offset:2px} .bm-eco-nav a.is-primary{color:#ee6c2b;border-color:rgba(238,108,43,.34)} @media (max-width:720px){ .bm-eco-inner{align-items:flex-start;flex-direction:column;gap:1rem} .bm-eco-nav{margin-left:0} } /* ---- Clearance for project headers that are position:fixed ------------ Most of these projects reserve the header's height with padding on , so the breadcrumb — the first element in the flow — lands just below it. Two do not: Beneath the Broken Sky and Veylith: Breachline clear their fixed header with padding on the hero instead, which would leave the breadcrumb underneath it. Both name that header .nav, and Beneath the Broken Sky publishes its height as --nav-h; Veylith's measures 62px, which is the fallback here. */ .nav + .bm-crumb{margin-top:var(--nav-h, 62px)} /* ===================================================================== PROJECT FIXES Small corrections to projects whose own stylesheet is a built artifact with a content-hashed filename. Editing those files directly would not reach anyone: the server marks them immutable for a year, and the hash in the name does not change when the contents do. This file is loaded on the same pages and carries a version query, so a fix put here does arrive. Each one says which project it is for and why. ===================================================================== */ /* VialTome — the install instructions on download.html are shell commands in

, long enough to push the page sideways below about 430px. The
    carries white-space:pre, so wrapping is both impossible and wrong for
   a command you are meant to copy: let the block scroll instead. */
.wrap pre,.wrap-narrow pre,.doc-body pre{max-width:100%;overflow-x:auto}