jekyll-theme-resume 1.3.0

data/_sass/_all-pages.scss

@@ -0,0 +1,335 @@
+// ==========================================================================
+// Universal Shared Styles (_all-pages.scss)
+// jekyll-theme-resume
+//
+// Shared styling across default, resume, profile, and error layouts.
+// Covers SVG icon link mechanics, WCAG screen-reader utilities, markdown
+// typography for .main-content (with CSS logical properties for bilingual parity),
+// universal footer presentation, and the HTTP status error page suite (404, 403, 500).
+// ==========================================================================
+
+/* SVG Icons & Links */
+// Anchor wrappers around inline SVG icons:
+// 1. display: inline-flex + vertical-align: middle aligns icons with surrounding text.
+// 2. line-height: 0 eliminates standard text descender space beneath the SVG.
+// 3. text-decoration: none !important suppresses browser link underlines on vector images.
+.icon-link,
+.social-links a,
+.social-links li a {
+  color: var(--icon-fill-muted, #555);
+  text-decoration: none !important;
+  line-height: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+
+  &:hover,
+  &:focus {
+    color: var(--accent-hover, #307EA9);
+    text-decoration: none !important;
+  }
+}
+
+.icon-link:hover,
+.icon-link:focus,
+.social-links a:hover,
+.social-links a:focus,
+.social-links li a:hover,
+.social-links li a:focus {
+  text-decoration: none !important;
+}
+
+// Universal SVG sizing (30px width) with smooth 0.2s fill transition.
+.svg-icon,
+.icon-link svg,
+.social-links svg,
+.page-footer svg {
+  fill: var(--icon-fill-muted, #555);
+  width: 30px;
+  transition: fill 0.2s ease;
+}
+
+// Path fill inheritance: ensures multi-path vector graphics inherit the parent SVG fill.
+.social-links svg path,
+.icon-link svg path,
+.svg-icon path,
+.page-footer svg path {
+  fill: inherit;
+}
+
+// Interactive hover and focus states for SVG icons.
+.svg-icon:hover,
+.svg-icon:focus,
+.icon-link:hover svg,
+.icon-link:focus svg,
+.social-links a:hover svg,
+.social-links a:focus svg,
+.page-footer a:hover svg,
+.page-footer a:focus svg {
+  fill: var(--icon-fill-dark, #000);
+
+  path {
+    fill: inherit;
+  }
+}
+
+// .sr-only lives in _base.scss (loaded earlier in every entrypoint) - not redeclared here.
+
+/* Following only apply to the resume header contact info icons */
+// Scoped 20px sizing for inline contact details (email, phone, location) in resume headers.
+.header-contact-info>p>svg {
+  width: 20px;
+  fill: var(--icon-fill-dark, #000);
+  vertical-align: middle;
+}
+
+
+/* Footer */
+// Universal page footer shared between default markdown pages and standalone layouts.
+footer,
+.page-footer {
+  padding-top: 1.5rem;
+  text-align: center;
+  margin-bottom: 3rem;
+
+  .footer-line,
+  .copyright {
+    margin: 0;
+    font-size: .875rem;
+    color: var(--text-muted, #999);
+
+    >a {
+      font-weight: 700;
+      color: var(--link-color, #333);
+    }
+  }
+}
+
+/* Main Content Container for Default Layout */
+// Markdown content container used in _layouts/default.html for generic pages and documentation.
+.main-content {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+  box-sizing: border-box;
+
+  // Headings: semantic colors and proportional top/bottom margins.
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--text-color, #333);
+    font-weight: 700;
+    line-height: 1.3;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+
+    // Suppresses excess top margin on the document's opening heading.
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 { font-size: 2.25rem; }
+  h2 { font-size: 1.75rem; border-bottom: 1px solid var(--border-color, #c7c7c7); padding-bottom: 0.3em; }
+  h3 { font-size: 1.375rem; }
+  h4 { font-size: 1.125rem; }
+
+  p {
+    color: var(--text-color, #333);
+    line-height: 1.7; // Enhanced line-height for reading comfort
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+  }
+
+  // Hyperlinks: scoped with :not() so action buttons do not inherit underlines.
+  // Uses text-underline-offset for clean non-color link identification (WCAG 2.2).
+  a:not(.cv-button):not(.error-btn) {
+    color: var(--accent-color, #3064a9);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--accent-hover, #307EA9);
+    }
+  }
+
+  // Blockquotes: uses CSS Logical Property border-inline-start to automatically mirror
+  // the 4px accent border to the left side in LTR and to the right side in RTL.
+  blockquote {
+    margin: 1.5rem 0;
+    padding: 0.75rem 1.25rem;
+    border-inline-start: 4px solid var(--accent-color, #3064a9);
+    background-color: var(--card-bg, #efefef);
+    color: var(--text-light, #646464);
+    border-radius: 0 4px 4px 0;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Unordered and ordered lists: uses padding-inline-start for bidirectional alignment parity.
+  ul, ol {
+    color: var(--text-color, #333);
+    padding-inline-start: 1.75rem;
+    margin-bottom: 1.25rem;
+    line-height: 1.6;
+
+    li {
+      margin-bottom: 0.35rem;
+    }
+  }
+
+  hr {
+    border: 0;
+    height: 1px;
+    background-color: var(--border-color, #c7c7c7);
+    margin: 2rem 0;
+  }
+
+  // Inline code snippets: dark-mode-aware background token.
+  code, kbd, samp {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.875em;
+    background-color: var(--card-bg, #efefef);
+    color: var(--text-color, #333);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    border: 1px solid var(--border-color, #c7c7c7);
+  }
+
+  // Preformatted code blocks: horizontal scroll containment and theme borders.
+  pre {
+    background-color: var(--card-bg, #efefef);
+    border: 1px solid var(--border-color, #c7c7c7);
+    border-radius: 6px;
+    padding: 1rem 1.25rem;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      font-size: 0.9em;
+      color: var(--text-color, #333);
+    }
+  }
+
+  // Markdown data tables: full width, zebra-striped alternating rows.
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    color: var(--text-color, #333);
+
+    th, td {
+      border: 1px solid var(--border-color, #c7c7c7);
+      padding: 0.75rem 1rem;
+      text-align: start;
+    }
+
+    th {
+      background-color: var(--card-bg, #efefef);
+      font-weight: 700;
+    }
+
+    tr:nth-child(even) {
+      background-color: rgba(127, 127, 127, 0.05);
+    }
+  }
+}
+
+/* Error / 404 Page Styles */
+// Presentation layer for _layouts/error.html (consumed by 404.html, 403.html, 500.html).
+.error-page {
+  text-align: center;
+  padding: 3rem 1rem;
+  max-width: 650px;
+  margin: 0 auto;
+
+  // Prominent status code headline (e.g. "404"): fluid clamp scaling up to 7rem.
+  .error-code {
+    font-size: clamp(4rem, 12vw, 7rem);
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    line-height: 1;
+    color: var(--accent-color, #3064a9);
+    margin: 0 0 1rem;
+  }
+
+  .error-bilingual-group {
+    margin: 2rem 0;
+  }
+
+  .error-lang-block {
+    margin: 1.5rem 0;
+
+    // RTL block in error suite: locale-driven font (Cairo for Arabic, Noto Nastaliq Urdu
+    // for Urdu, etc.) via --font-locale, matching every other component. Gated on the
+    // real dir="rtl" attribute error.html renders, not a class that's never applied.
+    &[dir="rtl"] {
+      .error-title,
+      .error-description {
+        font-family: var(--font-locale, 'Cairo', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif);
+        line-height: 1.6;
+      }
+    }
+  }
+
+  .error-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color, #333);
+    margin: 0 0 0.5rem;
+  }
+
+  .error-description {
+    color: var(--text-light, #646464);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  // Recovery action buttons (e.g. Return Home, View English CV, View Arabic CV).
+  .error-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-top: 2.5rem;
+  }
+
+  .error-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none !important;
+    background-color: var(--button-bg, #efefef);
+    color: var(--button-text, #333);
+    border: 1px solid var(--border-color, #c7c7c7);
+    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+
+    &:hover {
+      background-color: var(--button-hover-bg, #333);
+      color: var(--button-hover-text, #fff);
+      transform: translateY(-1px);
+    }
+
+    &.primary {
+      background-color: var(--accent-color, #3064a9);
+      color: var(--accent-contrast-text, #fff);
+      border-color: var(--accent-color, #3064a9);
+
+      &:hover {
+        background-color: var(--accent-hover, #307EA9);
+        color: var(--accent-contrast-text, #fff);
+      }
+    }
+  }
+}

data/_sass/_base.scss

@@ -0,0 +1,130 @@
+// Base styles
+// ---------------------------------------/
+// jekyll-theme-resume
+// Baseline CSS resets, universal border-box box model, root theme background binding,
+// default serif typography, micro-clearfix container classes, custom text selection,
+// and accessible screen-reader (.sr-only) utilities.
+// ---------------------------------------/
+
+@use "mixins";
+@use "variables";
+
+// Universal box model reset: ensures padding and borders are included in element total width/height.
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+// Dynamic background color bound to theme CSS variable token with SCSS fallback.
+html {
+  background: var(--bg-color, variables.$white);
+}
+
+// Baseline body typography: Lora serif, 16px font size, 1.5 line height.
+body {
+  @include mixins.serif;
+  color: var(--text-color, variables.$text_color);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+// Centered content wrapper with 800px max width and clearfix.
+.wrapper:before,
+.wrapper:after {
+  content: "";
+  display: table;
+}
+
+.wrapper:after {
+  clear: both;
+}
+
+.wrapper {
+  max-width: 800px;
+  padding: 0 24px;
+  margin: 0 auto;
+}
+
+// Micro-clearfix helper
+.group:before,
+.group:after {
+  content: "";
+  display: table;
+}
+
+.group:after {
+  clear: both;
+}
+
+// Custom text selection styling using theme tokens.
+::-moz-selection {
+  background: var(--selection-bg, rgba(51, 51, 51, .8));
+  color: var(--selection-color, #fff);
+  text-shadow: none;
+}
+
+::selection {
+  background: var(--selection-bg, rgba(51, 51, 51, .8));
+  color: var(--selection-color, #fff);
+  text-shadow: none;
+}
+
+/* Visually hidden utility for screen readers (WCAG 2.1 AA) */
+// Clips element into a 1x1 pixel space out of flow to keep text accessible to assistive technology.
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  text-decoration: none !important;
+}
+
+/* Accessible Skip-to-Content Link (WCAG 2.4.1 Bypass Blocks) */
+.skip-link {
+  position: absolute;
+  top: -100px;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem;
+  background: var(--accent-color, #3064a9);
+  color: var(--accent-contrast-text, #ffffff) !important;
+  font-family: var(--font-en, "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif);
+  font-weight: 700;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  text-decoration: none !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: top 0.2s ease;
+
+  &:focus,
+  &:focus-visible {
+    top: 1rem;
+    outline: 2px solid var(--accent-contrast-text, #ffffff);
+    outline-offset: 2px;
+  }
+}
+
+html[dir="rtl"] .skip-link {
+  left: auto;
+  right: 1rem;
+  font-family: var(--font-locale, 'Cairo', 'Noto Naskh Arabic', Tahoma, sans-serif);
+}
+
+/* Universal Accessible Focus Indicators (WCAG 2.4.7 Focus Visible) */
+:focus-visible {
+  outline: 2px solid var(--accent-color, #3064a9);
+  outline-offset: 2px;
+}
+
+/* Suppress focus outline on programmatic focus target */
+main:focus,
+.resume-main-content:focus {
+  outline: none;
+}
+