From 7168a0f55d6c4df6fc372308591093e50ffb567c Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Wed, 26 Jul 2023 16:44:57 +0800
Subject: [PATCH] Renamed custom CSS properties

---
 changelog/index.html                    |   1 +
 css/style-main.css                      | 118 +++++++++++-------------
 home.html                               |   1 +
 shrines/asummersend/asummersend.css     |  45 +++++----
 shrines/starwarskotor/starwarskotor.css |  45 +++++----
 5 files changed, 100 insertions(+), 110 deletions(-)

diff --git a/changelog/index.html b/changelog/index.html
index 70491c6d..18fc9923 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -44,6 +44,7 @@
                     <li>Leilukin's Hub now has a site button for you to link to!</li>
                     <li>Restructured the navigation bar.</li>
                     <li>Rearranged CSS and JavaScript file directories.</li>
+                    <li>Renamed custom CSS properties.</li>
                 </ul>
 
                 <p class="date-style">July 25, 2023:</p>
diff --git a/css/style-main.css b/css/style-main.css
index cd2cb191..86395c42 100644
--- a/css/style-main.css
+++ b/css/style-main.css
@@ -1,33 +1,31 @@
 :root {
-    --body-bg-color: #08031A;
-    --body-bg-image: url('/assets/starsforever.gif');
-    --body-font-color: #fceaff;
-    --content-bg-color: #3d2163;
+    --clr-body-bg: #08031A;
+    --img-body-bg: url('/assets/starsforever.gif');
+    --clr-body-txt: #fceaff;
+    --clr-content-bg: #3d2163;
 
-    --main-heading-color: #ED64F5;
-    --sub-heading-color: #e8b86f;
-    --title-border-color: #d3aad5;
-    --bold-font-color: #ff9933;
-    --link-color: #ED64F5;
-    --link-hover-color: #c355c9;
-    --quote-bg: #13092D;
-    --quote-border-color: #999999;
+    --clr-main-heading: #ED64F5;
+    --clr-sub-heading: #e8b86f;
+    --clr-title-border: #d3aad5;
+    --clr-bold-txt: #ff9933;
+    --clr-link: #ED64F5;
+    --clr-link-hover: #c355c9;
+    --clr-quote-bg: #13092D;
+    --clr-quote-border: #999999;
 
-    --code-bg-color: #241445;
-    --code-border-color: #82668f;
-    --date-color: rgb(158, 203, 255);
+    --clr-code-bg: #241445;
+    --clr-code-border: #82668f;
+    --clr-dates: rgb(158, 203, 255);
 
-    --link-btn-bg: #873eb5;
-    --link-btn-text: white;
-    --link-btn-hover: #241445;
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
 
-    --header-bg-color: black;
-    --nav-bg: #222;
-    --nav-link: white;
-    --nav-submenu-active: #111;
-    --nav-item-hover: #ccc;
+    --clr-header-bg: black;
+    --clr-nav-bg: #222;
+    --clr-nav-link: white;
 
-    --footer-bg: #13092D;
+    --clr-footer-bg: #13092D;
 }
 
 @font-face {
@@ -128,14 +126,14 @@ body {
     align-items: center;
     flex-direction: column;
     font-family: 'Nunito';
-    color: var(--body-font-color);
-    background-color: var(--body-bg-color);
-    background-image: var(--body-bg-image);
+    color: var(--clr-body-txt);
+    background-color: var(--clr-body-bg);
+    background-image: var(--img-body-bg);
     background-attachment: fixed;
 }
 
 h1 {
-    color: var(--main-heading-color);
+    color: var(--clr-main-heading);
 }
 
 h1 {
@@ -143,12 +141,12 @@ h1 {
 }
 
 h2, h3 {
-    color: var(--sub-heading-color);
+    color: var(--clr-sub-heading);
 }
 
 h1 {
     font-size: 2.2rem;
-    border-bottom: 0.18rem solid var(--title-border-color);
+    border-bottom: 0.18rem solid var(--clr-title-border);
 }
 
 h2 {
@@ -166,23 +164,23 @@ p {
 }
 
 strong {
-    color: var(--bold-font-color);
+    color: var(--clr-bold-txt);
 }
 
 a {
     font-weight: 700;
-    color: var(--link-color);
+    color: var(--clr-link);
 }
 
 a:hover {
-    color: var(--link-hover-color);
+    color: var(--clr-link-hover);
 }
 
 blockquote {
     margin: 1.5rem 0;
 	padding: 0.5rem 1rem;
-	border-inline-start: 0.1rem solid var(--main-heading-color);
-    background-color: var(--quote-bg);
+	border-inline-start: 0.1rem solid var(--clr-main-heading);
+    background-color: var(--clr-quote-bg);
 }
 
 button:hover {
@@ -213,14 +211,14 @@ summary {
 
 .date-style {
     font-weight: 700;
-    color: var(--date-color);
+    color: var(--clr-dates);
 }
 
 /* HEADER COMPONENT */
 header {
     width: 100%;
     max-height: 20rem;
-    background-color: var(--header-bg-color);
+    background-color: var(--clr-header-bg);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -233,14 +231,14 @@ header img {
 
 /* NAVIGATION BAR COMPONENT */
 nav {
-    background: var(--nav-bg);
+    background: var(--clr-nav-bg);
     padding: 0 0.6rem;
     width: 100%;
     z-index: 999;
 }
 
 nav a {
-    color: var(--nav-link);
+    color: var(--clr-nav-link);
     text-decoration: none;
     cursor: pointer;
 }
@@ -254,14 +252,6 @@ nav a {
     gap: 0.5rem;
 }
 
-.nav__item {
-    padding: 0.5rem;
-}
-
-.nav__item a:hover {
-    color: var(--nav-item-hover);
-}
-
 /* Added to the navbar with JS when it reaches its scroll position */
 .sticky-nav {
     position: fixed;
@@ -293,7 +283,7 @@ main {
 article:not(.divided-article),
 .content-section,
 .qna-section {
-    background-color: var(--content-bg-color);
+    background-color: var(--clr-content-bg);
     padding: 1.35rem;
 }
 
@@ -304,7 +294,7 @@ article:not(.divided-article),
 aside {
     padding: 1rem;
     font-size: 0.9rem;
-    background-color: var(--content-bg-color);
+    background-color: var(--clr-content-bg);
 }
 
 article, .content-container {
@@ -371,16 +361,16 @@ article, .content-container {
 /* CUSTOM CLASSES FOR SPECIAL ELEMENTS */
 .inline-code {
     font-family: monospace;
-    border: 0.06rem solid var(--code-border-color);
+    border: 0.06rem solid var(--clr-code-border);
     padding: 0.125rem 0.3rem;
     margin-left: 0.125rem;
     margin-right: 0.125rem;
-    background-color: var(--code-bg-color);
+    background-color: var(--clr-code-bg);
 }
 
 .code-snippet {
-    background-color: var(--code-bg-color);
-    border: 0.08rem solid var(--code-border-color);
+    background-color: var(--clr-code-bg);
+    border: 0.08rem solid var(--clr-code-border);
     display: block;
     padding: 0.5em 0.8rem;
     overflow-x: auto;
@@ -388,8 +378,8 @@ article, .content-container {
 }
 
 .text-box {
-    background-color: var(--quote-bg);
-    border: 0.06rem solid var(--main-heading-color);
+    background-color: var(--clr-quote-bg);
+    border: 0.06rem solid var(--clr-main-heading);
     padding: 0.625rem;
     margin-bottom: 0.8rem;
 }
@@ -398,12 +388,12 @@ article, .content-container {
 .link-btn {
     font: 1.3rem 'Source Sans Pro', Arial, sans-serif;
     display: inline-block;
-    border: 0.15rem solid var(--link-btn-bg);
+    border: 0.15rem solid var(--clr-link-btn-bg);
     border-radius: 0.6rem;
     padding: 0.75rem 1rem;
     margin: 0.3rem;
-    background-color: var(--link-btn-bg);
-    color: var(--link-btn-text);
+    background-color: var(--clr-link-btn-bg);
+    color: var(--clr-link-btn-txt);
     cursor: pointer;
     font-weight: 700;
     text-transform: uppercase;
@@ -417,7 +407,7 @@ article, .content-container {
 
 .link-btn:hover {
     cursor: pointer;
-    background-color: var(--link-btn-hover);
+    background-color: var(--clr-link-btn-hover);
     transition: 0.5s;
 }
 
@@ -463,13 +453,13 @@ article, .content-container {
     height: 2.5rem;
     font-size: 0.75rem;
     background-color:black;
-    color: var(--body-font-color);
+    color: var(--clr-body-txt);
 }
 
 .copy-txt-btn {
     border: none;
-    background: var(--link-btn-bg);
-    color: var(--body-font-color);
+    background: var(--clr-link-btn-bg);
+    color: var(--clr-body-txt);
     padding: 0.3rem 0.8rem;
     border-radius: 0.5rem;
     font-size: 0.9rem;
@@ -477,7 +467,7 @@ article, .content-container {
 }
 
 .copy-txt-btn:hover {
-    background: var(--link-hover-color);
+    background: var(--clr-link-hover);
 }
 
 /* TABLE OF CONTENTS */
@@ -508,7 +498,7 @@ article, .content-container {
 
 /* FOOTER COMPONENT */
 footer {
-    background-color: var(--footer-bg);
+    background-color: var(--clr-footer-bg);
     width: 100%;
     padding: 0.5rem;
     text-align: center;
diff --git a/home.html b/home.html
index a22874d0..8a058611 100644
--- a/home.html
+++ b/home.html
@@ -69,6 +69,7 @@
                             <li>Leilukin's Hub now has a site button for you to link to!</li>
                             <li>Restructured the navigation bar.</li>
                             <li>Rearranged CSS and JavaScript file directories.</li>
+                            <li>Renamed custom CSS properties.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>
diff --git a/shrines/asummersend/asummersend.css b/shrines/asummersend/asummersend.css
index d9a97216..f30e4025 100644
--- a/shrines/asummersend/asummersend.css
+++ b/shrines/asummersend/asummersend.css
@@ -1,34 +1,33 @@
 @import url(/css/style-main.css);
 
 :root {
-    --body-bg-color: #1f0033;
-    --body-bg-image: none;
-    --body-font-color: #fceaff;
-    --content-bg-color: #000000;
+    --clr-body-bg: #1f0033;
+    --img-body-bg: none;
+    --clr-body-txt: #fceaff;
+    --clr-content-bg: #000000;
 
-    --main-heading-color: #FF29D8;
-    --sub-heading-color: #FF29D8;
-    --title-border-color: #d3aad5;
-    --bold-font-color: #ff9933;
-    --link-color: #d270ff;
-    --link-hover-color: #7E4197;
-    --quote-bg: #222121;
-    --quote-border-color: #4d4385;
+    --clr-main-heading: #FF29D8;
+    --clr-sub-heading: #FF29D8;
+    --clr-title-border: #d3aad5;
+    --clr-bold-txt: #ff9933;
+    --clr-link: #d270ff;
+    --clr-link-hover: #7E4197;
+    --clr-quote-bg: #222121;
+    --clr-quote-border: #4d4385;
 
-    --code-bg-color: #241445;
-    --code-border-color: #82668f;
+    --clr-code-bg: #241445;
+    --clr-code-border: #82668f;
+    --clr-dates: rgb(158, 203, 255);
 
-    --link-btn-bg: #873eb5;
-    --link-btn-text: white;
-    --link-btn-hover: #241445;
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
 
-    --header-bg-color: black;
-    --nav-bg: #101010;
-    --nav-link: white;
-    --nav-submenu-active: #111;
-    --nav-item-hover: #ccc;
+    --clr-header-bg: black;
+    --clr-nav-bg: #101010;
+    --clr-nav-link: white;
 
-    --footer-bg: #101010;
+    --clr-footer-bg: #101010;
 }
 
 header {
diff --git a/shrines/starwarskotor/starwarskotor.css b/shrines/starwarskotor/starwarskotor.css
index 680aad15..33edf03a 100644
--- a/shrines/starwarskotor/starwarskotor.css
+++ b/shrines/starwarskotor/starwarskotor.css
@@ -1,34 +1,33 @@
 @import url(/css/style-main.css);
 
 :root {
-    --body-bg-color: #212121;
-    --body-bg-image: none;
-    --body-font-color: #fceaff;
-    --content-bg-color: #000000;
+    --clr-body-bg: #212121;
+    --img-body-bg: none;
+    --clr-body-txt: #fceaff;
+    --clr-content-bg: #000000;
 
-    --main-heading-color: #ffc400;
-    --sub-heading-color: #ffc400;
-    --title-border-color: #ffe387;
-    --bold-font-color: #ff9933;
-    --link-color: #bb9671;
-    --link-hover-color: #94575a;
-    --quote-bg: #2f2d2d;
-    --quote-border-color: #4d4385;
+    --clr-main-heading: #ffc400;
+    --clr-sub-heading: #ffc400;
+    --clr-title-border: #ffe387;
+    --clr-bold-txt: #ff9933;
+    --clr-link: #bb9671;
+    --clr-link-hover: #94575a;
+    --clr-quote-bg: #2f2d2d;
+    --clr-quote-border: #4d4385;
 
-    --code-bg-color: #241445;
-    --code-border-color: #e4dbbe;
+    --clr-code-bg: #241445;
+    --clr-code-border: #e4dbbe;
+    --clr-dates: rgb(158, 203, 255);
 
-    --link-btn-bg: #873eb5;
-    --link-btn-text: white;
-    --link-btn-hover: #241445;
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
 
-    --header-bg-color: black;
-    --nav-bg: #1c1c1c;
-    --nav-link: white;
-    --nav-submenu-active: #111;
-    --nav-item-hover: #ccc;
+    --clr-header-bg: black;
+    --clr-nav-bg: #1c1c1c;
+    --clr-nav-link: white;
 
-    --footer-bg: #1c1c1c;
+    --clr-footer-bg: #1c1c1c;
 }
 
 header img {