Skip to content

theme-architecture-plan.md

Latest commit

 

History

History
278 lines (235 loc) · 9.03 KB

theme-architecture-plan.md

File metadata and controls

278 lines (235 loc) · 9.03 KB

Theme Architecture Plan

Transforming Cyber-Synth to Analog-Digital

Current Theme Structure Analysis

The existing cyber-synth theme has a solid Hugo foundation but needs complete visual transformation:

themes/cyber-synth/
├── assets/
│   ├── css/
│   │   ├── main.css           # Core styles - MAJOR OVERHAUL
│   │   ├── hacker.css         # DELETE - Replace with studio.css
│   │   └── themes/
│   │       ├── neon-purple.css # REPLACE with vintage-studio.css
│   │       └── synthwave.css   # REPLACE with warm-professional.css
│   └── js/
│       └── main.js            # MAJOR OVERHAUL - Remove glitch effects
├── layouts/
│   ├── _default/
│   │   ├── baseof.html        # MODERATE CHANGES - Remove effects
│   │   ├── list.html          # MINOR UPDATES - New styling
│   │   └── single.html        # MINOR UPDATES - New styling
│   └── partials/
│       ├── header.html        # MODERATE CHANGES
│       ├── footer.html        # MINOR UPDATES
│       └── pagination.html    # MINOR UPDATES
└── static/
    ├── fonts/                 # REPLACE - New font files
    ├── css/                   # Mirror of assets/css
    └── js/                    # Mirror of assets/js

New Theme Architecture: "Analog-Digital"

File Transformation Map

Current File New File Transformation Level Purpose
main.css main.css Complete Rewrite All new color system, typography, components
themes/neon-purple.css themes/vintage-studio.css Complete Rewrite New color palette implementation
themes/synthwave.css themes/warm-professional.css Complete Rewrite Alternative color scheme
hacker.css studio-equipment.css Complete Rewrite Music equipment styling modes
main.js main.js Major Overhaul Remove glitch, add smooth interactions
baseof.html baseof.html Moderate Changes Remove cyberpunk elements
Font files New font files Complete Replacement Inter, Playfair Display fonts

New CSS Architecture

assets/css/
├── main.css                   # Core framework (NEW)
├── components/
│   ├── vinyl-player.css       # Vinyl record inspired elements (NEW)
│   ├── studio-panels.css      # Equipment panel styling (NEW)
│   ├── vu-meters.css          # Progress bars and indicators (NEW)
│   └── code-blocks.css        # Technical content styling (NEW)
├── themes/
│   ├── vintage-studio.css     # Primary theme (NEW)
│   ├── warm-professional.css  # Alternative theme (NEW)
│   └── minimal-hi-fi.css      # Clean variant (NEW)
├── layout/
│   ├── grid-system.css        # Professional layout system (NEW)
│   ├── typography.css         # Font system implementation (NEW)
│   └── responsive.css         # Mobile-first responsive (NEW)
└── effects/
    ├── subtle-animations.css  # Professional transitions (NEW)
    ├── audio-inspired.css     # Music equipment effects (NEW)
    └── multilingual.css       # RTL and language support (NEW)

Component Design System

1. Navigation System

  • Desktop: Horizontal studio console inspired layout
  • Mobile: Slide-out panel resembling equipment rack
  • Typography: Inter font, professional spacing
  • Interactions: Smooth hover states with brass accent reveals

2. Content Cards

.analog-post-card {
  background: Warm charcoal with subtle texture
  border: 1px solid muted metallic border
  border-radius: 8px (soft professional)
  box-shadow: Subtle depth, no neon glow
}

3. Typography Hierarchy

/* Display Text */
h1, h2 { font-family: 'Playfair Display', serif; }

/* Body & UI */
body, nav, ui { font-family: 'Inter', sans-serif; }

/* Code */
code, pre { font-family: 'JetBrains Mono', monospace; }

4. Color System Implementation

