diff --git a/_sass/includes/header.scss b/_sass/includes/header.scss index ee42cbe..3d8445e 100644 --- a/_sass/includes/header.scss +++ b/_sass/includes/header.scss @@ -43,6 +43,10 @@ header.page-header { margin: $size-128 0; // background-color: $bg; display: inline-block; + + @include touch { + margin: $size-128 0 $size-64 0; + } } } @@ -55,6 +59,12 @@ header.page-header { &:visited { font-style: normal; } + + @include darkMode { + h1 { + color: $white; + } + } } &.hidden { diff --git a/_sass/layout.scss b/_sass/layout.scss index a778c73..e8b322d 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -1,16 +1,37 @@ body { background-color: $bg; background-image: url('../img/bg/bg-2.png'); + transition: background-color 0.5s ease-in-out; + background-position: 3px 5px; background-repeat-x: no-repeat; background-repeat-y: repeat; background-size: cover; background-attachment: fixed; display: flex; flex-direction: column; + background-size: 100%; @include touch { background-attachment: scroll; } + + @include darkMode { + background-color: $black; + &::after { + content: ''; + background-image: url('../img/bg/bg-el-light.png'); + opacity: 1; + background-position: 0 0; + background-repeat-x: no-repeat; + background-repeat-y: repeat; + background-size: 100%; + background-attachment: fixed; + height: 100vh; + width: 100vw; + position: fixed; + pointer-events: none; + } + } } .page-content { @@ -32,15 +53,6 @@ footer.page-footer { flex-shrink: 0; } -.rf-logo path { - fill: transparent; - stroke-width: 1; - - @include touch { - stroke-width: 1.5; - } -} - .textbox { @include textbox; } diff --git a/_sass/layouts/default.scss b/_sass/layouts/default.scss index 9fa5bd2..5bfac52 100644 --- a/_sass/layouts/default.scss +++ b/_sass/layouts/default.scss @@ -58,4 +58,12 @@ h2 { a { color: $text; } + + @include darkMode { + color: $white; + + a { + color: $white; + } + } } diff --git a/_sass/utils/responsive.scss b/_sass/utils/responsive.scss index 044798a..7def85f 100644 --- a/_sass/utils/responsive.scss +++ b/_sass/utils/responsive.scss @@ -50,3 +50,9 @@ @content; } } + +@mixin darkMode() { + @media (prefers-color-scheme: dark) { + @content; + } +} diff --git a/assets/img/bg/bg-el-light.png b/assets/img/bg/bg-el-light.png new file mode 100644 index 0000000..d04854b Binary files /dev/null and b/assets/img/bg/bg-el-light.png differ