From 0b53f0574019ecf3713afb40c2cfc92efa60e983 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Tue, 11 Jun 2024 18:34:37 +0700
Subject: [PATCH] feat: standardize unit to rem (#146)

---
 src/lib/core/Overlay.svelte       |  2 +-
 src/lib/core/ThemeSwitcher.svelte |  2 +-
 src/lib/internal/Docs.svelte      | 42 +++++++++++++++----------------
 src/routes/+error.svelte          |  4 +--
 src/routes/+page.svelte           |  2 +-
 src/routes/Footer.svelte          | 18 ++++++-------
 6 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/lib/core/Overlay.svelte b/src/lib/core/Overlay.svelte
index 5299334..ea81ff3 100644
--- a/src/lib/core/Overlay.svelte
+++ b/src/lib/core/Overlay.svelte
@@ -27,7 +27,7 @@
 		display: grid;
 		justify-items: center;
 		align-content: space-between;
-		padding: 1em 0.5em;
+		padding: 1rem 0.5rem;
 		border-radius: inherit;
 		background-color: rgba(0, 0, 0, 0.7);
 		color: #ffffff;
diff --git a/src/lib/core/ThemeSwitcher.svelte b/src/lib/core/ThemeSwitcher.svelte
index 3e32c90..26c9663 100644
--- a/src/lib/core/ThemeSwitcher.svelte
+++ b/src/lib/core/ThemeSwitcher.svelte
@@ -62,7 +62,7 @@
 <style>
 	button {
 		cursor: pointer;
-		height: 1.5em;
+		height: 1.5rem;
 	}
 	button path {
 		transition: var(--t-duration, 300ms);
diff --git a/src/lib/internal/Docs.svelte b/src/lib/internal/Docs.svelte
index 5878136..f274940 100644
--- a/src/lib/internal/Docs.svelte
+++ b/src/lib/internal/Docs.svelte
@@ -45,40 +45,40 @@
 <style>
 	main {
 		display: grid;
-		gap: 2em;
+		gap: 2rem;
 		grid-template-columns: minmax(0, 1fr);
 		align-items: flex-start;
-		padding: 0 2em;
-		margin: 2em auto;
+		padding: 0 2rem;
+		margin: 2rem auto;
 	}
 	aside {
 		position: sticky;
 		top: 0;
 		display: none;
 		align-content: flex-start;
-		padding-top: 2em;
+		padding-top: 2rem;
 	}
 	aside a {
 		line-height: 4ch;
 	}
 	aside a::before {
 		content: attr(data-index);
-		margin-right: 0.75em;
+		margin-right: 0.75rem;
 		font-family: var(--aqua-monospace);
 	}
 	article {
-		padding-top: 2em;
+		padding-top: 2rem;
 	}
 	section:not(:first-child) {
-		margin-top: 4em;
-		padding-top: 1em;
-		border-top: 0.25em solid var(--aqua-primary);
+		margin-top: 4rem;
+		padding-top: 1rem;
+		border-top: 0.25rem solid var(--aqua-primary);
 	}
 	section h2 {
 		position: relative;
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: 1.5em;
+		margin-bottom: 1.5rem;
 		text-transform: uppercase;
 		font-family: var(--aqua-heading);
 		font-size: 2rem;
@@ -87,7 +87,7 @@
 	section h2 > :global(a:first-child) {
 		position: absolute;
 		top: 50%;
-		left: -0.15em;
+		left: -0.15rem;
 		display: flex;
 		transform: translate(-95%, -50%);
 		transition: opacity 240ms;
@@ -104,39 +104,39 @@
 	section :global(h3) {
 		position: relative;
 		display: grid;
-		gap: 0.5em;
+		gap: 0.5rem;
 		grid-template-columns: auto auto 1fr;
 		align-items: center;
-		margin: 2em 0 1em;
+		margin: 2rem 0 1rem;
 		font-size: 1.5rem;
 		font-weight: 500;
 	}
 	section :global(h3::before) {
 		content: '';
-		width: 0.5em;
-		height: 0.5em;
+		width: 0.5rem;
+		height: 0.5rem;
 		border-radius: 50%;
-		margin-left: 0.25em;
-		box-shadow: 0 0 0 0.25em rgba(0, 112, 187, 0.6);
+		margin-left: 0.25rem;
+		box-shadow: 0 0 0 0.25rem rgba(0, 112, 187, 0.6);
 		background-color: var(--aqua-primary);
 	}
 	section :global(h3::after) {
 		content: '';
 		width: 100%;
-		height: 0.15em;
+		height: 0.15rem;
 		background-color: rgba(0, 112, 187, 0.6);
 	}
 	section :global(p) {
-		margin-bottom: 1em;
+		margin-bottom: 1rem;
 		line-height: 1.5;
 	}
 	section :global(.aqua.code-box) {
 		margin-top: 0;
-		margin-bottom: 1.5em;
+		margin-bottom: 1.5rem;
 	}
 	@media only screen and (min-width: 769px) {
 		main {
-			grid-template-columns: minmax(12em, 20%) minmax(0, 60em);
+			grid-template-columns: minmax(12rem, 20%) minmax(0, 60rem);
 		}
 		aside {
 			display: grid;
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 1dd71b9..30ae296 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -17,14 +17,14 @@
 <style>
 	article {
 		display: grid;
-		gap: 1em;
+		gap: 1rem;
 		justify-content: center;
 		margin-top: auto;
 		text-align: center;
 	}
 	h1 {
 		font-family: var(--aqua-monospace);
-		font-size: 5em;
+		font-size: 5rem;
 	}
 	pre {
 		text-align: left;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 930495b..b4941bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -54,7 +54,7 @@
 		gap: 0.75rem;
 		justify-items: center;
 
-		padding: 2em;
+		padding: 2rem;
 		margin: 0 auto;
 	}
 </style>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 5292d17..228a223 100644
--- a/src/routes/Footer.svelte
+++ b/src/routes/Footer.svelte
@@ -52,28 +52,28 @@
 		--t-duration: 200ms;
 
 		width: 100%;
-		max-width: 53em;
+		max-width: 53rem;
 		position: relative;
 		display: grid;
-		gap: 0.5em;
-		padding: 3em 1em;
-		margin: auto auto 3em;
+		gap: 0.5rem;
+		padding: 3rem 1rem;
+		margin: auto auto 3rem;
 		text-align: center;
 		line-height: 1.5;
 		font-family: var(--font-monospace);
-		font-size: clamp(0.8em, 3vw, 1em);
+		font-size: clamp(0.8rem, 3vw, 1rem);
 	}
 	.social-links {
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
-		padding: 0 0 0.5em;
+		padding: 0 0 0.5rem;
 		margin: auto;
 	}
 	.social-links > a {
-		flex: 0 1 5em;
-		padding-top: 1em;
+		flex: 0 1 5rem;
+		padding-top: 1rem;
 	}
 	.social-links a,
 	.social-links a:visited {
@@ -99,6 +99,6 @@
 		display: grid;
 		grid-template-rows: repeat(2, 1fr);
 		place-items: center;
-		gap: 0.5em;
+		gap: 0.5rem;
 	}
 </style>