Prestasi Siswa SMPN 1 Pancur

tailwind.config = {
darkMode: ‘class’,
theme: {
extend: {
fontFamily: {
inter: [‘Inter’, ‘sans-serif’],
},
colors: {
‘gold’: {
‘light’: ‘#fffbeb’,
‘dark’: ‘#fde68a’,
‘text’: ‘#b45309’
},
‘silver’: {
‘light’: ‘#f8fafc’,
‘dark’: ‘#e2e8f0’,
‘text’: ‘#475569’
},
‘bronze’: {
‘light’: ‘#fff7ed’,
‘dark’: ‘#fed7aa’,
‘text’: ‘#c2410c’
},
‘hope’: {
‘light’: ‘#eff6ff’,
‘dark’: ‘#bfdbfe’,
‘text’: ‘#1d4ed8’
}
}
},
},
};

body {
font-family: ‘Inter’, sans-serif;
}

/* Responsive table styles for mobile */
@media (max-width: 768px) {
.responsive-table thead {
display: none; /* Sembunyikan header tabel di mobile */
}

.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
display: block; /* Ubah elemen tabel menjadi block-level */
}

.responsive-table tr {
border: 1px solid #e2e8f0;
border-radius: 0.75rem; /* 12px */
margin-bottom: 1rem; /* 16px */
padding: 0.5rem 1rem;
}
.dark .responsive-table tr {
border-color: #374151; /* gray-700 */
}

.responsive-table td {
display: flex;
justify-content: space-between;
align-items: center;
text-align: right;
padding-top: 0.75rem; /* 12px */
padding-bottom: 0.75rem; /* 12px */
border-bottom: 1px solid #f3f4f6; /* gray-100 */
}
.dark .responsive-table td {
border-color: #4b5563; /* gray-600 */
}

.responsive-table td:last-child {
border-bottom: none;
}

/* Buat label dari data-label attribute */
.responsive-table td::before {
content: attr(data-label);
font-weight: 600;
text-align: left;
margin-right: 1rem;
color: #111827; /* gray-900 */
}
.dark .responsive-table td::before {
color: #f9fafb; /* gray-50 */
}

/* Sembunyikan kolom ‘No’ di mobile */
.responsive-table td:first-child {
display: none;
}

/* Responsive header font size */
h1 {
font-size: 2.25rem; /* text-4xl -> text-3xl */
}
p {
font-size: 1rem; /* text-lg -> text-base */
}
}