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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user