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 --> <!-- Header -->
<div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3"> <div class="flex justify-between items-center pb-2 border-b border-slate-100 mb-3">
<div> <div>
<h2 class="font-serif text-sm font-bold text-slate-900 uppercase">Staj Akademik Transkripti</h2> <h2 class="font-serif font-bold text-slate-900 uppercase transcript-header-title">Staj Akademik Transkripti</h2>
<p class="text-[7px] text-slate-400 tracking-wider uppercase mt-0.5">Ve Performans Değerlendirme Raporu</p> <p class="text-slate-400 tracking-wider uppercase mt-0.5 transcript-header-subtitle">Ve Performans Değerlendirme Raporu</p>
</div> </div>
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain"> <img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Logo" class="h-6 object-contain">
</div> </div>
<!-- Student Info block --> <!-- Student Info block -->
<div class="bg-slate-50 rounded-xl p-2.5 border border-slate-100 mb-3"> <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> <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 text-[8.5px]"> <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"> <div class="flex justify-between border-b border-slate-200/50 pb-1">
<span class="text-slate-500">Adı Soyadı:</span> <span class="text-slate-500">Adı Soyadı:</span>
<strong class="text-slate-800">{{ $application->name }}</strong> <strong class="text-slate-800">{{ $application->name }}</strong>
@@ -166,11 +166,11 @@
<div class="flex items-center gap-3"> <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"> <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> <div>
<span class="text-[6.5px] font-bold text-slate-400 uppercase tracking-wider block">Güvenli Doğrulama Kodu</span> <span class="font-bold text-slate-400 uppercase tracking-wider block verify-code-label">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-mono font-bold text-slate-800 block verify-code">{{ $application->certificate_code }}</span>
</div> </div>
</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> Trunçgil Teknoloji San. ve Tic. Ltd. Şti.<br>
Gaziantep Üniversitesi Teknopark No: 4A Gaziantep Üniversitesi Teknopark No: 4A
</div> </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/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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style> <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 { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }
@@ -193,6 +198,29 @@
font-family: 'Cinzel', 'Playfair Display', Georgia, serif; 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 */ /* Screen display aspect styling */
.certificate-page { .certificate-page {
width: 100%; width: 100%;
@@ -226,7 +254,7 @@
background-color: #f8fafc; background-color: #f8fafc;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid #e2e8f0;
color: #1e293b; color: #1e293b;
font-size: 0.45rem !important; font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@@ -234,7 +262,7 @@
padding: 0.2rem 0.35rem !important; padding: 0.2rem 0.35rem !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
color: #334155; color: #334155;
font-size: 0.45rem !important; font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.2 !important; line-height: 1.2 !important;
} }
.prose tr:hover { .prose tr:hover {
@@ -248,17 +276,17 @@
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.15rem; padding-bottom: 0.15rem;
font-weight: 700; font-weight: 700;
font-size: 0.6rem !important; font-size: calc(0.6rem * var(--transcript-font-scale)) !important;
} }
.prose h4 { .prose h4 {
color: #1e293b; color: #1e293b;
margin-top: 0.4rem !important; margin-top: 0.4rem !important;
margin-bottom: 0.2rem !important; margin-bottom: 0.2rem !important;
font-weight: 600; font-weight: 600;
font-size: 0.52rem !important; font-size: calc(0.52rem * var(--transcript-font-scale)) !important;
} }
.prose p { .prose p {
font-size: 0.45rem !important; font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.3 !important; line-height: 1.3 !important;
margin-top: 0.15rem !important; margin-top: 0.15rem !important;
margin-bottom: 0.2rem !important; margin-bottom: 0.2rem !important;
@@ -273,7 +301,7 @@
list-style-type: none !important; list-style-type: none !important;
} }
.prose ul li { .prose ul li {
font-size: 0.45rem !important; font-size: calc(0.45rem * var(--transcript-font-scale)) !important;
line-height: 1.3 !important; line-height: 1.3 !important;
margin: 0 !important; margin: 0 !important;
position: relative; position: relative;
@@ -293,7 +321,7 @@
font-style: italic; font-style: italic;
color: #475569; color: #475569;
margin: 0.4rem 0 !important; 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 */ /* Print media config for mixed Landscape & Portrait */