Use custom properties for stylesheet
This commit is contained in:
Helen Chong
parent
4f167f0177
commit
88be453ada
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue