fix: Center course info below participant name in certificates

Layout now:
1. Participant name (centered)
2. Course title (centered, below name)
3. Date range (centered, below course title)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
richardtekula
2026-01-29 17:07:36 +01:00
parent 68905787ce
commit f7d252ee7b
3 changed files with 54 additions and 81 deletions

View File

@@ -39,20 +39,29 @@
background-repeat: no-repeat;
}
/* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
/* Main content - centered in the white area */
.main-content {
position: absolute;
top: 32mm;
left: 18mm;
right: 18mm;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-top: -15mm;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8mm;
}
.course-title {
font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-size: 24pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5mm;
margin-bottom: 4mm;
}
.course-dates {
@@ -68,21 +77,6 @@
color: #1a1a1a;
}
/* Participant name - centered above the horizontal line */
.participant-section {
position: absolute;
top: 92mm;
left: 0;
right: 0;
text-align: center;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
}
/* Issue date - above "Dátum" at bottom left */
.issue-date {
position: absolute;
@@ -103,7 +97,8 @@
</head>
<body>
<div class="certificate">
<div class="course-section">
<div class="main-content">
<h3 class="participant-name">{{participantName}}</h3>
<h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}}
<p class="course-dates">{{dateRange}}</p>
@@ -113,10 +108,6 @@
{{/if}}
</div>
<div class="participant-section">
<h3 class="participant-name">{{participantName}}</h3>
</div>
<div class="issue-date">{{issueDate}}</div>
<div class="certificate-id">ID: {{certificateId}}</div>
</div>

View File

@@ -39,20 +39,29 @@
background-repeat: no-repeat;
}
/* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
/* Main content - centered in the white area */
.main-content {
position: absolute;
top: 32mm;
left: 18mm;
right: 18mm;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-top: -15mm;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8mm;
}
.course-title {
font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-size: 24pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5mm;
margin-bottom: 4mm;
}
.course-dates {
@@ -68,21 +77,6 @@
color: #1a1a1a;
}
/* Participant name - centered above the horizontal line */
.participant-section {
position: absolute;
top: 92mm;
left: 0;
right: 0;
text-align: center;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
}
/* Issue date - above "Dátum" at bottom left */
.issue-date {
position: absolute;
@@ -103,7 +97,8 @@
</head>
<body>
<div class="certificate">
<div class="course-section">
<div class="main-content">
<h3 class="participant-name">{{participantName}}</h3>
<h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}}
<p class="course-dates">{{dateRange}}</p>
@@ -113,10 +108,6 @@
{{/if}}
</div>
<div class="participant-section">
<h3 class="participant-name">{{participantName}}</h3>
</div>
<div class="issue-date">{{issueDate}}</div>
<div class="certificate-id">ID: {{certificateId}}</div>
</div>

View File

@@ -39,20 +39,29 @@
background-repeat: no-repeat;
}
/* Course info section - positioned below "o absolvovaní kurzu" */
.course-section {
/* Main content - centered in the white area */
.main-content {
position: absolute;
top: 32mm;
left: 18mm;
right: 18mm;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-top: -15mm;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8mm;
}
.course-title {
font-family: 'Bahnschrift', 'Open Sans', Arial, sans-serif;
font-size: 32pt;
font-size: 24pt;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5mm;
margin-bottom: 4mm;
}
.course-dates {
@@ -68,21 +77,6 @@
color: #1a1a1a;
}
/* Participant name - centered above the horizontal line */
.participant-section {
position: absolute;
top: 92mm;
left: 0;
right: 0;
text-align: center;
}
.participant-name {
font-size: 28pt;
font-weight: 700;
color: #1a1a1a;
}
/* Issue date - above "Dátum" at bottom left */
.issue-date {
position: absolute;
@@ -103,7 +97,8 @@
</head>
<body>
<div class="certificate">
<div class="course-section">
<div class="main-content">
<h3 class="participant-name">{{participantName}}</h3>
<h2 class="course-title">{{courseTitle}}</h2>
{{#if dateRange}}
<p class="course-dates">{{dateRange}}</p>
@@ -113,10 +108,6 @@
{{/if}}
</div>
<div class="participant-section">
<h3 class="participant-name">{{participantName}}</h3>
</div>
<div class="issue-date">{{issueDate}}</div>
<div class="certificate-id">ID: {{certificateId}}</div>
</div>