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