@sp-days-framework/create-sp-days 1.0.4 → 1.1.0-beta2

package/templates/page-course/src/css/sp-days-theme.scss

@@ -8,11 +8,11 @@
 
 // Functions to calculate color variations using the modern color.scale approach
 @function lighten-percentage($color, $percentage) {
-    @return color.scale($color, $lightness: $percentage * 1%);
+  @return color.scale($color, $lightness: $percentage * 1%);
 }
 
 @function darken-percentage($color, $percentage) {
-    @return color.scale($color, $lightness: -$percentage * 1%);
+  @return color.scale($color, $lightness: -$percentage * 1%);
 }
 
 // Define base colors for light and dark themes
@@ -25,7 +25,7 @@ $danger-color-light-theme: #fa383e;
 $secondary-color-light-theme: #ebedf0;
 
 // Dark theme colors
-$primary-color-dark-theme: #6CACE4;
+$primary-color-dark-theme: #6cace4;
 $success-color-dark-theme: #88e36b;
 $info-color-dark-theme: #5dccf0;
 $warning-color-dark-theme: #ffc93d;
@@ -34,150 +34,339 @@ $secondary-color-dark-theme: #afafaf;
 
 // Code syntax highlighting theme
 :root {
-    --docusaurus-highlighted-code-line-bg: rgb(143 142 69 / 11%);
-    // --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgb(143 142 69 / 11%);
+  // --ifm-code-font-size: 95%;
 }
 
 /* You can override the default Infima variables here. */
 :root {
-    // Primary color and its variations
-    --ifm-color-primary: #{$primary-color-light-theme};
-    --ifm-color-primary-dark: #{darken-percentage($primary-color-light-theme, 5)};
-    --ifm-color-primary-darker: #{darken-percentage($primary-color-light-theme, 10)};
-    --ifm-color-primary-darkest: #{darken-percentage($primary-color-light-theme, 15)};
-    --ifm-color-primary-light: #{lighten-percentage($primary-color-light-theme, 5)};
-    --ifm-color-primary-lighter: #{lighten-percentage($primary-color-light-theme, 10)};
-    --ifm-color-primary-lightest: #{lighten-percentage($primary-color-light-theme, 30)};
-    --ifm-color-primary-contrast-background: #{lighten-percentage($primary-color-light-theme, 95)};
-    --ifm-color-primary-contrast-foreground: #{darken-percentage($primary-color-light-theme, 95)};
-
-    // // Secondary color and its variations
-    // --ifm-color-secondary: #{$secondary-color-light-theme};
-    // --ifm-color-secondary-dark: #{darken-percentage($secondary-color-light-theme, 5)};
-    // --ifm-color-secondary-darker: #{darken-percentage($secondary-color-light-theme, 10)};
-    // --ifm-color-secondary-darkest: #{darken-percentage($secondary-color-light-theme, 15)};
-    // --ifm-color-secondary-light: #{lighten-percentage($secondary-color-light-theme, 5)};
-    // --ifm-color-secondary-lighter: #{lighten-percentage($secondary-color-light-theme, 10)};
-    // --ifm-color-secondary-lightest: #{lighten-percentage($secondary-color-light-theme, 15)};
-    // --ifm-color-secondary-contrast-background: #{lighten-percentage($secondary-color-light-theme, 95)};
-    // --ifm-color-secondary-contrast-foreground: #{darken-percentage($secondary-color-light-theme, 95)};
-
-    // Success color and its variations
-    --ifm-color-success: #{$success-color-light-theme};
-    --ifm-color-success-dark: #{darken-percentage($success-color-light-theme, 5)};
-    --ifm-color-success-darker: #{darken-percentage($success-color-light-theme, 10)};
-    --ifm-color-success-darkest: #{darken-percentage($success-color-light-theme, 15)};
-    --ifm-color-success-light: #{lighten-percentage($success-color-light-theme, 10)};
-    --ifm-color-success-lighter: #{lighten-percentage($success-color-light-theme, 20)};
-    --ifm-color-success-lightest: #{lighten-percentage($success-color-light-theme, 30)};
-    --ifm-color-success-contrast-background: #{lighten-percentage($success-color-light-theme, 95)};
-    --ifm-color-success-contrast-foreground: #{darken-percentage($success-color-light-theme, 95)};
-    
-    // Info color and its variations
-    --ifm-color-info: #{$info-color-light-theme};
-    --ifm-color-info-dark: #{darken-percentage($info-color-light-theme, 5)};
-    --ifm-color-info-darker: #{darken-percentage($info-color-light-theme, 10)};
-    --ifm-color-info-darkest: #{darken-percentage($info-color-light-theme, 15)};
-    --ifm-color-info-light: #{lighten-percentage($info-color-light-theme, 5)};
-    --ifm-color-info-lighter: #{lighten-percentage($info-color-light-theme, 10)};
-    --ifm-color-info-lightest: #{lighten-percentage($info-color-light-theme, 20)};
-    --ifm-color-info-contrast-background: #{lighten-percentage($info-color-light-theme, 95)};
-    --ifm-color-info-contrast-foreground: #{darken-percentage($info-color-light-theme, 95)};
-    
-    // Warning color and its variations
-    --ifm-color-warning: #{$warning-color-light-theme};
-    --ifm-color-warning-dark: #{darken-percentage($warning-color-light-theme, 5)};
-    --ifm-color-warning-darker: #{darken-percentage($warning-color-light-theme, 10)};
-    --ifm-color-warning-darkest: #{darken-percentage($warning-color-light-theme, 15)};
-    --ifm-color-warning-light: #{lighten-percentage($warning-color-light-theme, 5)};
-    --ifm-color-warning-lighter: #{lighten-percentage($warning-color-light-theme, 10)};
-    --ifm-color-warning-lightest: #{lighten-percentage($warning-color-light-theme, 20)};
-    --ifm-color-warning-contrast-background: #{lighten-percentage($warning-color-light-theme, 95)};
-    --ifm-color-warning-contrast-foreground: #{darken-percentage($warning-color-light-theme, 95)};
-    
-    // Danger color and its variations
-    --ifm-color-danger: #{$danger-color-light-theme};
-    --ifm-color-danger-dark: #{darken-percentage($danger-color-light-theme, 5)};
-    --ifm-color-danger-darker: #{darken-percentage($danger-color-light-theme, 10)};
-    --ifm-color-danger-darkest: #{darken-percentage($danger-color-light-theme, 15)};
-    --ifm-color-danger-light: #{lighten-percentage($danger-color-light-theme, 5)};
-    --ifm-color-danger-lighter: #{lighten-percentage($danger-color-light-theme, 10)};
-    --ifm-color-danger-lightest: #{lighten-percentage($danger-color-light-theme, 20)};
-    --ifm-color-danger-contrast-background: #{lighten-percentage($danger-color-light-theme, 95)};
-    --ifm-color-danger-contrast-foreground: #{darken-percentage($danger-color-light-theme, 95)};
+  // Primary color and its variations
+  --ifm-color-primary: #{$primary-color-light-theme};
+  --ifm-color-primary-dark: #{darken-percentage($primary-color-light-theme, 5)};
+  --ifm-color-primary-darker: #{darken-percentage(
+      $primary-color-light-theme,
+      10
+    )};
+  --ifm-color-primary-darkest: #{darken-percentage(
+      $primary-color-light-theme,
+      15
+    )};
+  --ifm-color-primary-light: #{lighten-percentage(
+      $primary-color-light-theme,
+      5
+    )};
+  --ifm-color-primary-lighter: #{lighten-percentage(
+      $primary-color-light-theme,
+      10
+    )};
+  --ifm-color-primary-lightest: #{lighten-percentage(
+      $primary-color-light-theme,
+      30
+    )};
+  --ifm-color-primary-contrast-background: #{lighten-percentage(
+      $primary-color-light-theme,
+      95
+    )};
+  --ifm-color-primary-contrast-foreground: #{darken-percentage(
+      $primary-color-light-theme,
+      95
+    )};
+
+  // // Secondary color and its variations
+  // --ifm-color-secondary: #{$secondary-color-light-theme};
+  // --ifm-color-secondary-dark: #{darken-percentage($secondary-color-light-theme, 5)};
+  // --ifm-color-secondary-darker: #{darken-percentage($secondary-color-light-theme, 10)};
+  // --ifm-color-secondary-darkest: #{darken-percentage($secondary-color-light-theme, 15)};
+  // --ifm-color-secondary-light: #{lighten-percentage($secondary-color-light-theme, 5)};
+  // --ifm-color-secondary-lighter: #{lighten-percentage($secondary-color-light-theme, 10)};
+  // --ifm-color-secondary-lightest: #{lighten-percentage($secondary-color-light-theme, 15)};
+  // --ifm-color-secondary-contrast-background: #{lighten-percentage($secondary-color-light-theme, 95)};
+  // --ifm-color-secondary-contrast-foreground: #{darken-percentage($secondary-color-light-theme, 95)};
+
+  // Success color and its variations
+  --ifm-color-success: #{$success-color-light-theme};
+  --ifm-color-success-dark: #{darken-percentage($success-color-light-theme, 5)};
+  --ifm-color-success-darker: #{darken-percentage(
+      $success-color-light-theme,
+      10
+    )};
+  --ifm-color-success-darkest: #{darken-percentage(
+      $success-color-light-theme,
+      15
+    )};
+  --ifm-color-success-light: #{lighten-percentage(
+      $success-color-light-theme,
+      10
+    )};
+  --ifm-color-success-lighter: #{lighten-percentage(
+      $success-color-light-theme,
+      20
+    )};
+  --ifm-color-success-lightest: #{lighten-percentage(
+      $success-color-light-theme,
+      30
+    )};
+  --ifm-color-success-contrast-background: #{lighten-percentage(
+      $success-color-light-theme,
+      95
+    )};
+  --ifm-color-success-contrast-foreground: #{darken-percentage(
+      $success-color-light-theme,
+      95
+    )};
+
+  // Info color and its variations
+  --ifm-color-info: #{$info-color-light-theme};
+  --ifm-color-info-dark: #{darken-percentage($info-color-light-theme, 5)};
+  --ifm-color-info-darker: #{darken-percentage($info-color-light-theme, 10)};
+  --ifm-color-info-darkest: #{darken-percentage($info-color-light-theme, 15)};
+  --ifm-color-info-light: #{lighten-percentage($info-color-light-theme, 5)};
+  --ifm-color-info-lighter: #{lighten-percentage($info-color-light-theme, 10)};
+  --ifm-color-info-lightest: #{lighten-percentage($info-color-light-theme, 20)};
+  --ifm-color-info-contrast-background: #{lighten-percentage(
+      $info-color-light-theme,
+      95
+    )};
+  --ifm-color-info-contrast-foreground: #{darken-percentage(
+      $info-color-light-theme,
+      95
+    )};
+
+  // Warning color and its variations
+  --ifm-color-warning: #{$warning-color-light-theme};
+  --ifm-color-warning-dark: #{darken-percentage($warning-color-light-theme, 5)};
+  --ifm-color-warning-darker: #{darken-percentage(
+      $warning-color-light-theme,
+      10
+    )};
+  --ifm-color-warning-darkest: #{darken-percentage(
+      $warning-color-light-theme,
+      15
+    )};
+  --ifm-color-warning-light: #{lighten-percentage(
+      $warning-color-light-theme,
+      5
+    )};
+  --ifm-color-warning-lighter: #{lighten-percentage(
+      $warning-color-light-theme,
+      10
+    )};
+  --ifm-color-warning-lightest: #{lighten-percentage(
+      $warning-color-light-theme,
+      20
+    )};
+  --ifm-color-warning-contrast-background: #{lighten-percentage(
+      $warning-color-light-theme,
+      95
+    )};
+  --ifm-color-warning-contrast-foreground: #{darken-percentage(
+      $warning-color-light-theme,
+      95
+    )};
+
+  // Danger color and its variations
+  --ifm-color-danger: #{$danger-color-light-theme};
+  --ifm-color-danger-dark: #{darken-percentage($danger-color-light-theme, 5)};
+  --ifm-color-danger-darker: #{darken-percentage($danger-color-light-theme, 10)};
+  --ifm-color-danger-darkest: #{darken-percentage(
+      $danger-color-light-theme,
+      15
+    )};
+  --ifm-color-danger-light: #{lighten-percentage($danger-color-light-theme, 5)};
+  --ifm-color-danger-lighter: #{lighten-percentage(
+      $danger-color-light-theme,
+      10
+    )};
+  --ifm-color-danger-lightest: #{lighten-percentage(
+      $danger-color-light-theme,
+      20
+    )};
+  --ifm-color-danger-contrast-background: #{lighten-percentage(
+      $danger-color-light-theme,
+      95
+    )};
+  --ifm-color-danger-contrast-foreground: #{darken-percentage(
+      $danger-color-light-theme,
+      95
+    )};
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-    // Primary color and its variations for dark mode
-    --ifm-color-primary: #{$primary-color-dark-theme};
-    --ifm-color-primary-dark: #{darken-percentage($primary-color-dark-theme, 10)};
-    --ifm-color-primary-darker: #{darken-percentage($primary-color-dark-theme, 15)};
-    --ifm-color-primary-darkest: #{darken-percentage($primary-color-dark-theme, 30)};
-    --ifm-color-primary-light: #{lighten-percentage($primary-color-dark-theme, 10)};
-    --ifm-color-primary-lighter: #{lighten-percentage($primary-color-dark-theme, 15)};
-    --ifm-color-primary-lightest: #{lighten-percentage($primary-color-dark-theme, 30)};
-    --ifm-color-primary-contrast-background: #{darken-percentage($primary-color-dark-theme, 90)};
-    --ifm-color-primary-contrast-foreground: #{lighten-percentage($primary-color-dark-theme, 90)};
-
-    // Secondary color and its variations
-    --ifm-color-secondary: #{$secondary-color-dark-theme};
-    --ifm-color-secondary-dark: #{darken-percentage($secondary-color-dark-theme, 5)};
-    --ifm-color-secondary-darker: #{darken-percentage($secondary-color-dark-theme, 10)};
-    --ifm-color-secondary-darkest: #{darken-percentage($secondary-color-dark-theme, 15)};
-    --ifm-color-secondary-light: #{lighten-percentage($secondary-color-dark-theme, 5)};
-    --ifm-color-secondary-lighter: #{lighten-percentage($secondary-color-dark-theme, 10)};
-    --ifm-color-secondary-lightest: #{lighten-percentage($secondary-color-dark-theme, 15)};
-    --ifm-color-secondary-contrast-background: #{darken-percentage($secondary-color-dark-theme, 90)};
-    --ifm-color-secondary-contrast-foreground: #{lighten-percentage($secondary-color-dark-theme, 90)};
-
-    // Success color for dark mode
-    --ifm-color-success: #{$success-color-dark-theme};
-    --ifm-color-success-dark: #{darken-percentage($success-color-dark-theme, 10)};
-    --ifm-color-success-darker: #{darken-percentage($success-color-dark-theme, 15)};
-    --ifm-color-success-darkest: #{darken-percentage($success-color-dark-theme, 35)};
-    --ifm-color-success-light: #{lighten-percentage($success-color-dark-theme, 10)};
-    --ifm-color-success-lighter: #{lighten-percentage($success-color-dark-theme, 15)};
-    --ifm-color-success-lightest: #{lighten-percentage($success-color-dark-theme, 30)};
-    --ifm-color-success-contrast-background: #{darken-percentage($success-color-dark-theme, 90)};
-    --ifm-color-success-contrast-foreground: #{lighten-percentage($success-color-dark-theme, 90)};
-    
-    // Info color and its variations
-    --ifm-color-info: #{$info-color-dark-theme};
-    --ifm-color-info-dark: #{darken-percentage($info-color-dark-theme, 10)};
-    --ifm-color-info-darker: #{darken-percentage($info-color-dark-theme, 15)};
-    --ifm-color-info-darkest: #{darken-percentage($info-color-dark-theme, 30)};
-    --ifm-color-info-light: #{lighten-percentage($info-color-dark-theme, 10)};
-    --ifm-color-info-lighter: #{lighten-percentage($info-color-dark-theme, 15)};
-    --ifm-color-info-lightest: #{lighten-percentage($info-color-dark-theme, 30)};
-    --ifm-color-info-contrast-background: #{darken-percentage($info-color-dark-theme, 90)};
-    --ifm-color-info-contrast-foreground: #{lighten-percentage($info-color-dark-theme, 90)};
-    
-    // Warning color and its variations
-    --ifm-color-warning: #{$warning-color-dark-theme};
-    --ifm-color-warning-dark: #{darken-percentage($warning-color-dark-theme, 10)};
-    --ifm-color-warning-darker: #{darken-percentage($warning-color-dark-theme, 15)};
-    --ifm-color-warning-darkest: #{darken-percentage($warning-color-dark-theme, 30)};
-    --ifm-color-warning-light: #{lighten-percentage($warning-color-dark-theme, 10)};
-    --ifm-color-warning-lighter: #{lighten-percentage($warning-color-dark-theme, 15)};
-    --ifm-color-warning-lightest: #{lighten-percentage($warning-color-dark-theme, 30)};
-    --ifm-color-warning-contrast-background: #{darken-percentage($warning-color-dark-theme, 90)};
-    --ifm-color-warning-contrast-foreground: #{lighten-percentage($warning-color-dark-theme, 90)};
-    
-    // Danger color and its variations
-    --ifm-color-danger: #{$danger-color-dark-theme};
-    --ifm-color-danger-dark: #{darken-percentage($danger-color-dark-theme, 10)};
-    --ifm-color-danger-darker: #{darken-percentage($danger-color-dark-theme, 15)};
-    --ifm-color-danger-darkest: #{darken-percentage($danger-color-dark-theme, 30)};
-    --ifm-color-danger-light: #{lighten-percentage($danger-color-dark-theme, 10)};
-    --ifm-color-danger-lighter: #{lighten-percentage($danger-color-dark-theme, 15)};
-    --ifm-color-danger-lightest: #{lighten-percentage($danger-color-dark-theme, 30)};
-    --ifm-color-danger-contrast-background: #{darken-percentage($danger-color-dark-theme, 90)};
-    --ifm-color-danger-contrast-foreground: #{lighten-percentage($danger-color-dark-theme, 90)};
+[data-theme="dark"] {
+  // Primary color and its variations for dark mode
+  --ifm-color-primary: #{$primary-color-dark-theme};
+  --ifm-color-primary-dark: #{darken-percentage($primary-color-dark-theme, 10)};
+  --ifm-color-primary-darker: #{darken-percentage(
+      $primary-color-dark-theme,
+      15
+    )};
+  --ifm-color-primary-darkest: #{darken-percentage(
+      $primary-color-dark-theme,
+      30
+    )};
+  --ifm-color-primary-light: #{lighten-percentage(
+      $primary-color-dark-theme,
+      10
+    )};
+  --ifm-color-primary-lighter: #{lighten-percentage(
+      $primary-color-dark-theme,
+      15
+    )};
+  --ifm-color-primary-lightest: #{lighten-percentage(
+      $primary-color-dark-theme,
+      30
+    )};
+  --ifm-color-primary-contrast-background: #{darken-percentage(
+      $primary-color-dark-theme,
+      90
+    )};
+  --ifm-color-primary-contrast-foreground: #{lighten-percentage(
+      $primary-color-dark-theme,
+      90
+    )};
+
+  // Secondary color and its variations
+  --ifm-color-secondary: #{$secondary-color-dark-theme};
+  --ifm-color-secondary-dark: #{darken-percentage(
+      $secondary-color-dark-theme,
+      5
+    )};
+  --ifm-color-secondary-darker: #{darken-percentage(
+      $secondary-color-dark-theme,
+      10
+    )};
+  --ifm-color-secondary-darkest: #{darken-percentage(
+      $secondary-color-dark-theme,
+      15
+    )};
+  --ifm-color-secondary-light: #{lighten-percentage(
+      $secondary-color-dark-theme,
+      5
+    )};
+  --ifm-color-secondary-lighter: #{lighten-percentage(
+      $secondary-color-dark-theme,
+      10
+    )};
+  --ifm-color-secondary-lightest: #{lighten-percentage(
+      $secondary-color-dark-theme,
+      15
+    )};
+  --ifm-color-secondary-contrast-background: #{darken-percentage(
+      $secondary-color-dark-theme,
+      90
+    )};
+  --ifm-color-secondary-contrast-foreground: #{lighten-percentage(
+      $secondary-color-dark-theme,
+      90
+    )};
+
+  // Success color for dark mode
+  --ifm-color-success: #{$success-color-dark-theme};
+  --ifm-color-success-dark: #{darken-percentage($success-color-dark-theme, 10)};
+  --ifm-color-success-darker: #{darken-percentage(
+      $success-color-dark-theme,
+      15
+    )};
+  --ifm-color-success-darkest: #{darken-percentage(
+      $success-color-dark-theme,
+      35
+    )};
+  --ifm-color-success-light: #{lighten-percentage(
+      $success-color-dark-theme,
+      10
+    )};
+  --ifm-color-success-lighter: #{lighten-percentage(
+      $success-color-dark-theme,
+      15
+    )};
+  --ifm-color-success-lightest: #{lighten-percentage(
+      $success-color-dark-theme,
+      30
+    )};
+  --ifm-color-success-contrast-background: #{darken-percentage(
+      $success-color-dark-theme,
+      90
+    )};
+  --ifm-color-success-contrast-foreground: #{lighten-percentage(
+      $success-color-dark-theme,
+      90
+    )};
+
+  // Info color and its variations
+  --ifm-color-info: #{$info-color-dark-theme};
+  --ifm-color-info-dark: #{darken-percentage($info-color-dark-theme, 10)};
+  --ifm-color-info-darker: #{darken-percentage($info-color-dark-theme, 15)};
+  --ifm-color-info-darkest: #{darken-percentage($info-color-dark-theme, 30)};
+  --ifm-color-info-light: #{lighten-percentage($info-color-dark-theme, 10)};
+  --ifm-color-info-lighter: #{lighten-percentage($info-color-dark-theme, 15)};
+  --ifm-color-info-lightest: #{lighten-percentage($info-color-dark-theme, 30)};
+  --ifm-color-info-contrast-background: #{darken-percentage(
+      $info-color-dark-theme,
+      90
+    )};
+  --ifm-color-info-contrast-foreground: #{lighten-percentage(
+      $info-color-dark-theme,
+      90
+    )};
+
+  // Warning color and its variations
+  --ifm-color-warning: #{$warning-color-dark-theme};
+  --ifm-color-warning-dark: #{darken-percentage($warning-color-dark-theme, 10)};
+  --ifm-color-warning-darker: #{darken-percentage(
+      $warning-color-dark-theme,
+      15
+    )};
+  --ifm-color-warning-darkest: #{darken-percentage(
+      $warning-color-dark-theme,
+      30
+    )};
+  --ifm-color-warning-light: #{lighten-percentage(
+      $warning-color-dark-theme,
+      10
+    )};
+  --ifm-color-warning-lighter: #{lighten-percentage(
+      $warning-color-dark-theme,
+      15
+    )};
+  --ifm-color-warning-lightest: #{lighten-percentage(
+      $warning-color-dark-theme,
+      30
+    )};
+  --ifm-color-warning-contrast-background: #{darken-percentage(
+      $warning-color-dark-theme,
+      90
+    )};
+  --ifm-color-warning-contrast-foreground: #{lighten-percentage(
+      $warning-color-dark-theme,
+      90
+    )};
+
+  // Danger color and its variations
+  --ifm-color-danger: #{$danger-color-dark-theme};
+  --ifm-color-danger-dark: #{darken-percentage($danger-color-dark-theme, 10)};
+  --ifm-color-danger-darker: #{darken-percentage($danger-color-dark-theme, 15)};
+  --ifm-color-danger-darkest: #{darken-percentage($danger-color-dark-theme, 30)};
+  --ifm-color-danger-light: #{lighten-percentage($danger-color-dark-theme, 10)};
+  --ifm-color-danger-lighter: #{lighten-percentage(
+      $danger-color-dark-theme,
+      15
+    )};
+  --ifm-color-danger-lightest: #{lighten-percentage(
+      $danger-color-dark-theme,
+      30
+    )};
+  --ifm-color-danger-contrast-background: #{darken-percentage(
+      $danger-color-dark-theme,
+      90
+    )};
+  --ifm-color-danger-contrast-foreground: #{lighten-percentage(
+      $danger-color-dark-theme,
+      90
+    )};
 }
 
 .navbar-github-link::before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;
