diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index bca1f6cc..44a09a62 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -497,6 +497,9 @@ body.zen-mode-enable { .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] { inset-inline-start: calc(max(-50vw, -800px) + 50%); } + .end-6 { + inset-inline-end: calc(var(--spacing) * 6); + } .top-0 { top: calc(var(--spacing) * 0); } @@ -506,18 +509,18 @@ body.zen-mode-enable { .top-20 { top: calc(var(--spacing) * 20); } - .top-\[110vh\] { - top: 110vh; - } - .top-\[calc\(100vh-5\.5rem\)\] { - top: calc(100vh - 5.5rem); - } .right-0 { right: calc(var(--spacing) * 0); } .bottom-0 { bottom: calc(var(--spacing) * 0); } + .bottom-6 { + bottom: calc(var(--spacing) * 6); + } + .bottom-24 { + bottom: calc(var(--spacing) * 24); + } .left-0 { left: calc(var(--spacing) * 0); } @@ -536,6 +539,9 @@ body.zen-mode-enable { .z-30 { z-index: 30; } + .z-50 { + z-index: 50; + } .z-80 { z-index: 80; } @@ -1204,9 +1210,6 @@ body.zen-mode-enable { .mb-12 { margin-bottom: calc(var(--spacing) * 12); } - .mb-16 { - margin-bottom: calc(var(--spacing) * 16); - } .mb-20 { margin-bottom: calc(var(--spacing) * 20); } @@ -1538,6 +1541,14 @@ body.zen-mode-enable { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-0 { + --tw-translate-y: calc(var(--spacing) * 0); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-4 { + --tw-translate-y: calc(var(--spacing) * 4); + translate: var(--tw-translate-x) var(--tw-translate-y); + } .scale-0 { --tw-scale-x: 0%; --tw-scale-y: 0%; @@ -3213,11 +3224,6 @@ body.zen-mode-enable { grid-template-columns: repeat(5, minmax(0, 1fr)); } } - .ltr\:right-0 { - &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { - right: calc(var(--spacing) * 0); - } - } .ltr\:mr-4 { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { margin-right: calc(var(--spacing) * 4); @@ -3243,11 +3249,6 @@ body.zen-mode-enable { display: inline; } } - .rtl\:left-0 { - &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { - left: calc(var(--spacing) * 0); - } - } .rtl\:-mr-\[79px\] { &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { margin-right: calc(79px * -1); @@ -3807,6 +3808,9 @@ pre { [id^="fn"], [id^="fnref"] { scroll-margin-top: 145px; } +#main-content { + scroll-margin-top: -125px; +} @media (width >= 640px) { .article { flex-wrap: wrap; diff --git a/assets/css/main.css b/assets/css/main.css index 5bdd77d3..577c60ec 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -215,6 +215,11 @@ pre { scroll-margin-top: 145px; } +/* patch for skip to main content */ +#main-content { + scroll-margin-top: -125px; +} + @variant sm { .article { flex-wrap: wrap; diff --git a/assets/js/scroll-to-top.js b/assets/js/scroll-to-top.js new file mode 100644 index 00000000..3fa30698 --- /dev/null +++ b/assets/js/scroll-to-top.js @@ -0,0 +1,13 @@ +function scrollToTop() { + const scrollToTop = document.getElementById("scroll-to-top"); + if (window.scrollY > window.innerHeight * 0.5) { + scrollToTop.classList.remove("translate-y-4", "opacity-0"); + scrollToTop.classList.add("translate-y-0", "opacity-100"); + } else { + scrollToTop.classList.remove("translate-y-0", "opacity-100"); + scrollToTop.classList.add("translate-y-4", "opacity-0"); + } +} + +window.addEventListener("scroll", scrollToTop); +window.addEventListener("load", scrollToTop); diff --git a/config/_default/params.toml b/config/_default/params.toml index c1bc43a6..7f3abf80 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -160,7 +160,7 @@ forgejoDefaultServer = "https://v11.next.forgejo.org" # globalWidget = true # globalWidgetMessage = "Hello" # globalWidgetColor = "#FFDD00" - # globalWidgetPosition = "Right" + # globalWidgetPosition = "right" [verification] # google = "" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index f42a8500..80196217 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -159,7 +159,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384", globalWidget = true globalWidgetMessage = "" globalWidgetColor = "#FFDD00" - globalWidgetPosition = "Right" + globalWidgetPosition = "right" [verification] # google = "" diff --git a/exampleSite/content/docs/configuration/index.it.md b/exampleSite/content/docs/configuration/index.it.md index c173c036..270ebfd5 100644 --- a/exampleSite/content/docs/configuration/index.it.md +++ b/exampleSite/content/docs/configuration/index.it.md @@ -353,8 +353,8 @@ Many of the article defaults here can be overridden on a per article basis by sp | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. | | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. | | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. | -| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. | -| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" | +| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. | +| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" | ### Verifications diff --git a/exampleSite/content/docs/configuration/index.ja.md b/exampleSite/content/docs/configuration/index.ja.md index bd3400f9..9a8adc9f 100644 --- a/exampleSite/content/docs/configuration/index.ja.md +++ b/exampleSite/content/docs/configuration/index.ja.md @@ -353,8 +353,8 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ | `buymeacoffee.identifier` | _未設定_ | ターゲットの buymeacoffee アカウントの識別子。 | | `buymeacoffee.globalWidget` | _未設定_ | グローバル buymeacoffee ウィジェットを有効にします。 | | `buymeacoffee.globalWidgetMessage` | _未設定_ | 新しいユーザーが初めてサイトにアクセスしたときに表示されるメッセージ。 | -| `buymeacoffee.globalWidgetColor` | _未設定_ | ウィジェットの色（16進数形式）。 | -| `buymeacoffee.globalWidgetPosition` | _未設定_ | ウィジェットの位置。例えば "Left" または "Right" | +| `buymeacoffee.globalWidgetColor` | `#FFDD00` | ウィジェットの色（16進数形式）。 | +| `buymeacoffee.globalWidgetPosition` | _未設定_ | ウィジェットの位置。例えば "left" または "right" | ### verification diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 736161cc..092526a0 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -360,8 +360,8 @@ Many of the article defaults here can be overridden on a per article basis by sp | `buymeacoffee.identifier` | _Not set_ | The identifier to the target buymeacoffee account. | | `buymeacoffee.globalWidget` | _Not set_ | Activate the global buymeacoffee widget. | | `buymeacoffee.globalWidgetMessage` | _Not set_ | Message what will be displayed the first time a new user lands on the site. | -| `buymeacoffee.globalWidgetColor` | _Not set_ | Widget color in hex format. | -| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "Left" or "Right" | +| `buymeacoffee.globalWidgetColor` | `#FFDD00` | Widget color in hex format. | +| `buymeacoffee.globalWidgetPosition` | _Not set_ | Position of the widget, i.e. "left" or "right" | ### Verifications diff --git a/exampleSite/content/docs/configuration/index.zh-cn.md b/exampleSite/content/docs/configuration/index.zh-cn.md index f4e50ddb..74425b8b 100644 --- a/exampleSite/content/docs/configuration/index.zh-cn.md +++ b/exampleSite/content/docs/configuration/index.zh-cn.md @@ -352,13 +352,13 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中 ### BuyMeACoffee(赞助平台) -| 名称 | 默认值 | 描述 | -| ----------------------------------- | ------ | ---------------------------------- | -| `buymeacoffee.identifier` | 无 | buymeacoffee 账号的用户名。 | -| `buymeacoffee.globalWidget` | 无 | 激活位于全局的 buymeacoffee 组件。 | -| `buymeacoffee.globalWidgetMessage` | 无 | 新用户首次访问网站时显示的消息。 | -| `buymeacoffee.globalWidgetColor` | 无 | 组件颜色，使用 HEX 格式。 | -| `buymeacoffee.globalWidgetPosition` | 无 | 组件位置，例如 "Left" 或 "Right"。 | +| 名称 | 默认值 | 描述 | +| ----------------------------------- | --------- | ---------------------------------- | +| `buymeacoffee.identifier` | 无 | buymeacoffee 账号的用户名。 | +| `buymeacoffee.globalWidget` | 无 | 激活位于全局的 buymeacoffee 组件。 | +| `buymeacoffee.globalWidgetMessage` | 无 | 新用户首次访问网站时显示的消息。 | +| `buymeacoffee.globalWidgetColor` | `#FFDD00` | 组件颜色，使用 HEX 格式。 | +| `buymeacoffee.globalWidgetPosition` | 无 | 组件位置，例如 "left" 或 "right"。 | ### 验证 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 126af5c4..40965c04 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,14 +1,10 @@ + data-default-appearance="{{ site.Params.defaultAppearance | default `light` }}" + data-auto-appearance="{{ site.Params.autoSwitchAppearance | default `true` }}"> {{- partial "head.html" . -}} @@ -48,9 +44,9 @@ src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="{{ site.Params.buymeacoffee.identifier }}" data-description="Support me on Buy me a coffee!" - data-message="{{ site.Params.buymeacoffee.globalWidgetMessage | default "" }}" - data-color="{{ site.Params.buymeacoffee.globalWidgetColor | default "#FFDD00" }}" - data-position="{{ site.Params.buymeacoffee.globalWidgetPosition | default "Left" }}" + {{ with site.Params.buymeacoffee.globalWidgetMessage }}data-message="{{ . }}"{{ end }} + {{ with site.Params.buymeacoffee.globalWidgetColor | default `#FFDD00` }}data-color="{{ . }}"{{ end }} + {{ with site.Params.buymeacoffee.globalWidgetPosition }}data-position="{{ . }}"{{ end }} data-x_margin="18" data-y_margin="18"> {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index cb1ccabd..e12a7bf4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -69,6 +69,10 @@ type="text/javascript" src="{{ $jsAppearance.RelPermalink }}" integrity="{{ $jsAppearance.Data.Integrity }}"> + {{ if site.Params.footer.showScrollToTop | default true }} + {{ $jsToTop := resources.Get "js/scroll-to-top.js" }} + {{ $assets.Add "js" (slice $jsToTop) }} + {{ end }} {{ if .Site.Params.enableA11y | default false }} {{ $jsA11y := resources.Get "js/a11y.js" }} {{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }} @@ -83,6 +87,10 @@ src="{{ $jsZenMode.RelPermalink }}" integrity="{{ $jsZenMode.Data.Integrity }}"> {{ end }} + {{ if site.Params.footer.showScrollToTop | default true }} + {{ $jsToTop := resources.Get "js/scroll-to-top.js" }} + {{ $assets.Add "js" (slice $jsToTop) }} + {{ end }} {{ if .Site.Params.enableSearch | default false }} {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }} {{ $jsSearch := resources.Get "js/search.js" }} diff --git a/layouts/partials/scroll-to-top.html b/layouts/partials/scroll-to-top.html index e34b3660..e67ff134 100644 --- a/layouts/partials/scroll-to-top.html +++ b/layouts/partials/scroll-to-top.html @@ -1,7 +1,11 @@ -
+{{ $coffeeIsRight := and site.Params.buymeacoffee.globalWidget (eq (lower site.Params.buymeacoffee.globalWidgetPosition) "right") }} +{{ $toTopYOffset := cond $coffeeIsRight "bottom-24" "bottom-6" }} +
↑