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 {
background-color: var(--primary-background-color);
background-color: transparent;
background-position: right 1.25rem center;
background-repeat: no-repeat;
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:focus {
background-color: hsl(var(--color-white-hsl) / 0.05);
background-color: hsl(var(--color-white-hsl) / 0.025);
outline-color: var(--color-orange);
}
}

16
css/vars.css
View File

@ -1,16 +1,16 @@
: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/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-off-white-hsl: 60 4% 95%; /* #F3F3F2 */
--color-off-white: hsl(var(--color-off-white-hsl));
--color-orange-hsl: 26 100% 46%; /* #EC6800 */
--color-orange-hsl: 19 88% 53%; /* #F05E1C */
--color-orange: hsl(var(--color-orange-hsl));
--color-white-hsl: 60 100% 99%; /* #FFFFFC */
--color-white: hsl(var(--color-white-hsl));
@ -47,9 +47,9 @@
/* Light Mode */
@media (prefers-color-scheme: light) {
: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-link-color: hsl(var(--color-black-hsl) / 0.75);
--primary-link-hover-color: var(--color-orange);
--primary-link-hover-color: var(--color-black);
}
}