hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update colors

Browse Source
This commit is contained in:
Tressley Cahill 2022-11-01 12:36:09 -04:00
parent f1bad6b57a
commit 30ce81a733
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/styles.css
View File

@ -80,7 +80,7 @@ header svg { height: 4.5rem; }
} }
#search input { #search input {
background-color: var(--primary-background-color); background-color: transparent;
background-position: right 1.25rem center; background-position: right 1.25rem center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.5rem 1.5rem; background-size: 1.5rem 1.5rem;
@ -102,7 +102,7 @@ header svg { height: 4.5rem; }
#search input:hover { border-color: hsl(var(--color-white-hsl) / 0.5); } #search input:hover { border-color: hsl(var(--color-white-hsl) / 0.5); }
#search input:focus { #search input:focus {
background-color: hsl(var(--color-white-hsl) / 0.05); background-color: hsl(var(--color-white-hsl) / 0.025);
outline-color: var(--color-orange); outline-color: var(--color-orange);
} }
} }

16
css/vars.css
View File

@ -1,16 +1,16 @@
:root { :root {
/* /*
Colors pulled from https://www.colordic.org/w Colors
HSL(a) is used for better control over colors Values pulled from https://nipponcolors.com
HSL(a) is used for better control over colors.
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/ https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
https://css-tricks.com/color-alpha-anywhere/ https://css-tricks.com/color-alpha-anywhere/
*/ */
--color-black-hsl: 60 22% 7%; /* #16160E */ --color-black-hsl: 0 0% 5%; /* #0C0C0C */
--color-black: hsl(var(--color-black-hsl)); --color-black: hsl(var(--color-black-hsl));
--color-off-white-hsl: 60 4% 95%; /* #F3F3F2 */ --color-orange-hsl: 19 88% 53%; /* #F05E1C */
--color-off-white: hsl(var(--color-off-white-hsl));
--color-orange-hsl: 26 100% 46%; /* #EC6800 */
--color-orange: hsl(var(--color-orange-hsl)); --color-orange: hsl(var(--color-orange-hsl));
--color-white-hsl: 60 100% 99%; /* #FFFFFC */ --color-white-hsl: 60 100% 99%; /* #FFFFFC */
--color-white: hsl(var(--color-white-hsl)); --color-white: hsl(var(--color-white-hsl));
@ -47,9 +47,9 @@
/* Light Mode */ /* Light Mode */
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--primary-background-color: var(--color-off-white); --primary-background-color: hsl(var(--color-black-hsl) / 0.075);
--primary-font-color: hsl(var(--color-black-hsl) / 0.75); --primary-font-color: hsl(var(--color-black-hsl) / 0.75);
--primary-link-color: hsl(var(--color-black-hsl) / 0.75); --primary-link-color: hsl(var(--color-black-hsl) / 0.75);
--primary-link-hover-color: var(--color-orange); --primary-link-hover-color: var(--color-black);
} }
} }