jekyll-theme-zer0 1.19.1 → 1.20.2

data/_sass/core/_docs-layout.scss

@@ -759,456 +759,3 @@ a.bd-intro-badge--tag:focus {
     text-decoration: underline
 }
 
-.bd-code-snippet {
-    margin: 0 -1.5rem 1rem;
-    border: solid var(--bs-border-color);
-    border-width: 1px 0
-}
-
-@media (min-width: 768px) {
-    .bd-code-snippet {
-        margin-right:0;
-        margin-left: 0;
-        border-width: 1px;
-        border-radius: var(--bs-border-radius)
-    }
-}
-
-.bd-example {
-    --bd-example-padding: 1rem;
-    position: relative;
-    padding: var(--bd-example-padding);
-    margin: 0 -1.5rem 1rem;
-    border: solid var(--bs-border-color);
-    border-width: 1px 0
-}
-
-.bd-example::after {
-    display: block;
-    clear: both;
-    content: null
-}
-
-@media (min-width: 768px) {
-    .bd-example {
-        --bd-example-padding: 1.5rem;
-        margin-right: 0;
-        margin-left: 0;
-        border-width: 1px;
-        border-radius: var(--bs-border-radius)
-    }
-}
-
-.bd-example+p {
-    margin-top: 2rem
-}
-
-.bd-example>.form-control+.form-control {
-    margin-top: .5rem
-}
-
-.bd-example>.nav+.nav,.bd-example>.alert+.alert,.bd-example>.navbar+.navbar,.bd-example>.progress+.progress {
-    margin-top: 1rem
-}
-
-.bd-example>.dropdown-menu {
-    position: static;
-    display: block
-}
-
-.bd-example>:last-child,.bd-example>nav:last-child .breadcrumb {
-    margin-bottom: 0
-}
-
-.bd-example>hr:last-child {
-    margin-bottom: 1rem
-}
-
-.bd-example>svg+svg,.bd-example>img+img {
-    margin-left: .5rem
-}
-
-.bd-example>.btn,.bd-example>.btn-group {
-    margin: .25rem .125rem
-}
-
-.bd-example>.btn-toolbar+.btn-toolbar {
-    margin-top: .5rem
-}
-
-.bd-example>.list-group {
-    max-width: 400px
-}
-
-.bd-example>[class*="list-group-horizontal"] {
-    max-width: 100%
-}
-
-.bd-example .fixed-top,.bd-example .sticky-top {
-    position: static;
-    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding)
-}
-
-.bd-example .fixed-bottom,.bd-example .sticky-bottom {
-    position: static;
-    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1)
-}
-
-.bd-example .pagination {
-    margin-bottom: 0
-}
-
-.bd-example-row [class^="col"],.bd-example-cols [class^="col"]>*,.bd-example-cssgrid [class*="grid"]>* {
-    padding-top: .75rem;
-    padding-bottom: .75rem;
-    background-color: rgba(var(--bd-violet-rgb), 0.15);
-    border: 1px solid rgba(var(--bd-violet-rgb), 0.3)
-}
-
-.bd-example-row .row+.row,.bd-example-cssgrid .grid+.grid {
-    margin-top: 1rem
-}
-
-.bd-example-row-flex-cols .row {
-    min-height: 10rem;
-    background-color: rgba(var(--bd-violet-rgb), 0.15)
-}
-
-.bd-example-flex div:not(.vr) {
-    background-color: rgba(var(--bd-violet-rgb), 0.15);
-    border: 1px solid rgba(var(--bd-violet-rgb), 0.3)
-}
-
-.example-container {
-    width: 800px;
-    --bs-gutter-x: 1.5rem;
-    --bs-gutter-y: 0;
-    width: 100%;
-    padding-right: calc(var(--bs-gutter-x) * .5);
-    padding-left: calc(var(--bs-gutter-x) * .5);
-    margin-right: auto;
-    margin-left: auto
-}
-
-.example-row {
-    --bs-gutter-x: 1.5rem;
-    --bs-gutter-y: 0;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(-1 * var(--bs-gutter-y));
-    margin-right: calc(-.5 * var(--bs-gutter-x));
-    margin-left: calc(-.5 * var(--bs-gutter-x))
-}
-
-.example-content-main {
-    flex-shrink: 0;
-    width: 100%;
-    max-width: 100%;
-    padding-right: calc(var(--bs-gutter-x) * .5);
-    padding-left: calc(var(--bs-gutter-x) * .5);
-    margin-top: var(--bs-gutter-y)
-}
-
-@media (min-width: 576px) {
-    .example-content-main {
-        flex:0 0 auto;
-        width: 50%
-    }
-}
-
-@media (min-width: 992px) {
-    .example-content-main {
-        flex:0 0 auto;
-        width: 66.666667%
-    }
-}
-
-.example-content-secondary {
-    flex-shrink: 0;
-    width: 100%;
-    max-width: 100%;
-    padding-right: calc(var(--bs-gutter-x) * .5);
-    padding-left: calc(var(--bs-gutter-x) * .5);
-    margin-top: var(--bs-gutter-y)
-}
-
-@media (min-width: 576px) {
-    .example-content-secondary {
-        flex:0 0 auto;
-        width: 50%
-    }
-}
-
-@media (min-width: 992px) {
-    .example-content-secondary {
-        flex:0 0 auto;
-        width: 33.333333%
-    }
-}
-
-.bd-example-ratios .ratio {
-    display: inline-block;
-    width: 10rem;
-    color: var(--bs-secondary-color);
-    background-color: var(--bs-tertiary-bg);
-    border: var(--bs-border-width) solid var(--bs-border-color)
-}
-
-.bd-example-ratios .ratio>div {
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-.bd-example-ratios-breakpoint .ratio-4x3 {
-    width: 16rem
-}
-
-@media (min-width: 768px) {
-    .bd-example-ratios-breakpoint .ratio-4x3 {
-        --bs-aspect-ratio: 50%
-    }
-}
-
-.bd-example-offcanvas .offcanvas {
-    position: static;
-    display: block;
-    height: 200px;
-    visibility: visible;
-    transform: translate(0)
-}
-
-.tooltip-demo a {
-    white-space: nowrap
-}
-
-.tooltip-demo .btn {
-    margin: .25rem .125rem
-}
-
-.custom-tooltip {
-    --bs-tooltip-bg: var(--bd-violet-bg);
-    --bs-tooltip-color: var(--bs-white)
-}
-
-.custom-popover {
-    --bs-popover-max-width: 200px;
-    --bs-popover-border-color: var(--bd-violet-bg);
-    --bs-popover-header-bg: var(--bd-violet-bg);
-    --bs-popover-header-color: var(--bs-white);
-    --bs-popover-body-padding-x: 1rem;
-    --bs-popover-body-padding-y: .5rem
-}
-
-.scrollspy-example {
-    height: 200px;
-    margin-top: .5rem;
-    overflow: auto
-}
-
-.scrollspy-example-2 {
-    height: 350px;
-    overflow: auto
-}
-
-.simple-list-example-scrollspy .active {
-    background-color: rgba(var(--bd-violet-rgb), 0.15)
-}
-
-.bd-example-border-utils [class^="border"] {
-    display: inline-block;
-    width: 5rem;
-    height: 5rem;
-    margin: .25rem;
-    background-color: var(--bs-tertiary-bg)
-}
-
-.bd-example-rounded-utils [class*="rounded"] {
-    margin: .25rem
-}
-
-.bd-example-position-utils {
-    position: relative;
-    padding: 2rem
-}
-
-.bd-example-position-utils .position-relative {
-    height: 200px;
-    background-color: var(--bs-tertiary-bg)
-}
-
-.bd-example-position-utils .position-absolute {
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--bs-body-color);
-    border-radius: .375rem
-}
-
-.bd-example-position-examples::after {
-    content: none
-}
-
-.bd-example-placeholder-cards::after {
-    display: none
-}
-
-.bd-example-placeholder-cards .card {
-    width: 18rem
-}
-
-.bd-example-toasts {
-    min-height: 240px
-}
-
-.bd-example-zindex-levels {
-    min-height: 15rem
-}
-
-.bd-example-zindex-levels>div {
-    color: var(--bs-body-bg);
-    background-color: var(--bd-violet);
-    border: 1px solid var(--bd-purple)
-}
-
-.bd-example-zindex-levels>div>span {
-    position: absolute;
-    right: 5px;
-    bottom: 0
-}
-
-.bd-example-zindex-levels>:nth-child(2) {
-    top: 3rem;
-    left: 3rem
-}
-
-.bd-example-zindex-levels>:nth-child(3) {
-    top: 4.5rem;
-    left: 4.5rem
-}
-
-.bd-example-zindex-levels>:nth-child(4) {
-    top: 6rem;
-    left: 6rem
-}
-
-.bd-example-zindex-levels>:nth-child(5) {
-    top: 7.5rem;
-    left: 7.5rem
-}
-
-// Wrapper only — pre.highlight carries its own padding when no wrapper exists.
-// Rouge blocks (.highlighter-rouge) are styled in core/code-copy.scss.
-.highlight:not(pre):not(.highlighter-rouge > .highlight) {
-    position: relative;
-    padding: var(--zer0-space-2) var(--zer0-space-3);
-    background-color: var(--bd-pre-bg)
-}
-
-@media (min-width: 768px) {
-    .highlight:not(pre):not(.highlighter-rouge > .highlight) {
-        border-radius: calc(var(--bs-border-radius) - 1px)
-    }
-}
-
-.highlight pre {
-    padding: 0;
-    margin: 0;
-    overflow-x: auto;
-    white-space: pre;
-    background-color: transparent;
-    border: 0
-}
-
-.highlight pre code {
-    font-size: inherit;
-    // color: var(--bs-body-color);
-    word-wrap: normal
-}
-
-.bd-example-snippet .highlight pre {
-    margin-right: 0
-}
-
-.highlight-toolbar {
-    background-color: var(--bd-pre-bg)
-}
-
-.highlight-toolbar+.highlight {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0
-}
-
-@media (min-width: 768px) {
-    .bd-file-ref .highlight-toolbar {
-        border-top-left-radius:calc(var(--bs-border-radius) - 1px);
-        border-top-right-radius: calc(var(--bs-border-radius) - 1px)
-    }
-}
-
-.bd-content .bd-code-snippet {
-    margin-bottom: 1rem
-}
-
-.bd-clipboard,.bd-edit {
-    position: relative;
-    display: none;
-    float: right
-}
-
-.bd-clipboard+.highlight,.bd-edit+.highlight {
-    margin-top: 0
-}
-
-@media (min-width: 768px) {
-    .bd-clipboard,.bd-edit {
-        display:block
-    }
-}
-
-.btn-clipboard,.btn-edit {
-    display: block;
-    padding: .5em;
-    line-height: 1;
-    color: var(--bs-body-color);
-    background-color: var(--bd-pre-bg);
-    border: 0;
-    border-radius: .25rem
-}
-
-.btn-clipboard:hover,.btn-edit:hover {
-    color: var(--bs-link-hover-color)
-}
-
-.btn-clipboard:focus,.btn-edit:focus {
-    z-index: 3
-}
-
-.btn-clipboard {
-    position: relative;
-    z-index: 2;
-    margin-top: 1.25rem;
-    margin-right: .75rem
-}
-
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    text-anchor: middle
-}
-
-.bd-placeholder-img-lg {
-    font-size: calc(1.475rem + 2.7vw)
-}
-
-@media (min-width: 1200px) {
-    .bd-placeholder-img-lg {
-        font-size:3.5rem
-    }
-}
-
-main a,main button,main input,main select,main textarea,main h2,main h3,main h4,main [tabindex="0"] {
-    scroll-margin-top: 80px;
-    scroll-margin-bottom: 100px
-}

