style: Update color scheme
This commit is contained in:
parent
e1bfbf4b7c
commit
7c54c9951f
GPG key ID:
19A2EF3A3C0C18A9
1 changed files with 249 additions and 129 deletions
|
|
@ -3,21 +3,169 @@
|
|||
Color schemes
|
||||
*/
|
||||
color-scheme: light dark;
|
||||
--prickly-pear-yellow: #735f02;
|
||||
--eclipse-gray: #3a3a3a;
|
||||
--pumpkin-olive: #59521c;
|
||||
--manhattan-steel-blue: #224553;
|
||||
--pine-green: #36581d;
|
||||
--brown-swiss-calf-brown: #543c21;
|
||||
--ear-tag-red: #67160e;
|
||||
--flaming-gorge-blue: #1b3e5a;
|
||||
--hayyard-green: #355322;
|
||||
--coeurdalene-purple: #1b245a;
|
||||
--brown-swiss-cow-brown: #563c1f;
|
||||
--buffalo-blue: #0b496a;
|
||||
--saddle-blue: #104165;
|
||||
--brown-swiss-gray: #eaddca;
|
||||
--lavender-purple: #d9c1f6;
|
||||
|
||||
--ear-tag-red-1: oklch(97.5% 0.016 35.7);
|
||||
--ear-tag-red-2: oklch(95.9% 0.027 37.7);
|
||||
--ear-tag-red-3: oklch(91.8% 0.055 33.4);
|
||||
--ear-tag-red-4: oklch(84% 0.092 29.8);
|
||||
--ear-tag-red-5: oklch(80% 0.123 29.8);
|
||||
--ear-tag-red-6: oklch(71% 0.146 29.8);
|
||||
--ear-tag-red-7: oklch(66% 0.154 29.8);
|
||||
--ear-tag-red-8: oklch(58% 0.162 29.8);
|
||||
--ear-tag-red-9: oklch(53% 0.154 29.8);
|
||||
--ear-tag-red-10: oklch(49% 0.146 29.8);
|
||||
--ear-tag-red-11: oklch(42% 0.131 29.8);
|
||||
--ear-tag-red-12: oklch(35% 0.115 29.8);
|
||||
--ear-tag-red-13: oklch(27% 0.092 29.8);
|
||||
--ear-tag-red-14: oklch(20% 0.07 29.8);
|
||||
--ear-tag-red-15: oklch(16% 0.054 29.8);
|
||||
--ear-tag-red-16: oklch(10% 0.039 29.8);
|
||||
--ear-tag-red: var(--ear-tag-red-12);
|
||||
|
||||
--swiss-brown-1: oklch(98% 0.011 67.7);
|
||||
--swiss-brown-2: oklch(97% 0.023 67.7);
|
||||
--swiss-brown-3: oklch(93% 0.039 67.7);
|
||||
--swiss-brown-4: oklch(84% 0.046 67.7);
|
||||
--swiss-brown-5: oklch(80% 0.061 67.7);
|
||||
--swiss-brown-6: oklch(71% 0.072 67.7);
|
||||
--swiss-brown-7: oklch(66% 0.076 67.7);
|
||||
--swiss-brown-8: oklch(58% 0.08 67.7);
|
||||
--swiss-brown-9: oklch(53% 0.076 67.7);
|
||||
--swiss-brown-10: oklch(49% 0.072 67.7);
|
||||
--swiss-brown-11: oklch(42% 0.065 67.7);
|
||||
--swiss-brown-12: oklch(35% 0.057 67.7);
|
||||
--swiss-brown-13: oklch(27% 0.046 67.7);
|
||||
--swiss-brown-14: oklch(20% 0.035 67.7);
|
||||
--swiss-brown-15: oklch(16% 0.027 67.7);
|
||||
--swiss-brown-16: oklch(10% 0.019 67.7);
|
||||
--swiss-brown: var(--swiss-brown-12);
|
||||
|
||||
--prickly-pear-yellow-1: oklch(98% 0.017 94.5);
|
||||
--prickly-pear-yellow-2: oklch(97% 0.035 94.5);
|
||||
--prickly-pear-yellow-3: oklch(93% 0.059 94.5);
|
||||
--prickly-pear-yellow-4: oklch(84% 0.07 94.5);
|
||||
--prickly-pear-yellow-5: oklch(80% 0.093 94.5);
|
||||
--prickly-pear-yellow-6: oklch(71% 0.11 94.5);
|
||||
--prickly-pear-yellow-7: oklch(66% 0.116 94.5);
|
||||
--prickly-pear-yellow-8: oklch(58% 0.122 94.5);
|
||||
--prickly-pear-yellow-9: oklch(53% 0.116 94.5);
|
||||
--prickly-pear-yellow-10: oklch(49% 0.11 94.5);
|
||||
--prickly-pear-yellow-11: oklch(42% 0.099 94.5);
|
||||
--prickly-pear-yellow-12: oklch(35% 0.083 93.6);
|
||||
--prickly-pear-yellow-13: oklch(27.1% 0.064 92.8);
|
||||
--prickly-pear-yellow-14: oklch(20% 0.047 92.4);
|
||||
--prickly-pear-yellow-15: oklch(16% 0.038 93.3);
|
||||
--prickly-pear-yellow-16: oklch(10% 0.024 89.7);
|
||||
--prickly-pear-yellow: var(--prickly-pear-yellow-7);
|
||||
|
||||
--hayyard-green-1: oklch(98% 0.014 135);
|
||||
--hayyard-green-2: oklch(97% 0.03 135);
|
||||
--hayyard-green-3: oklch(93% 0.049 135);
|
||||
--hayyard-green-4: oklch(84% 0.058 135);
|
||||
--hayyard-green-5: oklch(80% 0.078 135);
|
||||
--hayyard-green-6: oklch(71% 0.092 135);
|
||||
--hayyard-green-7: oklch(66% 0.097 135);
|
||||
--hayyard-green-8: oklch(58% 0.103 135);
|
||||
--hayyard-green-9: oklch(53% 0.097 135);
|
||||
--hayyard-green-10: oklch(49% 0.092 135);
|
||||
--hayyard-green-11: oklch(42% 0.083 135);
|
||||
--hayyard-green-12: oklch(35% 0.073 135);
|
||||
--hayyard-green-13: oklch(27% 0.058 135);
|
||||
--hayyard-green-14: oklch(20% 0.044 135);
|
||||
--hayyard-green-15: oklch(16% 0.034 135);
|
||||
--hayyard-green-16: oklch(10% 0.025 135);
|
||||
--hayyard-green: var(--hayyard-green-11);
|
||||
|
||||
--flaming-gorge-blue-1: oklch(98% 0.012 241);
|
||||
--flaming-gorge-blue-2: oklch(96.8% 0.021 230);
|
||||
--flaming-gorge-blue-3: oklch(92.9% 0.041 242);
|
||||
--flaming-gorge-blue-4: oklch(84% 0.051 245);
|
||||
--flaming-gorge-blue-5: oklch(80% 0.069 245);
|
||||
--flaming-gorge-blue-6: oklch(71% 0.081 245);
|
||||
--flaming-gorge-blue-7: oklch(66% 0.086 245);
|
||||
--flaming-gorge-blue-8: oklch(58% 0.09 245);
|
||||
--flaming-gorge-blue-9: oklch(53% 0.086 245);
|
||||
--flaming-gorge-blue-10: oklch(49% 0.081 245);
|
||||
--flaming-gorge-blue-11: oklch(42% 0.073 245);
|
||||
--flaming-gorge-blue-12: oklch(35% 0.064 245);
|
||||
--flaming-gorge-blue-13: oklch(27% 0.051 245);
|
||||
--flaming-gorge-blue-14: oklch(20% 0.039 245);
|
||||
--flaming-gorge-blue-15: oklch(16% 0.03 245);
|
||||
--flaming-gorge-blue-16: oklch(10% 0.022 245);
|
||||
--flaming-gorge-blue: var(--flaming-gorge-blue-12);
|
||||
|
||||
--coeurdalene-purple-1: oklch(97.8% 0.016 311);
|
||||
--coeurdalene-purple-2: oklch(96.5% 0.026 314);
|
||||
--coeurdalene-purple-3: oklch(92.5% 0.052 308);
|
||||
--coeurdalene-purple-4: oklch(84% 0.097 302);
|
||||
--coeurdalene-purple-5: oklch(80% 0.129 302);
|
||||
--coeurdalene-purple-6: oklch(71% 0.153 302);
|
||||
--coeurdalene-purple-7: oklch(66% 0.162 302);
|
||||
--coeurdalene-purple-8: oklch(58% 0.17 302);
|
||||
--coeurdalene-purple-9: oklch(53% 0.162 302);
|
||||
--coeurdalene-purple-10: oklch(49% 0.153 302);
|
||||
--coeurdalene-purple-11: oklch(42% 0.138 302);
|
||||
--coeurdalene-purple-12: oklch(35% 0.121 302);
|
||||
--coeurdalene-purple-13: oklch(27% 0.097 302);
|
||||
--coeurdalene-purple-14: oklch(20% 0.073 302);
|
||||
--coeurdalene-purple-15: oklch(16% 0.056 302);
|
||||
--coeurdalene-purple-16: oklch(10% 0.041 302);
|
||||
--coeurdalene-purple: var(--coeurdalene-purple-13);
|
||||
|
||||
--eclipse-1: oklch(98% 0 0);
|
||||
--eclipse-2: oklch(97% 0 0);
|
||||
--eclipse-3: oklch(93% 0 0);
|
||||
--eclipse-4: oklch(84% 0 0);
|
||||
--eclipse-5: oklch(80% 0 0);
|
||||
--eclipse-6: oklch(71% 0 0);
|
||||
--eclipse-7: oklch(66% 0 0);
|
||||
--eclipse-8: oklch(58% 0 0);
|
||||
--eclipse-9: oklch(53% 0 0);
|
||||
--eclipse-10: oklch(49% 0 0);
|
||||
--eclipse-11: oklch(42% 0 0);
|
||||
--eclipse-12: oklch(35% 0 0);
|
||||
--eclipse-13: oklch(27% 0 0);
|
||||
--eclipse-14: oklch(20% 0 0);
|
||||
--eclipse-15: oklch(16% 0 0);
|
||||
--eclipse-16: oklch(10% 0 0);
|
||||
--eclipse: var(--eclipse-12);
|
||||
|
||||
--cowhide-1: oklch(98% 0.009 77.5);
|
||||
--cowhide-2: oklch(97% 0.018 77.5);
|
||||
--cowhide-3: oklch(93% 0.029 77.5);
|
||||
--cowhide-4: oklch(84% 0.034 77.5);
|
||||
--cowhide-5: oklch(80% 0.046 77.5);
|
||||
--cowhide-6: oklch(71% 0.054 77.5);
|
||||
--cowhide-7: oklch(66% 0.057 77.5);
|
||||
--cowhide-8: oklch(58% 0.06 77.5);
|
||||
--cowhide-9: oklch(53% 0.057 77.5);
|
||||
--cowhide-10: oklch(49% 0.054 77.5);
|
||||
--cowhide-11: oklch(42% 0.049 77.5);
|
||||
--cowhide-12: oklch(35% 0.043 77.5);
|
||||
--cowhide-13: oklch(27% 0.034 77.5);
|
||||
--cowhide-14: oklch(20% 0.026 77.5);
|
||||
--cowhide-15: oklch(16% 0.02 77.5);
|
||||
--cowhide-16: oklch(10% 0.015 77.5);
|
||||
--cowhide: var(--cowhide-3);
|
||||
|
||||
--body-background: light-dark(var(--cowhide-3), var(--eclipse-11));
|
||||
--link-color: light-dark(
|
||||
var(--flaming-gorge-blue),
|
||||
var(--coeurdalene-purple-4)
|
||||
);
|
||||
--nav-button-text: light-dark(var(--eclipse-2), var(--cowhide-12));
|
||||
--nav-button-background: light-dark(var(--eclipse-11), var(--cowhide-2));
|
||||
--nav-button-background-hover: light-dark(
|
||||
var(--eclipse-13),
|
||||
var(--cowhide-4)
|
||||
);
|
||||
--nav-button-background-active: light-dark(
|
||||
var(--eclipse-14),
|
||||
var(--cowhide-5)
|
||||
);
|
||||
--container-border: light-dark(var(--swiss-brown-6), var(--eclipse-16));
|
||||
--container-background: light-dark(var(--swiss-brown-4), var(--eclipse-12));
|
||||
--motto-background: rgba(0, 0, 0, 0.66);
|
||||
|
||||
/*
|
||||
Fonts
|
||||
|
|
@ -34,12 +182,12 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
|
||||
background-color: var(--body-background);
|
||||
font-family: var(--font-family-slab-serif);
|
||||
}
|
||||
|
||||
a {
|
||||
color: light-dark(var(--saddle-blue), var(--lavender-purple));
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -58,18 +206,12 @@ nav {
|
|||
}
|
||||
|
||||
nav a {
|
||||
color: light-dark(var(--brown-swiss-gray), var(--manhattan-steel-blue));
|
||||
background-color: light-dark(
|
||||
var(--manhattan-steel-blue),
|
||||
var(--brown-swiss-gray)
|
||||
);
|
||||
color: var(--nav-button-text);
|
||||
background-color: var(--nav-button-background);
|
||||
border-radius: 0.05rem;
|
||||
border-style: outset;
|
||||
border-width: 0.2rem;
|
||||
border-color: light-dark(
|
||||
var(--manhattan-steel-blue),
|
||||
var(--brown-swiss-gray)
|
||||
);
|
||||
border-color: var(--nav-button-background);
|
||||
min-width: 7.5rem;
|
||||
max-width: 7.5rem;
|
||||
display: flex;
|
||||
|
|
@ -81,35 +223,35 @@ nav a {
|
|||
font-family: var(--font-family-system-ui);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background-color: var(--nav-button-background-active);
|
||||
}
|
||||
|
||||
nav a:active {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: light-dark(
|
||||
var(--buffalo-blue),
|
||||
color-mix(in srgb, var(--prickly-pear-yellow), var(--brown-swiss-gray) 75%)
|
||||
);
|
||||
background-color: var(--nav-button-background-hover);
|
||||
}
|
||||
|
||||
figure {
|
||||
border-color: light-dark(var(--eclipse-gray), var(--brown-swiss-gray));
|
||||
border-color: var(--container-border);
|
||||
border-width: 1.5pt;
|
||||
border-style: inset;
|
||||
border-radius: 2.5pt;
|
||||
background-color: var(--container-background);
|
||||
padding: 1.25pt;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
light-dark(lightgray, dimgray),
|
||||
color-mix(
|
||||
in srgb,
|
||||
light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
|
||||
white 25%
|
||||
)
|
||||
var(--container-border),
|
||||
var(--container-background)
|
||||
);
|
||||
border-left: 5px solid black;
|
||||
padding: 1px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +264,7 @@ blockquote small {
|
|||
}
|
||||
|
||||
footer {
|
||||
background-color: light-dark(lightgray, dimgray);
|
||||
background-color: var(--container-background);
|
||||
margin: 0 0 -1em -1em;
|
||||
width: calc(100% - 1em);
|
||||
padding: 0.25em 1.25em;
|
||||
|
|
@ -196,21 +338,12 @@ textarea:invalid {
|
|||
}
|
||||
|
||||
.motto .motto-inside h1 {
|
||||
background-color: rgba(0.33, 0.33, 0.33, 0.33);
|
||||
-webkit-text-stroke: 0.3px lightgray;
|
||||
line-height: 1;
|
||||
background-color: var(--motto-background);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
|
||||
white 10%
|
||||
);
|
||||
border-color: light-dark(
|
||||
var(--manhattan-steel-blue),
|
||||
var(--brown-swiss-gray)
|
||||
);
|
||||
background-color: var(--container-background);
|
||||
border-color: var(--container-border);
|
||||
border-width: 1.5pt;
|
||||
border-radius: 0.1rem;
|
||||
border-style: outset;
|
||||
|
|
@ -220,6 +353,7 @@ textarea:invalid {
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
|
|
@ -243,8 +377,8 @@ textarea:invalid {
|
|||
padding: 1em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-right: 3em;
|
||||
.card-title a h3 {
|
||||
margin-right: 3.5em;
|
||||
}
|
||||
|
||||
.card-title > a {
|
||||
|
|
@ -309,23 +443,6 @@ textarea:invalid {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Application-state helper classes
|
||||
*/
|
||||
@media (prefers-color-scheme: light) {
|
||||
.active {
|
||||
background-color: var(--coeurdalene-purple);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.active {
|
||||
color: color-mix(in srgb, var(--manhattan-steel-blue), white 75%);
|
||||
background-color: color-mix(in srgb, var(--brown-swiss-gray), black 75%);
|
||||
border-color: color-mix(in srgb, var(--brown-swiss-gray), black 50%);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Desktop screen size adjustments
|
||||
*/
|
||||
|
|
@ -408,7 +525,8 @@ textarea:invalid {
|
|||
h3::before,
|
||||
h4::before,
|
||||
h5::before,
|
||||
h6::before {
|
||||
h6::before,
|
||||
blockquote::before {
|
||||
content: " "; /* Older browser do not support empty content */
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
|
|
@ -417,76 +535,78 @@ textarea:invalid {
|
|||
}
|
||||
} /* end @media */
|
||||
|
||||
@supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
|
||||
@keyframes sticky-header {
|
||||
from {
|
||||
height: 50vh;
|
||||
top: 6rem;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
|
||||
@keyframes sticky-header {
|
||||
from {
|
||||
height: 50vh;
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
to {
|
||||
height: 10vh;
|
||||
top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
height: 10vh;
|
||||
top: -1rem;
|
||||
}
|
||||
}
|
||||
@keyframes blurry-header {
|
||||
from {
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
@keyframes blurry-header {
|
||||
from {
|
||||
filter: blur(0);
|
||||
to {
|
||||
filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
filter: blur(2px);
|
||||
@keyframes transparent-text-bg {
|
||||
from {
|
||||
background-color: var(--motto-background);
|
||||
}
|
||||
to {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes transparent-text-bg {
|
||||
from {
|
||||
background-color: rgba(0.33, 0.33, 0.33, 0.33);
|
||||
main,
|
||||
footer {
|
||||
position: relative;
|
||||
top: 55vh;
|
||||
}
|
||||
to {
|
||||
background-color: rgba(0.33, 0.33, 0.33, 0);
|
||||
}
|
||||
}
|
||||
|
||||
main,
|
||||
footer {
|
||||
position: relative;
|
||||
top: 55vh;
|
||||
}
|
||||
|
||||
.motto {
|
||||
position: fixed;
|
||||
top: 12rem;
|
||||
|
||||
animation: sticky-header linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0.001vh 50vh;
|
||||
}
|
||||
|
||||
.motto::before {
|
||||
filter: blur(12px);
|
||||
|
||||
top: 2rem;
|
||||
|
||||
animation: blurry-header linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0.001vh 50vh;
|
||||
}
|
||||
|
||||
.motto-inside h1 {
|
||||
animation: transparent-text-bg linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0.001vh 40vh;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.motto {
|
||||
width: calc(100% - 8rem);
|
||||
position: fixed;
|
||||
top: 12rem;
|
||||
|
||||
animation: sticky-header linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0 50vh;
|
||||
}
|
||||
|
||||
.motto::before {
|
||||
top: 0;
|
||||
filter: blur(12px);
|
||||
|
||||
top: 2rem;
|
||||
|
||||
animation: blurry-header linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0 50vh;
|
||||
}
|
||||
}
|
||||
} /* end @supports */
|
||||
|
||||
.motto-inside h1 {
|
||||
animation: transparent-text-bg linear forwards;
|
||||
animation-timeline: scroll();
|
||||
animation-range: 0 40vh;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.motto {
|
||||
width: calc(100% - 8rem);
|
||||
}
|
||||
|
||||
.motto::before {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
} /* end @supports */
|
||||
} /* end @media */
|
||||
|
|
|
|||
Loading…
Reference in a new issue