Using color-scheme and light-dark() to implement dark mode (#154)
* Lint fixes. * Implement light-dark(). * Lint css with biome, remove stylelint. * Biome lint fixes. * Dark mode adjustments. * Style bug fixes. * Colour adjustments. * Move header and footer styles to base. * Site header adjustments. * Removing jQuery and umbrella libs. They where great but not needed anymore. * Add colorScheme to optionally lock light/dark. * Update README. * Biome adjustments.
This commit is contained in:
parent
02f229f2c5
commit
16c47eea9d
1 changed files with 276 additions and 2130 deletions
45
assets/css/components/_htmx-indicator.css
Normal file
45
assets/css/components/_htmx-indicator.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.htmx-indicator {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-accent),
|
||||
transparent,
|
||||
var(--color-accent),
|
||||
transparent
|
||||
);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.htmx-request {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
animation:
|
||||
--fadein 2s linear forwards,
|
||||
--slide 1.2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes --slide {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes --fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue