qhri/personal-website
2
2
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

renamed variables

Browse source
This commit is contained in:
qhri 2025-08-26 20:41:29 -04:00
parent ff90f623aa
commit 5a37b02454
1 changed files with 33 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/css.css
View file

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