jekyll-theme-zer0 0.22.5 → 0.22.20

data/_layouts/setup.html

@@ -0,0 +1,73 @@
+---
+layout: root
+---
+<!--
+  ===================================================================
+  SETUP LAYOUT - Onboarding and configuration pages
+  ===================================================================
+
+  File: setup.html
+  Path: _layouts/setup.html
+  Inherits: root.html
+  Purpose: Clean single-column layout for setup, onboarding, and
+           configuration guide pages. No sidebar clutter.
+
+  Features:
+  - Centered, readable content column
+  - Optional progress indicator via page.setup_step frontmatter
+  - Setup banner when site is unconfigured
+  - Minimal chrome — lets the user focus on getting configured
+
+  Usage:
+    layout: setup
+    setup_step: 2        # optional, highlights step in progress bar
+    setup_total: 4       # optional, total number of steps
+  ===================================================================
+-->
+
+{% include components/setup-check.html %}
+
+<div class="container-lg py-4">
+  <div class="row justify-content-center">
+    <div class="col-lg-9">
+
+      {% if site_needs_setup %}
+      <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
+        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+        <div>
+          <strong>Setup required.</strong>
+          Your <code>_config.yml</code> still has default values.
+          Follow the instructions on this page or see the
+          <a href="{{ '/404.html' | relative_url }}" class="alert-link">setup guide</a>.
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.setup_step and page.setup_total %}
+      <!-- Progress indicator -->
+      <div class="mb-4">
+        <div class="d-flex justify-content-between small text-body-secondary mb-1">
+          <span>Step {{ page.setup_step }} of {{ page.setup_total }}</span>
+          <span>{{ page.setup_step | times: 100 | divided_by: page.setup_total }}% complete</span>
+        </div>
+        <div class="progress" style="height: 6px;">
+          <div class="progress-bar bg-primary"
+               role="progressbar"
+               style="width: {{ page.setup_step | times: 100 | divided_by: page.setup_total }}%"
+               aria-valuenow="{{ page.setup_step }}"
+               aria-valuemin="0"
+               aria-valuemax="{{ page.setup_total }}">
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
+      {% if page.title %}
+      <h1 class="mb-3">{{ page.title }}</h1>
+      {% endif %}
+
+      {{ content }}
+
+    </div>
+  </div>
+</div>

data/_plugins/preview_image_generator.rb

@@ -50,23 +50,31 @@ module Jekyll
       preview = doc.data['preview']
       return false if preview.nil? || preview.to_s.strip.empty?
       
+      # Reject non-path values (text descriptions used as preview)
+      return false unless preview.match?(/\.(png|jpe?g|gif|svg|webp)$/i) || preview.start_with?('http')
+      
       # Check if the preview file actually exists
       site = doc.site
       config = self.config(site)
       
+      # External URL — assume it exists
+      return true if preview.start_with?('http')
+      
       # Normalize the preview path using assets_prefix
       normalized_preview = normalize_preview_path(preview, config)
       
