diff --git a/config.js b/config.js index 464f4c7..fe42226 100644 --- a/config.js +++ b/config.js @@ -12,7 +12,7 @@ const CONFIG = { // type: "github" (automatic from API) or "local" (manual) versioning: { type: "github", - manualVersion: "v1.0.0", + manualVersion: "v1.0.11", manualDate: "2026-01-21" }, @@ -50,7 +50,8 @@ const CONFIG = { showSocialBadges: true, showThemeToggle: true, pageTransitions: true, - autoCollapseSidebar: false + autoCollapseSidebar: false, + stickyBreadcrumbs: true }, // Custom Navigation Links diff --git a/index.html b/index.html index a2daf1c..2b58b61 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - + BJORN // WIKI NODE @@ -401,14 +402,15 @@ } .badge-sm { - transform: scale(.75); - transform-origin: top left; - margin-bottom: calc(-6px * .75); + width: 100%; + display: block; + border-radius: 6px; + overflow: hidden; } .badge-sm:hover { - transform: scale(.80); - transition: transform .15s ease; + filter: brightness(1.1); + transition: filter .15s ease; } ::-webkit-scrollbar-thumb { @@ -548,6 +550,80 @@ opacity: 1; } } + + /* --- STICKY BREADCRUMBS BUBBLE --- */ + .breadcrumb-sticky-container { + position: relative; + top: 0.75rem; + z-index: 45; + margin-bottom: 2rem; + width: 100%; + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); + } + + .breadcrumb-sticky-container.is-sticky { + position: sticky; + } + + .breadcrumb-sticky-container::before { + content: ''; + position: absolute; + /* Default state: slightly smaller and invisible */ + inset: 0; + background-color: var(--bg-sidebar); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--border-color); + border-radius: 16px; + box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5); + opacity: 0; + transform: scale(0.98); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + pointer-events: none; + z-index: -1; + } + + .breadcrumb-sticky-container.stuck::before { + opacity: 1; + transform: scale(1); + /* Grow outward to create padding effect without shifting text */ + inset: -0.6rem -1rem; + } + + .breadcrumb-sticky-container.stuck { + transform: translateY(0.25rem); + } + + .breadcrumb-sticky-container.stuck .breadcrumb-inner { + margin-bottom: 0; + } + + /* --- MOBILE SAFE AREAS (iOS Notch/Home Indicator) --- */ + header { + padding-top: env(safe-area-inset-top); + height: calc(4rem + env(safe-area-inset-top)); + } + + #sidebar { + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); + } + + #mobile-toc-sidebar { + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); + } + + #toast-container { + margin-bottom: env(safe-area-inset-bottom); + } + + /* Adjust scroll container for safe areas if needed */ + @media (max-width: 768px) { + #scroll-container { + padding-bottom: env(safe-area-inset-bottom); + } + }