[O] Use the same responsive css

This commit is contained in:
Hykilpikonna
2022-12-25 00:40:20 -05:00
parent 203a5c5265
commit eb393a913b
2 changed files with 25 additions and 37 deletions
+13 -25
View File
@@ -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
View File
@@ -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>