From e5a5ec275251a3ffbccd9dfb3022fd24458685f5 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sat, 20 Apr 2024 22:10:23 +0700
Subject: [PATCH] Fix CSS for syllabi

---
 app/Views/default.php           |  2 +-
 app/Views/syllabus_city.php     | 16 ++++++++--------
 app/Views/syllabus_province.php | 30 ++++++++++++++++--------------
 public/{main8.css => main9.css} |  8 ++++----
 4 files changed, 29 insertions(+), 27 deletions(-)
 rename public/{main8.css => main9.css} (98%)

diff --git a/app/Views/default.php b/app/Views/default.php
index f06c8c8..20c6bc3 100644
--- a/app/Views/default.php
+++ b/app/Views/default.php
@@ -6,7 +6,7 @@
 	<title>OSN Bidang Informatika</title>
 
 	<link rel="shortcut icon" href="/osn-logo.png">
-	<link rel="stylesheet" href="/main8.css">
+	<link rel="stylesheet" href="/main9.css">
 	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@blueprintjs/core@3.35.0/lib/css/blueprint.css" />
diff --git a/app/Views/syllabus_city.php b/app/Views/syllabus_city.php
index c10f9a3..f48ef28 100644
--- a/app/Views/syllabus_city.php
+++ b/app/Views/syllabus_city.php
@@ -21,13 +21,13 @@
   </ul>
   <hr/>
   <h3>Bentuk Soal</h3>
-  <h4><b>A. Berpikir Komputasional</b></h4>
+  <h4>A. Berpikir Komputasional</h4>
   <ul>
     <li>Berupa soal cerita bergambar yang secara tak langsung terkait pada aspek dan konsep tertentu dalam informatika dan berpikir komputasional.</li>
     <li>Tipe soal ini mirip dengan soal-soal <a href="https://bebras.or.id/">Bebras</a>.</li>
   </ul>
   <br>
-  <h4><b>B. Pemecahan Masalah</b></h4>
+  <h4>B. Pemecahan Masalah</h4>
   <ul>
     <li>Berupa soal yang sudah mengarah ke pemecahan masalah dalam pemrograman kompetitif.</li>
     <li>Formatnya mirip dengan format OSN-P 2023 (atau bahkan tingkat nasional OSN). Bedanya, peserta <b>tidak diminta dan tidak perlu membuat program solusi</b>.</li>
@@ -35,7 +35,7 @@
     <li>Setiap anak soal akan dapat diselesaikan dengan cara "dihitung di atas kertas".</li>
   </ul>
   <br>
-  <h4><b>C. Algoritmika</b></h4>
+  <h4>C. Algoritmika</h4>
   <ul>
     <li>Diberikan beberapa kode program (dalam bahasa C/C++).</li>
     <li>Untuk setiap 1 kode program, akan ada 2&ndash;3 anak soal yang harus dikerjakan oleh peserta.</li>
@@ -47,8 +47,8 @@
   <hr/>
   <h3>Contoh Soal</h3>
   <div style="max-width: 650px; margin-left: auto; margin-right: auto">
-    <h4><b>A. Berpikir Komputasional</b></h4>
-    <p><b>1. Mesin Penerjemah Bentuk</b></p>
+    <h4>A. Berpikir Komputasional</h4>
+    <h5>1. Mesin Penerjemah Bentuk</h5>
     <p>Pak Dengklek memiliki sebuah mesin ajaib yang dapat menerjemahkan 26 huruf alfabet (dari A hingga Z) ke 26 bentuk berbeda. Huruf yang sama akan diterjemahkan ke bentuk yang sama, sedangkan huruf yang berbeda akan diterjemahkan ke bentuk yang berbeda.</p>
     <p>Untuk menggunakan mesin ini, Pak Dengklek terlebih dahulu menuliskan kata yang ingin diterjemahkan. Kemudian, mesin akan mencetak bentuk-bentuk hasil terjemahan setiap huruf di kata tersebut. Pada akhirnya, bentuk-bentuk ini akan dikumpulkan di dalam sebuah wadah yang dilabeli kata yang diterjemahkan.</p>
     <p>Berikut ini merupakan isi dari wadah hasil terjemahan kata "BEBEK" dan "BADAK".</p>
@@ -56,7 +56,7 @@
     <p>Jika Pak Dengklek ingin menerjemahkan kata "KERA", manakah dari 5 pilihan berikut yang mungkin merupakan isi dari wadah hasil terjemahan?</p>
     <img src="/images/osnk-a-2.png" style="display: block; width: 611px; margin-left: auto; margin-right: auto;"/>
     <br>
-    <p><b>2. Mengumpulkan Bola dalam Labirin</b></p>
+    <h5>2. Mengumpulkan Bola dalam Labirin</h5>
     <p>Pak Dengklek memiliki sebuah labirin yang terdiri dari 100 petak, yang tersusun atas 5 baris dan 20 kolom. Terdapat beberapa bola yang tersebar di beberapa petak. Berikut ini merupakan labirin milik Pak Dengklek tersebut.</p>
     <img src="/images/osnk-a-3.png" style="display: block; width: 588px; margin-left: auto; margin-right: auto;"/>
     <br>
