X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Flayout%2F_header.scss;h=696bf4a83dad0a0c320fc7c9ac3d745e60f9f3b8;hb=HEAD;hp=eb7d7e325ce016554fdc73b2319c2a503dbcbfe3;hpb=b8ef5fe023a064d1e609b257786822095d85bb96;p=theme-danix.xyz.git
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
index eb7d7e3..696bf4a 100644
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@@ -13,7 +13,7 @@
#header {
@include vendor('display', 'flex');
- background-color: _palette(bg-alt);
+ background-color: _palette_light(bg-alt);
box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);
cursor: default;
font-weight: _font(weight-bold);
@@ -27,6 +27,9 @@
top: 0;
width: 100%;
z-index: _misc(z-index-base);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(bg-alt);
+ }
.logo {
border: 0;
@@ -41,23 +44,33 @@
'background-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
- background-color: _palette(fg-bold);
- color: _palette(bg);
+ background-color: _palette_light(fg-bold);
+ color: _palette_light(bg);
display: inline-block;
line-height: 1.65em;
margin-right: 0.325em;
padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(fg-bold);
+ color: _palette_dark(bg);
+ }
}
&:hover {
strong {
- background-color: _palette(highlight);
+ background-color: _palette_light(highlight);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(highlight);
+ }
}
}
&:active {
strong {
- background-color: desaturate(darken(_palette(highlight), 15), 5);
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+ }
}
}
}
@@ -87,7 +100,7 @@
padding-right: 3.325em !important;
&:before, &:after {
- background-image: svg-url('');
+ background-image: svg-url('');
background-position: center;
background-repeat: no-repeat;
background-size: 24px 32px;
@@ -99,13 +112,19 @@
top: 0;
vertical-align: middle;
width: 24px;
+ @media screen and (prefers-color-scheme: dark) {
+ background-image: svg-url('');
+ }
}
&:after {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
- background-image: svg-url('');
+ background-image: svg-url('');
opacity: 0;
z-index: 1;
+ @media screen and (prefers-color-scheme: dark) {
+ background-image: svg-url('');
+ }
}
&:hover, &:active {
@@ -137,12 +156,20 @@
box-shadow: none;
position: absolute;
- &.style1 { .logo { strong { color: _palette(accent1); } } }
- &.style2 { .logo { strong { color: _palette(accent2); } } }
- &.style3 { .logo { strong { color: _palette(accent3); } } }
- &.style4 { .logo { strong { color: _palette(accent4); } } }
- &.style5 { .logo { strong { color: _palette(accent5); } } }
- &.style6 { .logo { strong { color: _palette(accent6); } } }
+ &.style1 { .logo { strong { color: _palette_light(accent1); } } }
+ &.style2 { .logo { strong { color: _palette_light(accent2); } } }
+ &.style3 { .logo { strong { color: _palette_light(accent3); } } }
+ &.style4 { .logo { strong { color: _palette_light(accent4); } } }
+ &.style5 { .logo { strong { color: _palette_light(accent5); } } }
+ &.style6 { .logo { strong { color: _palette_light(accent6); } } }
+ @media screen and (prefers-color-scheme: dark) {
+ &.style1 { .logo { strong { color: _palette_dark(accent1); } } }
+ &.style2 { .logo { strong { color: _palette_dark(accent2); } } }
+ &.style3 { .logo { strong { color: _palette_dark(accent3); } } }
+ &.style4 { .logo { strong { color: _palette_dark(accent4); } } }
+ &.style5 { .logo { strong { color: _palette_dark(accent5); } } }
+ &.style6 { .logo { strong { color: _palette_dark(accent6); } } }
+ }
}
body.is-preload & {