:root {
  /* Professional Base */
  --color-navy-deep: #1a2332;
  --color-charcoal-warm: #2d3748;
  --color-black-rich: #0f1419;

  /* Warm Accents */
  --color-gold-vintage: #d4af37;
  --color-copper-glow: #c9772e;
  --color-sage-success: #68d391;

  /* Supporting */
  --color-white-warm: #f7fafc;
  --color-blue-muted: #4a5568;
  --color-wood-tone: #8b4513;
  --color-chrome-silver: #a0aec0;
}

Music-Inspired Components

1. Vinyl Player Profile

  • Circular profile images with concentric rings
  • Subtle rotation animation on hover
  • Center hole detail for authenticity
  • Record label typography for names/titles

2. VU Meter Progress Bars

.vu-meter-progress {
  background: Studio equipment black
  accent-color: Vintage gold to sage green gradient
  needle-style: Chrome silver indicator
  scale-marks: Subtle measurement indicators
}

3. Studio Panel Sections

.studio-panel {
  background: Brushed metal texture
  border: Subtle beveled edges
  controls: Brass knob-style interactive elements
  labels: Clean technical typography
}

4. Equipment Rack Layout

  • Content sections styled as equipment rack units
  • Consistent height modules (1U, 2U, 3U equivalent)
  • Professional cable management inspired spacing
  • Subtle metal texture backgrounds

Layout System Transformation

Grid System

.analog-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 0;
}

.analog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 5vw, 3rem);
}

Content Areas

  • Header: Studio console inspired navigation
  • Main: Focus on readability and technical content
  • Sidebar: Music-related widgets and personal touches
  • Footer: Minimal, professional contact information

Technical Implementation Strategy

Phase 1: Core Framework

  1. Replace color system completely
  2. Implement new typography scale
  3. Remove all cyberpunk effects (scan lines, glitch, CRT)
  4. Create basic component structure

Phase 2: Music-Inspired Components

  1. Develop vinyl player elements
  2. Create VU meter progress indicators
  3. Implement studio panel styling
  4. Add subtle audio equipment animations

Phase 3: Content Optimization

  1. Enhanced code block styling
  2. Technical documentation layouts
  3. Multilingual content support
  4. Responsive refinements

Phase 4: Interactive Elements

  1. Smooth professional animations
  2. Audio equipment inspired hover states
  3. Music integration features
  4. Performance optimization

Configuration Updates

theme.toml Changes

[params]
  # Replace cyberpunk options
  themeVariant = "vintage-studio"  # vintage-studio, warm-professional, minimal-hi-fi
  studioMode = true                # Enhanced audio equipment styling
  vinylEffects = true             # Subtle rotation and record-inspired elements

  # New professional options
  professionalLayout = true       # Clean, focused layouts
  multilingual = true            # Enhanced language support
  musicIntegration = true        # Music-related widgets

  # Remove cyberpunk options
  # hacker = false              # DELETE this option
  # centerTheme = false         # Replace with professionalLayout
  # fullWidthTheme = false      # Replace with responsive system

Font Integration Plan

Required Font Files

static/fonts/
├── Inter-Variable.woff2        # Primary UI font
├── Inter-Regular.woff2         # Fallback
├── Inter-Medium.woff2          # Emphasis
├── Inter-SemiBold.woff2        # Headings
├── PlayfairDisplay-Regular.woff2 # Display serif
├── PlayfairDisplay-Bold.woff2   # Bold display
└── JetBrainsMono-Regular.woff2  # Code (keep existing)

Font Loading Strategy

/* Critical fonts loaded first */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
}

Performance Considerations

Optimization Strategy

  1. Critical CSS: Inline essential styles for above-fold content
  2. Font Loading: Use font-display: swap for smooth loading
  3. Image Optimization: WebP format with fallbacks
  4. JavaScript: Minimal, progressive enhancement only
  5. CSS Architecture: Modular, tree-shakeable styles

Bundle Size Targets

  • CSS: Under 50KB compressed (vs current 80KB+)
  • JavaScript: Under 10KB compressed (vs current 25KB+)
  • Fonts: Under 200KB total (3 font families)
  • Images: WebP with appropriate sizing

This architecture plan provides a complete roadmap for transforming the cyberpunk theme into a sophisticated, music-inspired professional presence while maintaining Hugo's performance and flexibility advantages.