e3e1e8db41
- slide/: 16 Marp slide files with inline UPB CSS theme (slide-01 through slide-16, covering all RTI-20252 topics) - slide/theme/: upb.css canonical theme + logo-upb.png - docs/AI-BOOK-PROMPT-TEMPLATE.md: RTI-20252 book authoring prompt
285 lines
7.5 KiB
CSS
285 lines
7.5 KiB
CSS
/* @theme upb */
|
|
|
|
/*
|
|
============================================================
|
|
UPB MARP THEME — Riset Teknologi Informasi
|
|
Universitas Putra Bangsa (UPB), Kebumen
|
|
Fak. Sains & Teknologi | Prodi Teknik Informatika
|
|
------------------------------------------------------------
|
|
Penggunaan di frontmatter slide:
|
|
theme: upb
|
|
class: bagian-ii ← opsional; ganti warna Bagian
|
|
|
|
Kelas per Bagian:
|
|
(kosong / default) = Bagian I — Biru #2563EB
|
|
bagian-ii = Bagian II — Hijau #059669
|
|
bagian-iii = Bagian III — Oranye #d97706
|
|
bagian-iv = Bagian IV — Ungu #7c3aed
|
|
|
|
Kelas layout khusus (gunakan via <!-- _class: ... -->):
|
|
cover = Cover / halaman judul
|
|
section-header = Pembatas antar-topik
|
|
integrative = Bab 8 (UTS — gradien biru-ungu)
|
|
fullcircle = Bab 16 penutup (gradien gelap)
|
|
============================================================
|
|
*/
|
|
|
|
/* ============================================================
|
|
1. CSS CUSTOM PROPERTIES — DEFAULT (Bagian I · Biru)
|
|
============================================================ */
|
|
section {
|
|
--accent: #2563EB;
|
|
--accent-dark: #1e3a5f;
|
|
--accent-light: #eff6ff;
|
|
--accent-border: #bfdbfe;
|
|
--cover-grad: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
|
|
--cover-sub: #bfdbfe;
|
|
--cover-meta: #93c5fd;
|
|
|
|
font-family: 'Segoe UI', Arial, sans-serif;
|
|
font-size: 1.1em;
|
|
color: #1e293b;
|
|
padding: 40px 60px;
|
|
}
|
|
|
|
/* ============================================================
|
|
2. VARIAN WARNA PER BAGIAN
|
|
============================================================ */
|
|
|
|
/* Bagian II — Hijau */
|
|
section.bagian-ii {
|
|
--accent: #059669;
|
|
--accent-dark: #064e3b;
|
|
--accent-light: #ecfdf5;
|
|
--accent-border: #a7f3d0;
|
|
--cover-grad: linear-gradient(135deg, #064e3b 0%, #059669 100%);
|
|
--cover-sub: #a7f3d0;
|
|
--cover-meta: #6ee7b7;
|
|
}
|
|
|
|
/* Bagian III — Oranye */
|
|
section.bagian-iii {
|
|
--accent: #d97706;
|
|
--accent-dark: #78350f;
|
|
--accent-light: #fffbeb;
|
|
--accent-border: #fde68a;
|
|
--cover-grad: linear-gradient(135deg, #78350f 0%, #d97706 100%);
|
|
--cover-sub: #fde68a;
|
|
--cover-meta: #fcd34d;
|
|
}
|
|
|
|
/* Bagian IV — Ungu */
|
|
section.bagian-iv {
|
|
--accent: #7c3aed;
|
|
--accent-dark: #3b0764;
|
|
--accent-light: #f5f3ff;
|
|
--accent-border: #ddd6fe;
|
|
--cover-grad: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
|
|
--cover-sub: #ddd6fe;
|
|
--cover-meta: #c4b5fd;
|
|
}
|
|
|
|
/* ============================================================
|
|
3. LAYOUT: COVER
|
|
============================================================ */
|
|
section.cover {
|
|
background: var(--cover-grad);
|
|
color: white;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Logo dimuat dari CSS — tidak perlu tag img di markdown */
|
|
section.cover::before {
|
|
content: '';
|
|
display: block;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: white url('../theme/logo-upb.png') center / contain no-repeat;
|
|
border-radius: 8px;
|
|
padding: 6px;
|
|
margin: 0 auto 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
section.cover h1 {
|
|
color: white;
|
|
font-size: 2em;
|
|
margin-bottom: 8px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
section.cover h2 {
|
|
color: var(--cover-sub);
|
|
font-size: 1.1em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
section.cover p { color: var(--cover-meta); font-size: 0.85em; }
|
|
section.cover strong { color: white; }
|
|
|
|
/* ============================================================
|
|
4. LAYOUT: SECTION HEADER (pembatas topik)
|
|
============================================================ */
|
|
section.section-header {
|
|
background: var(--accent);
|
|
color: white;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
section.section-header h1 {
|
|
color: white;
|
|
font-size: 2.5em;
|
|
border-bottom: none;
|
|
}
|
|
|
|
section.section-header h2 { color: rgba(255, 255, 255, 0.85); }
|
|
|
|
/* ============================================================
|
|
5. LAYOUT: INTEGRATIVE (Bab 8 — UTS Checkpoint)
|
|
============================================================ */
|
|
section.integrative {
|
|
background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%);
|
|
color: white;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
section.integrative::before {
|
|
content: '';
|
|
display: block;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: white url('../theme/logo-upb.png') center / contain no-repeat;
|
|
border-radius: 8px;
|
|
padding: 6px;
|
|
margin: 0 auto 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
section.integrative h1 {
|
|
color: white;
|
|
font-size: 2.2em;
|
|
border-bottom: none;
|
|
}
|
|
|
|
section.integrative h2 { color: #ddd6fe; font-size: 1.1em; }
|
|
section.integrative p { color: #c4b5fd; font-size: 0.85em; }
|
|
section.integrative strong { color: white; }
|
|
|
|
/* ============================================================
|
|
6. LAYOUT: FULLCIRCLE (Bab 16 — Penutup)
|
|
============================================================ */
|
|
section.fullcircle {
|
|
background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 50%, #1e293b 100%);
|
|
color: white;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
section.fullcircle h1 {
|
|
color: #ddd6fe;
|
|
font-size: 2.2em;
|
|
border-bottom: 3px solid #7c3aed;
|
|
}
|
|
|
|
section.fullcircle blockquote {
|
|
border-left: 5px solid #7c3aed;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #ddd6fe;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================================
|
|
7. ELEMEN KONTEN — menggunakan CSS vars dari bagian
|
|
============================================================ */
|
|
|
|
h1 {
|
|
color: var(--accent);
|
|
border-bottom: 3px solid var(--accent);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
h2 { color: var(--accent-dark); font-size: 1.3em; }
|
|
h3 { color: var(--accent); font-size: 1.05em; }
|
|
|
|
blockquote {
|
|
border-left: 5px solid var(--accent);
|
|
background: var(--accent-light);
|
|
padding: 12px 20px;
|
|
margin: 16px 0;
|
|
color: var(--accent-dark);
|
|
font-style: italic;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
table { font-size: 0.82em; width: 100%; border-collapse: collapse; }
|
|
th { background: var(--accent); color: white; padding: 8px 12px; }
|
|
td { padding: 6px 12px; border-bottom: 1px solid var(--accent-border); }
|
|
tr:nth-child(even) td { background: var(--accent-light); }
|
|
|
|
code {
|
|
background: var(--accent-light);
|
|
color: var(--accent-dark);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
pre {
|
|
background: #f1f5f9;
|
|
color: #1e293b;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--accent-border);
|
|
}
|
|
|
|
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
|
|
|
|
/* ============================================================
|
|
8. HELPER CLASSES
|
|
============================================================ */
|
|
|
|
/* Status / penekanan */
|
|
.warn { color: #d97706; font-weight: bold; }
|
|
.good { color: #059669; font-weight: bold; }
|
|
.bad { color: #dc2626; font-weight: bold; }
|
|
|
|
/* Kotak pernyataan akhir */
|
|
.final {
|
|
background: #fef3c7;
|
|
border-left: 5px solid #d97706;
|
|
padding: 14px 20px;
|
|
border-radius: 0 8px 8px 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Kotak highlight */
|
|
.highlight-box {
|
|
background: var(--accent-light);
|
|
border-left: 5px solid var(--accent);
|
|
color: var(--accent-dark);
|
|
padding: 16px 20px;
|
|
border-radius: 8px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* Kotak checkpoint bab 8 */
|
|
.checkpoint {
|
|
background: #f5f3ff;
|
|
border: 2px solid #7c3aed;
|
|
border-radius: 8px;
|
|
padding: 16px 24px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
9. PAGINATION & HEADER/FOOTER
|
|
============================================================ */
|
|
section::after {
|
|
font-size: 0.7em;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
section[data-marpit-advanced-background] > div:last-child { padding: 40px 60px; }
|