diff --git a/assets/css/_core/_layout.scss b/assets/css/_core/_layout.scss index 38e0b894..7633ada2 100644 --- a/assets/css/_core/_layout.scss +++ b/assets/css/_core/_layout.scss @@ -11,18 +11,15 @@ aside { flex: 1; padding-inline: 0.5rem; - - &:first-child { - order: 2; - } } - &.container { display: flex; align-items: flex-start; justify-content: center; - padding: 0 1rem; + padding-inline: 1rem; + // TODO remove watermark from container + // gap: 0.5rem; &.container-reverse { flex-direction: row-reverse; @@ -35,7 +32,7 @@ } } -@import "_core/header"; -@import "_core/breadcrumb"; -@import "_core/footer"; -@import "_core/pagination"; +@import "_header"; +@import "_breadcrumb"; +@import "_footer"; +@import "_pagination"; diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index 0604d8d4..244ec2d6 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -441,6 +441,7 @@ } @import '../_partials/_single/reward'; + @import '../_partials/_single/collection-card'; @import '../_partials/_single/footer'; @import '../_partials/_single/comment'; } diff --git a/assets/css/_partials/_single/_collection-card.scss b/assets/css/_partials/_single/_collection-card.scss new file mode 100644 index 00000000..db12fe12 --- /dev/null +++ b/assets/css/_partials/_single/_collection-card.scss @@ -0,0 +1,87 @@ +.collection-card { + font-size: 0.875rem; + background-color: darken($global-background-color, 3%); + margin-top: 0.5rem; + padding: 1rem 1.25rem; + position: relative; + @include border-radius($global-border-radius * 1.5); + @include user-select(none); + + [data-theme='dark'] & { + background-color: lighten($global-background-color-dark, 3%); + } + + &:has(.collection-nav-item:nth-child(2))::before { + content: ''; + position: absolute; + left: 50%; + bottom: 0.75rem; + width: 1px; + height: 2rem; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.03), + rgba(0, 0, 0, 0.05) 50%, + rgba(0, 0, 0, 0.03) 100% + ); + + [data-theme='dark'] & { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.03), + rgba(255, 255, 255, 0.05) 50%, + rgba(255, 255, 255, 0.03) 100% + ); + } + } + + .collection-title { + @include link(false, false); + } + + .collection-nav { + display: flex; + justify-content: space-between; + gap: 1rem; + + &:not(:empty) { + margin-top: 0.5rem; + } + + .collection-nav-item { + flex-grow: 1; + max-width: 50%; + font-weight: 500; + display: flex; + align-items: center; + @include transition(all 0.3s ease-out); + + &:only-child { + max-width: 100%; + } + + i { + flex-shrink: 0; + } + + span { + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &[rel='next'] { + text-align: right; + } + + &[rel='prev']:hover { + @include transform(translateX(-4px)); + } + + &[rel='next']:hover { + @include transform(translateX(4px)); + } + } + } +} diff --git a/layouts/partials/single/collection-nav.html b/layouts/partials/single/collection-nav.html new file mode 100644 index 00000000..9db81248 --- /dev/null +++ b/layouts/partials/single/collection-nav.html @@ -0,0 +1,33 @@ +{{- /* Collection Navigation */ -}} +{{- $params := .Scratch.Get "params" -}} + +{{- if .Params.collections | and $params.collectionNavigation -}} + {{- range .Params.collections -}} + {{- $term := $.Site.GetPage "/collections" . -}} + {{- $termLink := printf `%v %v・%v` + $term.RelPermalink + (dict "Class" "fa-solid fa-layer-group fa-fw" | partial "plugin/icon.html") + (T "collection") + $term.Title + -}} +
+
+ {{ dict "Collections" $termLink | T "single.includedIn.collections" | safeHTML }} {{ len $term.Pages }} +
+
+ {{- with $term.Pages.Prev $ -}} + + {{- end -}} + {{- with $term.Pages.Next $ -}} + + {{- end -}} +
+
+ {{- end -}} +{{- end -}} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index 140dc87e..8680793f 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -3,21 +3,12 @@ {{- define "content" -}} {{- $params := .Scratch.Get "params" -}} {{- $toc := .Scratch.Get "toc" -}} + {{- $tocEmpty := eq .TableOfContents `` -}} - - -