@@ -187,57 +376,63 @@ $secondary-color-dark-theme: #afafaf;
 
 // Custom styles for resource landing page
 .resourceLandingPage {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 80px;
-    width: min-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 80px;
+  width: min-content;
 }
 
 // Styles for preview components
 .preview {
-    position: relative;
-    margin-top: 2rem;
-    // margin-bottom: 2rem;
-    display: flex;
-    justify-content: center;
+  position: relative;
+  margin-top: 2rem;
+  // margin-bottom: 2rem;
+  display: flex;
+  justify-content: center;
 
-    &::before {
-        content: 'Preview';
-        position: absolute;
-        top: -0.75rem;
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 0 0.5rem; 
-        background-color: var(--ifm-background-surface-color);
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: var(--ifm-color-emphasis-700);
-        z-index: 1;
-    }
+  &::before {
+    content: "Preview";
+    position: absolute;
+    top: -0.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0 0.5rem;
+    background-color: var(--ifm-background-surface-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--ifm-color-emphasis-700);
+    z-index: 1;
+  }
 
-    .container {
-        border: 1px solid var(--ifm-color-emphasis-300);
-        border-radius: 8px;
-        // padding-bottom: 1.5rem;
-        padding-top: 1.5rem;
-        width: fit-content;
-        position: relative;
-    }
+  .container {
+    border: 1px solid var(--ifm-color-emphasis-300);
+    border-radius: 8px;
+    // padding-bottom: 1.5rem;
+    padding-top: 1.5rem;
+    width: fit-content;
+    position: relative;
+  }
 }
 
