jekyll-theme-resume 1.3.0

data/_sass/_dark-mode.scss

@@ -0,0 +1,387 @@
+// ==========================================================================
+// Dark Mode System Tokens & Overrides
+// jekyll-theme-resume
+//
+// Single source of truth for design tokens, color variables, and dark mode mechanics.
+// Defines CSS Custom Properties on :root for light mode, system dark mode auto-detection,
+// forced user preference overrides, paper-friendly print resets, and floating toggle UI.
+// All tokens satisfy WCAG 2.2 AA contrast requirements (minimum 4.5:1 for normal text).
+// ==========================================================================
+
+:root {
+  // Informs the browser engine that the document supports both color schemes,
+  // enabling native dark styling on system scrollbars and form controls.
+  color-scheme: light dark;
+
+  // --- Background & Primary Typography ---
+  // Baseline light mode values: #333 on #ffffff yields a 12.6:1 contrast ratio (exceeds WCAG AAA).
+  --bg-color: #ffffff;
+  --text-color: #333;
+  --text-muted: #999;
+  --text-light: #646464;
+  --border-color: #c7c7c7;
+  --card-bg: #efefef;
+
+  // --- Links & Navigation ---
+  --link-color: #333;
+  --link-hover: #9c9c9c;
+  --link-hover-color: var(--link-hover);
+
+  // --- Accent & Brand Colors ---
+  --accent-color: #3064a9;
+  --accent-contrast-text: #ffffff;
+  --accent-hover: #307EA9;
+  --accent-hover-color: var(--accent-hover);
+  --social-hover-color: var(--accent-hover);
+  --about-color: var(--text-light);
+
+  // --- Footer ---
+  --footer-text-color: var(--text-muted);
+  --footer-link-color: var(--link-color);
+
+  // --- Icons & Graphics ---
+  --icon-fill: #333;
+  --icon-fill-muted: #555555;
+  --icon-fill-dark: #000;
+  --icon-hover-fill: var(--icon-fill-dark);
+  --header-icon-fill: var(--icon-fill-dark);
+
+  // --- Buttons (.contact-button, .cv-button) ---
+  --button-bg: #efefef;
+  --button-text: #333;
+  --button-hover-bg: #333;
+  --button-hover-text: #fff;
+
+  // --- Text Selection ---
+  --selection-bg: rgba(51, 51, 51, .8);
+  --selection-color: #fff;
+
+  // --- Dark Mode Toggle Component Tokens ---
+  --toggle-btn-bg: transparent;
+  --toggle-btn-border: var(--border-color);
+  --toggle-btn-color: var(--text-color);
+  --toggle-btn-hover-bg: var(--button-bg);
+  --toggle-btn-focus-ring: var(--accent-color);
+}
+
+// --------------------------------------------------------------------------
+// Automatic System Dark Mode (@media prefers-color-scheme)
+// --------------------------------------------------------------------------
+// Tier 1 Activation: Automatically detects host OS dark mode preference.
+// The :not([data-color-scheme="light"]):not([data-theme="light"]) guard ensures
+// this media query yields if the user has explicitly pinned light mode via the toggle button.
+// Contrast ratios: #e0e0e0 on #121212 = 13.8:1; #888888 on #121212 = 5.3:1 (passes WCAG AA).
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]):not([data-theme="light"]) {
+    --bg-color: #121212;
+    --text-color: #e0e0e0;
+    --text-muted: #888888;
+    --text-light: #aaaaaa;
+    --border-color: #333333;
+    --card-bg: #1e1e1e;
+
+    --link-color: #e0e0e0;
+    --link-hover: #ffffff;
+    --link-hover-color: var(--link-hover);
+
+    --accent-color: #6ba4e8;
+    --accent-contrast-text: #121212;
+    --accent-hover: #8cbcf3;
+    --accent-hover-color: var(--accent-hover);
+    --social-hover-color: var(--accent-hover);
+    --about-color: var(--text-light);
+
+    --footer-text-color: var(--text-muted);
+    --footer-link-color: var(--link-color);
+
+    --icon-fill: #e0e0e0;
+    --icon-fill-muted: #888888;
+    --icon-fill-dark: #ffffff;
+    --icon-hover-fill: var(--icon-fill-dark);
+    --header-icon-fill: var(--icon-fill-dark);
+
+    --button-bg: #2a2a2a;
+    --button-text: #e0e0e0;
+    --button-hover-bg: #444444;
+    --button-hover-text: #ffffff;
+
+    --selection-bg: rgba(107, 164, 232, .5);
+    --selection-color: #ffffff;
+
+    --toggle-btn-border: var(--border-color);
+    --toggle-btn-color: var(--text-color);
+    --toggle-btn-hover-bg: var(--button-bg);
+    --toggle-btn-focus-ring: var(--accent-color);
+  }
+}
+
+// --------------------------------------------------------------------------
+// Forced Dark Override (Pinned via toggle or explicit attribute)
+// --------------------------------------------------------------------------
+// Tier 2 Activation: Explicit user selection persisted in localStorage and set
+// via data-theme="dark", data-color-scheme="dark", or class="dark".
+:root[data-color-scheme="dark"],
+:root[data-theme="dark"],
+[data-color-scheme="dark"],
+[data-theme="dark"],
+html.dark {
+  color-scheme: dark;
+  --bg-color: #121212;
+  --text-color: #e0e0e0;
+  --text-muted: #888888;
+  --text-light: #aaaaaa;
+  --border-color: #333333;
+  --card-bg: #1e1e1e;
+
+  --link-color: #e0e0e0;
+  --link-hover: #ffffff;
+  --link-hover-color: var(--link-hover);
+
+  --accent-color: #6ba4e8;
+  --accent-contrast-text: #121212;
+  --accent-hover: #8cbcf3;
+  --accent-hover-color: var(--accent-hover);
+  --social-hover-color: var(--accent-hover);
+  --about-color: var(--text-light);
+
+  --footer-text-color: var(--text-muted);
+  --footer-link-color: var(--link-color);
+
+  --icon-fill: #e0e0e0;
+  --icon-fill-muted: #888888;
+  --icon-fill-dark: #ffffff;
+  --icon-hover-fill: var(--icon-fill-dark);
+  --header-icon-fill: var(--icon-fill-dark);
+
+  --button-bg: #2a2a2a;
+  --button-text: #e0e0e0;
+  --button-hover-bg: #444444;
+  --button-hover-text: #ffffff;
+
+  --selection-bg: rgba(107, 164, 232, .5);
+  --selection-color: #ffffff;
+
+  --toggle-btn-border: var(--border-color);
+  --toggle-btn-color: var(--text-color);
+  --toggle-btn-hover-bg: var(--button-bg);
+  --toggle-btn-focus-ring: var(--accent-color);
+}
+
+// --------------------------------------------------------------------------
+// Forced Light Override (Pinned via toggle on dark OS)
+// --------------------------------------------------------------------------
+// Overrides dark host OS settings when the user manually toggles the site to light mode.
+:root[data-color-scheme="light"],
+:root[data-theme="light"],
+[data-color-scheme="light"],
+[data-theme="light"],
+html.light {
+  color-scheme: light;
+  --bg-color: #ffffff;
+  --text-color: #333;
+  --text-muted: #999;
+  --text-light: #646464;
+  --border-color: #c7c7c7;
+  --card-bg: #efefef;
+
+  --link-color: #333;
+  --link-hover: #9c9c9c;
+  --link-hover-color: var(--link-hover);
+
+  --accent-color: #3064a9;
+  --accent-hover: #307EA9;
+  --accent-hover-color: var(--accent-hover);
+  --social-hover-color: var(--accent-hover);
+  --about-color: var(--text-light);
+
+  --footer-text-color: var(--text-muted);
+  --footer-link-color: var(--link-color);
+
+  --icon-fill: #333;
+  --icon-fill-muted: #555555;
+  --icon-fill-dark: #000;
+  --icon-hover-fill: var(--icon-fill-dark);
+  --header-icon-fill: var(--icon-fill-dark);
+
+  --button-bg: #efefef;
+  --button-text: #333;
+  --button-hover-bg: #333;
+  --button-hover-text: #fff;
+
+  --selection-bg: rgba(51, 51, 51, .8);
+  --selection-color: #fff;
+
+  --toggle-btn-border: var(--border-color);
+  --toggle-btn-color: var(--text-color);
+  --toggle-btn-hover-bg: var(--button-bg);
+  --toggle-btn-focus-ring: var(--accent-color);
+}
+
+// --------------------------------------------------------------------------
+// Print Media Override (Always clean light background for printing)
+// --------------------------------------------------------------------------
+// Forces paper-friendly styling during physical printing or PDF generation, regardless
+// of whether the user was viewing the site in light or dark mode. Conserves printer ink
+// and guarantees crisp black text on white paper.
+@media print {
+  :root,
+  :root[data-color-scheme="dark"],
+  :root[data-color-scheme="light"],
+  :root[data-theme="dark"],
+  :root[data-theme="light"],
+  [data-color-scheme="dark"],
+  [data-theme="dark"],
+  html.dark,
+  html.light {
+    color-scheme: light !important;
+    --bg-color: #ffffff !important;
+    --text-color: #000000 !important;
+    --text-muted: #666 !important;
+    --text-light: #444 !important;
+    --border-color: #c7c7c7 !important;
+    --card-bg: #fff !important;
+
+    --link-color: #000 !important;
+    --link-hover: #000 !important;
+    --link-hover-color: #000 !important;
+
+    --accent-color: #000 !important;
+    --accent-hover: #000 !important;
+    --accent-hover-color: #000 !important;
+    --social-hover-color: #000 !important;
+    --about-color: #444 !important;
+
+    --footer-text-color: #666 !important;
+    --footer-link-color: #000 !important;
+
+    --icon-fill: #000 !important;
+    --icon-fill-muted: #666 !important;
+    --icon-fill-dark: #000 !important;
+    --icon-hover-fill: #000 !important;
+    --header-icon-fill: #000 !important;
+
+    --button-bg: #fff !important;
+    --button-text: #000 !important;
+    --button-hover-bg: #fff !important;
+    --button-hover-text: #000 !important;
+
+    --selection-bg: transparent !important;
+    --selection-color: #000 !important;
+  }
+
+  html,
+  body {
+    background-color: #fff !important;
+    color: #000 !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  // The interactive toggle button is omitted from printed output.
+  .dark-mode-toggle,
+  #dark-mode-toggle {
+    display: none !important;
+  }
+}
+
+// --------------------------------------------------------------------------
+// Toggle Button Component Styling
+// --------------------------------------------------------------------------
+// Floating circular action button fixed to the top-right viewport corner.
+.dark-mode-toggle {
+  position: fixed;
+  top: 1.25rem;
+  right: 1.25rem;
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  background: var(--bg-color);
+  color: var(--toggle-btn-color);
+  border: 1px solid var(--toggle-btn-border);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    background-color: var(--toggle-btn-hover-bg);
+    transform: scale(1.05);
+  }
+
+  // Accessible keyboard focus ring (WCAG 2.2 Level AA).
+  &:focus-visible {
+    outline: 2px solid var(--toggle-btn-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .dark-mode-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: none !important;
+    stroke: currentColor;
+    transition: transform 0.3s ease;
+  }
+
+  // Baseline Light Mode: Show Moon, Hide Sun
+  // Pure CSS state machine: in light mode, shows the Moon icon prompting switch to dark.
+  .dark-mode-icon-sun {
+    display: none;
+  }
+  .dark-mode-icon-moon {
+    display: block;
+  }
+}
+
+// Media Query System Dark Mode (when not overridden to Light)
+// Shows Sun icon prompting switch to light mode when operating under system dark mode.
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]):not([data-theme="light"]) {
+    .dark-mode-toggle {
+      .dark-mode-icon-sun {
+        display: block;
+      }
+      .dark-mode-icon-moon {
+        display: none;
+      }
+    }
+  }
+}
+
+// Pinned Dark Override: Show Sun, Hide Moon
+// Displays Sun icon when dark mode is explicitly pinned.
+:root[data-color-scheme="dark"],
+:root[data-theme="dark"],
+[data-color-scheme="dark"],
+[data-theme="dark"],
+html.dark {
+  .dark-mode-toggle {
+    .dark-mode-icon-sun {
+      display: block;
+    }
+    .dark-mode-icon-moon {
+      display: none;
+    }
+  }
+}
+
+// Pinned Light Override: Show Moon, Hide Sun
+// Displays Moon icon when light mode is explicitly pinned.
+:root[data-color-scheme="light"],
+:root[data-theme="light"],
+[data-color-scheme="light"],
+[data-theme="light"],
+html.light {
+  .dark-mode-toggle {
+    .dark-mode-icon-sun {
+      display: none;
+    }
+    .dark-mode-icon-moon {
+      display: block;
+    }
+  }
+}
+

