diff options
| -rw-r--r-- | assets/css/components/_card.scss | 33 | ||||
| -rw-r--r-- | assets/css/components/_postlist.scss | 13 | ||||
| -rw-r--r-- | assets/css/utils/_utility.scss | 27 | ||||
| -rw-r--r-- | layouts/_default/term.html | 2 | ||||
| -rw-r--r-- | layouts/cards/section.html | 12 |
5 files changed, 62 insertions, 25 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 6bf57fcc..8308d1c6 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -74,6 +74,39 @@ } } +.cards-section { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + @media screen and (min-width: 768px) { + grid-template-columns: 1fr 1fr; + } + .card { + margin: 0; + h3 { + margin: 0; + } + } +} + +.cards-statistics { + margin: 1rem 0; + table tr > td:nth-child(2) { + text-align: right; + } + .number-pill { + text-align: center; + display: inline-block; + width: 1.75rem; + height: 1.75rem; + line-height: 1.75rem; + box-sizing: border-box; + border-radius: 50%; + background-color: var(--block-background-color); + font-size: 1rem; + } +} + #latest-cards { margin: 1rem 0; .latest-cards-container { diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss index da4113a2..7682dbae 100644 --- a/assets/css/components/_postlist.scss +++ b/assets/css/components/_postlist.scss @@ -131,19 +131,6 @@ } } } - .term-list-cards { - @media screen and (min-width: 768px) { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - } - .card { - margin: 0; - h3 { - margin: 0; - } - } - } } .taxonomy-description hr { diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss index a54268b3..9b857fdb 100644 --- a/assets/css/utils/_utility.scss +++ b/assets/css/utils/_utility.scss @@ -29,22 +29,31 @@ figure { } .outbox { - display: flex; - justify-content: center; + display: flex; + justify-content: center; + width: 100%; - // Default width - width: 100%; + @media screen and (min-width: 768px) { + width: calc(var(--page-width) + 10rem); + margin: 0 -5rem; + } - // Properly interpolate calc() in media queries + @media screen and (min-width: 1200px) { + width: calc(var(--page-width) + 20rem); + margin: 0 -10rem; + } + + &.small { @media screen and (min-width: 768px) { - width: calc(var(--page-width) + 5rem * 2); - margin: 0 -5rem; + width: calc(var(--page-width) + 4rem); + margin: 0 -2rem; } @media screen and (min-width: 1200px) { - width: calc(var(--page-width) + 10rem * 2); - margin: 0 -10rem; + width: calc(var(--page-width) + 10rem); + margin: 0 -5rem; } + } } .font-mono { diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 7cab2827..4d6fe390 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -24,7 +24,7 @@ </li> {{ end }} </ul> - <div class="term-list-cards"> + <div class="term-list-cards cards-section"> {{ range where .Pages "Section" "eq" "cards" }} <div class="card"> <h3> diff --git a/layouts/cards/section.html b/layouts/cards/section.html index 61e01516..1e7254e3 100644 --- a/layouts/cards/section.html +++ b/layouts/cards/section.html @@ -1,9 +1,17 @@ {{ define "main" }} <article class="card-list"> {{ partial "header.html" . }} - <div id="cards-section"> + <div class="cards-statistics markdown-body"> + <table> + <tr> + <td>卡片数量</td> + <td><span class="number-pill">{{ len .Pages }}</span></td> + </tr> + </table> + </div> + <div class="cards-section outbox small"> {{- $cards := .Site.GetPage "section" "cards" }} <!-- 获取 "cards" 部分的内容 --> - {{- $paginator := .Paginate $cards.Pages 8 }} <!-- 对该部分内容进行分页 --> + {{- $paginator := .Paginate $cards.Pages 10 }} <!-- 对该部分内容进行分页 --> {{- range $paginator.Pages }} <div class="card" style="view-transition-name: card-{{ .File.UniqueID }}"> |