truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement global CSS variable for transcript typography scaling and apply semantic class-based sizing

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-08 18:33:25 +03:00
parent 554f22695d
commit 3600cc2334
1 changed files with 42 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/career/verify.blade.php
+42 -14
View File
@@ -126,16 +126,16 @@
<!-- Header -->
<div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3">
<div>
<h2 class="font-serif text-sm font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2>
<p class="text-[7px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p>
<h2 class="font-serif font-bold text-slate-900 uppercase transcript-header-title">Staj Akademik Transkripti</h2>
<p class="text-slate-400 tracking-wider uppercase mt-0.5 transcript-header-subtitle">Ve Performans Değerlendirme Raporu</p>
</div>
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain">
</div>
<!-- Student Info block -->
<div class="bg-slate-50 rounded-xl p-2.5 border border-slate-100 mb-3">
<h3 class="text-[7.5px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Öğrenci / Stajyer Bilgileri</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 text-[8.5px]">
<h3 class="font-bold text-slate-400 uppercase tracking-widest mb-1.5 student-info-title">Öğrenci / Stajyer Bilgileri</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-8 student-info-grid">
<div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Adı Soyadı:</span>
<strong class="text-slate-800">{{ $application->name }}</strong>
@@ -166,11 +166,11 @@
<div class="flex items-center gap-3">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode(route('internship.verify', $application->certificate_code)) }}" alt="QR Code" class="w-14 h-14 border border-slate-200 p-0.5 rounded-lg bg-white">
<div>
<span class="text-[6.5px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span>
<span class="text-[9px] font-mono font-bold text-slate-800 block">{{ $application->certificate_code }}</span>
<span class="font-bold text-slate-400 uppercase tracking-wider block verify-code-label">Güvenli Doğrulama Kodu</span>
<span class="font-mono font-bold text-slate-800 block verify-code">{{ $application->certificate_code }}</span>
</div>
</div>
<div class="text-right text-[7.5px] text-slate-400">
<div class="text-right text-slate-400 footer-address">
Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
Gaziantep Üniversitesi Teknopark No: 4A
</div>
@@ -186,6 +186,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
:root {
/* Global scale factor for transcript page fonts. Adjust this easily (e.g. 1.0, 1.10, 1.20) */
--transcript-font-scale: 1.30;
}
body {
font-family: 'Inter', sans-serif;
}
@@ -193,6 +198,29 @@
font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
}
/* Transcript typography helpers scaled globally */
.transcript-header-title {
font-size: calc(0.875rem * var(--transcript-font-scale)) !important;
}
.transcript-header-subtitle {
font-size: calc(7px * var(--transcript-font-scale)) !important;
}
.student-info-title {
font-size: calc(7.5px * var(--transcript-font-scale)) !important;
}
.student-info-grid {
font-size: calc(8.5px * var(--transcript-font-scale)) !important;
}
.verify-code-label {
font-size: calc(6.5px * var(--transcript-font-scale)) !important;
}
.verify-code {
font-size: calc(9px * var(--transcript-font-scale)) !important;
}
.footer-address {
font-size: calc(7.5px * var(--transcript-font-scale)) !important;
}
/* Screen display aspect styling */
.certificate-page {
width: 100%;
@@ -226,7 +254,7 @@
background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0;
color: #1e293b;
font-size: 0.45rem !important;
font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -234,7 +262,7 @@
padding: 0.2rem 0.35rem !important;
border-bottom: 1px solid #e2e8f0;
color: #334155;
font-size: 0.45rem !important;
font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.2 !important;
}
.prose tr:hover {
@@ -248,17 +276,17 @@
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.15rem;
font-weight: 700;
font-size: 0.6rem !important;
font-size: calc(0.6rem * var(--transcript-font-scale)) !important;
}
.prose h4 {
color: #1e293b;
margin-top: 0.4rem !important;
margin-bottom: 0.2rem !important;
font-weight: 600;
font-size: 0.52rem !important;
font-size: calc(0.52rem * var(--transcript-font-scale)) !important;
}
.prose p {
font-size: 0.45rem !important;
font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.3 !important;
margin-top: 0.15rem !important;
margin-bottom: 0.2rem !important;
@@ -273,7 +301,7 @@
list-style-type: none !important;
}
.prose ul li {
font-size: 0.45rem !important;
font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.3 !important;
margin: 0 !important;
position: relative;
@@ -293,7 +321,7 @@
font-style: italic;
color: #475569;
margin: 0.4rem 0 !important;
font-size: 0.45rem !important;
font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
}
/* Print media config for mixed Landscape & Portrait */