feat: Add gold/silver/bronze rank badges and 推荐 pill labels to top-3 Featured sidebar items (#42)

* feat: add gold/silver/bronze rank badges to top-3 Featured items

Agent-Logs-Url: https://github.com/unbug/unbug.github.io/sessions/e65e74c4-4c2c-4211-be4f-4ec005f7232e

Co-authored-by: unbug <799578+unbug@users.noreply.github.com>

* feat: add 推荐 pill badge to top-3 Featured items

Agent-Logs-Url: https://github.com/unbug/unbug.github.io/sessions/0d6583db-7ace-4344-9d35-3a1ae9e6f879

Co-authored-by: unbug <799578+unbug@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: unbug <799578+unbug@users.noreply.github.com>

Author: Copilot

_includes/sidebar-featured.html

@@ -1,11 +1,12 @@
 <div class="sticky-top sticky-top-offset">
     <h4 class="font-weight-bold spanborder"><span>Featured</span></h4>  
     <ol class="list-featured">				
-        {% for post in site.tags.featured %}                
-            <li class="mb-4">
+        {% for post in site.tags.featured %}
+            {% assign rank = forloop.index %}
+            <li class="mb-4{% if rank <= 3 %} featured-rank-{{ rank }}{% endif %}">
             <span>
                 <h6 class="font-weight-bold">
-                    <a href="{{site.baseurl}}{{ post.url }}" class="text-dark">{{ post.title }}</a>
+                    <a href="{{site.baseurl}}{{ post.url }}" class="text-dark">{{ post.title }}</a>{% if rank <= 3 %}<span class="featured-badge featured-badge-{{ rank }}">推荐</span>{% endif %}
                 </h6>
                 <span class="d-block text-muted">
                     In <span class="catlist">

assets/css/theme.css

@@ -683,6 +683,44 @@ ol.list-featured li:before {
     line-height: 1;
     opacity: .1;
 }
+ol.list-featured li.featured-rank-1:before,
+ol.list-featured li.featured-rank-2:before,
+ol.list-featured li.featured-rank-3:before {
+    opacity: 1;
+}
+ol.list-featured li.featured-rank-1:before {
+    color: #FFB800;
+    text-shadow: 0 1px 4px rgba(255,184,0,0.45);
+}
+ol.list-featured li.featured-rank-2:before {
+    color: #A0A0A0;
+    text-shadow: 0 1px 4px rgba(160,160,160,0.45);
+}
+ol.list-featured li.featured-rank-3:before {
+    color: #C8763A;
+    text-shadow: 0 1px 4px rgba(200,118,58,0.45);
+}
+.featured-badge {
+    display: inline-block;
+    font-size: 0.6rem;
+    font-weight: bold;
+    line-height: 1;
+    padding: 2px 5px;
+    border-radius: 3px;
+    margin-left: 5px;
+    vertical-align: middle;
+    color: #fff;
+    letter-spacing: 0.03em;
+}
+.featured-badge-1 {
+    background-color: #FFB800;
+}
+.featured-badge-2 {
+    background-color: #A0A0A0;
+}
+.featured-badge-3 {
+    background-color: #C8763A;
+}
 .catlist .sep:last-child {
 	display:none;
 }