Hydejack Theme Architecture

Overview

Jekyll-theme-hydejack v9 - Academic/professional theme with advanced features. Theme files embedded in #jekyll-theme-hydejack/ directory (not gem-based).

Layout System

Base Layouts

  • base.html - Foundation with version checking
  • default.html - Standard pages
  • compress.html - HTML minification wrapper

Content Layouts

  • home.html - Homepage
  • page.html - Static pages
  • post.html - Blog posts
  • blog.html - Blog listing
  • news.html - News feed

Specialized

  • people.html - Team listings
  • projects.html - Portfolio grid
  • resume.html - CV/resume
  • welcome.html - Landing page

Component Architecture

  • Drawer-based sidebar (<hy-drawer> custom element)
  • Mobile-responsive menu system
  • Dynamic page loading (push state)

Includes Organization

_includes/
├── body/          # Page structure
├── components/    # Reusable UI elements
├── head/          # Meta, SEO, assets
├── pro/           # Premium features
├── js/            # JavaScript workers
└── scripts/       # Loading utilities

Styling System

SASS Structure

  • Variables - Colors, spacing, typography
  • Mixins - Reusable style functions
  • Inline vs Link - Performance optimization modes
  • Dark Mode - Dynamic theme switching (PRO)

CSS Strategy

  • Mobile-first responsive design
  • Critical CSS inlining option
  • Component-based architecture
  • Bootstrap integration (forms/grid)

Performance Features

Optimization

  • Lazy loading images (<hy-img>)
  • Service worker for offline support
  • HTML compression
  • Critical CSS inlining
  • Dynamic content loading

Build Options

hydejack:
  no_inline_css: false      # Inline critical CSS
  no_page_style: false      # Per-page styling
  no_break_layout: true     # Content width control
  no_push_state: false      # Dynamic loading

Customization Points

Site-Level

  • _includes/my-head.html - Custom head content
  • _includes/my-body.html - Custom body scripts
  • _sass/my-style.scss - Custom styles (heavily customized)
  • _sass/my-inline.scss - Critical custom CSS

Custom Style Implementation (_sass/my-style.scss)

Major customizations include:

Layout & Content Width

  • Landscape Mode Fixes: Responsive padding-left calculations to prevent sidebar overlap
  • Content Width Control: Uses calc() functions with sidebar width (21rem) + spacing
  • Breakpoint-based Adjustments: Different spacing for 64em, 86em, 120em, 160em screens
  • Full-width Content: Overrides theme’s max-width constraints for landscape orientation

People Cards Redesign

  • Layout Transform: Changed from vertical grid cards to horizontal list layout
  • Circular Profile Photos: Border-radius: 50% for profile images with object-fit: cover
  • Flexible Layout: Uses CSS flexbox with image (80px) + text content areas
  • Hover Effects: TranslateX and box-shadow animations for interactivity
  • Responsive Columns: 1 column on mobile, 2 columns on large landscape screens

Latest Highlights Section

  • Visual Design: Semi-transparent background with accent color left border
  • Two-column Layout: Date badges + content with flexbox
  • Responsive Behavior: Stacks vertically on mobile, horizontal on desktop
  • Color Alternation: Alternating date badge colors (accent + orange) on large screens
  • Interactive Links: Dotted borders with hover color transitions

Typography & Accessibility

  • Word Wrapping: Comprehensive word-break rules for long titles
  • Overflow Prevention: Multiple CSS properties to handle text overflow
  • Hyphenation: Auto-hyphenation for better text flow

Configuration

  • accent_color - Primary brand color
  • theme_color - Browser UI color
  • google_fonts - Typography
  • hydejack - Feature toggles

Collections Support

  • _people/ - Team members
  • _projects/ - Portfolio items
  • _news/ - Announcements
  • Custom collection layouts

Pro Features

  • Dark mode with syntax highlighting
  • Built-in search
  • Newsletter integration
  • Advanced project cards
  • Resume printing
  • Cookie banners
  • Grid layouts

JavaScript Components

  • hy-drawer - Touch-enabled drawer
  • hy-push-state - SPA-like navigation
  • hy-img - Lazy loading images
  • Search worker - Client-side search
  • Service worker - Offline support

SEO & Meta

  • Schema.org structured data
  • Open Graph tags
  • Twitter cards
  • JSON-LD integration
  • Sitemap generation

Browser Support

  • Progressive enhancement
  • Works without JavaScript
  • Text browser compatible (w3m)
  • PWA capabilities
  • Print stylesheet support