diff options
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; } } |