📝 Header

Thaza-Kun · Apr 5, 2024 · 5b6b475 · 5b6b475
1 parent 4f0763b
commit 5b6b475
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 32 deletions.
diff --git a/src/app.pcss b/src/app.pcss
@@ -21,7 +21,7 @@
 		--input: 0 0% 89.8%;
 
 		--primary: 201 60% 68%;
-		--primary-foreground: 0 0% 98%;
+		--primary-foreground: 211 100% 40%;
 
 		--secondary: 187 60% 75%;
 		--secondary-foreground: 0 0% 9%;
@@ -80,6 +80,25 @@
 	h1 {
 		@apply my-6 text-3xl font-extrabold;
 	}
+	h2 {
+		@apply my-2 text-2xl font-black;
+	}
+
+	li > a,
+	p > a {
+		@apply text-primary-foreground underline;
+	}
+
+	p {
+		@apply text-justify;
+	}
+
+	ol {
+		@apply ml-8 mt-3 list-decimal;
+	}
+	ul {
+		@apply ml-8 list-disc;
+	}
 
 	dt {
 		@apply font-semibold;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -11,5 +11,7 @@
 	</nav>
 </header>
 <body>
-	<slot />
+	<div class="mx-auto flex max-w-2xl flex-col place-items-center">
+		<slot />
+	</div>
 </body>
diff --git a/src/routes/rajah/+page.svelte b/src/routes/rajah/+page.svelte
@@ -21,32 +21,35 @@
 	});
 </script>
 
-<div class="mx-auto flex max-w-2xl flex-col place-items-center">
-	<h1>Rajah Bunyi</h1>
-	<Tabs.Root class="mx-auto flex max-w-7xl flex-col">
-		<Tabs.List class="mx-24 justify-around">
-			<Tabs.Trigger value="jawi">Jawi</Tabs.Trigger>
-			<Tabs.Trigger value="rumi">Rumi</Tabs.Trigger>
-			<Tabs.Trigger value="ipa">IPA</Tabs.Trigger>
-		</Tabs.List>
-		<div class="mx-auto flex place-content-center space-x-2 py-4">
-			<Switch bind:checked={nasalization} /><span> Sengaukan </span>
-			<PopOver.Root>
-				<PopOver.Trigger><Badge>?</Badge></PopOver.Trigger>
-				<PopOver.Content
-					>Penyegauan bunyi ialah perubahan bunyi apabila dipertemukan dengan unsur bunyi sengau
-					(seperti dalam imbuhan meN- dan peN-)</PopOver.Content
-				>
-			</PopOver.Root>
-		</div>
-		<Tabs.Content value="jawi">
-			<Table field="jawi" {phoneticTable} {nasalization} />
-		</Tabs.Content>
-		<Tabs.Content value="rumi">
-			<Table field="rumi" {phoneticTable} {nasalization} />
-		</Tabs.Content>
-		<Tabs.Content value="ipa">
-			<Table field="ipa" {phoneticTable} {nasalization} />
-		</Tabs.Content>
-	</Tabs.Root>
-</div>
+<h1>
+	<ruby class="flex flex-col">
+		<rt class="text-center font-mono text-2xl">&laquo; Rajah Bunyi &raquo;</rt>
+		<span>🗨 <span class="font-mono text-6xl">راجه بوڽي</span> 💬</span>
+	</ruby>
+</h1>
+<Tabs.Root class="mx-auto flex max-w-7xl flex-col">
+	<Tabs.List class="mx-24 justify-around">
+		<Tabs.Trigger value="jawi">Jawi</Tabs.Trigger>
+		<Tabs.Trigger value="rumi">Rumi</Tabs.Trigger>
+		<Tabs.Trigger value="ipa">IPA</Tabs.Trigger>
+	</Tabs.List>
+	<div class="mx-auto flex place-content-center space-x-2 py-4">
+		<Switch bind:checked={nasalization} /><span> Sengaukan </span>
+		<PopOver.Root>
+			<PopOver.Trigger><Badge>?</Badge></PopOver.Trigger>
+			<PopOver.Content
+				>Penyegauan bunyi ialah perubahan bunyi apabila dipertemukan dengan unsur bunyi sengau
+				(seperti dalam imbuhan meN- dan peN-)</PopOver.Content
+			>
+		</PopOver.Root>
+	</div>
+	<Tabs.Content value="jawi">
+		<Table field="jawi" {phoneticTable} {nasalization} />
+	</Tabs.Content>
+	<Tabs.Content value="rumi">
+		<Table field="rumi" {phoneticTable} {nasalization} />
+	</Tabs.Content>
+	<Tabs.Content value="ipa">
+		<Table field="ipa" {phoneticTable} {nasalization} />
+	</Tabs.Content>
+</Tabs.Root>
diff --git a/src/routes/tatabunyi/+page.svelte b/src/routes/tatabunyi/+page.svelte
@@ -51,7 +51,13 @@
 	}
 </script>
 
-<h1 class="h1 text-center">Tatabunyi</h1>
+<h1>
+	<ruby class="flex flex-col">
+		<rt class="text-center font-mono text-2xl">&laquo; Tatabunyi &raquo;</rt>
+		<span>📝 <span class="font-mono text-6xl">تاتابوڽي</span> 📰</span>
+	</ruby>
+</h1>
+
 <div class="m-4 flex flex-col items-center space-y-4">
 	<form
 		class="flex w-full max-w-sm items-center space-x-4"