jekyll-theme-zer0 0.21.2 → 0.22.0

data/_sass/custom.scss

@@ -10,6 +10,7 @@
 
 // Import navbar styles (extracted from navbar.html)
 @import "core/navbar";
+@import "core/offcanvas-panels";
 
 html, body {
     max-width: 100%;
@@ -113,7 +114,7 @@ html, body {
 }
 
 
-// Sidebar classes consolidated in _sass/core/_docs.scss for consistency
+// Sidebar / docs layout: _sass/core/_docs-layout.scss
 
 // ==============================================================================
 // SIDEBAR & TOC ENHANCEMENTS
@@ -134,12 +135,24 @@ html, body {
 
 // Mobile FAB positioning (TOC button above back-to-top)
 .bd-toc-fab {
-    // On mobile, ensure proper spacing above back-to-top button
+    right: 20px;
+    z-index: 1030;
+
     @media (max-width: 991.98px) {
         bottom: 90px !important; // 20px (back-to-top) + 56px (button height) + 14px (spacing)
     }
 }
 
+.bd-toc-fab .bd-toc-toggle {
+    width: 56px;
+    height: 56px;
+}
+
+// Cookie banner: above fixed navbar (1030), below offcanvas (1045) so drawers cover it
+.cookie-consent-banner {
+    z-index: 1036;
+}
+
 // Active TOC link highlighting
 .bd-toc nav a.active {
     font-weight: 600;
@@ -180,7 +193,7 @@ html {
     z-index: 1020; /* Below TOC button (1030) but above other content */
     border: none; /* Remove borders */
     outline: none; /* Remove outline */
-    background-color: $primary; /* Set a background color */
+    background-color: var(--bs-primary); /* Match Bootstrap theme primary */
     color: inherit; /* Text color */
     opacity: 25%;
     cursor: pointer; /* Add a mouse pointer on hover */
@@ -220,6 +233,21 @@ img {
     height: auto;
 }
 
+// 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
 // ============================================
@@ -234,6 +262,12 @@ img {
     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;
 }
@@ -249,6 +283,83 @@ img {
     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: auto minmax(0, 1fr) auto;
+        align-items: center;
+        column-gap: 0.5rem;
+        row-gap: 0.25rem;
+        flex-wrap: unset !important;
+    }
+
+    #navbar .navbar-main-start {
+        grid-column: 1;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    #navbar #bdNavbar {
+        grid-column: 2;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+    }
+
+    #navbar .navbar-utility-controls {
+        grid-column: 3;
+        justify-self: end;
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+        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 + title column yields when the bar is crowded
+    #navbar .navbar-brand-group,
+    #navbar .site-title,
+    #navbar .site-subtitle {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    #navbar .site-title .site-title-text {
+        max-width: min(14rem, 20vw);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: bottom;
+    }
+
+    @media (min-width: 1200px) {
+        #navbar .site-title .site-title-text {
+            max-width: min(20rem, 28vw);
+        }
+    }
+
+    #navbar .site-subtitle .site-subtitle-text {
+        max-width: min(10rem, 14vw);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: bottom;
+    }
+}
+
 // Hidden state - slides up out of view
 // Using higher specificity to override Bootstrap's fixed-top
 #navbar.navbar-hidden {
@@ -279,18 +390,17 @@ img {
 
     #navbar .site-title .nav-link {
         padding: 0;
+        min-height: 2.5rem;
+        align-items: center;
     }
 
+    // Cap width so title doesn’t crowd toggles; full hide only via @container nav-brand-start
     #navbar .site-title-text {
-        max-width: 45vw;
+        max-width: min(12rem, 38vw);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-    }
-
-    #navbar .navbar-brand img {
-        width: 28px;
-        height: 28px;
+        vertical-align: middle;
     }
 
     #navbar .navbar-toggler {
@@ -329,130 +439,6 @@ img {
     border-color: var(--bs-border-color-translucent);
 }
 
