diff options
| -rw-r--r-- | assets/css/components/_fictions.scss | 36 | ||||
| -rw-r--r-- | layouts/fictions/section.html | 14 | ||||
| -rw-r--r-- | layouts/library/section.html | 7 |
3 files changed, 21 insertions, 36 deletions
diff --git a/assets/css/components/_fictions.scss b/assets/css/components/_fictions.scss index c235a5f2..58c15ba0 100644 --- a/assets/css/components/_fictions.scss +++ b/assets/css/components/_fictions.scss @@ -1,33 +1,27 @@ #fiction-section { .fiction-welcome { margin: 2rem 0; - display: flex; - align-items: center; - gap: 2rem; - @media screen and (max-width: 768px) { - gap: 1rem; - } - - .fiction-welcome-image img { - width: 10rem; - @media screen and (max-width: 768px) { - width: 7rem; - } - opacity: 0.8; - } } .fiction-list { - margin: 4rem 0; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 2rem; + .fiction-item { text-align: center; - margin: 2rem 0; + margin: 0; + filter: url(#x); + font-size: 1.5rem; + font-weight: 900; - .fiction-item-title { - margin: 0; - } - .fiction-item-meta { - color: var(--secondary-text-color); + // Apply slight random rotation using nth-child + @for $i from 1 through 10 { + &:nth-child(#{$i}) { + transform: rotate(#{random(7) - 4}deg); + opacity: #{(random(5) + 5) / 10}; + } } } } diff --git a/layouts/fictions/section.html b/layouts/fictions/section.html index 8747206a..f489e3fc 100644 --- a/layouts/fictions/section.html +++ b/layouts/fictions/section.html @@ -2,22 +2,14 @@ <article class="fiction-list-page"> {{ partial "header.html" . }} <div id="fiction-section"> - <div class="fiction-welcome"> - <div class="fiction-welcome-image invert-if-dark"> - <img src="/img/potted-skeleton.svg" /> - </div> - <div class="fiction-welcome-content markdown-body">{{ with .Content }}{{ . }}{{ end }}</div> + <div class="fiction-welcome markdown-body"> + {{ with .Content }}{{ . }}{{ end }} </div> <div class="fiction-list"> {{- $fictions := .Site.GetPage "section" "fictions" }} <!-- 获取 "cards" 部分的内容 --> {{- range $fictions.Pages }} <div class="fiction-item" style="view-transition-name: post-{{ .File.UniqueID }}"> - <h2 class="fiction-item-title"> - <a href="{{ .Permalink }}">{{ .Title }}</a> - </h2> - <p class="fiction-item-meta"> - <time>{{ .Date.Format "2006-1-2" }}</time> - </p> + <a href="{{ .Permalink }}">《{{ .Title }}》</a> </div> {{- end }} </div> diff --git a/layouts/library/section.html b/layouts/library/section.html index 221cc005..217936d8 100644 --- a/layouts/library/section.html +++ b/layouts/library/section.html @@ -7,11 +7,10 @@ <div class="book-group"> {{ range where .Site.RegularPages "Section" "library" }} {{ if eq .Date.Year now.Year }} - <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}"> + <div class="book{{ if eq .Params.rating 1 }} badbook{{ end }}{{ if eq .Params.rating 5 }} goodbook{{ end }}" + style="view-transition-name: book-{{ .File.UniqueID }}"> <a href="{{ .Permalink }}" class="book-cover" style="view-transition-name: book-{{ .Title }}"> - <img - class="lazy" src="{{ .Params.cover }}!small" - style="view-transition-name: book-{{ .File.UniqueID }}" /> + <img class="lazy" src="{{ .Params.cover }}!small" /> </a> </div> {{ end }} |