added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / layout / _banner.scss

diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss
index 65e52d1..1470f92 100644 (file)
--- a/assets/sass/layout/_banner.scss
+++ b/assets/sass/layout/_banner.scss
@@ -8,7 +8,7 @@
 \r
        #banner {\r
                @include vendor('align-items', 'center');\r
-               @include vendor('background-image', 'url("../../images/banner.jpg")');\r
+               @include vendor('background-image', 'url("../bg/bg2.jpg")');\r
                @include vendor('display', 'flex');\r
                @include padding(4em, 0, (2em, 0, 0, 0));\r
                background-attachment: fixed;\r
@@ -18,7 +18,7 @@
                border-bottom: 0 !important;\r
                cursor: default;\r
                height: 60vh;\r
-               margin-bottom: -3.25em;\r
+               margin-bottom: -5.25em;\r
                max-height: 32em;\r
                min-height: 22em;\r
                position: relative;\r
@@ -28,16 +28,19 @@
                        @include vendor('transition', 'opacity #{_duration(banner)} ease');\r
                        @include vendor('transition-delay', '0.75s');\r
                        @include vendor('pointer-events', 'none');\r
-                       background-color: _palette(bg);\r
+                       background-color: _palette_light(bg);\r
                        content: '';\r
                        display: block;\r
                        height: 100%;\r
                        left: 0;\r
-                       opacity: 0.85;\r
+                       opacity: 0.7;\r
                        position: absolute;\r
                        top: 0;\r
                        width: 100%;\r
                        z-index: 1;\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               background-color: _palette_dark(bg);\r
+                       }\r
                }\r
 \r
                h1 {\r
@@ -104,12 +107,21 @@
                        }\r
                }\r
 \r
-               &.style1 { &:after { background-color: _palette(accent1); } }\r
-               &.style2 { &:after { background-color: _palette(accent2); } }\r
-               &.style3 { &:after { background-color: _palette(accent3); } }\r
-               &.style4 { &:after { background-color: _palette(accent4); } }\r
-               &.style5 { &:after { background-color: _palette(accent5); } }\r
-               &.style6 { &:after { background-color: _palette(accent6); } }\r
+               &.style1 { &:after { background-color: _palette_light(accent1); } }\r
+               &.style2 { &:after { background-color: _palette_light(accent2); } }\r
+               &.style3 { &:after { background-color: _palette_light(accent3); } }\r
+               &.style4 { &:after { background-color: _palette_light(accent4); } }\r
+               &.style5 { &:after { background-color: _palette_light(accent5); } }\r
+               &.style6 { &:after { background-color: _palette_light(accent6); } }\r
+\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       &.style1 { &:after { background-color: _palette_dark(accent1); } }\r
+                       &.style2 { &:after { background-color: _palette_dark(accent2); } }\r
+                       &.style3 { &:after { background-color: _palette_dark(accent3); } }\r
+                       &.style4 { &:after { background-color: _palette_dark(accent4); } }\r
+                       &.style5 { &:after { background-color: _palette_dark(accent5); } }\r
+                       &.style6 { &:after { background-color: _palette_dark(accent6); } }\r
+               }\r
 \r
                body.is-preload & {\r
                        &:after {\r