jekyll-theme-zer0 0.21.2 → 0.22.0

data/_sass/core/_offcanvas-panels.scss

@@ -0,0 +1,48 @@
+// =============================================================================
+// Shared offcanvas chrome (docs sidebar, TOC) — matches main nav panel on mobile
+// Bootstrap reference: fixed-top 1030, offcanvas backdrop/body 1045, modal 1055
+// =============================================================================
+
+#bdSidebar .offcanvas-header,
+#tocContents .offcanvas-header {
+  border-bottom: 2px solid var(--bs-border-color);
+  padding: 1.25rem 1rem;
+}
+
+#bdSidebar .offcanvas-title,
+#tocContents .offcanvas-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--bs-emphasis-color);
+  margin-bottom: 0;
+}
+
+@media (max-width: 991.98px) {
+  #bdSidebar .offcanvas-header .btn-close,
+  #tocContents .offcanvas-header .btn-close {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 0.375rem;
+    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
+
+    &:hover {
+      background-color: var(--bs-tertiary-bg);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--bs-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  #tocContents .offcanvas-body {
+    padding: 1rem;
+  }
+
+  #bdSidebar .offcanvas-body {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+  }
+}

data/_sass/core/_syntax.scss

@@ -1,57 +1,7 @@
 /* ==========================================================================
-   Syntax highlighting
+   Syntax highlighting (Rouge / base16)
    ========================================================================== */
 
-// div.highlighter-rouge,
-// figure.highlight {
-//   position: relative;
-//   margin-bottom: 1em;
-//   background: $base00;
-//   color: $base05;
-//   font-family: $monospace;
-//   font-size: $type-size-6;
-//   line-height: 1.8;
-//   border-radius: $border-radius;
-
-//   > pre,
-//   pre.highlight {
-//     margin: 0;
-//     padding: 1em;
-//   }
-// }
-
-// .highlight table {
-//   margin-bottom: 0;
-//   font-size: 1em;
-//   border: 0;
-
-//   td {
-//     padding: 0;
-//     width: calc(100% - 1em);
-//     border: 0;
-
-//     /* line numbers*/
-//     &.gutter,
-//     &.rouge-gutter {
-//       padding-right: 1em;
-//       width: 1em;
-//       color: $base04;
-//       border-right: 1px solid $base04;
-//       text-align: right;
-//     }
-
-//     /* code */
-//     &.code,
-//     &.rouge-code {
-//       padding-left: 1em;
-//     }
-//   }
-
-//   pre {
-//     margin: 0;
-//   }
-// }
-
 /* syntax highlighting (base16) */
 $base00: #263238 !default;
 $base01: #2e3c43 !default;

data/_sass/core/_theme.scss

@@ -1,250 +1,3 @@
-// Import variables for standalone compilation
+// Theme entry — Sass tokens: core/_variables.scss; modes: theme/_wizard-mode.scss + _css-variables.scss (via _color-modes.scss).
 @import "variables";