-      # Build the full path
-      preview_path = if normalized_preview.start_with?('/')
-                       File.join(site.source, normalized_preview.sub(/^\//, ''))
-                     elsif normalized_preview.start_with?('http')
-                       return true  # External URL, assume it exists
-                     else
-                       File.join(site.source, config['output_dir'], normalized_preview)
-                     end
+      # Build candidate file paths to check
+      candidates = []
+      if normalized_preview.start_with?('/')
+        candidates << File.join(site.source, normalized_preview.sub(/^\//, ''))
+        candidates << File.join(site.source, 'assets', normalized_preview.sub(/^\//, ''))
+      else
+        candidates << File.join(site.source, 'assets', normalized_preview)
+        candidates << File.join(site.source, normalized_preview)
+        candidates << File.join(site.source, config['output_dir'], normalized_preview)
+      end
       
-      File.exist?(preview_path)
+      candidates.any? { |path| File.exist?(path) }
     end
 
     # Normalize a preview path by adding assets_prefix if needed
@@ -90,6 +98,9 @@ module Jekyll
       preview = doc.data['preview']
       return nil if preview.nil? || preview.to_s.strip.empty?
       
+      # Reject non-path values
+      return nil unless preview.match?(/\.(png|jpe?g|gif|svg|webp)$/i) || preview.start_with?('http')
+      
       site = doc.site
       config = self.config(site)
       
@@ -162,7 +173,9 @@ module Jekyll
       # Handle both Hash (from assign) and Document objects
       if doc.is_a?(Hash)
         preview = doc['preview']
-        !preview.nil? && !preview.to_s.strip.empty?
+        return false if preview.nil? || preview.to_s.strip.empty?
+        # Only consider values that look like image paths or URLs
+        preview.to_s.match?(/\.(png|jpe?g|gif|svg|webp)$/i) || preview.to_s.start_with?('http')
       else
         PreviewImageGenerator.has_preview?(doc)
       end
@@ -176,12 +189,13 @@ module Jekyll
       if doc.is_a?(Hash)
         preview = doc['preview']
         return nil if preview.nil? || preview.to_s.strip.empty?
+        return nil unless preview.to_s.match?(/\.(png|jpe?g|gif|svg|webp)$/i) || preview.to_s.start_with?('http')
+        
+        return preview if preview.start_with?('/') || preview.start_with?('http')
         
         # Get config from context if available
         site_config = @context.registers[:site].config['preview_images'] || {}
         output_dir = site_config['output_dir'] || 'assets/images/previews'
-        
-        return preview if preview.start_with?('/') || preview.start_with?('http')
         "#{output_dir}/#{preview}"
       else
         PreviewImageGenerator.preview_path(doc)

data/_sass/core/_navbar.scss

@@ -367,6 +367,12 @@
     box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.175);
     border: 1px solid var(--bs-border-color-translucent);
   }
+
+  // Right-align dropdowns near the end of the nav to prevent overflow clipping
+  .nav-hover-dropdown > .dropdown-menu.dropdown-menu-end {
+    left: auto;
+    right: 0;
+  }
   
   // Smooth hover reveal animation
   .nav-hover-dropdown .dropdown-menu {
@@ -743,7 +749,7 @@
 }
 
 // -----------------------------------------------------------------------------
-// Info Section Modal Tabs
+// Info Section Offcanvas Tabs
 // -----------------------------------------------------------------------------
 
 #info-section {
@@ -775,7 +781,7 @@
     padding-top: 1rem;
   }
 
-  // Theme switcher (halfmoon): avoid stretched static menu inside scrollable modal; Popper uses strategy fixed from markup
+  // Theme switcher (halfmoon): keep dropdown positioned within offcanvas panel
   .bd-theme-dropdown {
     position: relative;
   }

data/_sass/custom.scss

@@ -40,20 +40,33 @@ html, body {
     min-height: 50vh;
 }
 
-// Landing layout: stable hero media slot (ratio) + no reliance on scroll script for first paint
+// Landing layout: stable hero media slot (CSS aspect-ratio) + smooth image fade-in.
+// The inline `aspect-ratio` + `max-width` on .landing-hero-media in landing.html
+// reserve the box size before this stylesheet loads — these rules are progressive
+// enhancement on top of that.
 .landing-hero {
     .landing-hero-media {
         max-width: min(100%, 28rem);
+        // Subtle background while the image streams in so the box isn't a flash of
+        // empty colored space against the hero gradient.
+        background-color: rgba(255, 255, 255, 0.06);
     }
 
-    .landing-hero-media.ratio > img {
+    .landing-hero-img {
         object-position: center;
+        opacity: 0;
+        transition: opacity 0.45s ease-out;
+
+        &.is-loaded {
+            opacity: 1;
+        }
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .landing-hero .landing-hero-media {
+    .landing-hero .landing-hero-img {
         transition: none;
+        opacity: 1;
     }
 }
 
@@ -170,9 +183,51 @@ html, body {
     height: 56px;
 }
 
-// Cookie banner: above fixed navbar (1030), below offcanvas (1045) so drawers cover it
+// Cookie banner: above fixed navbar (1030), below offcanvas (1045) so drawers cover it.
+// Show/hide is driven by:
+//   - `[hidden]` attribute on initial render and after dismissal (no layout cost)
+//   - `.cookie-banner-visible` class to slide / fade into view
 .cookie-consent-banner {
     z-index: 1036;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    // Off-screen + transparent until JS adds .cookie-banner-visible.
+    // Using `transform` + `opacity` (and NOT `display: none`) keeps the transition smooth.
+    opacity: 0;
+    transform: translateY(100%);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform, opacity;
+
+    // The `hidden` attribute (set in markup + after dismissal) removes the banner
+    // from the layout entirely so it can't intercept clicks while invisible.
+    &[hidden] {
+        display: none !important;
+    }
+
+    &.cookie-banner-visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    @media (max-width: 768px) {
+        .btn {
+            width: 100%;
+            margin-bottom: 0.5rem;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .cookie-consent-banner {
+        transition: none;
+    }
 }
 
 // Active TOC link highlighting
@@ -182,10 +237,7 @@ html, body {
     border-left-color: var(--bs-primary) !important;
 }
 
-// Smooth scroll behavior
-html {
-    scroll-behavior: smooth;
-}
+// Smooth scroll behavior is declared once below (see "Smooth Scroll Enhancement")
 
 // Category active state
 .btn-toggle-nav a.active {
@@ -476,7 +528,8 @@ img {
 // ==============================================================================
 
 // Hero Section Enhancements
-.bg-primary {
+// NOTE: Exclude .zer0-bg-hero so skin-specific gradients from _backgrounds.scss take precedence
+.bg-primary:not(.zer0-bg-hero) {
   position: relative;
   overflow: hidden;
   
@@ -639,8 +692,10 @@ html {
 }
 
 // Section Spacing Improvements
+// Ensure anchored elements clear the fixed navbar when scrolled to
 section,
-.py-5 {
+.py-5,
+[id] {
   scroll-margin-top: 80px;
 }
 

data/_sass/theme/_background-mixins.scss

@@ -0,0 +1,95 @@
+// ==========================================================================
+// Background Mixins — reusable fffuel-style layered backgrounds
+// ==========================================================================
+// Usage:
+//   @include zer0-bg-gradient;     → applies gradient layer
+//   @include zer0-bg-noise;        → applies noise texture overlay
+//   @include zer0-bg-pattern;      → applies pattern overlay
+//   @include zer0-bg-layered;      → combines gradient + noise
+// ==========================================================================
+
+/// Gradient background layer (hero / header areas)
+@mixin zer0-bg-gradient {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--zer0-bg-gradient);
+    background-size: cover;
+    background-position: center;
+    opacity: var(--zer0-bg-gradient-opacity, 0.6);
+    mix-blend-mode: var(--zer0-bg-blend, overlay);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+/// Noise texture overlay (body / footer areas)
+@mixin zer0-bg-noise {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--zer0-bg-noise);
+    background-repeat: repeat;
+    background-size: 300px 300px;
+    opacity: var(--zer0-bg-texture-opacity, 0.04);
+    mix-blend-mode: var(--zer0-bg-blend, overlay);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+/// Pattern overlay (surface / card areas)
+@mixin zer0-bg-pattern {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--zer0-bg-pattern);
+    background-repeat: repeat;
+    background-size: var(--zer0-bg-pattern-size, 60px 60px);
+    opacity: var(--zer0-bg-pattern-opacity, 0.08);
+    mix-blend-mode: var(--zer0-bg-blend, overlay);
+    pointer-events: none;
+    z-index: 0;
+  }
+}
+
+/// Layered: gradient + noise (for hero sections with depth)
+@mixin zer0-bg-layered {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--zer0-bg-gradient);
+    background-size: cover;
+    background-position: center;
+    opacity: var(--zer0-bg-gradient-opacity, 0.6);
+    mix-blend-mode: var(--zer0-bg-blend, overlay);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--zer0-bg-noise);
+    background-repeat: repeat;
+    background-size: 300px 300px;
+    opacity: var(--zer0-bg-texture-opacity, 0.04);
+    pointer-events: none;
+    z-index: 0;
+  }
+}

data/_sass/theme/_backgrounds.scss

@@ -0,0 +1,156 @@
+// ==========================================================================
+// Backgrounds — fffuel-style SVG background system for zer0-mistakes theme
+// ==========================================================================
+// Each skin maps to gradient, pattern, and noise SVGs.
+// CSS custom properties drive the layering; mixins in _background-mixins.scss
+// apply them to layout zones.
+// ==========================================================================
+
+@import "background-mixins";
+
+// --------------------------------------------------------------------------
+// Default custom properties (no skin / fallback)
+// --------------------------------------------------------------------------
+:root {
+  --zer0-bg-gradient: none;
+  --zer0-bg-pattern: none;
+  --zer0-bg-noise: none;
+  --zer0-bg-gradient-opacity: 0.6;
+  --zer0-bg-texture-opacity: 0.04;
+  --zer0-bg-pattern-opacity: 0.08;
+  --zer0-bg-blend: overlay;
+  --zer0-bg-pattern-size: 60px 60px;
+  --zer0-bg-enabled: 1; // 1 = on, 0 = off
+}
+
+// --------------------------------------------------------------------------
+// Per-skin custom properties
+// Use #{} interpolation so legacy sass-converter passes url() through as-is.
+// Paths are relative to assets/css/main.css so they resolve correctly under
+// any baseurl (e.g. /zer0-pages-remote/ on GitHub Pages subdirectory deploys).
+// --------------------------------------------------------------------------
+
+[data-theme-skin="air"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/air.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/air.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/air.svg')"};
+  --zer0-bg-pattern-size: 50px 50px;
+}
+
+[data-theme-skin="aqua"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/aqua.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/aqua.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/aqua.svg')"};
+  --zer0-bg-pattern-size: 48px 48px;
+}
+
+[data-theme-skin="contrast"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/contrast.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/contrast.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/contrast.svg')"};
+  --zer0-bg-pattern-size: 40px 40px;
+}
+
+[data-theme-skin="dark"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/dark.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/dark.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/dark.svg')"};
+  --zer0-bg-pattern-size: 60px 60px;
+}
+
+[data-theme-skin="dirt"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/dirt.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/dirt.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/dirt.svg')"};
+  --zer0-bg-pattern-size: 50px 50px;
+}
+
+[data-theme-skin="neon"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/neon.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/neon.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/neon.svg')"};
+  --zer0-bg-pattern-size: 48px 48px;
+}
+
+[data-theme-skin="mint"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/mint.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/mint.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/mint.svg')"};
+  --zer0-bg-pattern-size: 50px 50px;
+}
+
+[data-theme-skin="plum"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/plum.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/plum.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/plum.svg')"};
+  --zer0-bg-pattern-size: 55px 55px;
+}
+
+[data-theme-skin="sunrise"] {
+  --zer0-bg-gradient: #{"url('../backgrounds/gradients/sunrise.svg')"};
+  --zer0-bg-pattern: #{"url('../backgrounds/patterns/sunrise.svg')"};
+  --zer0-bg-noise: #{"url('../backgrounds/noise/sunrise.svg')"};
+  --zer0-bg-pattern-size: 50px 50px;
+}
+
+// --------------------------------------------------------------------------
+// Utility classes — apply these to layout zones
+// --------------------------------------------------------------------------
+
+.zer0-bg-hero {
+  @include zer0-bg-layered;
+
+  > * { position: relative; z-index: 1; }
+}
+
+.zer0-bg-body {
+  @include zer0-bg-noise;
+
+  // Elevate children above the ::before / ::after pseudo-element backgrounds,
+  // but exclude fixed-position, offcanvas, and modal elements whose
+  // positioning must not be overridden.
+  > *:not(.fixed-top):not(.offcanvas):not(.modal) { position: relative; z-index: 1; }
+}
+
+.zer0-bg-surface {
+  @include zer0-bg-pattern;
+
+  > * { position: relative; z-index: 1; }
+}
+
+.zer0-bg-footer {
+  @include zer0-bg-noise;
+
+  > * { position: relative; z-index: 1; }
+}
+
+// --------------------------------------------------------------------------
+// Accessibility: respect reduced-motion
+// --------------------------------------------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .zer0-bg-hero,
+  .zer0-bg-body,
+  .zer0-bg-surface,
+  .zer0-bg-footer {
+    &::before,
+    &::after {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
+}
+
+// --------------------------------------------------------------------------
+// Kill switch: when backgrounds are disabled
+// --------------------------------------------------------------------------
+[data-zer0-bg="off"] {
+  .zer0-bg-hero,
+  .zer0-bg-body,
+  .zer0-bg-surface,
+  .zer0-bg-footer {
+    &::before,
+    &::after {
+      display: none !important;
+    }
+  }
+}

data/_sass/theme/_color-modes.scss

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

data/assets/backgrounds/gradients/air.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#e8f4f8"/>
+      <stop offset="50%" stop-color="#b8d4e3"/>
+      <stop offset="100%" stop-color="#6fa8dc"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.006" numOctaves="4" seed="2"/>
+      <feDisplacementMap in="SourceGraphic" scale="60"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.5"/>
+</svg>

data/assets/backgrounds/gradients/aqua.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0077b6"/>
+      <stop offset="50%" stop-color="#00b4d8"/>
+      <stop offset="100%" stop-color="#90e0ef"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.008" numOctaves="4" seed="5"/>
+      <feDisplacementMap in="SourceGraphic" scale="70"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.5"/>
+</svg>

data/assets/backgrounds/gradients/contrast.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#111111"/>
+      <stop offset="50%" stop-color="#333333"/>
+      <stop offset="100%" stop-color="#ffcc00"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="3" seed="8"/>
+      <feDisplacementMap in="SourceGraphic" scale="50"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.4"/>
+</svg>

data/assets/backgrounds/gradients/dark.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e"/>
+      <stop offset="50%" stop-color="#16213e"/>
+      <stop offset="100%" stop-color="#0f3460"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.007" numOctaves="4" seed="12"/>
+      <feDisplacementMap in="SourceGraphic" scale="55"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.5"/>
+</svg>

data/assets/backgrounds/gradients/dirt.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5c4033"/>
+      <stop offset="50%" stop-color="#8b6914"/>
+      <stop offset="100%" stop-color="#d4a574"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.009" numOctaves="4" seed="20"/>
+      <feDisplacementMap in="SourceGraphic" scale="65"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.5"/>
+</svg>

data/assets/backgrounds/gradients/mint.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2d6a4f"/>
+      <stop offset="50%" stop-color="#52b788"/>
+      <stop offset="100%" stop-color="#95d5b2"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.007" numOctaves="4" seed="30"/>
+      <feDisplacementMap in="SourceGraphic" scale="60"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.5"/>
+</svg>