data/_sass/_layout.scss

@@ -0,0 +1,116 @@
+// Layout styles
+// ---------------------------------------/
+// jekyll-theme-resume
+// Floating language switcher component. (The Primer-derived grid system formerly
+// here - .container, .columns, .one-third, etc. - was removed: zero usages in this
+// theme's own layouts/includes or the demo site. See docs/COMPLETED_AUDIT.md.)
+// ---------------------------------------/
+
+// --------------------------------------------------------------------------
+// Language Switcher Component (Feature 1.2; dropdown redesign Feature 2.12)
+// --------------------------------------------------------------------------
+// <details>/<summary> disclosure fixed to the top-left viewport corner.
+// The trigger (.language-switcher-trigger) mirrors the visual language of
+// .dark-mode-toggle (same pill shape, shadow, and transition); the opened
+// panel (.language-switcher-panel) lists every other configured language.
+// --------------------------------------------------------------------------
+
+.language-switcher {
+  position: fixed;
+  top: 1.25rem;
+  left: 1.25rem;
+  z-index: 1000;
+
+  // <summary> gets a default disclosure marker in most browsers; suppress it since the
+  // trigger already renders its own icon + label.
+  .language-switcher-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    height: 2.5rem;
+    padding: 0 0.85rem;
+    background: var(--bg-color, #ffffff);
+    color: var(--text-color, #333333);
+    border: 1px solid var(--toggle-btn-border, #e0e0e0);
+    border-radius: 9999px;
+    cursor: pointer;
+    list-style: none;
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 700;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:hover {
+      background-color: var(--toggle-btn-hover-bg, #f5f5f5);
+      border-color: var(--accent-color, #007acc);
+      transform: scale(1.05);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color, #007acc);
+      outline-offset: 2px;
+    }
+  }
+
+  &[open] .language-switcher-trigger {
+    border-color: var(--accent-color, #007acc);
+  }
+
+  .language-switcher-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 10rem;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    background: var(--bg-color, #ffffff);
+    border: 1px solid var(--toggle-btn-border, #e0e0e0);
+    border-radius: 0.75rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  }
+
+  .lang-switch-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    color: var(--text-color, #333333);
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 600;
+    border-radius: 0.5rem;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--toggle-btn-hover-bg, #f5f5f5);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color, #007acc);
+      outline-offset: 2px;
+    }
+  }
+
+  .lang-icon {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .lang-label-target {
+    font-family: 'Inter', 'Cairo', sans-serif;
+  }
+}
+
+// Print: explicit safety net — .no-print on the element already handles most cases
+@media print {
+  .language-switcher {
+    display: none !important;
+  }
+}
+

data/_sass/_mixins.scss

@@ -0,0 +1,136 @@
+// Mixins
+// ---------------------------------------/
+// jekyll-theme-resume
+// Reusable SASS mixins for cross-browser vendor prefixing, micro-clearfix,
+// responsive breakpoint queries, font stack utilities, and section divider borders.
+// ---------------------------------------/
+
+// Clearfix
+//
+// Clears floats via mixin (avoid using as a class).
+// Generates pseudo-elements before and after to contain floated children without overflow hacks.
+@mixin clearfix {
+  &:before {
+    display: table;
+    content: "";
+  }
+
+  &:after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
+
+// media querie tools
+// Responsive viewport breakpoint mixins. Standard mobile threshold is 600px.
+
+// Custom maximum-width media query.
+@mixin media_max($screen_width) {
+  @media (max-width: $screen_width) {
+    @content;
+  }
+}
+
+// Custom minimum-width media query.
+@mixin media_min($screen_width) {
+  @media (min-width: $screen_width) {
+    @content;
+  }
+}
+
+// Desktop & tablet viewports (600px and wider).
+@mixin media_larger_than_mobile {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+// Mobile viewports (600px and narrower).
+@mixin media_mobile {
+  @media (max-width: 600px) {
+    @content;
+  }
+}
+
+// type utilities
+// Typography mixins: standardizes font families and weights across sections.
+
+// Primary sans-serif stack (Open Sans).
+@mixin sans {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+@mixin sans_light {
+  @include sans;
+  font-weight: 300;
+}
+
+@mixin sans_regular {
+  @include sans;
+  font-weight: 400;
+}
+
+@mixin sans_bold {
+  @include sans;
+  font-weight: 700;
+}
+
+@mixin sans_extrabold {
+  @include sans;
+  font-weight: 800;
+}
+
+// Editorial serif stack (Lora).
+@mixin serif {
+  font-family: "Lora", "Minion Pro", Palatino, Georgia, serif;
+}
+
+@mixin serif_regular {
+  @include serif;
+  font-weight: 400;
+}
+
+@mixin serif_bold {
+  @include serif;
+  font-weight: 700;
+}
+
+// layout
+// Section divider border helpers using theme CSS custom property tokens.
+
+// Standard section divider: double-line border (4px top, 2px bottom).
+@mixin section_border {
+  border-top: 4px solid var(--border-color, #c7c7c7);
+  border-bottom: 2px solid var(--border-color, #c7c7c7);
+  padding: .2rem 0 .4rem;
+}
+
+// Compact hairline border for print media (1px top, 1px bottom).
+@mixin section_border_thin {
+  border-top: 1px solid var(--border-color, #c7c7c7);
+  border-bottom: 1px solid var(--border-color, #c7c7c7);
+  padding: .2rem 0 .2rem;
+}
+
+// buttons
+// Shared pill-button skin for .contact-button (resume) and .cv-button (profile page).
+// Callers add their own font-family/font-weight and width modifiers on top.
+@mixin cv-button-base {
+  border-radius: 3px;
+  background-color: var(--button-bg, #efefef);
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  margin: 1.5rem auto;
+  width: 220px;
+  font-size: 1.375rem;
+  color: var(--button-text, #333);
+  line-height: 55px;
+  transition: all .2s ease;
+
+  &:hover {
+    background-color: var(--button-hover-bg, #333);
+    color: var(--button-hover-text, #fff);
+  }
+}