[O] Use the same responsive css

src/views/Blog.vue

@@ -1,7 +1,11 @@
 <template>
-    <div id="Blog" v-if="meta">
+    <div id="Blog" class="general-page" v-if="meta">
+        <div class="title">
+            <h2>记事本</h2>
+            <div class="subtitle">一些值得留下来的文字</div>
+        </div>
         <div id="breadcrumb">
-            <span class="clickable" @click="() => $router.push({query: {}})">Blog</span>
+            <span class="clickable" @click="() => $router.push({query: {}})">索引</span>
             <span v-if="tag">🏷️{{tag}}</span>
             <span v-if="category">📂{{category}}</span>
             <span class="no-after" v-if="post && activePost">{{activePost.title}}</span>
@@ -68,30 +72,14 @@ export default class Blog extends Vue
 
 <style lang="sass" scoped>
 @import "src/css/colors"
+@import "src/css/responsive"
 
-$width: 600px
+#breadcrumb
+    color: $color-text-light
+    margin-bottom: 20px
 
-#Blog
+    span:not(.no-after):after
-    width: $width
+        content: ">"
-    margin: 50px auto 20px
+        margin: 0 10px
-
-    #breadcrumb
-        color: $color-text-light
-        margin-bottom: 20px
-        text-align: left
-
-        span:not(.no-after):after
-            content: ">"
-            margin: 0 10px
-
-
-// Phone layout
-@media screen and (max-width: $width + 40px)
-    #Blog
-        margin: 20px 10px
-        width: unset
-
-        #breadcrumb
-            margin-left: 50px
 
 </style>

src/views/Life.vue

@@ -1,13 +1,15 @@
 <template>
     <TgBlog postsUrl="https://profile-api.hydev.org/exports/hykilp/posts.json">
-        <div id="header">
+        <div class="title">
-            <p>欢迎！</p>
+            <h2>生活</h2>
-            <p>
+            <div class="subtitle">
-                在这个时间只会正向流动的世界里，每当秒针划过刻度线，就不可能再回到那里了——每一刻都是我们的第一次、也是最后一次。二十岁，人生中最有趣的这段时光，只匆匆忙忙地经历一次太可惜了。但是或许可以通过这里的照片和文字，让未来的自己能够重新体验这些心情起伏——这是这个频道的初衷。
+                <p>
-            </p>
+                    在这个时间只会正向流动的世界里，每当秒针划过刻度线，就不可能再回到那里了——每一刻都是我们的第一次、也是最后一次。二十岁，人生中最有趣的这段时光，只匆匆忙忙地经历一次太可惜了。但是或许可以通过这里的照片和文字，让未来的自己能够重新体验这些心情起伏——这是这个频道的初衷。
-            <p>
+                </p>
-                这里是我记录生活的地方，没有固定格式内容，更新也会比较频繁。
+                <p>
-            </p>
+                    这里是我记录生活的地方，没有固定格式和内容，更新也会比较频繁。
+                </p>
+            </div>
         </div>
     </TgBlog>
 </template>
@@ -27,11 +29,9 @@ export default class Blog extends Vue
 
 <style lang="sass" scoped>
 @import "src/css/colors"
+@import "src/css/responsive"
 
-#header
+.title
-    margin-top: 50px
-    color: $color-text-light
     text-align: left
-    font-size: 0.9em
     margin-bottom: 30px
 </style>