lambdapaul/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Parameterize css colors

Browse Source
This commit is contained in:
Paul W. 2022-04-28 10:13:27 -04:00
parent 789e7ce70a
commit dc761025fa
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
styles/global.css
View File

@ -1,5 +1,13 @@
:root { :root {
--main-background-color: #0d1117;
--main-border-color: #555555; --main-border-color: #555555;
--link-color: #009dff;
--primary-green: #099945;
--secondary-green: #1a3a15;
--tertiary-green: #0f200c;
--primary-blue: #0a82b1;
--secondary-blue: #05455f;
--tertiary-blue: #05232f;
} }
@font-face { @font-face {
@ -64,10 +72,10 @@ body {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #fff; color: #ffffff;
text-align: left; text-align: left;
height: 100%; height: 100%;
background-color: #0d1117; background-color: var(--main-background-color);
background-size: cover; background-size: cover;
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
@ -128,14 +136,16 @@ p {
} }
a { a {
color: #009dff; color: var(--link-color);
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
outline: none; outline: none;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
a:focus { a:focus {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
@ -194,7 +204,7 @@ code {
padding: 0.2rem 1rem; padding: 0.2rem 1rem;
margin: 0.3rem 0.3rem; margin: 0.3rem 0.3rem;
color: #ffffff; color: #ffffff;
background:#099945; background: var(--primary-green);
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
transition: 100ms ease-in-out all; transition: 100ms ease-in-out all;
@ -204,8 +214,8 @@ code {
.button:hover { .button:hover {
text-decoration: none; text-decoration: none;
background:#1a3a15; background: var(--secondary-green);
box-shadow: 0 0 0 1px #1a3a15; box-shadow: 0 0 0 1px var(--secondary-green);
} }
.button:focus { .button:focus {
@ -216,21 +226,21 @@ code {
text-decoration: none; text-decoration: none;
box-shadow: none; box-shadow: none;
color: #cccccc; color: #cccccc;
background:#0f200c; background: var(--tertiary-green);
box-shadow: none; box-shadow: none;
} }
.button.blue { .button.blue {
background: #0a82b1; background: var(--primary-blue);
} }
.button.blue:hover { .button.blue:hover {
background:#05455f; background: var(--secondary-blue);
box-shadow: 0 0 0 1px #05455f; box-shadow: 0 0 0 1px var(--secondary-blue);
} }
.button.blue:active { .button.blue:active {
background:#05232f; background: var(--tertiary-blue);
box-shadow: none; box-shadow: none;
} }
@ -276,5 +286,4 @@ code {
.button.link.back::after { .button.link.back::after {
content: ''; content: '';
display: none; display: none;
} }