jsonresume-theme-elegant-pink 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # jsonresume-theme-elegant-pink
2
2
 
3
+ ## 0.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - 304a130: Theme curation wave: full JSON Resume section coverage and SSR fixes.
8
+
9
+ - Add missing sections (Interests, Certificates, et al.) across 15+ themes so every registered theme renders all schema sections
10
+ - tokyo-modernist: inline styled-components (fixes webpack resolution SSR crash) — re-enabled in the registry
11
+ - tailwind: fix social-icon SSR crash, add 7 missing sections with missing-data guards — re-enabled in the registry
12
+ - Register previously orphaned desert-modern and elegant-pink themes with metadata
13
+ - @jsonresume/core@0.3.2
14
+
15
+ ## 0.1.4
16
+
17
+ ### Patch Changes
18
+
19
+ - c621133: use @jsonresume/core/ssr renderResumeDocument
20
+ - Updated dependencies [ff09f75]
21
+ - @jsonresume/core@0.3.1
22
+
3
23
  ## 0.1.3
4
24
 
5
25
  ### Patch Changes
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ :root{--resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;--resume-font-serif: Cambria, Georgia, "Times New Roman", serif;--resume-font-mono: "Courier New", Courier, monospace;--resume-size-name: 36px;--resume-size-heading: 16px;--resume-size-subheading: 14px;--resume-size-body: 11px;--resume-size-small: 10px;--resume-weight-normal: 400;--resume-weight-medium: 500;--resume-weight-semibold: 600;--resume-weight-bold: 700;--resume-line-height-tight: 1.2;--resume-line-height-normal: 1.5;--resume-line-height-relaxed: 1.75;--resume-color-primary: #1a1a1a;--resume-color-secondary: #4a4a4a;--resume-color-accent: #2563eb;--resume-color-background: #ffffff;--resume-color-border: #e5e7eb;--resume-space-section: 24px;--resume-space-item: 16px;--resume-space-tight: 8px;--resume-space-margin: 48px;--resume-max-width: 660px;--resume-column-gap: 24px;--resume-radius-sm: 4px;--resume-radius-md: 8px;--resume-radius-lg: 12px;--resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1)}[data-theme=modern]{--resume-color-primary: #0f172a;--resume-color-secondary: #475569;--resume-color-accent: #8b5cf6;--resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=classic]{--resume-color-primary: #000000;--resume-color-secondary: #333333;--resume-color-accent: #0066cc;--resume-font-sans: Georgia, "Times New Roman", serif}[data-theme=minimal]{--resume-color-primary: #18181b;--resume-color-secondary: #71717a;--resume-color-accent: #000000;--resume-space-section: 32px;--resume-space-item: 20px}[data-theme=high-contrast]{--resume-color-primary: #000000;--resume-color-secondary: #000000;--resume-color-accent: #0000ff;--resume-color-background: #ffffff;--resume-color-border: #000000}@media print{:root{--resume-space-section: 18px;--resume-space-item: 12px}@page{size:A4;margin:.5in}.resume-section{page-break-inside:avoid}.resume-item{break-inside:avoid}p,li{widows:3;orphans:3}.resume-description{hyphens:auto}.no-print{display:none!important}}[dir=rtl]{text-align:right}[dir=rtl] .resume-item{padding-left:0;padding-right:var(--resume-space-tight)}
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { renderToString } from "react-dom/server";
2
+ import { renderToStaticMarkup } from "react-dom/server";
3
3
  import o, { useRef, useContext, useState, useMemo, useEffect, useDebugValue, createElement, createContext } from "react";
4
4
  var __assign = function() {
5
5
  __assign = Object.assign || function __assign2(t) {
@@ -41,38 +41,46 @@ var isPropValid = /* @__PURE__ */ memoize(
41
41
  function getDefaultExportFromCjs(x2) {
42
42
  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
43
43
  }
44
- var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
45
- var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
46
- if (ret !== void 0) {
47
- return !!ret;
48
- }
49
- if (objA === objB) {
50
- return true;
51
- }
52
- if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
53
- return false;
54
- }
55
- var keysA = Object.keys(objA);
56
- var keysB = Object.keys(objB);
57
- if (keysA.length !== keysB.length) {
58
- return false;
59
- }
60
- var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
61
- for (var idx = 0; idx < keysA.length; idx++) {
62
- var key = keysA[idx];
63
- if (!bHasOwnProperty(key)) {
44
+ var shallowequal;
45
+ var hasRequiredShallowequal;
46
+ function requireShallowequal() {
47
+ if (hasRequiredShallowequal) return shallowequal;
48
+ hasRequiredShallowequal = 1;
49
+ shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
50
+ var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
51
+ if (ret !== void 0) {
52
+ return !!ret;
53
+ }
54
+ if (objA === objB) {
55
+ return true;
56
+ }
57
+ if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
64
58
  return false;
65
59
  }
66
- var valueA = objA[key];
67
- var valueB = objB[key];
68
- ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
69
- if (ret === false || ret === void 0 && valueA !== valueB) {
60
+ var keysA = Object.keys(objA);
61
+ var keysB = Object.keys(objB);
62
+ if (keysA.length !== keysB.length) {
70
63
  return false;
71
64
  }
72
- }
73
- return true;
74
- };
75
- const p = /* @__PURE__ */ getDefaultExportFromCjs(shallowequal);
65
+ var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
66
+ for (var idx = 0; idx < keysA.length; idx++) {
67
+ var key = keysA[idx];
68
+ if (!bHasOwnProperty(key)) {
69
+ return false;
70
+ }
71
+ var valueA = objA[key];
72
+ var valueB = objB[key];
73
+ ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
74
+ if (ret === false || ret === void 0 && valueA !== valueB) {
75
+ return false;
76
+ }
77
+ }
78
+ return true;
79
+ };
80
+ return shallowequal;
81
+ }
82
+ var shallowequalExports = requireShallowequal();
83
+ const p = /* @__PURE__ */ getDefaultExportFromCjs(shallowequalExports);
76
84
  var MS = "-ms-";
77
85
  var MOZ = "-moz-";
78
86
  var WEBKIT = "-webkit-";
@@ -1300,6 +1308,66 @@ var vt = /^\s*<\/[a-z]/i, gt = (function() {
1300
1308
  "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
1301
1309
  var wt = "__sc-".concat(f, "__");
1302
1310
  "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[wt] || (window[wt] = 0), 1 === window[wt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[wt] += 1);
1311
+ const CSS_RESET = "<style>*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased}</style>";
1312
+ const TOKENS_CSS_HREF = "https://unpkg.com/@jsonresume/core/dist/tokens.css";
1313
+ const FONTS_PRECONNECT = '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
1314
+ function isHref(value) {
1315
+ return /^(https?:)?\/\//.test(value) || value.trim().startsWith("<link");
1316
+ }
1317
+ function familyParam(family) {
1318
+ const [name, ...rest] = String(family).split(":");
1319
+ const encodedName = name.trim().replace(/\s+/g, "+");
1320
+ return rest.length ? `${encodedName}:${rest.join(":")}` : encodedName;
1321
+ }
1322
+ function googleFontsLinks(families) {
1323
+ if (!Array.isArray(families) || families.length === 0) return "";
1324
+ const passthrough = [];
1325
+ const names = [];
1326
+ for (const entry of families) {
1327
+ if (entry == null || entry === "") continue;
1328
+ if (isHref(entry)) passthrough.push(entry);
1329
+ else names.push(entry);
1330
+ }
1331
+ const links = passthrough.map(
1332
+ (href) => href.trim().startsWith("<link") ? href : `<link href="${href}" rel="stylesheet">`
1333
+ );
1334
+ if (names.length > 0) {
1335
+ const query = names.map(familyParam).join("&family=");
1336
+ links.unshift(
1337
+ `<link href="https://fonts.googleapis.com/css2?family=${query}&display=swap" rel="stylesheet">`
1338
+ );
1339
+ }
1340
+ if (links.length === 0) return "";
1341
+ return FONTS_PRECONNECT + links.join("");
1342
+ }
1343
+ function renderResumeDocument(element, options = {}) {
1344
+ const {
1345
+ fonts,
1346
+ title,
1347
+ lang = "en",
1348
+ dir = "ltr",
1349
+ reset = false,
1350
+ head = "",
1351
+ headAfterStyles = "",
1352
+ includeTokensCss = true,
1353
+ bodyClass
1354
+ } = options;
1355
+ const sheet = new gt();
1356
+ let html;
1357
+ let styleTags;
1358
+ try {
1359
+ html = renderToStaticMarkup(sheet.collectStyles(element));
1360
+ styleTags = sheet.getStyleTags();
1361
+ } finally {
1362
+ sheet.seal();
1363
+ }
1364
+ const fontLinks = googleFontsLinks(fonts);
1365
+ const tokensLink = includeTokensCss ? `<link rel="stylesheet" href="${TOKENS_CSS_HREF}">` : "";
1366
+ const resetTag = reset ? CSS_RESET : "";
1367
+ const titleTag = title ? `<title>${title}</title>` : "";
1368
+ const bodyAttr = bodyClass ? ` class="${bodyClass}"` : "";
1369
+ return `<!DOCTYPE html><html lang="${lang}" dir="${dir}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` + fontLinks + tokensLink + resetTag + head + styleTags + headAfterStyles + titleTag + `</head><body${bodyAttr}>${html}</body></html>`;
1370
+ }
1303
1371
  createContext({
1304
1372
  theme: "professional",
1305
1373
  setTheme: () => {
@@ -1459,6 +1527,7 @@ function formatDateRange({
1459
1527
  };
1460
1528
  const formatDate = (dateStr) => {
1461
1529
  if (!dateStr) return getPresentLabel();
1530
+ const isDateOnlyIso = typeof dateStr === "string" && /^\d{4}(-\d{2}){0,2}$/.test(dateStr);
1462
1531
  const date = typeof dateStr === "string" ? new Date(dateStr) : dateStr;
1463
1532
  if (isNaN(date.getTime())) return dateStr;
1464
1533
  const monthFormats = {
@@ -1470,6 +1539,9 @@ function formatDateRange({
1470
1539
  ...monthFormats[format],
1471
1540
  year: "numeric"
1472
1541
  };
1542
+ if (isDateOnlyIso) {
1543
+ options.timeZone = "UTC";
1544
+ }
1473
1545
  if (numberingSystem) {
1474
1546
  options.numberingSystem = numberingSystem;
1475
1547
  }
@@ -1477,7 +1549,9 @@ function formatDateRange({
1477
1549
  return formatter.format(date);
1478
1550
  };
1479
1551
  const start = formatDate(startDate);
1480
- if (endDate === void 0) return start;
1552
+ if (endDate === void 0) {
1553
+ return start;
1554
+ }
1481
1555
  const end = formatDate(endDate);
1482
1556
  return `${start} - ${end}`;
1483
1557
  }
@@ -1562,7 +1636,6 @@ function safeUrl(url) {
1562
1636
  const trimmed = url.trim();
1563
1637
  const dangerousProtocols = /^(javascript|data|vbscript|file|about):/i;
1564
1638
  if (dangerousProtocols.test(trimmed)) {
1565
- console.warn(`[Security] Blocked dangerous URL: ${trimmed.slice(0, 50)}`);
1566
1639
  return null;
1567
1640
  }
1568
1641
  const safeProtocols = /^(https?|mailto|tel|sms|ftp):/i;
@@ -1578,7 +1651,6 @@ function safeUrl(url) {
1578
1651
  if (/^[a-z0-9][a-z0-9.-]+\.[a-z]{2,}$/i.test(trimmed)) {
1579
1652
  return `https://${trimmed}`;
1580
1653
  }
1581
- console.warn(`[Security] Uncertain URL safety: ${trimmed.slice(0, 50)}`);
1582
1654
  return trimmed;
1583
1655
  }
1584
1656
  const ContactContainer = dt.div`
@@ -6361,6 +6433,7 @@ function Resume({ resume }) {
6361
6433
  projects = [],
6362
6434
  volunteer = [],
6363
6435
  awards = [],
6436
+ certificates = [],
6364
6437
  publications = [],
6365
6438
  languages = [],
6366
6439
  interests = [],
@@ -6487,6 +6560,26 @@ function Resume({ resume }) {
6487
6560
  award.summary && /* @__PURE__ */ jsx(WorkSummary, { children: award.summary })
6488
6561
  ] }, index2)) })
6489
6562
  ] }),
6563
+ certificates?.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
6564
+ /* @__PURE__ */ jsx(StyledSectionTitle, { children: "Certifications" }),
6565
+ /* @__PURE__ */ jsx(EducationGrid, { children: certificates.map((cert, index2) => /* @__PURE__ */ jsxs(AwardCard, { children: [
6566
+ /* @__PURE__ */ jsx(AwardTitle, { children: cert.name }),
6567
+ cert.issuer && /* @__PURE__ */ jsxs(Degree, { children: [
6568
+ "Issued by ",
6569
+ cert.issuer
6570
+ ] }),
6571
+ cert.date && /* @__PURE__ */ jsx(DateText, { children: cert.date }),
6572
+ cert.url && /* @__PURE__ */ jsx(ProjectMeta, { children: /* @__PURE__ */ jsx(
6573
+ ProjectLink,
6574
+ {
6575
+ href: cert.url,
6576
+ target: "_blank",
6577
+ rel: "noopener noreferrer",
6578
+ children: "View Credential →"
6579
+ }
6580
+ ) })
6581
+ ] }, index2)) })
6582
+ ] }),
6490
6583
  publications?.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
6491
6584
  /* @__PURE__ */ jsx(StyledSectionTitle, { children: "Publications" }),
6492
6585
  /* @__PURE__ */ jsx(EducationGrid, { children: publications.map((pub, index2) => /* @__PURE__ */ jsxs(AwardCard, { children: [
@@ -6529,13 +6622,7 @@ function render(resume, options = {}) {
6529
6622
  dir = "ltr",
6530
6623
  title = resume.basics?.name || "Resume"
6531
6624
  } = options;
6532
- const sheet = new gt();
6533
- try {
6534
- const html = renderToString(
6535
- sheet.collectStyles(/* @__PURE__ */ jsx(Resume, { resume }))
6536
- );
6537
- const styles = sheet.getStyleTags();
6538
- const designTokens = `
6625
+ const designTokens = `
6539
6626
  :root {
6540
6627
  --resume-color-primary: #9f1239;
6541
6628
  --resume-color-secondary: #be123c;
@@ -6544,7 +6631,7 @@ function render(resume, options = {}) {
6544
6631
  --resume-color-card: #ffffff;
6545
6632
  }
6546
6633
  `;
6547
- const globalStyles = `
6634
+ const globalStyles = `
6548
6635
  * {
6549
6636
  margin: 0;
6550
6637
  padding: 0;
@@ -6569,30 +6656,18 @@ function render(resume, options = {}) {
6569
6656
  }
6570
6657
  }
6571
6658
  `;
6572
- return `<!DOCTYPE html>
6573
- <html lang="${locale}" dir="${dir}">
6574
- <head>
6575
- <meta charset="UTF-8">
6576
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6577
- <title>${title}</title>
6578
-
6579
- <style>
6659
+ return renderResumeDocument(/* @__PURE__ */ jsx(Resume, { resume }), {
6660
+ head: `<style>
6580
6661
  ${designTokens}
6581
- </style>
6582
-
6583
- ${styles}
6584
-
6585
- <style>
6662
+ </style>`,
6663
+ headAfterStyles: `<style>
6586
6664
  ${globalStyles}
6587
- </style>
6588
- </head>
6589
- <body>
6590
- ${html}
6591
- </body>
6592
- </html>`;
6593
- } finally {
6594
- sheet.seal();
6595
- }
6665
+ </style>`,
6666
+ lang: locale,
6667
+ dir,
6668
+ title,
6669
+ includeTokensCss: false
6670
+ });
6596
6671
  }
6597
6672
  const index = { render };
6598
6673
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jsonresume-theme-elegant-pink",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "Professional storytelling resume theme with warm rose red tones, compelling narratives, and strong visual hierarchy for marketing and communications professionals",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -30,12 +30,14 @@
30
30
  "react": "^19.2.0",
31
31
  "react-dom": "^19.2.0",
32
32
  "styled-components": "^6.1.19",
33
- "@jsonresume/core": "0.3.0"
33
+ "@jsonresume/core": "0.3.2"
34
34
  },
35
35
  "devDependencies": {
36
- "vitest": "^1.6.0",
37
36
  "@vitejs/plugin-react": "^4.3.4",
38
- "vite": "^5.4.21"
37
+ "vite": "^6.4.3",
38
+ "vitest": "^3.2.6",
39
+ "@jsonresume/sample-data": "0.2.1",
40
+ "@jsonresume/theme-kit": "1.0.2"
39
41
  },
40
42
  "peerDependencies": {
41
43
  "react": "^18.0.0 || ^19.0.0",
package/src/Resume.jsx CHANGED
@@ -397,6 +397,7 @@ function Resume({ resume }) {
397
397
  projects = [],
398
398
  volunteer = [],
399
399
  awards = [],
400
+ certificates = [],
400
401
  publications = [],
401
402
  languages = [],
402
403
  interests = [],
@@ -587,6 +588,32 @@ function Resume({ resume }) {
587
588
  </Section>
588
589
  )}
589
590
 
591
+ {certificates?.length > 0 && (
592
+ <Section>
593
+ <StyledSectionTitle>Certifications</StyledSectionTitle>
594
+ <EducationGrid>
595
+ {certificates.map((cert, index) => (
596
+ <AwardCard key={index}>
597
+ <AwardTitle>{cert.name}</AwardTitle>
598
+ {cert.issuer && <Degree>Issued by {cert.issuer}</Degree>}
599
+ {cert.date && <DateText>{cert.date}</DateText>}
600
+ {cert.url && (
601
+ <ProjectMeta>
602
+ <ProjectLink
603
+ href={cert.url}
604
+ target="_blank"
605
+ rel="noopener noreferrer"
606
+ >
607
+ View Credential →
608
+ </ProjectLink>
609
+ </ProjectMeta>
610
+ )}
611
+ </AwardCard>
612
+ ))}
613
+ </EducationGrid>
614
+ </Section>
615
+ )}
616
+
590
617
  {publications?.length > 0 && (
591
618
  <Section>
592
619
  <StyledSectionTitle>Publications</StyledSectionTitle>
package/src/index.jsx CHANGED
@@ -1,5 +1,4 @@
1
- import { renderToString } from 'react-dom/server';
2
- import { ServerStyleSheet } from 'styled-components';
1
+ import { renderResumeDocument } from '@jsonresume/core/ssr';
3
2
  import Resume from './Resume.jsx';
4
3
 
5
4
  /**
@@ -18,16 +17,7 @@ export function render(resume, options = {}) {
18
17
  title = resume.basics?.name || 'Resume',
19
18
  } = options;
20
19
 
21
- const sheet = new ServerStyleSheet();
22
-
23
- try {
24
- const html = renderToString(
25
- sheet.collectStyles(<Resume resume={resume} />)
26
- );
27
-
28
- const styles = sheet.getStyleTags();
29
-
30
- const designTokens = `
20
+ const designTokens = `
31
21
  :root {
32
22
  --resume-color-primary: #9f1239;
33
23
  --resume-color-secondary: #be123c;
@@ -37,7 +27,7 @@ export function render(resume, options = {}) {
37
27
  }
38
28
  `;
39
29
 
40
- const globalStyles = `
30
+ const globalStyles = `
41
31
  * {
42
32
  margin: 0;
43
33
  padding: 0;
@@ -63,30 +53,18 @@ export function render(resume, options = {}) {
63
53
  }
64
54
  `;
65
55
 
66
- return `<!DOCTYPE html>
67
- <html lang="${locale}" dir="${dir}">
68
- <head>
69
- <meta charset="UTF-8">
70
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
71
- <title>${title}</title>
72
-
73
- <style>
56
+ return renderResumeDocument(<Resume resume={resume} />, {
57
+ head: `<style>
74
58
  ${designTokens}
75
- </style>
76
-
77
- ${styles}
78
-
79
- <style>
59
+ </style>`,
60
+ headAfterStyles: `<style>
80
61
  ${globalStyles}
81
- </style>
82
- </head>
83
- <body>
84
- ${html}
85
- </body>
86
- </html>`;
87
- } finally {
88
- sheet.seal();
89
- }
62
+ </style>`,
63
+ lang: locale,
64
+ dir,
65
+ title,
66
+ includeTokensCss: false,
67
+ });
90
68
  }
91
69
 
92
70
  export { Resume };
@@ -0,0 +1,20 @@
1
+ import { describe, it, expect } from 'vitest';
2
+ import { runThemeRenderQa } from '@jsonresume/theme-kit/qa';
3
+ import { completeResume } from '@jsonresume/sample-data';
4
+ import { render } from '../src/index.jsx';
5
+
6
+ describe('Elegant Pink Theme', () => {
7
+ it('passes the shared theme render QA gate', async () => {
8
+ await runThemeRenderQa({ render, name: 'elegant-pink', expect });
9
+ });
10
+
11
+ it('renders expected fields from the standard fixture', () => {
12
+ const html = render(completeResume);
13
+
14
+ expect(html.length).toBeGreaterThan(0);
15
+ expect(html).toContain('<!DOCTYPE html>');
16
+ expect(html).toContain('Jane Developer');
17
+ expect(html).toContain('jane.developer@example.com');
18
+ expect(html).toContain('</html>');
19
+ });
20
+ });
package/dist/style.css DELETED
@@ -1,139 +0,0 @@
1
- /**
2
- * Resume Core Design Tokens
3
- * Framework-agnostic CSS variables for theming
4
- * Based on 2025 resume best practices and ATS compatibility research
5
- */
6
-
7
- :root {
8
- /* Typography - ATS-friendly fonts */
9
- --resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
10
- --resume-font-serif: Cambria, Georgia, "Times New Roman", serif;
11
- --resume-font-mono: "Courier New", Courier, monospace;
12
-
13
- /* Font Sizes - Optimal readability */
14
- --resume-size-name: 36px; /* Large, prominent name */
15
- --resume-size-heading: 16px; /* Section titles */
16
- --resume-size-subheading: 14px; /* Job titles, degrees */
17
- --resume-size-body: 11px; /* Body text, descriptions */
18
- --resume-size-small: 10px; /* Dates, locations, metadata */
19
-
20
- /* Font Weights */
21
- --resume-weight-normal: 400;
22
- --resume-weight-medium: 500;
23
- --resume-weight-semibold: 600;
24
- --resume-weight-bold: 700;
25
-
26
- /* Line Heights */
27
- --resume-line-height-tight: 1.2;
28
- --resume-line-height-normal: 1.5;
29
- --resume-line-height-relaxed: 1.75;
30
-
31
- /* Colors - Professional Theme (default) */
32
- --resume-color-primary: #1a1a1a;
33
- --resume-color-secondary: #4a4a4a;
34
- --resume-color-accent: #2563eb;
35
- --resume-color-background: #ffffff;
36
- --resume-color-border: #e5e7eb;
37
-
38
- /* Spacing - Consistent rhythm */
39
- --resume-space-section: 24px; /* Between major sections */
40
- --resume-space-item: 16px; /* Between list items */
41
- --resume-space-tight: 8px; /* Within items */
42
- --resume-space-margin: 48px; /* Page margins */
43
-
44
- /* Layout - Optimal line length */
45
- --resume-max-width: 660px; /* ~80 chars at body size */
46
- --resume-column-gap: 24px;
47
-
48
- /* Border Radius */
49
- --resume-radius-sm: 4px;
50
- --resume-radius-md: 8px;
51
- --resume-radius-lg: 12px;
52
-
53
- /* Shadows - Subtle depth */
54
- --resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
55
- --resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
56
- }
57
-
58
- /* Modern Theme Variant */
59
- [data-theme="modern"] {
60
- --resume-color-primary: #0f172a;
61
- --resume-color-secondary: #475569;
62
- --resume-color-accent: #8b5cf6;
63
- --resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
64
- }
65
-
66
- /* Classic Theme Variant */
67
- [data-theme="classic"] {
68
- --resume-color-primary: #000000;
69
- --resume-color-secondary: #333333;
70
- --resume-color-accent: #0066cc;
71
- --resume-font-sans: Georgia, "Times New Roman", serif;
72
- }
73
-
74
- /* Minimal Theme Variant */
75
- [data-theme="minimal"] {
76
- --resume-color-primary: #18181b;
77
- --resume-color-secondary: #71717a;
78
- --resume-color-accent: #000000;
79
- --resume-space-section: 32px;
80
- --resume-space-item: 20px;
81
- }
82
-
83
- /* High Contrast Variant (Accessibility) */
84
- [data-theme="high-contrast"] {
85
- --resume-color-primary: #000000;
86
- --resume-color-secondary: #000000;
87
- --resume-color-accent: #0000ff;
88
- --resume-color-background: #ffffff;
89
- --resume-color-border: #000000;
90
- }
91
-
92
- /* Print Styles - ATS-Friendly PDF Export */
93
- @media print {
94
- :root {
95
- /* Optimize for print */
96
- --resume-space-section: 18px;
97
- --resume-space-item: 12px;
98
- }
99
-
100
- @page {
101
- size: A4;
102
- margin: 0.5in;
103
- }
104
-
105
- /* Prevent awkward breaks */
106
- .resume-section {
107
- page-break-inside: avoid;
108
- }
109
-
110
- .resume-item {
111
- break-inside: avoid;
112
- }
113
-
114
- /* Widows and orphans control */
115
- p, li {
116
- widows: 3;
117
- orphans: 3;
118
- }
119
-
120
- /* Hyphenation for long words */
121
- .resume-description {
122
- hyphens: auto;
123
- }
124
-
125
- /* Hide interactive elements */
126
- .no-print {
127
- display: none !important;
128
- }
129
- }
130
-
131
- /* RTL Support */
132
- [dir="rtl"] {
133
- text-align: right;
134
- }
135
-
136
- [dir="rtl"] .resume-item {
137
- padding-left: 0;
138
- padding-right: var(--resume-space-tight);
139
- }