-$enable-cssgrid: true;
-$enable-grid-classes: false;
-
-// #box {
-//     background:url('data:image/gif;base64,R0lGODlhBgAGAIAAAO7u7t7e3iH5BAAAAAAALAAAAAAGAAYAAAIKhIOXgKGuDIOzAAA7') #eeeff1;
-//   }
-
-// body {font-size:12px; background:#ffe;}
-//   body,
-//   textarea		{text-align:center; font-family:arial;}
-
-//   input			{}
-//   input[type='number'],
-//   input[type='color']	{width:5em;}
-//   input[type='number']	{padding:0.25em; text-align:right;}
-//   select			{width:9em; font-size:11px; padding:0.25em 0.2em;}
-//   option			{padding:0.25em 0.2em;}
-//   textarea		{resize:none; padding:2.5em; color:#358; background:#eef2f4; font-size:2em; border:0; width:100%;}
-
-  
-
-//   #set			{user-select:none; background:#fff; overflow:hidden;}
-//   #set table		{border-collapse:collapse; padding:2em; font-size:11px; text-transform:uppercase; margin:2em auto;}
-//   #set th,
-//   #set td			{padding:0.4em 0.5em;}
-//   #set th			{text-align:right; color:#567;}
-//   #set td			{text-align:left;}
-
-
-//   /* res beautifier */
-//   #res		    	{color:#789; padding:2em; text-align:left; font-family:'Lucida Console', Monaco, monospace;}
-//   #res b			{font-weight:normal;}
-//   #res i			{font-style:normal;}
-//   #res .obj	    	{color:#789;}
-//   #res .obj b		{color:#345; font-weight:bold;}
-//   #res .key	    	{color:#45a;}
-//   #res .num	    	{color:#12a;}
-//   #res .txt	    	{color:#9ab;}
-//   #res .txt i		{color:#384;}
-//   #res .clr	    	{color:#9ab;}
-//   #res .clr i		{color:#731;}
-//   #res a			{color:#67a;}
-//   #res a:hover		{color:#67e;}
-
-
-//   #box			{overflow:hidden; position:relative; height:300px; padding:3em;}
-//   #box svg		{display:block; position:absolute; right:50%; bottom:50%; transform:translate( 50%, 50%); cursor:pointer;}
-//   #box svg		{max-width:100%; max-height:100%;}
-
-
-//   /* minimized options for small screen */
-//   .opt			{display:block; padding:1em; background:#0ae; color:#fff; text-decoration:none;}
-//   .opt:hover		{background:#0af;}
-
-//   #op2.opt		{background:#ea0;}
-//   #op2.opt:hover		{background:#fa0;}
-
-//   #set table,
-//   #set .legend,
-//   #set #op2.opt,
-//   #set.show #op1.opt	{display:none;}
-
-//   #set.show table		{display:table;}
-//   #set.show #op2.opt	{display:block;}
-
-// @media (min-width: 620px) {
-
-//   html,
-//   body,			
-//   #box,
-//   #set,
-//   #txt,
-//   #msg,
-//   #hnt			{display:block; position:absolute; top:0; right:0; left:0; bottom:0;}
-
-//   html,
-//   body			{overflow:hidden;}
-//   #box			{height:auto;}
-
-//   #txt,
-//   #hnt			{height:250px; top:auto; border-top:3px #eee solid;}
-
-//   #set,
-//   #hnt			{width:270px; left:auto;}
-//   #set table		{font-size:10px;}
-
-//   #box,
-//   #txt			{right:270px}
-
-//   #box,
-//   #set			{bottom:250px;}
-
-//   #hnt			{overflow:auto;}
-//   #msg			{width:100%; height:100%;}
-
-//   #set			{overflow-y:auto;}
-//   #set .legend		{display:block;}
-//   #set table		{display:table;}
-//   #set .opt		{display:none !important;}
-// }
-
-// @media (min-width:900px) {
-
-//   #set,
-//   #hnt			{width:30%}
-//   #box,
-//   #txt			{right:30%}
-// }
-
-// @media (min-width:1024px) {
-
-//   #set table		{font-size:11px;}
-// }
-
-// @media (min-width:1600px) {
-
-//   #set,
-//   #hnt			{width:480px}
-//   #box,
-//   #txt			{right:480px}
-// }
-
-//   .legend			{padding:1.5em 0.5em; border-bottom:1px #eee solid;}
-
 .nested-list-group {
     display: none;
   }

