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; } }