diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index 07a78ae..36cc419 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -60,7 +60,7 @@ $fs-footnote = .75rem  // the smallest (12px)
 $sidebar = 280px
 
 // max body width
-$layout-max-body-width = 720px
+$layout-max-body-width = 680px
 
 // gap
 $gap = 16px // 必须是 px
diff --git a/source/css/_layout/pages/friends.styl b/source/css/_layout/pages/friends.styl
index 069dcfa..e053c6e 100644
--- a/source/css/_layout/pages/friends.styl
+++ b/source/css/_layout/pages/friends.styl
@@ -36,6 +36,8 @@
     .name
       padding-top: 0.5em
 
+
+
 // style
 .friends-wrap.round .user-simple
   a
@@ -43,6 +45,12 @@
     trans1: background
     img
       border-radius: 64px
+      margin-top: 0.5rem
+      margin-bottom: 2rem
+    .name
+      position: absolute
+      height: 2rem
+      bottom: 0
     &:hover
       background: var(--hover-block)
 
@@ -56,6 +64,10 @@
       height: 96px
       border-radius: 0
     .name
-      padding: 0.5em
+      padding: 0 0.5em
+      height: 2rem
+      display: flex
+      justify-content: center
+      align-items: center
     &:hover
       box-shadow: $boxshadow-card-float
diff --git a/source/css/_layout/partial/related_posts.styl b/source/css/_layout/partial/related_posts.styl
index a73342f..25d8abe 100644
--- a/source/css/_layout/partial/related_posts.styl
+++ b/source/css/_layout/partial/related_posts.styl
@@ -21,10 +21,15 @@ div.related-posts-wrap
       display: flex
       flex-direction: column
       overflow: hidden
-      width: 360px
+      min-width: 280px
+      width: 40vw
+      max-width: 460px
       border: 1px solid var(--hover-block)
       .img
-        height: 180px
+        min-width: 100%
+        min-height: 140px
+        height: "calc(%s * 0.5)" % @width
+        max-height: 230px
         overflow: hidden
         img
           width: 100%
@@ -33,11 +38,9 @@ div.related-posts-wrap
           &:not(.lazyload)
             trans1: transform 1s
       @media screen and (max-width: $device-tablet)
-        width: 300px
+        width: 70vw
         .img
-          height: 150px
-      @media screen and (max-width: $device-mobile)
-        width: 300px
+          height: "calc(%s * 0.5)" % @width
       .title
         color: var(--text-p1)
         font-weight: 500
diff --git a/source/css/_layout/tag-plugins/site-card.styl b/source/css/_layout/tag-plugins/site-card.styl
index efd6b7a..04f97bb 100644
--- a/source/css/_layout/tag-plugins/site-card.styl
+++ b/source/css/_layout/tag-plugins/site-card.styl
@@ -14,9 +14,9 @@
   color: var(--text-p1)
   .img
     width: 100%
-    height 120px
+    height 100px
     @media screen and (max-width: $device-mobile)
-      height 100px
+      height 80px
     overflow: hidden
     border-radius: $border-card * 0.5
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
@@ -48,7 +48,7 @@
       -webkit-box-orient: vertical
       overflow: hidden
       -webkit-line-clamp: 1
-      
+
     .desc
       font-size: $fs12
       color: var(--text-p2)