data/_sass/theme/_color-modes.scss

@@ -0,0 +1,3 @@
+// Barrel: wizard Sass/CSS overrides, then shared --bd-* tokens.
+@import "theme/wizard-mode";
+@import "theme/css-variables";

data/_sass/theme/_css-variables.scss

@@ -0,0 +1,29 @@
+// Docs-layout and light/dark accent tokens (--bd-*). Consumed by CDN Bootstrap + _docs-layout.scss.
+// Wizard palette lives in _wizard-mode.scss.
+
+:root,
+[data-bs-theme="light"] {
+  --bd-purple: #4c0bce;
+  --bd-violet: #712cf9;
+  --bd-accent: #ffe484;
+  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
+  --bd-accent-rgb: 255, 228, 132;
+  --bd-pink-rgb: 214, 51, 132;
+  --bd-teal-rgb: 32, 201, 151;
+  --bd-violet-bg: var(--bd-violet);
+  --bd-toc-color: var(--bd-violet);
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), 0.1);
+  --bd-callout-link: 10, 88, 202;
+  --bd-callout-code-color: #ab296a;
+  --bd-pre-bg: var(--bs-tertiary-bg);
+}
+
+[data-bs-theme="dark"] {
+  --bd-violet: #9461fb;
+  --bd-violet-bg: #712cf9;
+  --bd-toc-color: var(--bs-emphasis-color);
+  --bd-sidebar-link-bg: rgba(84, 33, 187, 0.5);
+  --bd-callout-link: 110, 168, 254;
+  --bd-callout-code-color: #e685b5;
+  --bd-pre-bg: #1b1f22;
+}

data/_sass/theme/_wizard-mode.scss

@@ -0,0 +1,31 @@
+// Wizard color mode — Sass-backed overrides for [data-bs-theme="wizard"].
+// Depends on gray/white/blue maps from core/_variables.scss (imported before this file).
+
+$blue-400: #073781;
+$blue-500: #073781;
+$blue-600: #346182;
+$blue-700: #346182;
+
+[data-bs-theme="wizard"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, 0.5)};
+    --bs-btn-border-color: #{rgba($white, 0.25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, 0.5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, 0.25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, 0.5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, 0.5)};
+    --bs-btn-focus-border-color: #{rgba($white, 0.5)};
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
+  }
+}

data/assets/css/custom.css