-
-// # Font Settings ---------------------------------------------------------------
-
-// # Color Settings --------------------------------------------------------------
-
-// ## Color Schema Override
-//  https://meodai.github.io/poline/
-
-// Harbour Mirror
-// Harbour Blue
-// Dark Blue
-
-
-$blue-400: #073781;
-$blue-500: #073781;
-$blue-600: #346182;
-$blue-700: #346182;
-
-// Smoking Mirror
-//   3d7695
-//   2f5877
-//   a19587
-
-// https://getbootstrap.com/docs/5.3/customize/color-modes/#custom-color-modes
-// Custom Theme
-
-[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, .5)};
-      --bs-btn-border-color: #{rgba($white, .25)};
-      --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
-      --bs-btn-hover-border-color: #{rgba($white, .25)};
-      --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
-      --bs-btn-active-border-color: #{rgba($white, .5)};
-      --bs-btn-focus-border-color: #{rgba($white, .5)};
-      --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
-    }
-}
-
-
-  :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), .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, .5);
-    --bd-callout-link: 110,168,254;
-    --bd-callout-code-color: #e685b5;
-    --bd-pre-bg: #1b1f22
-}
-
-
-
-/* Typography
-   ========================================================================== */
-
-   $doc-font-size: 16 !default;
-
-   /* paragraph indention */
-   $paragraph-indent: false !default; // true, false (default)
-   $indent-var: 1.3em !default;
-   
-   $global-font-family: $sans-serif !default;
-   $header-font-family: $sans-serif !default;
-   $caption-font-family: $serif !default;
-/*  Colors
-    ========================================================================== */
-
-   $background-color: #fff !default;
-   $code-background-color: #fafafa !default;
-   $code-background-color-dark: $light-gray !default;
-   $text-color: $dark-gray !default;
-   $muted-text-color: mix(#fff, $text-color, 20%) !default;
-   $border-color: $lighter-gray !default;
-   $form-background-color: $lighter-gray !default;
-   $footer-background-color: $lighter-gray !default;
-   
-   $primary-color: #6f777d !default;
-   $success-color: #3fa63f !default;
-   $warning-color: #d67f05 !default;
-   $danger-color: #ee5f5b !default;
-   $info-color: #3b9cba !default;
-   $focus-color: $primary-color !default;
-   $active-color: mix(#fff, $primary-color, 80%) !default;
-   
-   /* links */
-   $link-color: mix(#000, $info-color, 20%) !default;
-   $link-color-hover: mix(#000, $link-color, 25%) !default;
-   $link-color-visited: mix(#fff, $link-color, 15%) !default;
-   $masthead-link-color: $primary-color !default;
-   $masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
-   $navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
-   
-   /* notices */
-   $notice-background-mix: 80% !default;
-   $code-notice-background-mix: 90% !default;
-   
-   /*
-      Other
-      ========================================================================== */
-   
-   $border-radius: 4px !default;
-   $box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-   $nav-height: 2em !default;
-   $nav-toggle-height: 2rem !default;
-   $navicon-width: 1.5rem !default;
-   $navicon-height: 0.25rem !default;
-   $global-transition: all 0.2s ease-in-out !default;
-   $intro-transition: intro 0.3s both !default;
-
-   
-   // scss-docs-start theme-color-variables
-   $primary:       $blue !default;
-   $secondary:     $gray-600 !default;
-   $success:       $green !default;
-   $info:          $cyan !default;
-   $warning:       $yellow !default;
-   $danger:        $red !default;
-   $light:         $gray-100 !default;
-   $dark:          $gray-900 !default;
-   // scss-docs-end theme-color-variables
-   
-   // Links
-   //
-   // Style anchor elements.
-   
-   $link-color:                              $primary !default;
-   $link-decoration:                         underline !default;
-   $link-shade-percentage:                   20% !default;
-   $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
-   $link-hover-decoration:                   null !default;
-   
-   $stretched-link-pseudo-element:           after !default;
-   $stretched-link-z-index:                  1 !default;
-   
-   
-   // Body
-   //
-   // Settings for the `<body>` element.
-   
-   $body-bg:                   $white !default;
-   $body-color:                $gray-900 !default;
-   $body-text-align:           null !default;
-   
-   // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
-   // $font-size-base affects the font size of the body text
-   $font-size-root:              null !default;
-   $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-   $font-size-sm:                $font-size-base * .875 !default;
-   $font-size-lg:                $font-size-base * 1.25 !default;
-   
-   $font-weight-lighter:         lighter !default;
-   $font-weight-light:           300 !default;
-   $font-weight-normal:          400 !default;
-   $font-weight-bold:            700 !default;
-   $font-weight-bolder:          bolder !default;
-   
-   $font-weight-base:            $font-weight-normal !default;
-   
-   $line-height-base:            1.5 !default;
-   $line-height-sm:              1.25 !default;
-   $line-height-lg:              2 !default;
-   
-
-   // scss-docs-end font-variables
-   
-   $component-active-color:      $white !default;
-   $component-active-bg:         $primary !default;
-   
-   // Buttons
-   //
-   // For each of Bootstrap's buttons, define text, background, and border color.
-   
-   // scss-docs-start input-btn-variables
-   $input-btn-padding-y:         .375rem !default;
-   $input-btn-padding-x:         .75rem !default;
-   $input-btn-font-family:       null !default;
-   $input-btn-font-size:         $font-size-base !default;
-   $input-btn-line-height:       $line-height-base !default;
-   
-   $input-btn-focus-width:         .25rem !default;
-   $input-btn-focus-color-opacity: .25 !default;
-   $input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-   $input-btn-focus-blur:          0 !default;
-   $input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
-
-   
-   $input-btn-border-width:      $border-width !default;
-   // scss-docs-end input-btn-variables
-   
-   
-   $btn-link-color:              $link-color !default;
-   $btn-link-hover-color:        $link-hover-color !default;
-   $btn-link-disabled-color:     $gray-600 !default;
-   
-   // scss-docs-start border-radius-variables
-   $border-radius:               .25rem !default;
-   $border-radius-sm:            .2rem !default;
-   $border-radius-lg:            .3rem !default;
-   $border-radius-pill:          50rem !default;
-   // scss-docs-end border-radius-variables
-   
-   
-   // scss-docs-start navbar-theme-variables
-   $navbar-dark-color:                 rgba($white, .55) !default;
-   $navbar-dark-hover-color:           rgba($white, .75) !default;
-   $navbar-dark-active-color:          $white !default;
-   $navbar-dark-disabled-color:        rgba($white, .25) !default;
-   $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-   $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-   
-   $navbar-light-color:                rgba($black, .55) !default;
-   $navbar-light-hover-color:          rgba($black, .7) !default;
-   $navbar-light-active-color:         rgba($black, .9) !default;
-   $navbar-light-disabled-color:       rgba($black, .3) !default;
-   $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-   $navbar-light-toggler-border-color: rgba($black, .1) !default;
-   
-   $navbar-light-brand-color:                $navbar-light-active-color !default;
-   $navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-   $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-   $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+@import "theme/color-modes";

data/_sass/core/_variables.scss

@@ -84,32 +84,6 @@ $yiq-contrasted-light-default: #fff !default;
 $yiq-contrasted-threshold: 175 !default;
 $yiq-debug: false !default;
 
-/* brands */
-$behance-color: #1769ff !default;
-$bitbucket-color: #205081 !default;
-$dribbble-color: #ea4c89 !default;
-$facebook-color: #3b5998 !default;
-$flickr-color: #ff0084 !default;
-$foursquare-color: #0072b1 !default;
-$github-color: #171516 !default;
-$gitlab-color: #e24329 !default;
-$instagram-color: #517fa4 !default;
-$keybase-color: #ef7639 !default;
-$lastfm-color: #d51007 !default;
-$linkedin-color: #007bb6 !default;
-$mastodon-color: #2b90d9 !default;
-$pinterest-color: #cb2027 !default;
-$reddit-color: #ff4500 !default;
-$rss-color: #fa9b39 !default;
-$soundcloud-color: #ff3300 !default;
-$stackoverflow-color: #fe7a15 !default;
-$tumblr-color: #32506d !default;
-$twitter-color: #55acee !default;
-$vimeo-color: #1ab7ea !default;
-$vine-color: #00bf8f !default;
-$youtube-color: #bb0000 !default;
-$xing-color: #006567 !default;
-
 /* links */
 $link-color: mix(#000, $info-color, 20%) !default;
 $link-color-hover: mix(#000, $link-color, 25%) !default;
@@ -122,23 +96,7 @@ $navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
 $notice-background-mix: 80% !default;
 $code-notice-background-mix: 90% !default;
 
-/* syntax highlighting (base16) */
-$base00: #263238 !default;
-$base01: #2e3c43 !default;
-$base02: #314549 !default;
-$base03: #546e7a !default;
-$base04: #b2ccd6 !default;
-$base05: #eeffff !default;
-$base06: #eeffff !default;
-$base07: #ffffff !default;
-$base08: #f07178 !default;
-$base09: #f78c6c !default;
-$base0a: #ffcb6b !default;
-$base0b: #c3e88d !default;
-$base0c: #89ddff !default;
-$base0d: #82aaff !default;
-$base0e: #c792ea !default;
-$base0f: #ff5370 !default;
+// Base16 syntax palette: see core/_syntax.scss (single source).
 
 /*
    Breakpoints
@@ -366,17 +324,6 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-// $font-size-base affects the font size of the body text
-$font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;
-$font-size-lg:                $font-size-base * 1.25 !default;
-
-$line-height-base:            1.5 !default;
-$line-height-sm:              1.25 !default;
-$line-height-lg:              2 !default;
-
-
 // Navs
 
 // scss-docs-start nav-variables

data/_sass/core/code-copy.scss

@@ -6,24 +6,24 @@
   display: inline-block;
   margin: 0 0.5em;
   padding: 0.5em 1em;
-  color: white;
-  background-color: black;
+  color: var(--bs-light);
+  background-color: var(--bs-dark);
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   
   &:focus {
-    outline: none; // remove default focus outline
-    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4); // add custom focus style
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.35);
   }
   
   &:hover {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: color-mix(in srgb, var(--bs-dark) 85%, transparent);
     transform: translateY(-1px);
   }
   
   &.copied {
-    background-color: #28a745;
+    background-color: var(--bs-success);
     animation: pulse 0.3s ease;
   }
 }