Execution Log: System Design Page Modernization

Execution Log: System Design Page Modernization

Phase/Feature: Modernization of the System Design Resources Page (_includes/system_design.html).

Analysis & Rationale

The previous system_design.html used hardcoded inline styles (e.g., Arial font, fixed pixel margins, basic #0052cc background buttons). This made the code bloated, hard to maintain, and did not utilize the overall Jekyll Now design system properly. To fix this and provide a more interactive and visually modern experience:

  • Styles were migrated to a dedicated SCSS partial, _sass/_system-design.scss, leveraging CSS variables from the main site (e.g., $helveticaNeue, $blue).
  • CSS Grid was used to ensure content aligns cleanly in columns and responds better to mobile sizes without fixed width constraints.
  • Micro-animations (hover scaling, drop shadow transitions) were added to the cards and buttons to make them feel responsive and interactive, encouraging user engagement.
  • FontAwesome icons were integrated into the HTML to visually break up the text.

Actions Taken

  • Created _sass/_system-design.scss containing all updated, Grid-based layouts and modernized styling classes (.system-box, .btn-primary, .discord-section).
  • Modified style.scss to import the new _system-design partial.
  • Rewrote _includes/system_design.html to:
    • Remove all <style> blocks.
    • Utilize semantic tags (<section>, <article>).
    • Implement FontAwesome icons inside headings and buttons for visual clarity.
    • Nestle the YouTube playlists within a responsive CSS grid nested inside the main .system-box to maximize screen real estate and avoid a massive vertical scroll on desktop.

Notable Edge Cases / Fixes

  • The YouTube playlists were originally stacking vertically and taking up excessive space. I wrapped them in a nested CSS Grid so they sit side-by-side on larger screens and collapse to a single column on mobile, greatly improving the layout density and UX.