summaryrefslogtreecommitdiff
path: root/_sass
diff options
context:
space:
mode:
authorJeffrey Tse <jeffreytse.mail@gmail.com>2023-08-21 20:33:58 +0800
committerJeffrey Tse <jeffreytse.mail@gmail.com>2023-08-23 15:12:07 +0800
commit30437acaf53524ed97175d513b23d8042f3cf375 (patch)
treea22d4cc5407cfaf6c95bb19c99974f7d4ffb0ca2 /_sass
parentf3d2a6fc15e2889c563459ef86137df275714d2c (diff)
feat: support to pin articles (#50)
This feature can allow you to top articles via post front meta property `top`, the value is a number, the smaller the number is, the higher priority the article has. Example: ``` title: My Article top: <number> ```
Diffstat (limited to '_sass')
-rw-r--r--_sass/yat/_dark.scss36
-rw-r--r--_sass/yat/_layout.scss103
2 files changed, 57 insertions, 82 deletions
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index 11bd327..a23896d 100644
--- a/_sass/yat/_dark.scss
+++ b/_sass/yat/_dark.scss
@@ -101,16 +101,6 @@ html[data-theme="dark"] {
}
.pagination {
- .post-title {
- a:visited:after {
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
- }
-
.post-link {
color: #bbb;
}
@@ -135,14 +125,6 @@ html[data-theme="dark"] {
a {
color: #ddd;
}
-
- a:visited:after {
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
}
}
@@ -166,15 +148,6 @@ html[data-theme="dark"] {
color: #d7d7d7;
}
- a:visited:after {
- color: $dark-background-color;
- background-color: $dark-background-color;
- }
-
- a:after {
- color: $dark-background-color;
- }
-
a:hover {
color: #aaa;
}
@@ -223,5 +196,14 @@ html[data-theme="dark"] {
}
}
}
+
+ a .post-badges .post-badge {
+ color: $dark-background-color !important;
+ }
+
+ a:visited .post-badges .post-badge.badge-new {
+ display: none;
+ background-color: $dark-background-color;
+ }
}
diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss
index 3931258..8398ca8 100644
--- a/_sass/yat/_layout.scss
+++ b/_sass/yat/_layout.scss
@@ -285,25 +285,6 @@ html {
a {
text-decoration: none;
-
- &: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;
- transition-duration: $base-transition-duration;
- }
-
- &:visited:after {
- color: $background-color;
- background-color: $background-color;
- }
}
}
@@ -477,24 +458,6 @@ html {
&: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: $background-color;
- font-size: 10px;
- font-weight: 600;
- border-radius: 2px;
- }
-
- &:visited:after {
- color: $background-color;
- background-color: $background-color;
- }
}
}
}
@@ -503,7 +466,6 @@ html {
padding-top: 25px;
}
-
/**
* Posts misc
*/
@@ -754,23 +716,6 @@ html {
&:hover {
color: #000;
}
-
- &: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;
- }
-
- &:visited:after {
- background-color: #fff;
- }
}
}
@@ -783,3 +728,51 @@ html {
background-color: #e3e3e3e3;
vertical-align: baseline;
}
+
+/**
+ * Post badge
+ */
+.post-badges {
+ display: inline-block;
+ position: relative;
+ margin-left: 8px;
+ margin-top: 3px;
+ user-select: none;
+}
+
+.pagination .post-badges {
+ bottom: 0.5em;
+}
+
+.post-related .post-badges {
+ bottom: 0.1em;
+}
+
+.page-segments .post-badges {
+ bottom: 0.1em;
+}
+
+.post-badge {
+ display: none;
+ padding: 0px 3px;
+ background-color: $brand-color;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ border-radius: 2px;
+ transition-duration: $base-transition-duration;
+}
+
+.post-badge.badge-new {
+ display: inline-block;
+}
+
+.top-post .post-badges .post-badge.badge-top {
+ display: inline-block;
+}
+
+a:visited .post-badges .post-badge.badge-new {
+ display: none;
+ color: $background-color;
+ background-color: $background-color;
+}