summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_sass/misc/article-menu.scss3
-rw-r--r--_sass/misc/theme-toggle.scss23
-rw-r--r--_sass/yat.scss7
-rw-r--r--_sass/yat/_base.scss1
-rw-r--r--_sass/yat/_dark.scss49
-rw-r--r--_sass/yat/_layout.scss71
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 {