danix
's git repository
home
/
my projects
/
theme-danix.xyz.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
added dark theme option. It ìs selected automagically based on system choiche of...
[theme-danix.xyz.git]
/
assets
/
sass
/
components
/
_spotlights.scss
diff --git
a/assets/sass/components/_spotlights.scss
b/assets/sass/components/_spotlights.scss
index
337bc1a
..
882ebe4
100644
(file)
--- a/
assets/sass/components/_spotlights.scss
+++ b/
assets/sass/components/_spotlights.scss
@@
-16,7
+16,10
@@
> section {
\r
@include vendor('display', 'flex');
\r
@include vendor('flex-direction', 'row');
\r
> section {
\r
@include vendor('display', 'flex');
\r
@include vendor('flex-direction', 'row');
\r
- background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
\r
+ background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);
\r
+ }
\r
\r
> .image {
\r
background-position: center center;
\r
\r
> .image {
\r
background-position: center center;
\r
@@
-33,7
+36,7
@@
}
\r
\r
&:before {
\r
}
\r
\r
&:before {
\r
- background: transparentize(_palette(bg), 0.1);
\r
+ background: transparentize(_palette
_light
(bg), 0.1);
\r
content: '';
\r
display: block;
\r
height: 100%;
\r
content: '';
\r
display: block;
\r
height: 100%;
\r
@@
-42,6
+45,9
@@
position: absolute;
\r
top: 0;
\r
width: 100%;
\r
position: absolute;
\r
top: 0;
\r
width: 100%;
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ background: transparentize(_palette_dark(bg), 0.1);
\r
+ }
\r
}
\r
}
\r
\r
}
\r
}
\r
\r
@@
-62,7
+68,10
@@
\r
&:nth-child(2n) {
\r
@include vendor('flex-direction', 'row-reverse');
\r
\r
&:nth-child(2n) {
\r
@include vendor('flex-direction', 'row-reverse');
\r
- background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
\r
+ background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);
\r
+ @media screen and (prefers-color-scheme: dark) {
\r
+ background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);
\r
+ }
\r
\r
> .content {
\r
@include vendor('align-items', 'flex-end');
\r
\r
> .content {
\r
@include vendor('align-items', 'flex-end');
\r