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 @@ <% } %>
-
<%= f.name %>
-
<%= f.description %>
+
<%= f.name %>
+
<%= f.description %>
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; } + } }