From 0dbc6643f1f5268d925ca56b06bf1955293316de Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Mon, 7 Dec 2020 15:51:52 +0800
Subject: [PATCH] style: optimize friends link page

---
 layout/_partial/friends-link.ejs           |  4 +--
 source/css/layout/_partial/empty-page.styl | 31 ++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/layout/_partial/friends-link.ejs b/layout/_partial/friends-link.ejs
index 554a828..016493b 100644
--- a/layout/_partial/friends-link.ejs
+++ b/layout/_partial/friends-link.ejs
@@ -12,8 +12,8 @@
                             <% } %>
                         </div>
                         <div class="info">
-                            <div class="name"><%= f.name %></div>
-                            <div class="description"><%= f.description %></div>
+                            <div class="name ellipsis"><%= f.name %></div>
+                            <div class="description ellipsis"><%= f.description %></div>
                         </div>
                     </div>
                 </a>
diff --git a/source/css/layout/_partial/empty-page.styl b/source/css/layout/_partial/empty-page.styl
index 9f7387c..0b68cd6 100644
--- a/source/css/layout/_partial/empty-page.styl
+++ b/source/css/layout/_partial/empty-page.styl
@@ -1,4 +1,5 @@
 $friend-link-item-height = 82px;
+$friend-link-item-height-tablet = 68px;
 $friend-link-item-interval = 16px;
 $friend-link-item-border-radius = 6px;
 
@@ -17,6 +18,7 @@ $friend-link-item-border-radius = 6px;
     }
   }
 
+
   if (hexo-config('menu.Links')) {
     .friends-link-container {
 
@@ -32,6 +34,10 @@ $friend-link-item-border-radius = 6px;
           height: $friend-link-item-height;
           padding-bottom: $friend-link-item-interval;
 
+          +keep-tablet() {
+            height: $friend-link-item-height-tablet;
+          }
+
           &:nth-child(odd) {
             padding-right: $friend-link-item-interval * 0.5;
           }
@@ -48,6 +54,11 @@ $friend-link-item-border-radius = 6px;
             border-radius: $friend-link-item-border-radius;
             padding-left: $friend-link-item-height - $friend-link-item-interval;
             box-sizing: border-box;
+
+            +keep-tablet() {
+              padding-left: $friend-link-item-height-tablet - $friend-link-item-interval;
+            }
+
             transition();
 
             &:hover {
@@ -72,6 +83,10 @@ $friend-link-item-border-radius = 6px;
               background: var(--second-background-color);
               color: var(--second-text-color);
 
+              +keep-tablet() {
+                width: $friend-link-item-height-tablet  - $friend-link-item-interval;
+              }
+
               img {
                 box-sizing: border-box;
                 position: relative;
@@ -91,10 +106,18 @@ $friend-link-item-border-radius = 6px;
               align-items: center;
               justify-items: flex-start;
 
+              +keep-tablet() {
+                padding: 6px;
+              }
+
               .name {
                 width: 100%;
                 height: 60%;
                 font-size: 1.28rem;
+
+                +keep-tablet() {
+                  font-size: 1.08rem;
+                }
               }
 
               .description {
@@ -102,10 +125,18 @@ $friend-link-item-border-radius = 6px;
                 height: 40%;
                 font-size: 1rem;
                 color: var(--third-text-color);
+
+                +keep-tablet() {
+                  font-size: 0.98rem;
+                }
+              }
+
+              .ellipsis {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
+
             }
           }