diff options
| -rw-r--r-- | assets/css/components/_fictions.scss | 42 | ||||
| -rw-r--r-- | assets/css/global.scss | 1 | ||||
| -rw-r--r-- | assets/css/utils/_utility.scss | 8 | ||||
| -rw-r--r-- | layouts/_markup/render-heading.html | 5 | ||||
| -rw-r--r-- | layouts/_partials/components/post-page-header.html | 2 | ||||
| -rw-r--r-- | layouts/fictions/page.html | 11 | ||||
| -rw-r--r-- | layouts/fictions/section.html | 14 | ||||
| -rw-r--r-- | uno.config.js | 34 |
8 files changed, 60 insertions, 57 deletions
diff --git a/assets/css/components/_fictions.scss b/assets/css/components/_fictions.scss deleted file mode 100644 index 58c15ba0..00000000 --- a/assets/css/components/_fictions.scss +++ /dev/null @@ -1,42 +0,0 @@ -#fiction-section { - .fiction-welcome { - margin: 2rem 0; - } - - .fiction-list { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 2rem; - - .fiction-item { - text-align: center; - margin: 0; - filter: url(#x); - font-size: 1.5rem; - font-weight: 900; - - // 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}; - } - } - } - } -} - -.fiction-page { - .fiction-header { - display: flex; - flex-direction: column; - align-items: center; - } -} - -.fiction-page-header { - display: flex; - flex-direction: column; - align-items: center; -} diff --git a/assets/css/global.scss b/assets/css/global.scss index 56cc1976..c16fc056 100644 --- a/assets/css/global.scss +++ b/assets/css/global.scss @@ -10,7 +10,6 @@ @import "components/postlist"; @import "components/shortcodes"; @import "components/card"; -@import "components/fictions"; @import "components/library"; @import "components/footer"; @import "components/global-search"; diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss index d2110714..53cd3642 100644 --- a/assets/css/utils/_utility.scss +++ b/assets/css/utils/_utility.scss @@ -52,3 +52,11 @@ figure { .font-mono { font-family: var(--mono-font-family); } + +.font-secondary { + color: var(--secondary-text-color); +} + +.xerox { + filter: url(#x); +} diff --git a/layouts/_markup/render-heading.html b/layouts/_markup/render-heading.html new file mode 100644 index 00000000..b93a9aad --- /dev/null +++ b/layouts/_markup/render-heading.html @@ -0,0 +1,5 @@ +{{ $size := index (dict "1" "text-4xl" "2" "text-2xl" "3" "text-xl" "4" "text-lg" "5" "text-base" "6" "text-sm") (printf "%d" .Level) }} +<h{{ .Level }} id="{{ .Anchor }}" + class="{{ if eq .Level 2 }}font-extrabold{{ else }}font-bold{{ end }} my-5 {{ $size }}{{ with .Attributes.class }} {{ . }}{{ end }}"> + {{- .Text -}} +</h{{ .Level }}> diff --git a/layouts/_partials/components/post-page-header.html b/layouts/_partials/components/post-page-header.html index 4363b74c..fffe4f3b 100644 --- a/layouts/_partials/components/post-page-header.html +++ b/layouts/_partials/components/post-page-header.html @@ -1,5 +1,5 @@ <header id="post-page-header" - class="{{ with .Params.banner }}with-banner{{ end }} {{ if eq .Section "fictions" }}fiction-page-header{{ end }}"> + class="{{ with .Params.banner }}with-banner{{ end }} {{ if eq .Section "fictions" }} flex justify-center {{ end }}"> {{ if eq .Section "fictions" }} {{ partial "components/logo" (dict "src" "/img/potted-skeleton.svg" "link" "fictions") }} {{ else }} diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html index d0817e9c..5654ffbb 100644 --- a/layouts/fictions/page.html +++ b/layouts/fictions/page.html @@ -1,17 +1,14 @@ {{ define "main" }} {{ partial "components/post-page-header.html" . }} - <article - class="post fiction-page {{ .Site.Language.LanguageName }}" - id="article" - > + <article> <!-- Post Header --> <header style="view-transition-name: post-{{ .File.UniqueID }}" - class="post-header fiction-header" + class="text-center" > {{ partial "posts/banner" . }} - <h1 class="post-title" data-pagefind-meta="title">{{ .Title }}</h1> - <div class="post-meta">{{ partial "components/date" . }}</div> + <h1 class="xerox text-4xl font-900" data-pagefind-meta="title">{{ .Title }}</h1> + <div class="font-secondary">{{ partial "components/date" . }}</div> </header> <!-- Post Content --> diff --git a/layouts/fictions/section.html b/layouts/fictions/section.html index 1ce0be54..f97268cd 100644 --- a/layouts/fictions/section.html +++ b/layouts/fictions/section.html @@ -2,13 +2,21 @@ <article class="fiction-list-page"> {{ partial "header.html" . }} <div id="fiction-section"> - <div class="fiction-welcome markdown-body"> + <div class="my-[2rem] markdown-body"> {{ with .Content }}{{ . }}{{ end }} </div> - <div class="fiction-list"> + <div class="flex flex-wrap justify-around gap-[2rem]"> {{- $fictions := .Site.GetPage "section" "fictions" }} {{- range $fictions.Pages }} - <div class="fiction-item" style="view-transition-name: post-{{ .File.UniqueID }}"> + + {{ $rotationDeg := add (math.Floor (mul (math.Rand) 7)) -4 }} {{/* -4 to +4 */}} + {{ $opacity := add (div (math.Floor (mul (math.Rand) 5)) 10) 0.6 }} {{/* 0.6 to 1.0 */}} + + {{ $rotateClass := printf "rotate-[%.1fdeg]" $rotationDeg }} + {{ $opacityClass := printf "opacity-[%.1f]" $opacity }} + + <div class="xerox text-center text-2xl font-extrabold {{ $rotateClass }} {{ $opacityClass }}" + style="view-transition-name: post-{{ .File.UniqueID }}"> <a href="{{ .Permalink }}">《{{ .Title }}》</a> </div> {{- end }} diff --git a/uno.config.js b/uno.config.js index 9d1a0e66..b4ac2e97 100644 --- a/uno.config.js +++ b/uno.config.js @@ -1,9 +1,37 @@ -import presetWind4 from '@unocss/preset-wind4' -import { defineConfig } from 'unocss' +import { defineConfig, presetWind3, presetAttributify } from 'unocss' export default defineConfig({ + safelist: [ + 'text-sm', + 'text-md', + 'text-lg', + 'text-xl', + 'text-2xl', + 'text-3xl', + 'text-4xl', + 'text-5xl', + + // rotate -4 to +4 deg + 'rotate-[-3.0deg]', + 'rotate-[-2.0deg]', + 'rotate-[-1.0deg]', + 'rotate-[0.0deg]', + 'rotate-[1.0deg]', + 'rotate-[2.0deg]', + 'rotate-[3.0deg]', + + // opacity from 0.6 to 1.0 + 'opacity-[0.6]', + 'opacity-[0.7]', + 'opacity-[0.8]', + 'opacity-[0.9]', + 'opacity-[1.0]', + ], content: { filesystem: ['./**/*.{html,md,js}'], }, - presets: [presetWind4()], + presets: [ + presetAttributify(), + presetWind3(), + ], }) |