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

View File

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

View File

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