From 88be453ada51de4212d3ab50538b9d957ccc5931 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 20 Jun 2024 23:19:47 +0800
Subject: [PATCH] Use custom properties for stylesheet

---
 themes/leilukin/stylesheets/all.css | 163 +++++++++++++++-------------
 1 file changed, 90 insertions(+), 73 deletions(-)

diff --git a/themes/leilukin/stylesheets/all.css b/themes/leilukin/stylesheets/all.css
index 3fb6457..fd58f0a 100644
--- a/themes/leilukin/stylesheets/all.css
+++ b/themes/leilukin/stylesheets/all.css
@@ -19,20 +19,37 @@
     font-weight: 700;
     src: url('../../../fonts/lexend-v19-latin-700.woff2') format('woff2');
 }
+:root {
+    --clr-body-bg: #f7f5ed;
+    --clr-body-txt: #1f1f23;
+    --clr-content-bg: #fbfbf7;
+    --clr-pinned-bg: #fffddd;
+    --clr-highlight: #ffdd00;
+    --clr-border-main: #c6ccc8;
+    --clr-link-hover: #d94c7b;
+    --clr-tag: #208448;
+    --clr-tag-hover: #006428;
+    --clr-edit-btn: #39434d;
+    --clr-edit-btn-hover: #000;
+    --clr-delete-btn: #c04b4b;
+    --clr-delete-btn-hover: #af2d2d;
+    --clr-input-err: #ffdede;
+    --clr-white: #fff;
+}
 html {
     font-size: 16px;
 }
 *::selection {
-    color: #1f1f23;
-    background-color: #ffdd00;
+    color: var(--clr-body-txt);
+    background-color: var(--clr-highlight);
 }
 body {
     font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 1rem;
-    color: #1f1f23;
+    color: var(--clr-body-txt);
     line-height: 1.5;
     tab-size: 4;
-    background-color: #f7f5ed;
+    background-color: var(--clr-body-bg);
     margin: 2rem;
     margin-inline-start: 16rem;
     min-width: 280px;
@@ -108,8 +125,8 @@ small {
     font-size: 0.75em;
 }
 mark {
-    color: #1f1f23;
-    background-color: #ffdd00;
+    color: var(--clr-body-txt);
+    background-color: var(--clr-highlight);
 }
 del {
     font: inherit;
@@ -138,7 +155,7 @@ aside {
     margin-bottom: 1rem;
     padding: 1rem;
     background-color: #e5e2dc;
-    border-left: 2px solid #1f1f23;
+    border-left: 2px solid var(--clr-body-txt);
 }
 blockquote em,
 aside em {
@@ -228,15 +245,15 @@ dl dd {
 ul.navigation {
     list-style: none;
     box-sizing: border-box;
-    background-color: #fbfbf7;
+    background-color: var(--clr-content-bg);
     margin: 0rem 0rem 2rem 0rem;
     padding: 0em;
-    border: 1px solid #c6ccc8;
+    border: 1px solid var(--clr-border-main);
     border-radius: 0.5rem;
     background-image: linear-gradient(
         to bottom,
-        #ffffff 0em,
-        #fbfbf7 10em
+        var(--clr-white) 0em,
+        var(--clr-content-bg) 10em
     );
     box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
 }
@@ -283,7 +300,7 @@ ol.comments > li {
     width: 100%;
     margin: 0em;
     padding: 2rem 2rem 0rem 2rem;
-    border-bottom: 1px solid #c6ccc8;
+    border-bottom: 1px solid var(--clr-border-main);
 }
 ol.comments > li:last-child {
     border-bottom: none;
@@ -297,15 +314,15 @@ ol.comments > li.comment_form {
 div#main > details {
     display: block;
     box-sizing: border-box;
-    background-color: #fbfbf7;
+    background-color: var(--clr-content-bg);
     margin: 0rem 0rem 2rem 0rem;
     padding: 0em;
-    border: 1px solid #c6ccc8;
+    border: 1px solid var(--clr-border-main);
     border-radius: 0.5rem;
     background-image: linear-gradient(
         to bottom,
-        #ffffff 0em,
-        #fbfbf7 10em
+        var(--clr-white) 0em,
+        var(--clr-content-bg) 10em
     );
     box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
 }
@@ -333,16 +350,16 @@ table th {
     padding: 0.5em;
     font: inherit;
     font-weight: bold;
-    background-color: #39434d;
-    color: #ffffff;
-    border: 1px solid #39434d;
+    background-color: var(--clr-edit-btn);
+    color: var(--clr-white);
+    border: 1px solid var(--clr-edit-btn);
     vertical-align: middle;
 }
 table td {
     text-align: start;
     padding: 0.5em;
     font: inherit;
-    border: 1px solid #39434d;
+    border: 1px solid var(--clr-edit-btn);
     vertical-align: middle;
 }
 form, fieldset {
@@ -377,9 +394,9 @@ select, input {
     text-align: start;
     font: inherit;
     font-size: inherit;
-    color: #1f1f23;
-    background-color: #ffffff;
-    border: 1px solid #c6ccc8;
+    color: var(--clr-body-txt);
+    background-color: var(--clr-white);
+    border: 1px solid var(--clr-border-main);
     border-radius: 0em;
 }
 html[dir="ltr"] select {
@@ -421,18 +438,18 @@ input[type="radio"]:checked {
     background-repeat: no-repeat;
 }
 select:focus, input:focus {
-    background-color: #ffffff;
-    border: 1px solid #d94c7b;
-    outline: #d94c7b solid 1px;
+    background-color: var(--clr-white);
+    border: 1px solid var(--clr-link-hover);
+    outline: var(--clr-link-hover) solid 1px;
     outline-offset: 0px;
 }
 input::placeholder {
-    color: #1f1f23;
+    color: var(--clr-body-txt);
     opacity: 1;
 }
 input.error,
 input:invalid {
-    background-color: #ffdede;
+    background-color: var(--clr-input-err);
 }
 input#sidebar_search_field {
     display: inline;
@@ -447,17 +464,17 @@ textarea {
     height: 20ex;
     font: inherit;
     font-size: inherit;
-    color: #1f1f23;
+    color: var(--clr-body-txt);
     margin: 0.5em 0em;
     padding: 0.5em;
-    background-color: #ffffff;
-    border: 1px solid #c6ccc8;
+    background-color: var(--clr-white);
+    border: 1px solid var(--clr-border-main);
     border-radius: 0em;
     resize: vertical;
 }
 textarea:focus {
-    border: 1px solid #d94c7b;
-    outline: #d94c7b solid 1px;
+    border: 1px solid var(--clr-link-hover);
+    outline: var(--clr-link-hover) solid 1px;
     outline-offset: 0px;
 }
 button {
@@ -485,7 +502,7 @@ button#sidebar_search_submit {
     color: transparent;
 }
 button#sidebar_search_submit:focus {
-    background-color: #c6ccc8;
+    background-color: var(--clr-border-main);
 }
 button#sidebar_search_submit:hover {
     background-size: 60%;
@@ -521,14 +538,14 @@ div.ribbon {
     box-sizing: border-box;
     width: 100%;
     text-align: center;
-    color: #ffffff;
+    color: var(--clr-white);
     background-color: #426aa6;
     padding: 0.5em;
     margin-bottom: 2rem;
     border-radius: 0.25em;
 }
 div.flash {
-    background-color: #d94c7b;
+    background-color: var(--clr-link-hover);
 }
 div.metadata {
     font-weight: normal;
@@ -541,13 +558,13 @@ div.metadata {
     width: 100%;
     padding: 0.25rem 2rem;
     margin-top: 2rem;
-    background-color: #ffffff;
-    border-top: 1px solid #c6ccc8;
+    background-color: var(--clr-white);
+    border-top: 1px solid var(--clr-border-main);
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
 }
 article.post.pinned div.metadata {
-    background-color: #fffddd;
+    background-color: var(--clr-pinned-bg);
 }
 div.comments_pagination {
     width: 100%;
@@ -569,15 +586,15 @@ div#main > article, div.standalone {
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    background-color: #fbfbf7;
+    background-color: var(--clr-content-bg);
     margin: 0rem auto 2rem 0rem;
     padding: 2rem 2rem 0rem 2rem;
-    border: 1px solid #c6ccc8;
+    border: 1px solid var(--clr-border-main);
     border-radius: 0.5rem;
     background-image: linear-gradient(
         to bottom,
-        #ffffff 0em,
-        #fbfbf7 10em
+        var(--clr-white) 0em,
+        var(--clr-content-bg) 10em
     );
     box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
 }
@@ -605,14 +622,14 @@ ul.archive article.post.archive {
     position: relative;
     height: 196px;
     font-size: 0.75em;
-    background-color: #fbfbf7;
+    background-color: var(--clr-content-bg);
     padding: 8px;
-    border: 1px solid #c6ccc8;
+    border: 1px solid var(--clr-border-main);
     border-radius: 0.5rem;
     background-image: linear-gradient(
         to bottom,
-        #ffffff 0em,
-        #fbfbf7 10em
+        var(--clr-white) 0em,
+        var(--clr-content-bg) 10em
     );
 }
 section.post_archive_container {
@@ -644,20 +661,20 @@ article.audio audio {
 }
 a:link,
 a:visited {
-    color: #1f1f23;
+    color: var(--clr-body-txt);
     text-decoration: none;
 }
 a:hover,
 a:focus,
 a:active {
     outline: none;
-    color: #d94c7b;
+    color: var(--clr-link-hover);
     text-decoration: underline;
     text-underline-offset: 0.125em;
     text-decoration-thickness: 0.0625em;
 }
 div.ribbon a {
-    color: #ffffff;
+    color: var(--clr-white);
     font-weight: bold;
 }
 div.traversal a {
@@ -665,21 +682,21 @@ div.traversal a {
     padding: 0.5em 1em;
     min-width: 8em;
     border-radius: 0.25em;
-    color: #ffffff;
+    color: var(--clr-white);
     text-decoration: none;
-    background-color: #208448;
+    background-color: var(--clr-tag);
 }
 div.traversal a:hover,
 div.traversal a:focus,
 div.traversal a:active {
-    color: #ffffff;
-    background-color: #006428;
+    color: var(--clr-white);
+    background-color: var(--clr-tag-hover);
 }
 section a:link,
 p a:link,
 section a:visited,
 p a:visited {
-    color: #1f1f23;
+    color: var(--clr-body-txt);
     text-decoration: underline;
     text-underline-offset: 0.125em;
     text-decoration-thickness: 0.0625em;
@@ -690,7 +707,7 @@ section a:focus,
 p a:focus,
 section a:active,
 p a:active {
-    color: #d94c7b;
+    color: var(--clr-link-hover);
 }
 div.tags a,
 div.tag_cloud a {
@@ -698,9 +715,9 @@ div.tag_cloud a {
     padding: 0.25em 0.5em;
     margin-bottom: 4px;
     border-radius: 0.25em;
-    color: #ffffff;
+    color: var(--clr-white);
     text-decoration: none;
-    background-color: #208448;
+    background-color: var(--clr-tag);
 }
 div.tags a:hover,
 div.tags a:focus,
@@ -708,8 +725,8 @@ div.tags a:active,
 div.tag_cloud a:hover,
 div.tag_cloud a:focus,
 div.tag_cloud a:active {
-    color: #ffffff;
-    background-color: #006428;
+    color: var(--clr-white);
+    background-color: var(--clr-tag-hover);
 }
 div.doaction a, button {
     display: inline-block;
@@ -717,9 +734,9 @@ div.doaction a, button {
     padding: 0.5em 1em;
     border: none;
     border-radius: 0.25em;
-    color: #ffffff;
+    color: var(--clr-white);
     text-decoration: none;
-    background-color: #39434d;
+    background-color: var(--clr-edit-btn);
 }
 div.doaction a:hover,
 button:hover,
@@ -727,11 +744,11 @@ div.doaction a:focus,
 button:focus,
 div.doaction a:active,
 button:active {
-    background-color: #000000;
+    background-color: var(--clr-edit-btn-hover);
 }
 div.doaction a.post_delete_link,
 div.doaction a.delete_link {
-    background-color: #c04b4b;
+    background-color: var(--clr-delete-btn);
 }
 div.doaction a.post_delete_link:hover,
 div.doaction a.delete_link:hover,
@@ -739,10 +756,10 @@ div.doaction a.post_delete_link:focus,
 div.doaction a.delete_link:focus,
 div.doaction a.post_delete_link:active,
 div.doaction a.delete_link:active {
-    background-color: #af2d2d;
+    background-color: var(--clr-delete-btn-hover);
 }
 section.photo > a:focus {
-    outline: #d94c7b solid 4px;
+    outline: var(--clr-link-hover) solid 4px;
 }
 a.likes > img {
     display: inline-block;
@@ -770,7 +787,7 @@ a.archive_post_link {
 a.archive_post_link:hover,
 a.archive_post_link:focus,
 a.archive_post_link:active {
-    outline: #d94c7b solid 4px;
+    outline: var(--clr-link-hover) solid 4px;
 }
 iframe {
     max-width: 100%;
@@ -843,17 +860,17 @@ div.standalone > *:last-child {
         font-size: 4.2mm;
     }
     body {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
     }
     div#main > article,
     div.standalone {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
         background-image: none;
         page-break-inside: avoid;
         box-shadow: none;
     }
     ul.navigation {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
         background-image: none;
     }
 }
@@ -934,15 +951,15 @@ div.standalone > *:last-child {
 }
 @media (prefers-contrast: more) {
     body {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
     }
     div#main > article,
     div.standalone {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
         background-image: none;
     }
     ul.navigation {
-        background-color: #ffffff;
+        background-color: var(--clr-white);
         background-image: none;
     }
 }