renamed variables
This commit is contained in:
parent
ff90f623aa
commit
5a37b02454
1 changed files with 33 additions and 33 deletions
66
src/css.css
66
src/css.css
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue