renamed variables

This commit is contained in:
qhri 2025-08-26 20:41:29 -04:00
parent ff90f623aa
commit 5a37b02454

View file

@ -29,38 +29,38 @@
}
:root {
--bg-color: hsl(300 25% 90%);
--font-color: hsl( 0 0% 20%);
--code-border-color: hsl( 0 0% 10%);
--link-color: hsl(225 73% 52%);
--link-color-hover: hsl(225 73% 42%);
--link-color-visited: hsl(249 80% 60%);
--link-color-visited-hover: hsl(249 80% 50%);
--header-bg-color: hsl(300 23% 85%);
--header-border-color: hsl(300 22% 75%);
--details-bg-color: hsl(300 25% 95%);
--c-bg: hsl(300 25% 90%);
--c-font: hsl( 0 0% 20%);
--c-code-border: hsl( 0 0% 10%);
--c-link: hsl(225 73% 52%);
--c-link-hover: hsl(225 73% 42%);
--c-link-visited: hsl(249 80% 60%);
--c-link-visited-hover: hsl(249 80% 50%);
--c-header-bg: hsl(300 23% 85%);
--c-header-border: hsl(300 22% 75%);
--c-details-bg: hsl(300 25% 95%);
@media (prefers-color-scheme: dark) {
--bg-color: hsl(300 25% 10%);
--font-color: hsl( 0 0% 80%);
--code-border-color: hsl( 0 0% 20%);
--link-color: hsl(225 73% 62%);
--link-color-hover: hsl(225 73% 72%);
--link-color-visited: hsl(249 80% 70%);
--link-color-visited-hover: hsl(249 80% 80%);
--header-bg-color: hsl(300 23% 15%);
--header-border-color: hsl(300 22% 25%);
--details-bg-color: hsl(300 25% 5%);
--c-bg: hsl(300 25% 10%);
--c-font: hsl( 0 0% 80%);
--c-code-border: hsl( 0 0% 20%);
--c-link: hsl(225 73% 62%);
--c-link-hover: hsl(225 73% 72%);
--c-link-visited: hsl(249 80% 70%);
--c-link-visited-hover: hsl(249 80% 80%);
--c-header-bg: hsl(300 23% 15%);
--c-header-border: hsl(300 22% 25%);
--c-details-bg: hsl(300 25% 5%);
}
}
body {
background-color: var(--bg-color);
background-color: var(--c-bg);
margin: 0;
}
p, h1, ul, h1, h2, h3, nav, header, details, table, figcaption {
color: var(--font-color);
color: var(--c-font);
font-family: atkinsonhyperlegible, Verdana, sans-serif;
}
@ -71,7 +71,7 @@ p, ul, nav, code, table, figcaption {
code {
background-color: hsl(0 0% 10%);
color: hsl(0 0% 90%);
border: 5px solid var(--code-border-color);
border: 5px solid var(--c-code-border);
overflow: scroll;
text-wrap: nowrap;
display: block;
@ -86,18 +86,18 @@ a {
}
&:link {
color: var(--link-color);
color: var(--c-link);
&:hover {
color: var(--link-color-hover);
color: var(--c-link-hover);
}
}
&:visited {
color: var(--link-color-visited);
color: var(--c-link-visited);
&:hover {
color: var(--link-color-visited-hover);
color: var(--c-link-visited-hover);
}
}
}
@ -121,10 +121,10 @@ nav {
}
#header-div {
background-color: var(--header-bg-color);
background-color: var(--c-header-bg);
text-align: center;
padding: 20px;
border-bottom: 2px dashed var(--header-border-color);
border-bottom: 2px dashed var(--c-header-border);
& h1 {
margin: 20px 0 0 0;
@ -133,10 +133,10 @@ nav {
}
details {
background-color: var(--details-bg-color);
background-color: var(--c-details-bg);
padding: 12px;
border-radius: 12px;
border: 2px dashed var(--header-border-color);
border: 2px dashed var(--c-header-border);
margin: 1em 0;
font-size: 18px;
@ -155,7 +155,7 @@ details {
}
table {
background-color: var(--details-bg-color);
background-color: var(--c-details-bg);
border-collapse: collapse;
margin-bottom: 1em;
}
@ -165,7 +165,7 @@ table {
}
td, th {
border: 2px solid var(--header-border-color);
border: 2px solid var(--c-header-border);
padding: 6px;
}