forked from izu/student-web-if-development-kit
Compare commits
2 Commits
fixing-layout
...
mobile
| Author | SHA1 | Date | |
|---|---|---|---|
 cw
|
3a6763cd43 | ||
|
Andrie
|
5e59063642 |
@@ -1 +0,0 @@
|
||||
node_modules/
|
||||
+93
-4
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
@@ -1215,17 +1215,106 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responsive: 2-column on desktop -->
|
||||
<!-- Responsive: 2-column on desktop, hide image on small mobile -->
|
||||
<style>
|
||||
@media (min-width:1024px) {
|
||||
/* Hero: 2 kolom di tablet+ */
|
||||
@media (min-width:640px) {
|
||||
.lg-hero-grid {
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width:1024px) {
|
||||
#acaab-hero-img-wrap img {
|
||||
max-width: 420px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stats chips: stack vertikal di mobile kecil */
|
||||
@media (max-width:479px) {
|
||||
#acaab-stats > div > div:first-child {
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
#acaab-stats > div > div:first-child > div {
|
||||
flex: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
#acaab-stats > div > div:last-child {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project section header: stack di mobile kecil */
|
||||
@media (max-width:560px) {
|
||||
#acaab-proj-section > div > div:first-child {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Achievement section padding di mobile */
|
||||
@media (max-width:639px) {
|
||||
#acaab-ach-section {
|
||||
padding-top: 1.75rem !important;
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
#acaab-proj-section {
|
||||
padding-top: 1.75rem !important;
|
||||
padding-bottom: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal: bottom-sheet full-width di mobile */
|
||||
@media (max-width:639px) {
|
||||
.acaab-modal-backdrop {
|
||||
padding: 0 !important;
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
.acaab-modal-backdrop > div {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
max-height: 90vh !important;
|
||||
border-radius: 1rem 1rem 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination: full-width di mobile */
|
||||
@media (max-width:479px) {
|
||||
#acaab-ach-more, #acaab-ach-less {
|
||||
width: 100%;
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
/* Pagination container: stack vertikal */
|
||||
#acaab-ach-section > div:last-child {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Filter dropdown: full-width di mobile */
|
||||
@media (max-width:479px) {
|
||||
#acaab-ach-filters div[style*="flex:1"],
|
||||
#acaab-proj-filters div[style*="flex:1"],
|
||||
#acaab-ach-filters select,
|
||||
#acaab-proj-filters select {
|
||||
flex: 1 1 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
#acaab-ach-filters > div:last-child,
|
||||
#acaab-proj-filters > div:last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scroll hint: lebih kecil di mobile */
|
||||
@media (max-width:479px) {
|
||||
#acaab-proj-section p[style*="text-align:center"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
|
||||
|
||||
+67
-61
@@ -475,70 +475,75 @@ function infoRow(icon, label, value) {
|
||||
|
||||
function memberItem(nama, sub) {
|
||||
const initial = (nama || '?').charAt(0).toUpperCase();
|
||||
return `<li style="display:flex;align-items:center;gap:0.5rem;background:#f8fafc;padding:0.5rem 0.75rem;border-radius:0.375rem;">
|
||||
<span style="width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;">${initial}</span>
|
||||
<div style="display:flex;flex-direction:column;">
|
||||
<span style="font-size:0.875rem;font-weight:600;color:#334155;line-height:1.2;">${escHtml(nama)}</span>
|
||||
${sub ? `<span style="font-size:0.65rem;color:#94a3b8;margin-top:0.125rem;">${escHtml(sub)}</span>` : ''}
|
||||
</div>
|
||||
return `<li style="display:flex;align-items:center;gap:0.375rem;background:#f8fafc;padding:0.35rem 0.5rem;border-radius:0.25rem;">
|
||||
<span style="width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;">${initial}</span>
|
||||
<span style="font-size:0.75rem;font-weight:600;color:#334155;line-height:1.2;white-space:nowrap;">
|
||||
${escHtml(nama)}${sub ? `<span style="font-weight:400;color:#64748b;margin-left:0.25rem;">${escHtml(sub)}</span>` : ''}
|
||||
</span>
|
||||
</li>`;
|
||||
}
|
||||
|
||||
function openAchModal(a) {
|
||||
const membersHtml = a.members && a.members.length > 0 ? `
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
|
||||
<ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
|
||||
${a.members.map(m => memberItem(m.nama, m.angkatan ? `Angkatan ${m.angkatan}` : '')).join('')}
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;margin-bottom:0.25rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.375rem;">Anggota Tim</p>
|
||||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem;">
|
||||
${a.members.map(m => memberItem(m.nama, m.angkatan ? `(${m.angkatan})` : '')).join('')}
|
||||
</ul>
|
||||
</div>` : '';
|
||||
|
||||
renderModal(`
|
||||
<!-- Image header h-56 -->
|
||||
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
|
||||
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;height:100%;object-fit:cover;"
|
||||
<!-- Image header: blurred background + contain foreground to show full image in compact height -->
|
||||
<div style="position:relative;height:180px;width:100%;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#003150;flex-shrink:0;">
|
||||
<!-- Blurred background -->
|
||||
<img src="${escHtml(a.image)}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(0.65);transform:scale(1.1);pointer-events:none;"
|
||||
onerror="this.style.display='none'">
|
||||
<!-- Sharp contain foreground -->
|
||||
<img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="position:relative;width:100%;height:100%;object-fit:contain;z-index:10;"
|
||||
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
|
||||
<!-- Close button: white rounded-full -->
|
||||
<!-- Close button: dark round top-right -->
|
||||
<button id="acaab-modal-close" aria-label="Tutup"
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
|
||||
<i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
|
||||
<i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
|
||||
</button>
|
||||
<!-- Two badges bottom-left -->
|
||||
<div style="position:absolute;bottom:1rem;left:1rem;display:flex;gap:0.5rem;flex-wrap:wrap;">
|
||||
<span style="background:#feb401;color:#0f172a;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;display:flex;align-items:center;gap:0.375rem;">
|
||||
<i class="fas fa-trophy" style="font-size:0.65rem;"></i>${escHtml(a.rank)}
|
||||
</span>
|
||||
<span style="background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);color:white;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;text-transform:uppercase;letter-spacing:0.05em;">
|
||||
${escHtml(a.level)}
|
||||
<!-- Badge bottom-left: Rank -->
|
||||
<div style="position:absolute;bottom:0.75rem;left:0.75rem;z-index:20;">
|
||||
<span style="background:#feb401;color:#0f172a;font-size:0.7rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:0.25rem;display:inline-block;">
|
||||
${escHtml(a.rank)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div style="padding:1.5rem;">
|
||||
<span style="color:#1e40af;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;">${escHtml(a.category)}</span>
|
||||
<h2 style="font-size:1.125rem;font-weight:700;color:#003150;line-height:1.3;margin:0.25rem 0 1.25rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(a.title)}</h2>
|
||||
<!-- Info grid: slate-50 bg -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#f8fafc;border-radius:0.5rem;margin-bottom:1.25rem;">
|
||||
${infoRow('users', t('grp_acaab_modal_team'), a.team)}
|
||||
${a.nim ? infoRow('id-card', 'NIM', a.nim) : ''}
|
||||
${infoRow('user-graduate', t('grp_acaab_modal_generation'), a.generation)}
|
||||
${infoRow('calendar-alt', 'Tahun', String(a.year))}
|
||||
${infoRow('award', 'Kompetisi', a.competition)}
|
||||
${infoRow('tag', 'Bidang', a.category)}
|
||||
</div>
|
||||
${membersHtml}
|
||||
<div style="padding:1rem 1.25rem 1.25rem 1.25rem;">
|
||||
<!-- Title -->
|
||||
<h2 style="font-size:1.2rem;font-weight:700;color:#003150;line-height:1.3;margin:0 0 0.25rem;font-family:'Roboto', sans-serif;">
|
||||
${escHtml(a.title)}
|
||||
</h2>
|
||||
|
||||
<!-- Subtitle (Year • Category • Level) -->
|
||||
<p style="color:#94a3b8;font-size:0.75rem;font-weight:500;margin:0 0 0.75rem;line-height:1.4;">
|
||||
${escHtml(String(a.year))} • ${escHtml(a.category)} • ${escHtml(a.level)}
|
||||
</p>
|
||||
|
||||
<!-- Description -->
|
||||
<div style="border-top:1px solid #f1f5f9;padding-top:1rem;">
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
|
||||
<p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(a.description)}</p>
|
||||
</div>
|
||||
<!-- Close button full-width -->
|
||||
<button id="acaab-modal-close-btn" style="margin-top:1.5rem;width:100%;padding:0.75rem;background:#003150;color:white;font-weight:700;border:none;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;">
|
||||
Tutup
|
||||
</button>
|
||||
<p style="color:#475569;font-size:0.85rem;line-height:1.5;margin:0 0 1rem;">
|
||||
${escHtml(a.description)}
|
||||
</p>
|
||||
|
||||
${membersHtml}
|
||||
|
||||
<!-- Footer Info Row (Tim & Angkatan) -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;">
|
||||
<div>
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">TIM / PESERTA</p>
|
||||
<p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.team)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">ANGKATAN</p>
|
||||
<p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.generation)}</p>
|
||||
</div>
|
||||
</div>
|
||||
`, true);
|
||||
`, false, 'acaab-modal-achievement');
|
||||
}
|
||||
|
||||
// ─── Projects ─────────────────────────────────────────────────────────────────
|
||||
@@ -608,22 +613,23 @@ function renderProjects() {
|
||||
|
||||
function projCardHtml(p, idx) {
|
||||
const catBadges = p.categories.map(c => `
|
||||
<span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.3);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
|
||||
<span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.45);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
|
||||
<i class="fas fa-tag" style="font-size:0.5rem;"></i>${escHtml(c)}
|
||||
</span>`).join('');
|
||||
|
||||
return `
|
||||
<div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
|
||||
<div class="acaab-proj-left-bar"></div>
|
||||
<!-- Image h-52 (208px) dengan title overlay -->
|
||||
<!-- Image h-52 (208px) dengan title overlay mengikuti lebar teks -->
|
||||
<div style="height:208px;overflow:hidden;position:relative;">
|
||||
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" loading="lazy" class="acaab-card-img"
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
|
||||
<!-- Gradient overlay: title + categories di dalam gambar -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,49,80,0.85),transparent);padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;">
|
||||
<h4 style="font-size:1rem;font-weight:700;color:white;line-height:1.25;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(p.title)}</h4>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0.3rem;">${catBadges}</div>
|
||||
<!-- Overlay hanya di bawah untuk visibility, title pake background inline -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%);pointer-events:none;"></div>
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;padding:0.875rem 1rem;">
|
||||
<h4 style="font-size:0.9375rem;font-weight:700;color:white;line-height:1.3;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;display:inline;background:rgba(0,49,80,0.75);padding:0.15rem 0.35rem;border-radius:0.2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;backdrop-filter:blur(2px);">${escHtml(p.title)}</h4>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem;">${catBadges}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Body p-5 -->
|
||||
@@ -720,15 +726,15 @@ function openProjModal(p) {
|
||||
</div>`;
|
||||
|
||||
renderModal(`
|
||||
<!-- Image header h-56 -->
|
||||
<div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
|
||||
<!-- Image header h-70 (280px) -->
|
||||
<div style="position:relative;height:280px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
|
||||
<img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
|
||||
onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
|
||||
<!-- Close button -->
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 55%,transparent 100%);pointer-events:none;"></div>
|
||||
<!-- Close button: dark round top-right -->
|
||||
<button id="acaab-modal-close" aria-label="Tutup"
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
|
||||
<i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
|
||||
style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
|
||||
<i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
|
||||
</button>
|
||||
<!-- Category badges bottom-left -->
|
||||
<div style="position:absolute;bottom:1rem;left:1rem;display:flex;flex-wrap:wrap;gap:0.375rem;">${catBadgesImg}</div>
|
||||
@@ -760,18 +766,18 @@ function openProjModal(p) {
|
||||
Tutup
|
||||
</button>
|
||||
</div>
|
||||
`, true);
|
||||
`, true, 'acaab-modal-project');
|
||||
}
|
||||
|
||||
// ─── Modal shared ─────────────────────────────────────────────────────────────
|
||||
|
||||
function renderModal(innerHtml, hasCloseBtn = false) {
|
||||
function renderModal(innerHtml, hasCloseBtn = false, customClass = '') {
|
||||
const container = document.getElementById('acaab-modal');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="acaab-modal-backdrop" id="acaab-modal-bd">
|
||||
<div style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
|
||||
<div class="${customClass}" style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
|
||||
${innerHtml}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
@@ -204,3 +204,147 @@ body.acaab-modal-open {
|
||||
.acaab-fade-in, .acaab-skeleton, .acaab-card-img,
|
||||
.acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; }
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
RESPONSIVE FIXES — Mobile & Desktop
|
||||
===================================================== */
|
||||
|
||||
/* ── Achievement Grid ── */
|
||||
#acaab-ach-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 1rem !important;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
#acaab-ach-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
#acaab-ach-grid {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Project carousel card: ukuran responsif ── */
|
||||
@media (max-width: 479px) {
|
||||
.acaab-proj-card {
|
||||
width: 85vw !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
.acaab-proj-card {
|
||||
width: 72vw !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.acaab-proj-card {
|
||||
width: 42vw !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.acaab-proj-card {
|
||||
width: 28vw !important;
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Hero: sembunyikan gambar di mobile kecil ── */
|
||||
@media (max-width: 639px) {
|
||||
#acaab-hero-img-wrap {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) and (max-width: 1023px) {
|
||||
#acaab-hero-img-wrap img {
|
||||
max-width: 220px !important;
|
||||
}
|
||||
#acaab-hero-img-wrap {
|
||||
display: flex !important;
|
||||
}
|
||||
.lg-hero-grid {
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Stats: angka lebih kecil di mobile kecil ── */
|
||||
@media (max-width: 479px) {
|
||||
#stat-total-ach, #stat-intl, #stat-national, #stat-regional, #stat-total-proj {
|
||||
font-size: 1.65rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Modal: bottom-sheet di mobile ── */
|
||||
@media (max-width: 639px) {
|
||||
.acaab-modal-backdrop {
|
||||
padding: 0 !important;
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
.acaab-modal-backdrop > div {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
max-height: 88vh !important;
|
||||
border-radius: 1rem 1rem 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Project section header: buttons di mobile ── */
|
||||
@media (max-width: 479px) {
|
||||
#acaab-proj-prev, #acaab-proj-next {
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Filter dropdowns: stack secara vertikal di HP kecil ── */
|
||||
@media (max-width: 399px) {
|
||||
#acaab-ach-filters > div:last-child,
|
||||
#acaab-proj-filters > div:last-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
#acaab-ach-filters select,
|
||||
#acaab-proj-filters select {
|
||||
min-width: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Pagination buttons: lebih kecil di mobile ── */
|
||||
@media (max-width: 479px) {
|
||||
#acaab-ach-more, #acaab-ach-less, #acaab-proj-more {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Hero padding responsif ── */
|
||||
@media (max-width: 639px) {
|
||||
#acaab-hero {
|
||||
padding-top: 2rem !important;
|
||||
}
|
||||
#acaab-hero > div > div {
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Modal Achievement: lebih kecil di desktop sesuai mockup ── */
|
||||
@media (min-width: 640px) {
|
||||
.acaab-modal-achievement {
|
||||
max-width: 440px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tetap centered card di mobile (bukan bottom sheet) untuk prestasi */
|
||||
@media (max-width: 639px) {
|
||||
.acaab-modal-backdrop:has(.acaab-modal-achievement) {
|
||||
padding: 1rem !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.acaab-modal-achievement {
|
||||
max-width: 92% !important;
|
||||
max-height: 90vh !important;
|
||||
border-radius: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user