jekyll-theme-zer0 0.22.5 → 0.22.19

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

@@ -743,7 +743,7 @@
 }
 
 // -----------------------------------------------------------------------------
-// Info Section Modal Tabs
+// Info Section Offcanvas Tabs
 // -----------------------------------------------------------------------------
 
 #info-section {
@@ -775,7 +775,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

@@ -182,10 +182,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 +473,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 +637,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>

data/assets/backgrounds/gradients/neon.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="#ff006e"/>
+      <stop offset="50%" stop-color="#8338ec"/>
+      <stop offset="100%" stop-color="#3a86ff"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.006" numOctaves="5" seed="42"/>
+      <feDisplacementMap in="SourceGraphic" scale="80"/>
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#g1)"/>
+  <rect width="100%" height="100%" fill="url(#g1)" filter="url(#f1)" opacity="0.6"/>
+</svg>

data/assets/backgrounds/gradients/plum.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="#4a0e4e"/>
+      <stop offset="50%" stop-color="#812f85"/>
+      <stop offset="100%" stop-color="#c77dff"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.006" numOctaves="4" seed="15"/>
+      <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/sunrise.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="#ff6b35"/>
+      <stop offset="50%" stop-color="#f7c59f"/>
+      <stop offset="100%" stop-color="#efefd0"/>
+    </linearGradient>
+    <filter id="f1">
+      <feTurbulence type="fractalNoise" baseFrequency="0.008" numOctaves="4" seed="7"/>
+      <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/noise/air.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.04"/>
+</svg>

data/assets/backgrounds/noise/aqua.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.05"/>
+</svg>

data/assets/backgrounds/noise/contrast.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="4" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.06"/>
+</svg>

data/assets/backgrounds/noise/dark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.04"/>
+</svg>

data/assets/backgrounds/noise/dirt.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="4" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.06"/>
+</svg>

data/assets/backgrounds/noise/mint.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.04"/>
+</svg>

data/assets/backgrounds/noise/neon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.05"/>
+</svg>

data/assets/backgrounds/noise/plum.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.05"/>
+</svg>

data/assets/backgrounds/noise/sunrise.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <filter id="n1">
+    <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
+    <feColorMatrix type="saturate" values="0"/>
+  </filter>
+  <rect width="100%" height="100%" fill="transparent"/>
+  <rect width="100%" height="100%" filter="url(#n1)" opacity="0.05"/>
+</svg>

data/assets/backgrounds/patterns/air.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+  <circle cx="30" cy="30" r="8" fill="none" stroke="#6fa8dc" stroke-width="0.5" opacity="0.3"/>
+  <circle cx="0" cy="0" r="5" fill="none" stroke="#b8d4e3" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="60" cy="60" r="5" fill="none" stroke="#b8d4e3" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="60" cy="0" r="5" fill="none" stroke="#b8d4e3" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="0" cy="60" r="5" fill="none" stroke="#b8d4e3" stroke-width="0.5" opacity="0.2"/>
+</svg>

data/assets/backgrounds/patterns/aqua.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+  <circle cx="30" cy="30" r="8" fill="none" stroke="#00b4d8" stroke-width="0.5" opacity="0.3"/>
+  <circle cx="0" cy="0" r="5" fill="none" stroke="#90e0ef" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="60" cy="60" r="5" fill="none" stroke="#90e0ef" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="60" cy="0" r="5" fill="none" stroke="#90e0ef" stroke-width="0.5" opacity="0.2"/>
+  <circle cx="0" cy="60" r="5" fill="none" stroke="#90e0ef" stroke-width="0.5" opacity="0.2"/>
+</svg>