@@ -1,120 +1,5 @@
--------------------------------------------------------------------------------------------------------------------
-/* Customize theme
-/* ------------------------------------------------------------------------------------------------------------------- */
-
-/* Remove padding so particles fill screen */
-.masthead {
-    padding-top: 0rem;
-    padding-bottom: 0rem;
-  }
-  
-  /* Add background and shadow to navbar when scrolling */
-  #mainNav.navbar-shrink {
-    background-color: white;
-    box-shadow: 0px 0px 30px rgba(44, 62, 80, 0.5);
-  }
-  
-  /* Set navbar brand color */
-  #mainNav .navbar-brand {
-    color: #1abc9c;
-  }
-  
-  /* Underline navbar brand on hover */
-  #mainNav .navbar-brand:hover {
-    text-decoration: underline;
-  }
-  
-  /* Set navbar link color */
-  #mainNav .navbar-nav li.nav-item a.nav-link {
-    color: #2c3e50;
-  }
-  
-  #mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
-    color: #2c3e50;
-  }
-  
-  /* Set navbar link color and underline on hover */
-  #mainNav .navbar-nav li.nav-item a.nav-link:hover {
-    color: #1abc9c;
-    border-bottom: 3px solid;
-  }
-  
-  #mainNav .navbar-nav li.nav-item a.nav-link.active {
-    color: #1abc9c;
-    border-bottom: 3px solid;
-    background: white;
-  }
-  
-  @media (min-width: 992px) {
-    #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
-      color: #1abc9c;
-      border-bottom: 3px solid;
-      background: white;
-    }
-  }
-  
-  /* Increase top margin of divider line to align with icon */
-  .divider-custom-line {
-    margin-top: 1.75rem;
-  }
-  
-  /* Increase icon size in social buttons */
-  .btn-social {
-    font-size: 1.5rem;
-  }
-  
-  /* ------------------------------------------------------------------------------------------------------------------- */
-  /* Add new components
-  /* ------------------------------------------------------------------------------------------------------------------- */
-  
-  /* Add divider-primary class to set dividers to primary color */
-  .divider-custom.divider-primary .divider-custom-line {
-    background-color: #1abc9c;
-  }
-  
-  .divider-custom.divider-primary .divider-custom-icon {
-    color: #1abc9c !important;
-  }
-  
-  /* Center text landing over previous element */
-  #textlanding {
-    position: absolute;
-    top: 50%;
-    right: 50%;
-    transform: translate(50%,-50%);
-  }
-  
-  /* Move arrow near bottom of section */
-  #arrowlanding {
-    position: absolute;
-    top: 95%;
-    right: 50%;
-    transform: translate(50%,-50%);
-  }
-  
-  /* Set arrow color */
-  #arrowlanding a {
-    color: #2c3e50;
-  }
-  
-  /* Set arrow color on hover */
-  #arrowlanding a:hover {
-    color: #1abc9c;
-  }
-  
-  /* Ensure particles span entire section */
-  #particles-js {
-    width: 100%;
-    /* height: 100%; */
-    /* background-color: white; */
-    background-image: url('');
-    background-size: cover;
-    /* background-position: 50% 50%; */
-    background-repeat: no-repeat;
-  }
-
-
-  .nanobar .bar {
-    margin-top: 56px;
-    background: #1cc927;
-  }
+/*
+ * Legacy asset path — not used by the current theme.
+ * Custom styles: _sass/custom.scss (compiled into assets/css/main.css), or optional user-overrides.css.
+ * Kept so older builds or cached HTML that still link here do not 404.
+ */

data/assets/css/main.scss

@@ -5,10 +5,14 @@
 
 @charset "utf-8";
 
-// Styling Variables
+// Theme layer on top of bundled Bootstrap CSS (assets/vendor/bootstrap/css/bootstrap.min.css in head.html).
+// Advanced: npm run css:bootstrap can emit a custom Bootstrap build; swap the head <link> — never load two full Bootstraps.
+
+// Design tokens + theme (CSS variables / wizard mode)
 @import "core/variables";
-@import "core/docs";
 @import "core/theme";
+// Bootstrap-docs-style layout (trimmed; was ~3.2k-line vendor snapshot)
+@import "core/docs-layout";
 
 // Bootstrap Styles
 // @import "bootstrap.scss";

data/assets/css/stats.css

@@ -4,6 +4,9 @@
   ===================================================================
   
   File: stats.css
+  Loaded only when `page.layout == 'stats'` (_includes/core/head.html).
+  Kept separate so dashboard CSS is not bundled into every page’s main.css.
+
   Purpose: Custom styles for the statistics dashboard that cannot be 
            achieved with Bootstrap 5 utility classes alone.
   

data/assets/css/theme-npm-entry.scss

@@ -0,0 +1,6 @@
+// Optional npm build: compiles Bootstrap from node_modules (same major as CDN in head.html).
+// Run from repo root: npm install && npm run css:bootstrap
+// Output: assets/css/vendor/bootstrap-from-npm.css
+// To use: point the Bootstrap <link> in _includes/core/head.html at that file instead of jsDelivr.
+
+@import "bootstrap/scss/bootstrap";