-[data-theme='dark'] {
-    .preview {
-        &::before {
-            background-color: var(--ifm-background-color);
-        }
+[data-theme="dark"] {
+  .preview {
+    &::before {
+      background-color: var(--ifm-background-color);
     }
+  }
 }
 
-// Sidebar logo styles
-$sidebar-logo-icon-size: 20px;
+// Title logo styles - unified system for sidebar and navbar logos
+$title-logo-icon-size: 20px;
 
-@mixin sidebar-logo-link {
+// Mixin for adding logo icons to sidebar items
+@mixin title-logo-sidebar {
+  // Only target the immediate menu link for the matching item, not its children
+  > .menu__link,
+  > .menu__list-item-collapsible > .menu__link,
+  > .menu__list-item-collapsible > a,
+  > div > a {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -245,53 +440,75 @@ $sidebar-logo-icon-size: 20px;
     min-width: 0;
 
     &::before {
-        content: '';
-        display: inline-block;
-        width: $sidebar-logo-icon-size;
-        height: $sidebar-logo-icon-size;
-        background-image: var(--sidebar-logo-image, none);
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        flex-shrink: 0;
+      content: "";
+      display: inline-block;
+      width: $title-logo-icon-size;
+      height: $title-logo-icon-size;
+      background-image: var(--title-logo-image, none);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      flex-shrink: 0;
     }
+  }
 }
 
-.sidebar-logo,
-[class*='sidebar-logo-'] {
-    // Only target the immediate menu link for the matching item, not its children
-    > .menu__link,
-    > .menu__list-item-collapsible > .menu__link,
-    > .menu__list-item-collapsible > a,
-    > div > a {
-        @include sidebar-logo-link;
-    }
+// Mixin for adding logo icons to navbar items
+@mixin title-logo-navbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &::before {
+    content: "";
+    display: inline-block;
+    width: $title-logo-icon-size;
+    height: $title-logo-icon-size;
+    background-image: var(--title-logo-image, none);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    flex-shrink: 0;
+  }
 }
 
-.sidebar-logo-slidev {
-    --sidebar-logo-image: url(../../static/img/sidebar/slidev.svg);
+// Apply sidebar logo styles to elements with title-logo-sidebar-* classes
+[class*="title-logo-sidebar-"] {
+  @include title-logo-sidebar;
 }
 
-.sidebar-logo-docusaurus {
-    --sidebar-logo-image: url(../../static/img/sidebar/docusaurus.svg);
+// Apply navbar logo styles to elements with title-logo-navbar-* classes
+[class*="title-logo-navbar-"] {
+  @include title-logo-navbar;
 }
 
-.sidebar-logo-sp-days {
-    --sidebar-logo-image: url(../../static/img/sp-days-logo-color-light.svg);
+// Legacy support - map old sidebar-logo-* classes to new system
+.sidebar-logo,
+[class*="sidebar-logo-"] {
+  @include title-logo-sidebar;
 }
 
-[data-theme='dark'] {
-    .sidebar-logo-sp-days {
-        --sidebar-logo-image: url(../../static/img/sp-days-logo-color-dark.svg);
-    }
+// Logo definitions - shared between sidebar and navbar
+// Slidev logo
+.title-logo-sidebar-slidev,
+.title-logo-navbar-slidev {
+  --title-logo-image: url(../../static/img/sidebar/slidev.svg);
 }
 
-.sidebar-logo-sp-days-plugin {
-    --sidebar-logo-image: url(../../static/img/sp-days-plugin-color-light.svg);
+// Docusaurus logo
+.title-logo-sidebar-docusaurus,
+.title-logo-navbar-docusaurus {
+  --title-logo-image: url(../../static/img/sidebar/docusaurus.svg);
 }
 
-[data-theme='dark'] {
-    .sidebar-logo-sp-days-plugin {
-        --sidebar-logo-image: url(../../static/img/sp-days-plugin-color-dark.svg);
-    }
-}
+// SP Days logo (with theme support)
+.title-logo-sidebar-sp-days,
+.title-logo-navbar-sp-days {
+  --title-logo-image: url(../../static/img/sp-days-logo-color-light.svg);
+}
+
+// SP Days Plugin logo (with theme support)
+.title-logo-sidebar-sp-days-plugin,
+.title-logo-navbar-sp-days-plugin {
+  --title-logo-image: url(../../static/img/sp-days-plugin-color-light.svg);
+}