From 1af92d92c8ca6f75483f290cd2626ce3e8612f70 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Thu, 23 Jan 2025 08:23:43 +0000 Subject: [PATCH] feat: integrate PhotoSwipe lightbox, enhance scrollbar functionality, and update layout components - Added a new PhotoSwipe component for image lightbox functionality in the layout. - Enhanced scrollbar component with an auto-hide delay feature. - Updated global styles to improve scrollbar appearance and added styles for PhotoSwipe. - Included new Head layout component for better SEO and meta tag management. - Added images to existing posts for improved visual content. This commit improves user experience with enhanced image viewing and layout consistency. --- package.json | 2 +- pnpm-lock.yaml | 70 +++++++++++++------------- src/components/PhotoSwipe.astro | 52 +++++++++++++++++++ src/components/Scrollbar.astro | 1 + src/content/posts/hometown.md | 2 + src/content/posts/rashomon.md | 2 + src/{components => layouts}/Head.astro | 2 + src/layouts/Layout.astro | 9 ++-- src/styles/global.css | 25 +++++---- src/styles/photoswipe.css | 17 +++++++ 10 files changed, 131 insertions(+), 51 deletions(-) create mode 100644 src/components/PhotoSwipe.astro rename src/{components => layouts}/Head.astro (99%) create mode 100644 src/styles/photoswipe.css diff --git a/package.json b/package.json index 3ab2ac2..dccacbe 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@antfu/eslint-config": "^3.16.0", "@types/markdown-it": "^14.1.2", - "@types/node": "^22.10.7", + "@types/node": "^22.10.9", "@types/sanitize-html": "^2.13.0", "@unocss/eslint-plugin": "^65.4.3", "@unocss/preset-attributify": "^65.4.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c266d73..290e4a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 0.9.4(typescript@5.7.3) '@astrojs/mdx': specifier: ^4.0.7 - version: 4.0.7(astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)) + version: 4.0.7(astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0)) '@astrojs/partytown': specifier: ^2.1.3 version: 2.1.3 @@ -31,10 +31,10 @@ importers: version: 65.4.3 astro: specifier: ^5.1.8 - version: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) + version: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) astro-compress: specifier: ^2.3.6 - version: 2.3.6(@types/node@22.10.7)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) + version: 2.3.6(@types/node@22.10.9)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) astro-robots-txt: specifier: ^1.0.0 version: 1.0.0 @@ -94,7 +94,7 @@ importers: version: 5.0.0 vite: specifier: ^6.0.11 - version: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + version: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) devDependencies: '@antfu/eslint-config': specifier: ^3.16.0 @@ -103,8 +103,8 @@ importers: specifier: ^14.1.2 version: 14.1.2 '@types/node': - specifier: ^22.10.7 - version: 22.10.7 + specifier: ^22.10.9 + version: 22.10.9 '@types/sanitize-html': specifier: ^2.13.0 version: 2.13.0 @@ -134,7 +134,7 @@ importers: version: 1.5.0 unocss: specifier: ^65.4.3 - version: 65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) + version: 65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) unocss-preset-theme: specifier: ^0.14.1 version: 0.14.1(@unocss/core@65.4.3) @@ -1052,8 +1052,8 @@ packages: '@types/node@22.10.5': resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==} - '@types/node@22.10.7': - resolution: {integrity: sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==} + '@types/node@22.10.9': + resolution: {integrity: sha512-Ir6hwgsKyNESl/gLOcEz3krR4CBGgliDqBQ2ma4wIhEx0w+xnoeTq3tdrNw15kU3SxogDjOgv9sqdtLW8mIHaw==} '@types/normalize-package-data@2.4.4': resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} @@ -1717,8 +1717,8 @@ packages: duplexer@0.1.2: resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==} - electron-to-chromium@1.5.85: - resolution: {integrity: sha512-UgTI7ZHxtSjOUwV0vZLpqT604U1Z8L3bq8mAtAKtuRPlMZ/6dLFMYgYnLdXSi/urbVTP2ykDb9EDDUrdIzw4Qg==} + electron-to-chromium@1.5.86: + resolution: {integrity: sha512-/D7GAAaCRBQFBBcop6SfAAGH37djtpWkOuYhyAajw0l5vsfeSsUQYxaFPwr1c/mC/flARCDdKFo5gpFqNI+18w==} emmet@2.4.11: resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==} @@ -4070,12 +4070,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/mdx@4.0.7(astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))': + '@astrojs/mdx@4.0.7(astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0))': dependencies: '@astrojs/markdown-remark': 6.0.2 '@mdx-js/mdx': 3.1.0(acorn@8.14.0) acorn: 8.14.0 - astro: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) es-module-lexer: 1.6.0 estree-util-visit: 2.0.0 hast-util-to-html: 9.0.4 @@ -4771,7 +4771,7 @@ snapshots: dependencies: undici-types: 6.20.0 - '@types/node@22.10.7': + '@types/node@22.10.9': dependencies: undici-types: 6.20.0 @@ -4783,7 +4783,7 @@ snapshots: '@types/sax@1.2.7': dependencies: - '@types/node': 22.10.7 + '@types/node': 22.10.9 '@types/unist@2.0.11': {} @@ -4868,13 +4868,13 @@ snapshots: '@ungap/structured-clone@1.2.1': {} - '@unocss/astro@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': + '@unocss/astro@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': dependencies: '@unocss/core': 65.4.3 '@unocss/reset': 65.4.3 - '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) + '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) optionalDependencies: - vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color @@ -5024,7 +5024,7 @@ snapshots: dependencies: '@unocss/core': 65.4.3 - '@unocss/vite@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': + '@unocss/vite@65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': dependencies: '@ampproject/remapping': 2.3.0 '@rollup/pluginutils': 5.1.4(rollup@4.31.0) @@ -5034,7 +5034,7 @@ snapshots: chokidar: 3.6.0 magic-string: 0.30.17 tinyglobby: 0.2.10 - vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) transitivePeerDependencies: - rollup - supports-color @@ -5212,12 +5212,12 @@ snapshots: astring@1.9.0: {} - astro-compress@2.3.6(@types/node@22.10.7)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): + astro-compress@2.3.6(@types/node@22.10.9)(jiti@2.4.2)(rollup@4.31.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): dependencies: '@playform/pipe': 0.1.2 '@types/csso': 5.0.4 '@types/html-minifier-terser': 7.0.2 - astro: 5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) + astro: 5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) commander: 13.0.0 csso: 5.0.5 deepmerge-ts: 7.1.3 @@ -5284,7 +5284,7 @@ snapshots: valid-filename: 4.0.0 zod: 3.24.1 - astro@5.1.8(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): + astro@5.1.8(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.31.0)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): dependencies: '@astrojs/compiler': 2.10.3 '@astrojs/internal-helpers': 0.4.2 @@ -5336,8 +5336,8 @@ snapshots: unist-util-visit: 5.0.0 unstorage: 1.14.4 vfile: 6.0.3 - vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) - vitefu: 1.0.5(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)) + vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + vitefu: 1.0.5(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)) which-pm: 3.0.0 xxhash-wasm: 1.1.0 yargs-parser: 21.1.1 @@ -5425,7 +5425,7 @@ snapshots: browserslist@4.24.4: dependencies: caniuse-lite: 1.0.30001695 - electron-to-chromium: 1.5.85 + electron-to-chromium: 1.5.86 node-releases: 2.0.19 update-browserslist-db: 1.1.2(browserslist@4.24.4) @@ -5687,7 +5687,7 @@ snapshots: duplexer@0.1.2: {} - electron-to-chromium@1.5.85: {} + electron-to-chromium@1.5.86: {} emmet@2.4.11: dependencies: @@ -8225,9 +8225,9 @@ snapshots: '@unocss/core': 65.4.3 '@unocss/rule-utils': 0.63.6 - unocss@65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)): + unocss@65.4.3(postcss@8.5.1)(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)): dependencies: - '@unocss/astro': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) + '@unocss/astro': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) '@unocss/cli': 65.4.3(rollup@4.31.0) '@unocss/core': 65.4.3 '@unocss/postcss': 65.4.3(postcss@8.5.1) @@ -8243,9 +8243,9 @@ snapshots: '@unocss/transformer-compile-class': 65.4.3 '@unocss/transformer-directives': 65.4.3 '@unocss/transformer-variant-group': 65.4.3 - '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) + '@unocss/vite': 65.4.3(rollup@4.31.0)(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) optionalDependencies: - vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) transitivePeerDependencies: - postcss - rollup @@ -8299,13 +8299,13 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0): + vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0): dependencies: esbuild: 0.24.2 postcss: 8.5.1 rollup: 4.31.0 optionalDependencies: - '@types/node': 22.10.7 + '@types/node': 22.10.9 fsevents: 2.3.3 jiti: 2.4.2 lightningcss: 1.28.2 @@ -8313,9 +8313,9 @@ snapshots: tsx: 4.19.2 yaml: 2.7.0 - vitefu@1.0.5(vite@6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)): + vitefu@1.0.5(vite@6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0)): optionalDependencies: - vite: 6.0.11(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) + vite: 6.0.11(@types/node@22.10.9)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.7.0) volar-service-css@0.0.62(@volar/language-service@2.4.11): dependencies: diff --git a/src/components/PhotoSwipe.astro b/src/components/PhotoSwipe.astro new file mode 100644 index 0000000..fce58d3 --- /dev/null +++ b/src/components/PhotoSwipe.astro @@ -0,0 +1,52 @@ + diff --git a/src/components/Scrollbar.astro b/src/components/Scrollbar.astro index 829d94e..845128b 100644 --- a/src/components/Scrollbar.astro +++ b/src/components/Scrollbar.astro @@ -14,6 +14,7 @@ function initScrollbar() { scrollbars: { theme: document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light', autoHide: 'scroll', + autoHideDelay: 800, }, overflow: { x: 'hidden', diff --git a/src/content/posts/hometown.md b/src/content/posts/hometown.md index 1365f8e..3a8c543 100644 --- a/src/content/posts/hometown.md +++ b/src/content/posts/hometown.md @@ -4,6 +4,8 @@ published: 1977-07-18 tags: ["鲁迅"] --- +![花](https://image.radishzz.cc/image/gallery/03.webp) + 我冒了严寒，回到相隔二千余里，别了二十余年的故乡去。 时候既然是深冬；渐近故乡时，天气又阴晦了，冷风吹进船舱中，呜呜的响，从蓬隙向外一望，苍黄的天底下，远近横着几个萧索的荒村，没有一些活气。我的心禁不住悲凉起来了。 diff --git a/src/content/posts/rashomon.md b/src/content/posts/rashomon.md index 2259a78..ae89284 100644 --- a/src/content/posts/rashomon.md +++ b/src/content/posts/rashomon.md @@ -4,6 +4,8 @@ published: 1984-09-17 tags: ["黑泽明"] --- +![花](https://image.radishzz.cc/image/gallery/03.webp) + 一天，天色已晚。 仆人纪宁正在罗生门下等待雨停。 除了他，宽大的门下空无一人。 只有一只蟋蟀栖息在一根大柱子上，柱子上有的地方已经脱漆。 罗生门位于铃作大寺街上，除了这个人之外，应该还有两三个人，包括避雨的一笠和搓着乌鸦帽的真江吉。 但是，除了这个人之外，一个人也没有。 diff --git a/src/components/Head.astro b/src/layouts/Head.astro similarity index 99% rename from src/components/Head.astro rename to src/layouts/Head.astro index 7024d69..66de7f0 100644 --- a/src/components/Head.astro +++ b/src/layouts/Head.astro @@ -15,6 +15,7 @@ const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', g const { google = '', bing = '', yandex = '', baidu = '' } = verification const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload --- + @@ -142,3 +143,4 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', /> ) } + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f7414b7..468bfc9 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,9 +1,11 @@ --- -import Head from '@/components/Head.astro' +import PhotoSwipe from '@/components/PhotoSwipe.astro' import Scrollbar from '@/components/Scrollbar.astro' import ThemeToggle from '@/components/ThemeToggle.astro' import themeConfig from '@/config' +import Head from '@/layouts/Head.astro' import '@/styles/global.css' +import '@/styles/photoswipe.css' interface Props { postTitle?: string @@ -22,9 +24,7 @@ const colorMode = themeConfig.color.mode class:list={[fontStyle, colorMode]} data-overlayscrollbars-initialize > - - - +
+ diff --git a/src/styles/global.css b/src/styles/global.css index 82f83ab..a5c4d0e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -7,7 +7,7 @@ html { --at-apply: 'scroll-smooth antialiased text-62.5%'; } body { - --at-apply: 'bg-background text-secondary text-1.6rem'; + --at-apply: 'bg-background c-secondary text-1.6rem'; } @supports not (view-transition-name: none) { body { @@ -17,30 +17,33 @@ body { * { scrollbar-width: none; -ms-overflow-style: none; -} -*::-webkit-scrollbar { - display: none; + &::-webkit-scrollbar { + display: none; + } } h1, h2, h3 { text-rendering: optimizeLegibility; } h1 { - --at-apply: 'text-[3.6rem]'; + --at-apply: 'text-3.6rem'; } h2 { - --at-apply: 'text-[3rem]'; + --at-apply: 'text-3rem'; } h3 { - --at-apply: 'text-[2.4rem]'; + --at-apply: 'text-2.4rem'; } h4 { - --at-apply: 'text-[2rem]'; + --at-apply: 'text-2rem'; } h5 { - --at-apply: 'text-[1.8rem]'; + --at-apply: 'text-1.8rem'; } h6 { - --at-apply: 'text-[1.6rem]'; + --at-apply: 'text-1.6rem'; +} +article img { + cursor: zoom-in; } /* Horizontal reveal animation on theme toggle */ @keyframes reveal { @@ -64,4 +67,4 @@ html:not(.dark) { transition: none; animation: none; z-index: -1; -} +} \ No newline at end of file diff --git a/src/styles/photoswipe.css b/src/styles/photoswipe.css new file mode 100644 index 0000000..0a2192d --- /dev/null +++ b/src/styles/photoswipe.css @@ -0,0 +1,17 @@ +.pswp__button { + --at-apply: 'flex items-center justify-center transition'; +} +.pswp__button--zoom, +.pswp__button--close { + --at-apply: 'mt-2 lg:mt-4 active:scale-90'; +} +.pswp__button--zoom svg:hover, +.pswp__button--close svg:hover { + fill: #BEBEBE; +} +.pswp__button--close { + --at-apply: 'mr-4 lg:mr-8'; +} +.pswp__button--zoom { + --at-apply: 'mr--6 lg:mr-0'; +} \ No newline at end of file