data/_sass/core/_navbar.scss

@@ -480,6 +480,15 @@
 // -----------------------------------------------------------------------------
 
 @media (max-width: 991.98px) {
+  // Cap the slide-in panels so they never exceed a narrow phone viewport.
+  // Bootstrap's default --bs-offcanvas-width is a fixed 400px — wider than a
+  // 360–390px device — which pushes part of the panel (and its close button)
+  // off-screen. Clamp to a comfortable width that always fits.
+  #bdNavbar.offcanvas-lg,
+  #info-section.offcanvas {
+    --bs-offcanvas-width: min(21rem, 86vw);
+  }
+
   // Wrapper is inert on mobile so offcanvas layout matches pre-wrapper structure
   #bdNavbar .bd-navbar-nav-viewport {
     display: contents;
@@ -861,3 +870,247 @@
     display: none !important;
   }
 }
+
+// ============================================================================
+
+// Navbar fixed/auto-hide layout — relocated from custom.scss (Phase 4)
+
+// ----------------------------------------------------------------------------
+
+// Logo sizing + the #navbar 3-column desktop grid, brand-degradation container
+
+// queries, hidden/auto-hide state, and the <992px mobile layout. Appended after
+
+// the existing navbar body so the navbar-internal cascade order is unchanged.
+
+// ============================================================================
+// Navbar logo: global img { max-width: 100% } shrinks it inside tight flex/grid cells on small viewports
+// (Use a.navbar-brand only — div.navbar-brand.site-title should still shrink/truncate.)
+#navbar a.navbar-brand {
+    flex-shrink: 0;
+}
+#navbar .navbar-brand img {
+    width: 30px;
+    height: 30px;
+    min-width: 30px;
+    min-height: 30px;
+    max-width: none;
+    object-fit: contain;
+    flex-shrink: 0;
+}
+
+// ============================================
+// NAVBAR - Fixed positioning with auto-hide
+// ============================================
+// Uses Bootstrap's fixed-top class for positioning (z-index: 1030)
+// JavaScript adds/removes .navbar-hidden class on scroll
+
+#navbar {
+    // Transition for smooth hide/show animation
+    transition: transform 0.3s ease-in-out !important;
+    
+    // Ensure navbar background is opaque
+    background-color: var(--bs-body-bg);
+}
+
+// Keep the outer Bootstrap navbar shell on one row (nanobar + nav); avoids rare wrap on wide pages
+#navbar > .navbar.navbar-expand-lg {
+    flex-wrap: nowrap !important;
+    align-items: center;
+}
+
+#navbar .navbar-main {
+    align-items: center;
+}
+
+#navbar .site-title-text,
+#navbar .site-subtitle-text {
+    display: inline-block;
+}
+
+#navbar .nav-search-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+// Desktop (lg+): 3-column grid — [brand/title | main nav | utilities] so nav cannot paint over Search/Settings
+@media (min-width: 992px) {
+    #navbar .navbar-main {
+        display: grid !important;
+        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
+        align-items: center;
+        column-gap: 0.5rem;
+        row-gap: 0.25rem;
+        flex-wrap: unset !important;
+        container-type: inline-size;
+        container-name: navbar-main;
+    }
+
+    #navbar .navbar-main-start {
+        grid-column: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        min-width: 0;
+        max-width: none;
+        flex-shrink: 1;
+    }
+
+    #navbar #bdNavbar {
+        grid-column: 2;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+        justify-self: stretch;
+    }
+
+    #navbar .navbar-utility-controls {
+        grid-column: 3;
+        justify-self: end;
+        flex-shrink: 0;
+        min-width: 0;
+        max-width: max-content;
+        display: inline-flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: 0.25rem;
+        padding-left: 0.25rem;
+    }
+
+    #navbar .navbar-utility-controls .nav-search-button,
+    #navbar .navbar-utility-controls .nav-settings-button {
+        flex: 0 1 auto;
+        min-width: 0;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    // Brand cluster: logo stays fixed; title flexes and ellipsizes only when crowded
+    #navbar .navbar-brand-group {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        flex-wrap: nowrap;
+        gap: 0.375rem;
+        min-width: 0;
+    }
+
+    #navbar .navbar-home-links {
+        flex-shrink: 0;
+        display: none;
+    }
+
+    #navbar .site-title,
+    #navbar .site-subtitle {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    #navbar .site-title {
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
+    #navbar .site-title .site-title-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: bottom;
+        max-width: none;
+    }
+
+    #navbar .site-subtitle .site-subtitle-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: bottom;
+        max-width: none;
+    }
+
+    // Progressive brand degradation (container width, not viewport)
+    @container navbar-main (min-width: 80rem) {
+        #navbar .navbar-home-links {
+            display: inline-flex !important;
+        }
+    }
+
+    @container navbar-main (max-width: 68rem) {
+        #navbar .site-subtitle {
+            display: none !important;
+        }
+    }
+
+    @container navbar-main (max-width: 50rem) {
+        #navbar .site-title .site-title-text {
+            max-width: 100%;
+        }
+    }
+}
+
+// Hidden state - slides up out of view
+// Using higher specificity to override Bootstrap's fixed-top
+#navbar.navbar-hidden {
+    transform: translateY(-100%) !important;
+}
+
+// Respect user's motion preferences
+@media (prefers-reduced-motion: reduce) {
+    #navbar {
+        transition: none !important;
+    }
+}
+
+@media (max-width: 991.98px) {
+    #navbar .navbar-main {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    #navbar .navbar-main-start {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    #navbar .navbar-brand-group {
+        flex: 0 1 auto;
+        min-width: 0;
+    }
+
+    #navbar .site-title {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    #navbar .site-title .nav-link {
+        padding: 0;
+        min-height: 2.5rem;
+        align-items: center;
+    }
+
+    // Title fills the gap between logo and utility controls; ellipsis when crowded
+    #navbar .site-title-text {
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+    }
+
+    #navbar .navbar-toggler {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+
+    #navbar .nav-search-button {
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        justify-content: center;
+    }
+}