diff options
Diffstat (limited to '_sass')
| -rw-r--r-- | _sass/misc/article-menu.scss | 3 | ||||
| -rw-r--r-- | _sass/misc/theme-toggle.scss | 23 | ||||
| -rw-r--r-- | _sass/yat.scss | 7 | ||||
| -rw-r--r-- | _sass/yat/_base.scss | 1 | ||||
| -rw-r--r-- | _sass/yat/_dark.scss | 49 | ||||
| -rw-r--r-- | _sass/yat/_layout.scss | 71 |
6 files changed, 86 insertions, 68 deletions
diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss index bc168f5..418b4f3 100644 --- a/_sass/misc/article-menu.scss +++ b/_sass/misc/article-menu.scss @@ -11,7 +11,6 @@ font-size: $base-font-size * 1.5; margin-bottom: 14px; font-weight: 600; - color: #222; } .post-menu-content { @@ -39,7 +38,7 @@ &:hover { text-decoration: none; - color: lighten($text-color, 20%)!important; + color: lighten($text-color, 30%)!important; } } diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss index 0041677..4b79078 100644 --- a/_sass/misc/theme-toggle.scss +++ b/_sass/misc/theme-toggle.scss @@ -36,14 +36,19 @@ user-select: none; } - .dark { + .names p { + margin-bottom: 0; + line-height: 24px; opacity: .5; } - p { - color: #acacac; - margin-bottom: 0; - line-height: 24px; + label .light { + color: #868686; + margin-left: -0.2em; + } + + label .dark { + color: #b9b9b9; } [type="checkbox"] { @@ -56,12 +61,12 @@ background-color: #34323D; } - [type="checkbox"]:checked ~ label .dark{ - opacity: 1; + [type="checkbox"]:checked ~ label .dark { + color: #ddd; } - [type="checkbox"]:checked ~ label .light{ - opacity: .5; + [type="checkbox"]:checked ~ label .light { + color: #ccc; } @include media-query(1024px) { diff --git a/_sass/yat.scss b/_sass/yat.scss index eda2d97..3bbc212 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -2,18 +2,19 @@ // Define defaults for each variable. -$base-font-family: Helvetica, Arial, Oswald, sans-serif, !default; +$base-font-family: Helvetica Neue, Helvetica, Arial, sans-serif, !default; $base-font-size: 14px !default; $base-font-weight: 400 !default; $small-font-size: $base-font-size * 0.875 !default; $base-line-height: 1.6 !default; +$base-transition-duration: 0.3s !default; $spacing-unit: 30px !default; -$text-color: #454545 !default; +$text-color: #1d1d1f !default; $background-color: #fff !default; -$grey-color: #828282 !default; +$grey-color: #777 !default; $grey-color-light: lighten($grey-color, 40%) !default; $grey-color-dark: darken($grey-color, 25%) !default; diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss index 1c60a9a..997574d 100644 --- a/_sass/yat/_base.scss +++ b/_sass/yat/_base.scss @@ -30,6 +30,7 @@ body { display: flex; min-height: 100vh; flex-direction: column; + transition-duration: $base-transition-duration; } diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss index e9a7cb9..11bd327 100644 --- a/_sass/yat/_dark.scss +++ b/_sass/yat/_dark.scss @@ -1,5 +1,5 @@ -$dark-background-color: #0e0e0e !default; -$dark-text-color: #bbb !default; +$dark-background-color: #0e0e0e !default; +$dark-text-color: #b0b0b0 !default; html[data-theme="dark"] { &[data-scroll-status='top'] { @@ -89,7 +89,7 @@ html[data-theme="dark"] { } .left-vsplit:before { - background-color: #9a9a9a; + background-color: #505050; } .page-banner { @@ -101,10 +101,6 @@ html[data-theme="dark"] { } .pagination { - .post-link { - color: $dark-text-color; - } - .post-title { a:visited:after { background-color: $dark-background-color; @@ -115,6 +111,14 @@ html[data-theme="dark"] { } } + .post-link { + color: #bbb; + } + + .post-excerpt { + color: $grey-color; + } + .post-list { & > li:not(:last-child) { border-bottom: 1px solid #545454; @@ -151,24 +155,29 @@ html[data-theme="dark"] { img:not(.emoji):not([raw]) { background-color: #ffffff33; } - } - } - .post-related { - & > *:first-child { - color: #d7d7d7; + hr { + background-color: #555; + } } - a:visited:after { - background-color: $dark-background-color; - } + .post-related { + & > *:first-child { + color: #d7d7d7; + } - a:after { - color: $dark-background-color; - } + a:visited:after { + color: $dark-background-color; + background-color: $dark-background-color; + } - a:hover { - color: #aaa; + a:after { + color: $dark-background-color; + } + + a:hover { + color: #aaa; + } } } diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index eddb753..3931258 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -297,28 +297,30 @@ html { font-size: 10px; font-weight: 600; border-radius: 2px; + transition-duration: $base-transition-duration; } &:visited:after { - background-color: #fff; + color: $background-color; + background-color: $background-color; } } } - .post-meta { - font-size: $base-font-size; - color: $grey-color; - margin-bottom: $spacing-unit * 0.5; - } - .post-link { @include relative-font-size(1.65); font-weight: $base-font-weight * 1.5; color: #333; } + .post-meta { + color: $grey-color; + font-size: $base-font-size; + margin-bottom: $spacing-unit * 0.5; + } + .post-excerpt { - color: #777; + color: $grey-color; word-break: break-word; overflow-wrap: break-word; } @@ -393,11 +395,12 @@ html { } .post-subtitle { - font-weight: lighter; + font-weight: 300; } .post-meta { - color: #808080; + color: $grey-color; + padding-bottom: 15px; } } @@ -465,33 +468,32 @@ html { ul { margin-left: 15px; - .post-link { - @include relative-font-size(1.075); - } + } - a { - color: #666; + .post-link { + @include relative-font-size(1.075); + color: $grey-color; - &:hover { - color: #333; - } + &:hover { + color: darken($grey-color, 50%); + } - &:after { - content: 'NEW'; - position: absolute; - margin-left: 8px; - margin-top: 3px; - padding: 0px 3px; - background-color: $brand-color; - color: #fff; - font-size: 10px; - font-weight: 600; - border-radius: 2px; - } + &:after { + content: 'NEW'; + position: absolute; + margin-left: 8px; + margin-top: 3px; + padding: 0px 3px; + background-color: $brand-color; + color: $background-color; + font-size: 10px; + font-weight: 600; + border-radius: 2px; + } - &:visited:after { - background-color: #fff; - } + &:visited:after { + color: $background-color; + background-color: $background-color; } } } @@ -513,8 +515,8 @@ html { a { @include relative-font-size(1.125); + color: $grey-color; line-height: 15px; - color: #666; max-width: 50%; } @@ -651,6 +653,7 @@ html { .post-meta { color: #ffffffcc; + padding-bottom: 1em; } .left-vsplit:before { |