[O] Use the same responsive css
This commit is contained in:
+13
-25
@@ -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
|
||||
width: $width
|
||||
margin: 50px auto 20px
|
||||
|
||||
#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
|
||||
span:not(.no-after):after
|
||||
content: ">"
|
||||
margin: 0 10px
|
||||
|
||||
</style>
|
||||
|
||||
+12
-12
@@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<TgBlog postsUrl="https://profile-api.hydev.org/exports/hykilp/posts.json">
|
||||
<div id="header">
|
||||
<p>欢迎!</p>
|
||||
<p>
|
||||
在这个时间只会正向流动的世界里,每当秒针划过刻度线,就不可能再回到那里了——每一刻都是我们的第一次、也是最后一次。二十岁,人生中最有趣的这段时光,只匆匆忙忙地经历一次太可惜了。但是或许可以通过这里的照片和文字,让未来的自己能够重新体验这些心情起伏——这是这个频道的初衷。
|
||||
</p>
|
||||
<p>
|
||||
这里是我记录生活的地方,没有固定格式内容,更新也会比较频繁。
|
||||
</p>
|
||||
<div class="title">
|
||||
<h2>生活</h2>
|
||||
<div class="subtitle">
|
||||
<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
|
||||
margin-top: 50px
|
||||
color: $color-text-light
|
||||
.title
|
||||
text-align: left
|
||||
font-size: 0.9em
|
||||
margin-bottom: 30px
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user