X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Flayout%2F_header.scss;fp=assets%2Fsass%2Flayout%2F_header.scss;h=696bf4a83dad0a0c320fc7c9ac3d745e60f9f3b8;hb=cb4379e19f22b0e389f369a048c5cce9321366c6;hp=eb7d7e325ce016554fdc73b2319c2a503dbcbfe3;hpb=7e7766c9ada48098c94bd94aaac04f919dfb3297;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('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
 						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('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						}
 					}
 
 					&:after {
 						@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
-						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
 						opacity: 0;
 						z-index: 1;
+						@media screen and (prefers-color-scheme: dark) {
+							background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
+						}
 					}
 
 					&: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 & {