diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl
index 3779c4f..8f74863 100644
--- a/source/css/_common/device.styl
+++ b/source/css/_common/device.styl
@@ -1,10 +1,10 @@
 .mobile-only
   display: none
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     display: block !important
 
 .mobile-hidden
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     display: none !important
 
 .float-panel
diff --git a/source/css/_defines/const.styl b/source/css/_defines/const.styl
index 21ae9e1..edbdb56 100644
--- a/source/css/_defines/const.styl
+++ b/source/css/_defines/const.styl
@@ -2,6 +2,7 @@
 $device-mobile-375 = 375px
 $device-mobile-425 = 425px
 $device-mobile = 500px
+$device-mobile-max = 667px
 $device-tablet = 768px
 $device-laptop = 1024px
 $device-desktop = 1440px
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index 7d74a24..e5f3abc 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -30,7 +30,7 @@ set_darkmode()
     --card: $dark-card
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
-    @media screen and (max-width: $device-tablet)
+    @media screen and (max-width: $device-mobile-max)
       --site-bg: $dark-site-bg-mobile
       --card: darken($dark-card, 6)
       --block: darken($dark-block, 4)
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 16b18c1..d658b6e 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -21,6 +21,11 @@
 
 // iPad 竖屏
 @media screen and (max-width: $device-tablet)
+  :root
+    --width-left: 220px
+
+// 手机布局
+@media screen and (max-width: $device-mobile-max)
   .mobile-only
     display: block !important
   .l_body
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index b13eb4b..a43c7aa 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -3,7 +3,7 @@
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
   @media screen and (min-width: 1400px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
+    margin-right: "calc(2 * %s + %s / 2)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-tablet)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header
diff --git a/source/css/_layout/partial/navbar.styl b/source/css/_layout/partial/navbar.styl
index 0b70b62..5296716 100644
--- a/source/css/_layout/partial/navbar.styl
+++ b/source/css/_layout/partial/navbar.styl
@@ -54,6 +54,6 @@ nav.cap
   a+a
     margin-left: 4px
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .nav-wrap
     margin-top: 0
diff --git a/source/css/_layout/tag-plugins/friends.styl b/source/css/_layout/tag-plugins/friends.styl
index ed0a219..101deb8 100644
--- a/source/css/_layout/tag-plugins/friends.styl
+++ b/source/css/_layout/tag-plugins/friends.styl
@@ -33,7 +33,7 @@
     width: 16.66%
   @media screen and (max-width: 820px)
     width: 20%
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     width: 16.66%
   @media screen and (max-width: $device-mobile)
     width: 25%
diff --git a/source/css/_layout/tag-plugins/sites.styl b/source/css/_layout/tag-plugins/sites.styl
index 0c50e47..61204ff 100644
--- a/source/css/_layout/tag-plugins/sites.styl
+++ b/source/css/_layout/tag-plugins/sites.styl
@@ -26,7 +26,7 @@
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: 900px)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
-  @media screen and (max-width: $device-tablet)
+  @media screen and (max-width: $device-mobile-max)
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
   @media screen and (max-width: $device-mobile)
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl
index ac05b11..bc08213 100644
--- a/source/css/_layout/tag-plugins/timeline.styl
+++ b/source/css/_layout/tag-plugins/timeline.styl
@@ -105,44 +105,40 @@
   position: -webkit-sticky
   bottom: -0.5rem
   background: var(--card)
-  .key, .value  
-    line-height: 1
+  span
+    line-height: 1.8
   &:empty
     display: none
-  .label:first-child
-    margin-left: 0
   a.comments 
     margin-right: 0
   
 
-.tag-plugin.timeline.stellar-timeline-api .body .footer .labels
+.tag-plugin.timeline.stellar-timeline-api .body .footer .flex
   display: flex
   flex-wrap: wrap
   font-size: $fs-12
-  line-height: 1.8
   align-items: stretch
-
-.tag-plugin.timeline.stellar-timeline-api .body .footer .reactions
-  display: flex
-  align-items: stretch
-  flex-wrap: wrap
-  font-size: $fs-13
-  line-height: 1.8
   .reaction 
-    border: 1px dashed var(--block)
-    display: flex
+    border-color: var(--block)
+    border-style: dashed
+  .item
+    border-width: 1px
+    border-style: solid
+    margin: 2px
+    border-radius: 4px
+    padding: 0 0.5rem
+    display: flex 
     align-items: center
-
-
-.tag-plugin.timeline.stellar-timeline-api .body .footer .label 
-  border-width: 1px
-  border-style: solid
-  display: flex 
-  align-items: center
+    &.comments
+      border-width: 0
+    &:first-child 
+      margin-left: 0
+    &:last-child 
+      margin-right: 0
+    .key
+      margin-right: 4px
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer a.comments 
-  display: flex
-  align-items: center
   border-radius: 4px
   padding: 0 0.5rem
   color: white
@@ -154,11 +150,3 @@
   &:hover
     background: $color-hover
 
-
-.tag-plugin.timeline.stellar-timeline-api .body .footer .label,
-.tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
-  margin: 0 2px
-  border-radius: 4px
-  padding: 0 0.5rem
-  .key
-    margin-right: 4px
\ No newline at end of file
diff --git a/source/css/_layout/tag-plugins/toc.styl b/source/css/_layout/tag-plugins/toc.styl
index ff3827e..72cc44c 100644
--- a/source/css/_layout/tag-plugins/toc.styl
+++ b/source/css/_layout/tag-plugins/toc.styl
@@ -33,6 +33,6 @@ details.toc[open] >div.body
       margin-top: 0
 
 
-@media screen and (max-width: $device-tablet)
+@media screen and (max-width: $device-mobile-max)
   .tag-plugin.toc[display=mobile]
     display: block !important
diff --git a/source/js/plugins/timeline.js b/source/js/plugins/timeline.js
index 3da3de9..7a5a0c0 100644
--- a/source/js/plugins/timeline.js
+++ b/source/js/plugins/timeline.js
@@ -73,26 +73,26 @@ const StellarTimeline = {
           cell += '<p class="title">' + item.title + '</p>';
           cell += marked.parse(item.body);
           cell += '<div class="footer">';
-          cell += '<div class="labels">';
+          cell += '<div class="flex labels">';
           item.labels.forEach((label, i) => {
-            cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
+            cell += '<div class="item label ' + label.name + '" style="background:#' + label.color + '12;border-color:#' + label.color + '22">';
             cell += '<span>' + label.name + '</span>';
             cell += '</div>';
           });
           cell += '</div>';
-          cell += '<div class="reactions">';
+          cell += '<div class="flex reactions">';
           if (item.reactions.total_count > 0) {
             for (let key of Object.keys(StellarTimeline.reactions)) {
               let num = item.reactions[key];
               if (num > 0) {
-                cell += '<div class="reaction ' + key + '">';
+                cell += '<div class="item reaction ' + key + '">';
                 cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
                 cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
                 cell += '</div>';
               }
             }
           }
-          cell += '<a class="comments" href="' + item.html_url + '">';
+          cell += '<a class="item comments" href="' + item.html_url + '">';
           cell += '<span class="key comments">💬</span>';
           cell += '<span class="value comments">' + item.comments + '</span>';
           cell += '</a>';