@@ -64,7 +64,7 @@
     <p>Jika Pak Dengklek meletakkan bebeknya secara optimal, berapa <b>maksimal</b> banyak bola yang dapat dikumpulkan oleh bebeknya?</p>
     <br>
     <h4>B. Pemecahan Masalah</h4>
-    <p><b>3&ndash;5. Menghitung Subsekuens OSN</b></p>
+    <h5>3&ndash;5. Menghitung Subsekuens OSN</h5>
     <p>Diberikan sebuah string yang hanya terdiri dari huruf-huruf 'O', 'S', dan 'N'; Anda diminta untuk menghitung berapa banyak kemunculan subsekuens "OSN" dari string tersebut.</p>
     <p>Secara persisnya, Anda diminta untuk menghitung banyaknya cara memilih huruf 'O', 'S', dan 'N' dari string yang diberikan sehingga huruf 'O' yang dipilih berada sebelum huruf 'S' yang dipilih, dan huruf 'S' yang dipilih berada sebelum huruf 'N' yang dipilih.</p>
     <p>Sebagai contoh, ada 2 kemunculan subsekuens "OSN" pada string "SONOSONO", yakni dengan memilih huruf ke-2, 5, dan 7; serta dengan memilih huruf ke-4, 5, dan 7.</p>
@@ -80,7 +80,7 @@
     <p><b>Soal 5</b>. Pada string "SONOSONOSONOSONOSONOSONOSONO" (yakni penggabungan 7 kali string "SONO"), berapa kalikah subsekuens "OSN" muncul?</p>
     <br>
     <h4>C. Algoritmika</h4>
-    <p><b>6&ndash;8. Merah, Kuning, Hijau</b></p>
+    <h5>6&ndash;8. Merah, Kuning, Hijau</h5>
     <p>Perhatikan fungsi-fungsi berikut!</p>
     <img src="/images/osnk-c-1.png" style="display: block; width: 640px; margin-left: auto; margin-right: auto;"/>
     <p><b>Soal 6</b>. Berapakah keluaran dari hijau(123, 456789, 10)?</p>
diff --git a/app/Views/syllabus_province.php b/app/Views/syllabus_province.php
index 7a2915f..f7e08a1 100644
--- a/app/Views/syllabus_province.php
+++ b/app/Views/syllabus_province.php
@@ -23,17 +23,17 @@
   <hr/>
   <h3>Contoh Soal</h3>
   <div style="max-width: 650px; margin-left: auto; margin-right: auto">
-    <h4><b>A. Berbagi Candil</b></h4>
-    <h5><b>Deskripsi</b></h5>
+    <h4>A. Berbagi Candil</h4>
+    <h5>Deskripsi</h5>
     <p>Pak Dengklek memiliki N ekor bebek. Pagi hari ini, Pak Dengklek telah membeli M butir candil untuk dibagikan ke bebek-bebeknya. Perhatikan bahwa nilai M ini bisa saja 0 yang artinya Pak Dengklek sebenarnya tidak membeli candil.</p>
     <p>Pak Dengklek ingin membagikan candil-candil tersebut <b>sebanyak mungkin</b> kepada bebek-bebeknya selama setiap bebeknya mendapatkan banyak butir candil yang <b>sama rata</b>. Setelah membagikan candil-candil tersebut, sisa candil akan dimakan oleh Pak Dengklek.</p>
     <p>Tugas Anda adalah menentukan banyaknya candil yang akhirnya dimakan oleh Pak Dengklek.</p>
 
-    <h5><b>Soal A1</b></h5>
+    <h5>Soal A1</h5>
     <p>Jika Pak Dengklek membeli 100 butir candil untuk dibagikan ke 7 ekor bebeknya, berapakah banyaknya candil yang akhirnya dimakan oleh Pak Dengklek?</p>
     <p><b>Tuliskan jawaban dalam bentuk ANGKA.</b></p>
 
-    <h5><b>Soal A2</b></h5>
+    <h5>Soal A2</h5>
     <p>Asumsikan Pak Dengklek memiliki 10 ekor bebek. Dari 5 skenario berikut, manakah yang menyebabkan Pak Dengklek akhirnya memakan butir candil <b>paling banyak</b>?</p>
 
     <ul>
@@ -44,12 +44,12 @@
       <li>e. Pak Dengklek membeli 101 butir candil</li>
     </ul>
 
-    <h5><b>Soal A3</b></h5>
+    <h5>Soal A3</h5>
     <p>BENAR atau SALAH: Banyak candil yang akhirnya dimakan oleh Pak Dengklek selalu lebih kecil dari N.</p>
     
     <p><b>Tuliskan jawaban dalam bentuk BENAR/SALAH dengan huruf kapital.</b></p>
 
