From 66efc64d368155a2d34f7810066cb176555cbc0e Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 15 Jun 2023 23:14:06 +0800
Subject: [PATCH] Replaced absolute units with relative units

---
 blog/blog.css                           | 10 ++---
 featured/featured.css                   |  6 +--
 main.css                                | 48 ++++++++++----------
 mycreations/mycreations.css             |  4 +-
 mymods/mymods.css                       | 12 ++---
 playlists/playlists.css                 | 10 ++---
 shrines/asummersend/asummersend.css     | 48 ++++++++++----------
 shrines/starwarskotor/starwarskotor.css | 60 ++++++++++++-------------
 8 files changed, 98 insertions(+), 100 deletions(-)

diff --git a/blog/blog.css b/blog/blog.css
index aa1b379a..72330ca4 100644
--- a/blog/blog.css
+++ b/blog/blog.css
@@ -20,7 +20,7 @@ body {
     background-position: top;
     background-repeat: repeat-x;
     background-attachment: fixed;
-    font-size: 18px;
+    font-size: 1.125rem; /* 18px */
     font-family: 'Nunito', Arial, sans-serif;
     margin: 0;
 }
@@ -83,7 +83,7 @@ h1, h2, h3, h4, h5 {
 }
 
 hr {
-    border-width: 2px 0 0 0;
+    border-width: 0.1rem 0 0 0;
     border-style: dashed;
     border-color: #a3bdc4; 
 }
@@ -92,7 +92,7 @@ hr {
 #container {
     margin: 3em auto;
     width: 90%;
-    max-width: 900px;
+    max-width: 1100px;
     background-color: black;
     color: #dddddd;
     outline-color: #425e74;
@@ -102,7 +102,7 @@ hr {
 }
 
 #content {
-    padding: 10px 5% 20px 5%;
+    padding: 0.5rem 5% 1rem 5%;
 }
 
 
@@ -182,5 +182,5 @@ hr {
 /*FOOTER STYLE*/
 #footer {
     font-size: 0.8em;
-    padding: 0 5% 10px 5%;
+    padding: 0 5% 0.5rem 5%;
 }
\ No newline at end of file
diff --git a/featured/featured.css b/featured/featured.css
index 673d5884..1f70ae39 100644
--- a/featured/featured.css
+++ b/featured/featured.css
@@ -1,9 +1,9 @@
 @import url("/main.css");
 
 blockquote {
-    margin: 20px 0;
-	padding: 0 20px;
-	border-inline-start: 3px solid #999999;
+    margin: 1.25rem 0;
+	padding: 0 1.25rem;
+	border-inline-start: 0.1875rem solid #999999;
 }
 
 #source {
