diff options
author | lberki <lberki@users.noreply.github.com> | 2022-05-05 12:12:10 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-05-05 12:12:10 +0300 |
commit | 776f966edfbc33120d61edef0e65ddcdba44263a (patch) | |
tree | 43b753af14fbcfa2cbdba373139bda0397a5804a /assets/scss/tale/_layout.scss | |
parent | c95051b93d756d5653ebe36a8f5f2d556b3843a0 (diff) |
Add dark mode
See #65
Diffstat (limited to 'assets/scss/tale/_layout.scss')
-rw-r--r-- | assets/scss/tale/_layout.scss | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/assets/scss/tale/_layout.scss b/assets/scss/tale/_layout.scss index 8d56834..c459510 100644 --- a/assets/scss/tale/_layout.scss +++ b/assets/scss/tale/_layout.scss @@ -1,3 +1,7 @@ +* { + @include transition($color-transition); +} + .container { margin: 0 auto; max-width: 800px; @@ -17,8 +21,19 @@ footer, width: 80%; } +#darkModeToggle { + float: right; + position: sticky; + top: 2rem; + margin-right: 2rem; + margin-top: 2rem; + font-size: 2rem; + + cursor: pointer; +} + .nav { - box-shadow: 0 2px 2px -2px $shadow-color; + box-shadow: 0 2px 2px -2px var(--shadow-color); overflow: auto; &-container { @@ -28,8 +43,8 @@ footer, } &-title { - @include transition(all .2s ease-out); - color: $default-color; + @include transition($color-transition, opacity .2s ease-out); + color: var(--default-color); display: inline-block; margin: 0; padding-right: .2rem; @@ -48,8 +63,8 @@ footer, } li { - @include transition(all .2s ease-out); - color: $default-color; + @include transition($color-transition, opacity .2s ease-out); + color: var(--default-color); display: inline-block; opacity: .6; padding: 0 2rem 0 0; @@ -65,7 +80,7 @@ footer, } a { - color: $default-color; + color: var(--default-color); font-family: $sans-serif; } } @@ -90,7 +105,7 @@ footer { text-align: center; span { - color: $default-color; + color: var(--default-color); font-size: .8rem; } } |