ui: optimize friends link page style

XPoet · Sep 26, 2023 · 134c99f · 134c99f
1 parent 3aa47db
commit 134c99f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/layout/_partial/friends-link.ejs b/layout/_partial/friends-link.ejs
@@ -1,7 +1,7 @@
 <ul class="friends-link-list border-box">
     <% for (const f of theme?.links) { %>
         <% if (f?.title) { %>
-           <li class="link-type-title text-ellipsis"><i class="fa-solid fa-users"></i>&nbsp;<%= f?.title %></li>
+           <li class="link-type-title text-ellipsis border-box"><%= f.title %></li>
         <% } else { %>
             <li class="friends-link-item border-box">
                 <a class="a-wrap border-box" href="<%= f?.link %>">

diff --git a/source/css/layout/_partial/page-template.styl b/source/css/layout/_partial/page-template.styl
@@ -32,8 +32,22 @@ $friend-link-item-border-radius = 0.6rem
       .link-type-title {
         grid-column span 2
         margin-top 0.5rem
+        padding-left 0.7rem
         color var(--text-color-3)
-        font-size 1.3rem
+        font-weight bold
+        font-size 1.4rem
+
+        &::before {
+          position absolute
+          top 50%
+          left 0
+          width 0.3rem
+          height 100%
+          background var(--primary-color)
+          border-radius 0.2rem
+          transform translateY(-50%)
+          content ''
+        }
 
         i.fa-solid {
           color var(--text-color-3)