diff --git a/main.css b/main.css
index bc4fac8c..98e8fea7 100644
--- a/main.css
+++ b/main.css
@@ -30,10 +30,10 @@ body {
 
 body {
     font-family: 'Nunito', Arial, sans-serif;
-    font-size: 16px;
+    font-size: 1rem; /* 16px */
     margin: 0;
     background-color: #08031A;
-    background-size: 65px;
+    background-size: 4rem;
     color: #fceaff;
     background-image: var(--body-bg-image);
     background-attachment: fixed;
@@ -54,12 +54,12 @@ h2, h3 {
 
 h1 {
     font-size: 2.2rem;
-    border-bottom: 3px solid var(--title-border);
-    padding-bottom: 8px;
+    border-bottom: 0.18rem solid var(--title-border);
+    padding-bottom: 0.5rem;
 }
 
 h1:not(:first-child) {
-    padding-top: 30px;
+    padding-top: 2rem;
 }
 
 h2 {
@@ -72,16 +72,16 @@ strong {
 
 span.monospace {
     font-family: monospace;
-    border: 1px solid var(--code-border);
-    padding: 2px 5px;
-    margin-left: 2px;
-    margin-right: 2px;
+    border: 0.06rem solid var(--code-border);
+    padding: 0.125rem 0.3rem;
+    margin-left: 0.125rem;
+    margin-right: 0.125rem;
     background-color: var(--code-bg);
 }
 
 .code-snippet {
     background-color: var(--code-bg);
-    border: 1px solid var(--code-border);
+    border: 0.06rem solid var(--code-border);
 	display: block;
 	padding: 0.5em;
 	overflow-x: auto;
@@ -90,8 +90,8 @@ span.monospace {
 
 .box {
     background-color: #13092D;
-    border: 1px solid #ED64F5;
-    padding: 10px;
+    border: 0.06rem solid #ED64F5;
+    padding: 0.625rem;
 }
 
 .full-width-youtube-video {
@@ -128,7 +128,7 @@ and change the media query according to the comment! */
 #header {
     width: 100%;
     background-color: #13092D;
-    height: 350px;
+    height: 22rem;
     background-image: var(--header-image);
     background-size: 100%;
     background-repeat: no-repeat;
@@ -137,7 +137,7 @@ and change the media query according to the comment! */
 
 /* NAVIGATION SECTION */
 #navbar {
-    height: 40px;
+    height: 2.5rem;
     background-color: #13092D;
     width: 100%;
 }
@@ -151,7 +151,7 @@ and change the media query according to the comment! */
 }
 
 #navbar li {
-    padding-top: 10px;
+    padding-top: 0.625rem;
 }
 
 #navbar li a {
@@ -174,8 +174,8 @@ and change the media query according to the comment! */
 /* EXTRAS */
 #topBar {
     width: 100%;
-    height: 30px;
-    padding: 10px;
+    height: 1.875rem;
+    padding: 0.625rem;
     font-size: smaller;
     background-color: #13092D;
 }
@@ -185,7 +185,7 @@ main {
     background-color: #3d2163;
     font-size: 1.2rem;
     flex: 1;
-    padding: 20px;
+    padding: 1.25rem;
     order: 2;
 }
 
@@ -194,7 +194,7 @@ If you want to style them separately,
 create styles for #leftSidebar and #rightSidebar */
 aside {
     background-color: #241445;
-    width: 200px;
+    width: 12.5rem;
     padding: 20px;
     font-size: smaller;
     /* this makes the sidebar text slightly smaller */
@@ -209,7 +209,7 @@ aside ul {
 }
 
 aside .box ul {
-    padding-left: 10px;
+    padding-left: 0.625rem;
   }
   
 
@@ -249,7 +249,7 @@ aside .box ul {
 /* SIDEBAR NAVIGATION LINKS */
 
 .nav-links {
-    padding-left: 20px;
+    padding-left: 1.25rem;
     font-size: 1rem;
     margin-top: 0;
     list-style-image: url(./assets/arrow-list.png);
@@ -258,10 +258,10 @@ aside .box ul {
 footer {
     background-color: #13092D;
     width: 100%;
-    height: 40px;
-    padding: 10px;
+    height: 2.5rem;
+    padding: 0.625rem;
     text-align: center;
-    margin-top: 0px;
+    margin-top: 0;
 }
 
 
diff --git a/mycreations/mycreations.css b/mycreations/mycreations.css
index e5727656..28fca23a 100644
--- a/mycreations/mycreations.css
+++ b/mycreations/mycreations.css
@@ -2,9 +2,9 @@
 
 .linkBtn {
     font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
-    border: 2px solid #BA6FE8;
+    border: 0.125rem solid #BA6FE8;
     border-radius: 10px;
-    padding: 12px 16px;
+    padding: 0.75rem 1rem;
     margin: 0.25em 0.15em;
     background-color: #241445;
     color: #BA6FE8;
diff --git a/mymods/mymods.css b/mymods/mymods.css
index f9e912eb..68f0c2d7 100644
--- a/mymods/mymods.css
+++ b/mymods/mymods.css
@@ -11,7 +11,7 @@
 
 .mod-entry {
     background: #241445;
-    max-width: 850px;
+    max-width: 900px;
     position:relative;
     margin: 1em 0;
     padding: 1em 1.5em 1.5em 1.5em;
@@ -33,8 +33,8 @@
 .filterBtn {
     border: none;
     outline: none;
-    padding: 12px 16px;
-    margin: 3px 0;
+    padding: 0.75rem 1rem;
+    margin: 0.1875rem 0;
     background-color: #d3aad5;
     color: #241445;
     cursor: pointer;
@@ -53,9 +53,9 @@
 
 .linkBtn {
     font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
-    border: 2px solid #BA6FE8;
-    border-radius: 10px;
-    padding: 12px 16px;
+    border: 0.125rem solid #BA6FE8;
+    border-radius: 0.6rem;
+    padding: 0.75rem 1rem;
     margin: 0.25em 0.15em;
     background-color: #241445;
     color: #BA6FE8;
diff --git a/playlists/playlists.css b/playlists/playlists.css
index e5727656..0c19bc8f 100644
--- a/playlists/playlists.css
+++ b/playlists/playlists.css
@@ -2,17 +2,17 @@
 
 .linkBtn {
     font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
-    border: 2px solid #BA6FE8;
-    border-radius: 10px;
-    padding: 12px 16px;
+    border: 0.125rem solid #BA6FE8;
+    border-radius: 0.6rem;
+    padding: 0.75rem 1rem;
     margin: 0.25em 0.15em;
     background-color: #241445;
     color: #BA6FE8;
     cursor: pointer;
     font-weight: 700;
     text-transform: uppercase;
-  }
-  
+}
+
 .linkBtn:hover {
     cursor:pointer;
     color: white;
diff --git a/shrines/asummersend/asummersend.css b/shrines/asummersend/asummersend.css
index f2cff4a4..5c938743 100644
--- a/shrines/asummersend/asummersend.css
+++ b/shrines/asummersend/asummersend.css
@@ -38,10 +38,10 @@ scroll-behavior: smooth;
 
 body {
   font-family: 'Nunito', Arial, sans-serif;
-  font-size: 16px;
+  font-size: 1rem; /* 16px */
   margin: 0;
   background-color: var(--body-bg);
-  background-size: 65px;
+  background-size: 4rem;
   color: var(--body-color);
   background-image: var(--body-bg-image);
   background-attachment: fixed;
@@ -60,8 +60,8 @@ h3 {
 
 h1 {
   font-size: 2.2rem;
-  border-bottom: 3px solid var(--title-border);
-  padding-bottom: 8px;
+  border-bottom: 0.18rem solid var(--title-border);
+  padding-bottom: 0.5rem;
 }
 
 h1:not(:first-child) {
@@ -85,15 +85,15 @@ hr {
 blockquote {
   border-left: var(--blockquote-border) 3px solid;
   background: var(--blockquote-bg);
-  padding: 0.1px 0.75rem;
+  padding: 0 0.75rem;
   margin: 0 1.5rem;
 }
 
 .linkBtn {
   font: 1.1rem 'Source Sans Pro', Arial, sans-serif;
-  border: 2px solid var(--link-color);
+  border: 0.125rem solid var(--link-color);
   border-radius: 10px;
-  padding: 12px 16px;
+  padding: 0.75rem 1rem;
   margin: 0.25em 0.15em;
   background: none;
   color: var(--link-color);
@@ -184,10 +184,10 @@ and change the media query according to the comment! */
 }
 
 #navbar {
-  height: 40px;
+  height: 2.5rem;
   background-color: var(--content-bg);
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
   z-index: 999;
 }
 
@@ -200,7 +200,7 @@ and change the media query according to the comment! */
 }
 
 #navbar li {
-  padding-top: 10px;
+  padding-top: 0.625rem;
 }
 
 #navbar li a {
@@ -223,8 +223,8 @@ and change the media query according to the comment! */
 /* EXTRAS */
 #topBar {
   width: 100%;
-  height: 30px;
-  padding: 10px;
+  height: 1.875rem;
+  padding: 0.625rem;
   font-size: smaller;
   background-color: var(--box-bg);
 }
@@ -238,11 +238,11 @@ main {
 
 .content-section {
   background-color: var(--content-bg);
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .content-section:not(:first-child) {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 /* This colors BOTH sidebars
@@ -250,8 +250,8 @@ If you want to style them separately,
 create styles for #leftSidebar and #rightSidebar */
 aside {
   background-color: var(--content-bg);
-  width: 200px;
-  padding: 20px;
+  width: 12.5rem;
+  padding: 1.25rem;
   font-size: smaller;
   /* this makes the sidebar text slightly smaller */
 }
@@ -265,17 +265,17 @@ aside ul {
 }
 
 aside .box ul {
-  padding-left: 10px;
+  padding-left: 1.25rem;
 }
 
 #leftSidebar {
   order: 1;
-  margin-right: 10px;
+  margin-right: 1.25rem;
 }
 
 #rightSidebar {
   order: 3;
-  margin-left: 10px;
+  margin-left: 1.25rem;
 }
 
 .sidebar-content {
@@ -308,10 +308,10 @@ aside .box ul {
 footer {
   background-color: var(--content-bg);
   width: 100%;
-  height: 40px;
-  padding: 10px;
+  height: 2.5rem;
+  padding: 1.25rem;
   text-align: center;
-  margin-top: 10px;
+  margin-top: 1.25rem;
 }
 
 
@@ -339,12 +339,12 @@ Use this new number as the "max-width" value below */
 
   #leftSidebar {
       order: 2;
-      margin-right: 10px;
+      margin-right: 1.25rem;
   }
 
   #rightSidebar {
       order: 3;
-      margin-left: 10px;
+      margin-left: 1.25rem;
   }
 
   #navbar ul {
diff --git a/shrines/starwarskotor/starwarskotor.css b/shrines/starwarskotor/starwarskotor.css
index e883f94b..68f3c2e4 100644
--- a/shrines/starwarskotor/starwarskotor.css
+++ b/shrines/starwarskotor/starwarskotor.css
@@ -38,10 +38,10 @@ scroll-behavior: smooth;
 
 body {
   font-family: 'Nunito', Arial, sans-serif;
-  font-size: 16px;
+  font-size: 1rem; /* 16px */
   margin: 0;
   background-color: var(--body-bg);
-  background-size: 65px;
+  background-size: 4rem;
   color: var(--body-color);
   background-image: var(--body-bg-image);
   background-attachment: fixed;
@@ -60,8 +60,8 @@ h3 {
 
 h1 {
   font-size: 2.2rem;
-  border-bottom: 3px solid var(--title-border);
-  padding-bottom: 8px;
+  border-bottom: 0.18rem solid var(--title-border);
+  padding-bottom: 0.5rem;
 }
 
 h1:not(:first-child) {
@@ -85,15 +85,15 @@ hr {
 blockquote {
   border-left: var(--blockquote-border) 3px solid;
   background: var(--blockquote-bg);
-  padding: 0.1px 0.75rem;
+  padding: 0 0.75rem;
   margin: 0 1.5rem;
 }
 
 .linkBtn {
   font: 1.1rem 'Source Sans Pro', Arial, sans-serif;
-  border: 2px solid var(--link-color);
+  border: 0.125rem solid var(--link-color);
   border-radius: 10px;
-  padding: 12px 16px;
+  padding: 0.75rem 1rem;
   margin: 0.25em 0.15em;
   background: none;
   color: var(--link-color);
@@ -112,9 +112,7 @@ blockquote {
 span.monospace {
   font-family: monospace;
   border: 1px solid var(--code-border);
-  padding: 2px 5px;
-  margin-left: 2px;
-  margin-right: 2px;
+  padding: 2px;
   background-color: var(--code-bg);
 }
 
@@ -171,7 +169,7 @@ and change the media query according to the comment! */
 #header {
   width: 100%;
   background-color: var(--content-bg);
-  height: 500px;
+  height: 480px;
   background-image: var(--header-image);
   background-size: 100%;
   background-repeat: no-repeat;
@@ -186,10 +184,10 @@ and change the media query according to the comment! */
 }
 
 #navbar {
-  height: 40px;
+  height: 2.5rem;
   background-color: var(--content-bg);
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
   z-index: 999;
 }
 
@@ -202,7 +200,7 @@ and change the media query according to the comment! */
 }
 
 #navbar li {
-  padding-top: 10px;
+  padding-top: 0.625rem;
 }
 
 #navbar li a {
@@ -225,8 +223,8 @@ and change the media query according to the comment! */
 /* EXTRAS */
 #topBar {
   width: 100%;
-  height: 30px;
-  padding: 10px;
+  height: 1.875rem;
+  padding: 0.625rem;
   font-size: smaller;
   background-color: var(--box-bg);
 }
@@ -240,11 +238,11 @@ main {
 
 .content-section {
   background-color: var(--content-bg);
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .content-section:not(:first-child) {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 /* This colors BOTH sidebars
@@ -252,8 +250,8 @@ If you want to style them separately,
 create styles for #leftSidebar and #rightSidebar */
 aside {
   background-color: var(--content-bg);
-  width: 200px;
-  padding: 20px;
+  width: 12.5rem;
+  padding: 1.25rem;
   font-size: smaller;
   /* this makes the sidebar text slightly smaller */
 }
@@ -267,17 +265,17 @@ aside ul {
 }
 
 aside .box ul {
-  padding-left: 10px;
+  padding-left: 1.25rem;
 }
 
 #leftSidebar {
   order: 1;
-  margin-right: 10px;
+  margin-right: 1.25rem;
 }
 
 #rightSidebar {
   order: 3;
-  margin-left: 10px;
+  margin-left: 1.25rem;
 }
 
 .sidebar-content {
@@ -310,10 +308,10 @@ aside .box ul {
 footer {
   background-color: var(--content-bg);
   width: 100%;
-  height: 40px;
-  padding: 10px;
+  height: 2.5rem;
+  padding: 1.25rem;
   text-align: center;
-  margin-top: 10px;
+  margin-top: 1.25rem;
 }
 
 
@@ -336,17 +334,17 @@ Use this new number as the "max-width" value below */
   /* the order of the items is adjusted here for responsiveness.
   since the sidebars would be too small on a mobile device. */
   main {
-      order: 2;
+      order: 1;
   }
 
   #leftSidebar {
-      order: 3;
-      margin-right: 10px;
+      order: 2;
+      margin-right: 1.25rem;
   }
 
   #rightSidebar {
-      order: 1;
-      margin-left: 10px;
+      order: 3;
+      margin-left: 1.25rem;
   }
 
   #navbar ul {