From 30437acaf53524ed97175d513b23d8042f3cf375 Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Mon, 21 Aug 2023 20:33:58 +0800
Subject: 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>
```
---
 _sass/yat/_dark.scss   |  36 +++++------------
 _sass/yat/_layout.scss | 103 +++++++++++++++++++++++--------------------------
 2 files changed, 57 insertions(+), 82 deletions(-)

(limited to '_sass')

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;
+}
-- 
cgit v1.2.3