-    <h5><b>Soal Pemrograman</b></h5>
+    <h5>Soal Pemrograman</h5>
 
     <p>Tulislah sebuah program dengan bahasa C/C++ sesuai deskripsi cerita dengan format dan batasan sebagai berikut. Perhatikan bahwa untuk setiap kasus uji berlaku batas waktu selama 2 detik dan batas memori sebanyak 256 MB.</p>
 
@@ -61,7 +61,7 @@
     <p>Keluarkan sebuah baris berisi sebuah bilangan bulat yang menyatakan banyaknya candil yang akhirnya dimakan oleh Pak Dengklek.</p>
 
     <p><b>Contoh Masukan dan Keluaran</b></p>
-    <table border="1">
+    <table border="1" style="margin-bottom: 10px">
       <thead>
         <tr><th>Contoh Masukan</th><th>Contoh Keluaran</th></tr>
       </thead>
@@ -91,14 +91,16 @@
     <p><b>Peringatan</b></p>
     <p>Untuk dapat menjawab pertanyaan ini dengan benar, Anda mungkin perlu menggunakan tipe data <b>long long</b> untuk dapat menyimpan data dengan nilai yang besar. Tipe data <b>int</b> saja mungkin tidak cukup!</p>
 
-    <h4><b>B. Menghitung Subsekuens OSN</b></h4>
+    <hr>
+  
+    <h4>B. Menghitung Subsekuens OSN</h4>
 
-    <h5><b>Deskripsi</b></h5>
+    <h5>Deskripsi</h5>
 
     <p>Diberikan sebuah string S dengan panjang N yang hanya terdiri dari huruf-huruf 'O', 'S', dan 'N'; Anda diminta untuk menghitung berapa banyak kemunculan subsekuens "OSN" dari string tersebut.</p>
     <p>Secara persisnya, Anda diminta untuk menghitung banyaknya cara memilih huruf 'O', 'S', dan 'N' dari string yang diberikan sehingga huruf 'O' yang dipilih berada sebelum huruf 'S' yang dipilih, dan huruf 'S' yang dipilih berada sebelum huruf 'N' yang dipilih.</p>
 
-    <h5><b>Soal B1</b></h5>
+    <h5>Soal B1</h5>
     <p>Manakah dari 5 pilihan string berikut yang memiliki kemunculan subsekuens "OSN" <b>paling banyak</b>?</p>
     <ul>
       <li>a. "OSNOSN"</li>
@@ -108,15 +110,15 @@
       <li>e. "NONONONONON"</li>
     </ul>
 
-    <h5><b>Soal B2</b></h5>
+    <h5>Soal B2</h5>
     <p>Dari seluruh kemungkinan string dengan panjang 9, tuliskan string yang memiliki kemunculan subsekuens "OSN" <b>paling banyak</b>! Jika terdapat lebih dari satu kemungkinan jawaban, pilih yang <b>paling kecil</b> secara leksikografis.</p>
     <p><b>Tuliskan jawaban dalam bentuk STRING dengan huruf kapital.</b></p>
 
-    <h5><b>Soal B3</b></h5>
+    <h5>Soal B3</h5>
     <p>Pada string "SONOSONOSONOSONOSONOSONOSONO" (yakni penggabungan 7 kali string "SONO"), berapa kalikah subsekuens "OSN" muncul?</p>
     <p><b>Tuliskan jawaban dalam bentuk ANGKA.</b></p>
 
-    <h5><b>Soal Pemrograman</b></h5>
+    <h5>Soal Pemrograman</h5>
 
     <p>Tulislah sebuah program dengan bahasa C/C++ sesuai deskripsi cerita dengan format dan batasan sebagai berikut. Perhatikan bahwa untuk setiap kasus uji berlaku batas waktu selama 2 detik dan batas memori sebanyak 256 MB.</p>
    
@@ -129,7 +131,7 @@
     <p>Keluarkan sebuah baris berisi sebuah bilangan bulat yang menyatakan banyaknya kemunculan subsekuens "OSN" dari string S.</p>
     
     <p><b>Contoh Masukan dan Keluaran</b></p>
-    <table border="1">
+    <table border="1" style="margin-bottom: 10px">
       <thead>
         <tr><th>Contoh Masukan</th><th>Contoh Keluaran</th></tr>
       </thead>
diff --git a/public/main8.css b/public/main9.css
similarity index 98%
rename from public/main8.css
rename to public/main9.css
index b4a967a..ceb5f6b 100644
--- a/public/main8.css
+++ b/public/main9.css
@@ -17,8 +17,7 @@ p small {
 h1,
 h2,
 h3,
-h4,
-h5 {
+h4 {
   margin-top: 0 !important;
 }
 
@@ -42,8 +41,9 @@ h4 {
 }
 
 h5 {
-  font-size: 14px;
-  font-weight: 600;
+  margin-top: 20px !important;
+  font-size: 15px !important;
+  font-weight: bold !important;
 }
 
 hr {