update

layout/_widget/categories.ejs

@@ -6,7 +6,7 @@
         <% if (site.categories.length){ %>
             <ul class="entry">
                 <% site.categories.sort('name').each(function(item){ %>
-                    <li><a class="flat-box" href="<%= url_for(item.path) %>"><div class='name'><%= item.name %></div><div class='badge'><%= item.posts.length %></div></a></li>
+                    <li><a class="flat-box" href="<%= url_for(item.path) %>"><div class='name'><%= item.name %></div><div class='badge'>(共<%= item.posts.length %>篇)</div></a></li>
                 <% }); %>
             </ul>
         <% } %>

layout/links.ejs

@@ -15,17 +15,20 @@
               <%} %>
               <div class='friend-content'>
                 <% (group.items||[]).forEach(function(item){ %>
-                  <a class='friend-card float-btn' style='background:<%= item.backgroundColor %>; color:<%= item.textColor %>'
+                  <a class='friend-card' style='background:<%= item.backgroundColor %>; color:<%= item.textColor %>'
                     target="_blank" rel="external nofollow noopener noreferrer" href='<%= url_for(item.url) %>'>
                     <div class='friend-left'>
                       <img class='avatar' src='<%= url_for(item.avatar ? item.avatar : "https://img.vim-cn.com/a4/87a96e2e01b1180bba1e76e190df5220378c1a.png") %>'/>
                     </div>
                     <div class='friend-right'>
                       <p class="friend-name"><%= item.name %></p>
-                      <div class='friend-tags-wrapper'>
-                      <% (item.tags||[]).forEach(function(tag){ %>
-                        <p class="tags"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><%= tag %></p>
-                      <% }) %>
+                      <% if(item.tags){ %>
+                        <div class='friend-tags-wrapper'>
+                        <% (item.tags||[]).forEach(function(tag){ %>
+                          <p class="tags"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><%= tag %></p>
+                        <% }) %>
+                        </div>
+                      <% } %>
                     </div>
                   </a>
                 <% }) %>

source/less/_links.less

@@ -7,67 +7,68 @@
       display: flex;
       flex-wrap: wrap;
       margin: -@gap/2;
-      // justify-content: space-between;
       .friend-card{
         display: flex;
         border-radius: @border_radius;
         box-shadow: @boxshadow_card_normal, 0 4px 8px 0px rgba(0, 0, 0, 0.1);
         background: #eee;
-        // height: 10em;
-        word-spacing: 4px;
         margin: @gap/2;
         color: fade(@color_text_main, 80%);
         justify-content: flex-start;
         @media(max-width: @on_phone){
           width: 100%;
         }
-        &.float-btn{
-          padding: @gap/2;
-          text-align: left;
-        }
         &:hover{
           text-decoration: none;
           box-shadow: @boxshadow_card_raised, 0 32px 64px 0px rgba(0, 0, 0, 0.1);
           transform: scale(1.05);
+          .friend-left{
             .avatar{
-              transform: scale(1.1);
+              transform: scale(1.1) rotate(12deg);
+              box-shadow: @boxshadow_card_raised;
             }
+          }
+
         }
         .friend-left{
           .avatar{
-            width: 80px;
-            height: 80px;
-            margin: @gap/2;
+            width: 64px;
+            height: 64px;
+            min-width: 64px;
+            min-height: 64px;
+            margin: @gap;
             border-radius: 100%;
             border: 1px solid white;
+            box-shadow: @boxshadow_card_normal;
           }
         }
         .friend-right{
           flex: 1;
-          margin: @gap @gap @gap 6px;
+          margin: @gap @gap @gap 0;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
+          .friend-tags-wrapper{
+            .enable-trans();
+            margin-left: -2px;
+            word-spacing: 4px;
+            word-break:break-all;
+          }
           p{
             margin: 0;
             padding: 0;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
             &.friend-name{
               font-size: @fontsize_base;
               font-weight: bold;
-
-              // margin-top: 0;
-              margin-bottom: 8px;
             }
             &.tags{
-              margin: 0;
               font-size: @fontsize_small * 0.85;
               display: inline;
               background: none;
+              word-wrap: break-word;
             }
           }
-          .friend-tags-wrapper{
-            margin-left: -2px;
-          }
         }
       }
     }

source/less/_widget.less

@@ -95,10 +95,6 @@
 
     &#author{
         .enable-trans();
-        @media(max-width: @on_phone){
-          box-shadow: none;
-          background: @theme_background;
-        }
         h2{
             text-align: center;
             // color: @color_text_header;
@@ -164,6 +160,13 @@
                 }
             }
         }
+        @media(max-width: @on_phone){
+          box-shadow: none;
+          background: @theme_background;
+          .social-wrapper{
+              justify-content: center;
+          }
+        }
     }
 
     &#mywidget{