Stirling-PDF/engine/src/default_templates/resume.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{FULL_NAME}} — Resume</title>
  <style>
    /* ── Theme variables (replaced at generation time) ── */
    {{THEME_CSS}}

    /* ── Print / page setup ── */
    @page {
      size: A4;
      margin: 15mm 18mm 15mm 18mm;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--theme-font, 'Helvetica Neue', Arial, sans-serif);
      font-size: 9.5pt;
      color: var(--theme-text, #1a1a1a);
      background: var(--theme-bg, #ffffff);
      line-height: 1.45;
    }

    .document {
      max-width: 174mm;
      margin: 0 auto;
    }

    /* ── Header / Name block ── */
    .resume-header {
      display: flex;
      align-items: flex-start;
      gap: 12pt;
      border-bottom: 2pt solid var(--theme-primary, #1e3a5f);
      padding-bottom: 8pt;
      margin-bottom: 10pt;
    }

    .resume-header .company-logo { flex-shrink: 0; margin-top: 2pt; }

    .resume-header-text { flex: 1; }

    .name {
      font-size: 22pt;
      font-weight: 700;
      color: var(--theme-heading, #111827);
      letter-spacing: -0.5px;
      line-height: 1.1;
    }

    .job-title {
      font-size: 11pt;
      font-weight: 400;
      color: var(--theme-accent, #2563eb);
      margin-top: 2pt;
      margin-bottom: 6pt;
    }

    .contact-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12pt;
      font-size: 8.5pt;
      color: var(--theme-text-muted, #6b7280);
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 3pt;
    }

    /* ── Section heading ── */
    .section-heading {
      font-size: 9.5pt;
      font-weight: 700;
      color: var(--theme-primary, #1e3a5f);
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: 0.75pt solid var(--theme-accent, #2563eb);
      padding-bottom: 2pt;
      margin: 10pt 0 5pt;
    }

    /* ── Summary ── */
    .summary-text {
      font-size: 9pt;
      color: var(--theme-text, #1a1a1a);
      line-height: 1.5;
    }

    /* ── Experience / Education entries ── */
    .entry {
      margin-bottom: 8pt;
      page-break-inside: avoid;
    }

    .entry-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 1pt;
    }

    .entry-title {
      font-size: 9.5pt;
      font-weight: 700;
      color: var(--theme-heading, #111827);
    }

    .entry-dates {
      font-size: 8pt;
      color: var(--theme-text-muted, #6b7280);
      white-space: nowrap;
    }

    .entry-org {
      font-size: 9pt;
      font-weight: 600;
      color: var(--theme-accent, #2563eb);
      margin-bottom: 2pt;
    }

    .entry-location {
      font-size: 8pt;
      color: var(--theme-text-muted, #6b7280);
    }

    .entry-bullets {
      margin-top: 3pt;
      padding-left: 12pt;
      list-style: disc;
    }

    .entry-bullets li {
      font-size: 8.5pt;
      margin-bottom: 1.5pt;
      line-height: 1.4;
    }

    .entry-description {
      font-size: 8.5pt;
      line-height: 1.5;
      margin-top: 2pt;
    }

    /* ── Skills ── */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4pt 10pt;
    }

    .skill-category {
      margin-bottom: 4pt;
    }

    .skill-category-name {
      font-size: 8.5pt;
      font-weight: 700;
      color: var(--theme-primary, #1e3a5f);
      margin-bottom: 2pt;
    }

    .skill-list {
      font-size: 8pt;
      color: var(--theme-text, #1a1a1a);
      line-height: 1.5;
    }

    /* ── Certifications / Projects ── */
    .cert-item {
      font-size: 8.5pt;
      margin-bottom: 3pt;
    }

    .cert-name {
      font-weight: 600;
      color: var(--theme-heading, #111827);
    }

    .cert-issuer {
      color: var(--theme-text-muted, #6b7280);
      font-size: 8pt;
    }

    /* ── Page-break controls ── */
    thead { display: table-header-group; }
    tr { break-inside: avoid; page-break-inside: avoid; }
    .section-heading { break-after: avoid; page-break-after: avoid; }
    .entry { break-inside: avoid; page-break-inside: avoid; }
    .skill-category { break-inside: avoid; page-break-inside: avoid; }
    .cert-item { break-inside: avoid; page-break-inside: avoid; }

    /* ── Print overrides ── */
    @media print {
      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .document { max-width: 100%; }
      .entry { page-break-inside: avoid; }
    }
  </style>
</head>
<body>
  <div class="document">

    <!-- Header -->
    <header class="resume-header">
      {{LOGO_BLOCK}}
      <div class="resume-header-text">
        <div class="name">{{FULL_NAME}}</div>
        <div class="job-title">{{JOB_TITLE}}</div>
        <div class="contact-row">
          <span class="contact-item">{{EMAIL}}</span>
          <span class="contact-item">{{PHONE}}</span>
          <span class="contact-item">{{LOCATION}}</span>
          <span class="contact-item">{{LINKEDIN}}</span>
          <span class="contact-item">{{WEBSITE}}</span>
        </div>
      </div>
    </header>

    <!-- Summary -->
    <section>
      <div class="section-heading">Professional Summary</div>
      <div class="summary-text">{{SUMMARY}}</div>
    </section>

    <!-- Experience -->
    <section>
      <div class="section-heading">Work Experience</div>
      {{EXPERIENCE_ITEMS}}
    </section>

    <!-- Education -->
    <section>
      <div class="section-heading">Education</div>
      {{EDUCATION_ITEMS}}
    </section>

    <!-- Skills -->
    <section>
      <div class="section-heading">Skills</div>
      <div class="skills-grid">
        {{SKILLS_ITEMS}}
      </div>
    </section>

    <!-- Certifications (optional) -->
    <section>
      <div class="section-heading">Certifications</div>
      {{CERTIFICATIONS_ITEMS}}
    </section>

    <!-- Projects (optional) -->
    <section>
      <div class="section-heading">Projects</div>
      {{PROJECTS_ITEMS}}
    </section>

  </div>
</body>
</html>