Ethan Sorensen

Ethan Sorensen

Senior Electrical Engineering student at Brigham Young University

Website Style Updates - Base2Tone Lavender Dark Theme

Website Style Updates - Base2Tone Lavender Dark Theme

Overview

The website has been completely redesigned with a modern, dark theme based on the Base2Tone Lavender Dark color palette. All styling has been updated while maintaining the same content and structure.

Color Palette

Base Colors

  • Background: #1b1726 (Deep purple-black)
  • Surface: #2d2640 (Elevated surfaces)
  • Surface Alt: #3a304f (Borders and dividers)
  • Text: #dad5e8 (Primary text)
  • Text Bright: #f0ecf9 (Headings)

Lavender Accent Colors

  • Lavender Dark: #8671b3
  • Lavender: #a594d1 (Primary accent)
  • Lavender Light: #c5b9e3 (Links and highlights)
  • Lavender Pale: #e3ddf4 (Hover states)

Sage Accent Colors (Complementary)

  • Sage Dark: #87a995
  • Sage: #a5c5b3 (Success states)
  • Sage Light: #c1dccf (Strings, literals)
  • Sage Pale: #ddeee5

Major Changes

Typography & Spacing

  • Improved line-height from 1.5 to 1.7 for better readability
  • Enhanced heading hierarchy with distinct colors
  • Better letter spacing and font weights
  • Smoother font rendering with antialiasing

Visual Design Elements

Shadows & Depth

  • Enhanced box shadows: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2)
  • Hover shadows: 0 8px 12px rgba(165, 148, 209, 0.15), 0 4px 8px rgba(0, 0, 0, 0.3)
  • Increased border-radius to 8px for modern card-style design

Animations

  • Smooth entrance animations with translateY
  • Glow effects for special elements
  • Hover transitions on interactive elements
  • Global transition variable: all 0.3s ease-in-out

Component Updates

Masthead (Header)

  • Dark surface background with lavender border
  • Enhanced shadow for depth
  • Smooth color transitions on hover
  • Better spacing and padding

Buttons

  • Gradient backgrounds using lavender colors
  • Hover effects with translateY and enhanced shadows
  • Improved padding and font weights
  • Multiple variants (info, success, warning, danger)

Cards & Content Areas

  • Main content area styled as elevated card
  • Sidebar styled as modern card with hover effects
  • Border radius and shadows for depth
  • Smooth transitions
  • Removed underlines, added bottom borders
  • Lavender color scheme
  • Smooth hover transitions
  • Better visited link colors

Code Blocks

  • Dark surface background
  • Syntax highlighting with Base2Tone Lavender palette
  • Enhanced code block headers with gradient
  • Better inline code styling with subtle backgrounds

Tables

  • Gradient header with lavender colors
  • Row hover effects
  • Better borders and spacing
  • Modern card-style design

Forms

  • Dark inputs with lavender borders
  • Focus states with glow effects
  • Better padding and transitions
  • Improved accessibility
  • Updated greedy navigation with gradient underlines
  • Enhanced dropdown menus with dark theme
  • Better active states with gradient backgrounds
  • Smooth transitions throughout

Sidebar & Author Profile

  • Avatar with lavender border and glow effect
  • Enhanced hover states
  • Better link styling with slide effects
  • Social links with modern styling
  • Gradient background
  • Lavender border accent
  • Enhanced link colors
  • Better icon colors

Archive & Lists

  • Modern item cards with hover effects
  • Better image teasers with shadows
  • Enhanced typography
  • Smooth transitions

Notices

  • Gradient backgrounds with accent colors
  • Better borders and shadows
  • Enhanced typography
  • Improved link styling

Syntax Highlighting

  • Complete Base2Tone Lavender Dark color scheme
  • Keywords in lavender shades
  • Strings and literals in sage tones
  • Comments in muted colors
  • Better contrast and readability

Files Modified

Core Styling

  • _sass/_variables.scss - Color scheme and variables
  • _sass/_base.scss - Base elements and typography
  • _sass/_animations.scss - Animation keyframes

Components

  • _sass/_buttons.scss - Button styles
  • _sass/_masthead.scss - Header/navigation bar
  • _sass/_page.scss - Page content and meta
  • _sass/_sidebar.scss - Sidebar and author profile
  • _sass/_archive.scss - Archive and list views
  • _sass/_navigation.scss - Navigation elements
  • _sass/_footer.scss - Footer styling
  • _sass/_forms.scss - Form elements
  • _sass/_tables.scss - Table styling
  • _sass/_notices.scss - Notice blocks
  • _sass/_syntax.scss - Code syntax highlighting

Building the Site

To see the changes locally:

# Install dependencies (if not already installed)
bundle install

# Serve the site locally
bundle exec jekyll serve

# Or with LiveReload
bundle exec jekyll serve --livereload

The site will be available at http://localhost:4000

Key Features

Accessibility

  • High contrast ratios for text readability
  • Focus states for keyboard navigation
  • Semantic color usage
  • WCAG compliant color combinations

Performance

  • Optimized CSS with minimal redundancy
  • Efficient transitions and animations
  • No additional dependencies added

Responsiveness

  • All updates maintain responsive breakpoints
  • Mobile-friendly interactions
  • Adaptive spacing and sizing

Modern Design Principles

  • Card-based layouts
  • Consistent spacing system
  • Cohesive color palette
  • Smooth micro-interactions
  • Visual hierarchy through color and typography

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • CSS Grid and Flexbox support required
  • CSS custom properties utilized
  • Graceful degradation for older browsers

Notes

  • All content remains unchanged
  • Site structure preserved
  • Jekyll functionality maintained
  • Compatible with GitHub Pages

Customization

To adjust colors, modify the variables in _sass/_variables.scss:

// Example: Change primary lavender color
$lavender: #your-color-here;

All components will automatically use the updated color scheme.

Theme: Base2Tone Lavender Dark
Version: 1.0
Date: December 2025
Designer: AI Assistant