diff options
| -rw-r--r-- | assets/css/components/_markdown.scss | 5 | ||||
| -rw-r--r-- | assets/css/components/_pages.scss | 77 | ||||
| -rw-r--r-- | assets/css/components/_reset.scss | 5 | ||||
| -rw-r--r-- | layouts/_default/taxonomy.html | 5 | ||||
| -rw-r--r-- | layouts/partials/components/welcome.html | 28 |
5 files changed, 39 insertions, 81 deletions
diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss index 0476ea90..d6e57da1 100644 --- a/assets/css/components/_markdown.scss +++ b/assets/css/components/_markdown.scss @@ -74,11 +74,6 @@ $em-text-color: #889E73; color: $em-text-color; } - hr { - margin: 2.5rem auto; - border: 0.05rem solid var(--border-color); - } - img { max-width: 100%; display: block; diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss index fc94c1b2..a818ab52 100644 --- a/assets/css/components/_pages.scss +++ b/assets/css/components/_pages.scss @@ -73,63 +73,44 @@ /* post series */ -#posts-header { +#post-series-list { + display: flex; + justify-content: center; + gap: .5rem; + @media screen and (min-width: 768px) { - display: grid; - grid-template-columns: 2fr 1fr; + margin: 1rem; + gap: 1rem; } - #post-series { - #post-series-list { - display: flex; - gap: .5rem; + .post-series-item { + display: flex; + flex-direction: column; + overflow: hidden; + transition: .3s; + cursor: pointer; - @media screen and (min-width: 768px) { - margin: 1rem; - gap: 1rem; - } + @include bordered; - .post-series-item { - display: flex; - flex-direction: column; - overflow: hidden; - transition: .3s; - cursor: pointer; - - @include bordered; - - .post-series-cover { - img { - display: block; - width: 8rem; - } - } - .post-series-text { - background-color: var(--block-background-color); - h3 { - margin: 0; - text-align: center; - } - } - - &:hover { - text-decoration: none; - box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); - transform: translateY(-.5rem) - } + .post-series-cover { + img { + display: block; + width: 8rem; } } - } - - #posts-recommendation { - #posts-recommendation-links { - display: flex; - flex-direction: row; - gap: .5rem; - @media screen and (min-width: 768px) { - flex-direction: column; + .post-series-text { + background-color: var(--block-background-color); + h3 { + margin: 0; + text-align: center; } } + + &:hover { + text-decoration: none; + box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); + transform: translateY(-.5rem) + } } } diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss index 83e20eca..3512e553 100644 --- a/assets/css/components/_reset.scss +++ b/assets/css/components/_reset.scss @@ -68,3 +68,8 @@ button { } } } + +hr { + margin: 2.5rem auto; + border: 0.05rem solid var(--border-color); +} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index 3e7ca1b8..d05cfef8 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -4,6 +4,7 @@ {{ partial "components/pagefind.html" . }} + <!-- Display Tags --> <section class="taxonomy taxonomy-tags"> {{ range .Site.Taxonomies.tags.Alphabetical }} @@ -14,6 +15,10 @@ {{ end }} </section> + <hr /> + {{ partial "components/welcome" . }} + <hr /> + <!-- Display Categories --> <section class="taxonomy taxonomy-categories row"> {{ range .Site.Taxonomies.categories.Alphabetical }} diff --git a/layouts/partials/components/welcome.html b/layouts/partials/components/welcome.html index 219b6d4e..cf330563 100644 --- a/layouts/partials/components/welcome.html +++ b/layouts/partials/components/welcome.html @@ -1,7 +1,6 @@ {{ if eq .Site.Language.Lang "zh" }} <header id="posts-header"> <div id="post-series"> - <h1>专栏</h1> <div id="post-series-list"> {{ range .Site.Params.series }} <a class="post-series-item" @@ -19,32 +18,5 @@ {{ end }} </div> </div> - <div id="posts-recommendation"> - <h1>欢迎</h1> - <script> - const posts = [ - {{ range site.RegularPages }} - "{{ .RelPermalink }}", - {{ end }} - ]; - - function getRandomPost() { - const randomPostLink = document.getElementById("random-post-link") - const randomIndex = Math.floor(Math.random() * posts.length); - randomPostLink.href = posts[randomIndex]; - } - getRandomPost() - </script> - <div id="posts-recommendation-links"> - <a class="button" id="random-post-link" - href="" - onclick="getRandomPost()" - >🎲 随机文章</a> - <a class="button" href="https://www.travellings.cn/go.html" - target="_blank">🚇 开往</a> - <a class="button" href="https://www.guhub.cn/" - target="_blank">🏠 我的主页</a> - </div> - </div> </header> {{ end }} |