feat: style improvements (mainly animations)
This commit is contained in:
saicaca
parent
02865aa76e
commit
f438ea4252
|
|
@ -59,6 +59,7 @@
|
||||||
"@types/mdast": "^4.0.4",
|
"@types/mdast": "^4.0.4",
|
||||||
"@types/sanitize-html": "^2.11.0",
|
"@types/sanitize-html": "^2.11.0",
|
||||||
"remark-github-admonitions-to-directives": "^1.0.5",
|
"remark-github-admonitions-to-directives": "^1.0.5",
|
||||||
|
"sass": "^1.77.6",
|
||||||
"stylus": "^0.63.0"
|
"stylus": "^0.63.0"
|
||||||
},
|
},
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
|
|
|
||||||
|
|
@ -23,10 +23,10 @@ importers:
|
||||||
version: 3.1.6
|
version: 3.1.6
|
||||||
'@astrojs/svelte':
|
'@astrojs/svelte':
|
||||||
specifier: ^5.6.0
|
specifier: ^5.6.0
|
||||||
version: 5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
version: 5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
'@astrojs/tailwind':
|
'@astrojs/tailwind':
|
||||||
specifier: ^5.1.0
|
specifier: ^5.1.0
|
||||||
version: 5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)
|
version: 5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)
|
||||||
'@fontsource-variable/jetbrains-mono':
|
'@fontsource-variable/jetbrains-mono':
|
||||||
specifier: ^5.0.21
|
specifier: ^5.0.21
|
||||||
version: 5.0.21
|
version: 5.0.21
|
||||||
|
|
@ -38,10 +38,10 @@ importers:
|
||||||
version: 1.4.1(@types/babel__core@7.20.5)
|
version: 1.4.1(@types/babel__core@7.20.5)
|
||||||
astro:
|
astro:
|
||||||
specifier: ^4.11.0
|
specifier: ^4.11.0
|
||||||
version: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
version: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
||||||
astro-compress:
|
astro-compress:
|
||||||
specifier: ^2.2.28
|
specifier: ^2.2.28
|
||||||
version: 2.2.28(@types/node@20.14.7)(stylus@0.63.0)(typescript@5.5.2)
|
version: 2.2.28(@types/node@20.14.7)(sass@1.77.6)(stylus@0.63.0)(typescript@5.5.2)
|
||||||
astro-icon:
|
astro-icon:
|
||||||
specifier: 1.1.0
|
specifier: 1.1.0
|
||||||
version: 1.1.0
|
version: 1.1.0
|
||||||
|
|
@ -145,6 +145,9 @@ importers:
|
||||||
remark-github-admonitions-to-directives:
|
remark-github-admonitions-to-directives:
|
||||||
specifier: ^1.0.5
|
specifier: ^1.0.5
|
||||||
version: 1.0.5
|
version: 1.0.5
|
||||||
|
sass:
|
||||||
|
specifier: ^1.77.6
|
||||||
|
version: 1.77.6
|
||||||
stylus:
|
stylus:
|
||||||
specifier: ^0.63.0
|
specifier: ^0.63.0
|
||||||
version: 0.63.0
|
version: 0.63.0
|
||||||
|
|
@ -2650,6 +2653,9 @@ packages:
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
postcss: ^8.1.0
|
postcss: ^8.1.0
|
||||||
|
|
||||||
|
immutable@4.3.6:
|
||||||
|
resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
|
||||||
|
|
||||||
import-cwd@3.0.0:
|
import-cwd@3.0.0:
|
||||||
resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
|
resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
|
@ -4047,6 +4053,11 @@ packages:
|
||||||
sanitize-html@2.13.0:
|
sanitize-html@2.13.0:
|
||||||
resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==}
|
resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==}
|
||||||
|
|
||||||
|
sass@1.77.6:
|
||||||
|
resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==}
|
||||||
|
engines: {node: '>=14.0.0'}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
sax@1.3.0:
|
sax@1.3.0:
|
||||||
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
|
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
|
||||||
|
|
||||||
|
|
@ -4811,10 +4822,10 @@ snapshots:
|
||||||
stream-replace-string: 2.0.0
|
stream-replace-string: 2.0.0
|
||||||
zod: 3.23.8
|
zod: 3.23.8
|
||||||
|
|
||||||
'@astrojs/svelte@5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
|
'@astrojs/svelte@5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
'@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
||||||
svelte: 4.2.18
|
svelte: 4.2.18
|
||||||
svelte2tsx: 0.7.10(svelte@4.2.18)(typescript@5.5.2)
|
svelte2tsx: 0.7.10(svelte@4.2.18)(typescript@5.5.2)
|
||||||
typescript: 5.5.2
|
typescript: 5.5.2
|
||||||
|
|
@ -4822,9 +4833,9 @@ snapshots:
|
||||||
- supports-color
|
- supports-color
|
||||||
- vite
|
- vite
|
||||||
|
|
||||||
'@astrojs/tailwind@5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)':
|
'@astrojs/tailwind@5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)':
|
||||||
dependencies:
|
dependencies:
|
||||||
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
||||||
autoprefixer: 10.4.19(postcss@8.4.38)
|
autoprefixer: 10.4.19(postcss@8.4.38)
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
postcss-load-config: 4.0.2(postcss@8.4.38)
|
postcss-load-config: 4.0.2(postcss@8.4.38)
|
||||||
|
|
@ -6155,26 +6166,26 @@ snapshots:
|
||||||
magic-string: 0.25.9
|
magic-string: 0.25.9
|
||||||
string.prototype.matchall: 4.0.11
|
string.prototype.matchall: 4.0.11
|
||||||
|
|
||||||
'@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
|
'@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
'@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
debug: 4.3.5
|
debug: 4.3.5
|
||||||
svelte: 4.2.18
|
svelte: 4.2.18
|
||||||
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
|
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
|
'@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
'@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
debug: 4.3.5
|
debug: 4.3.5
|
||||||
deepmerge: 4.3.1
|
deepmerge: 4.3.1
|
||||||
kleur: 4.1.5
|
kleur: 4.1.5
|
||||||
magic-string: 0.30.10
|
magic-string: 0.30.10
|
||||||
svelte: 4.2.18
|
svelte: 4.2.18
|
||||||
svelte-hmr: 0.16.0(svelte@4.2.18)
|
svelte-hmr: 0.16.0(svelte@4.2.18)
|
||||||
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
|
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
|
||||||
vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
|
|
@ -6568,12 +6579,12 @@ snapshots:
|
||||||
is-array-buffer: 3.0.4
|
is-array-buffer: 3.0.4
|
||||||
is-shared-array-buffer: 1.0.3
|
is-shared-array-buffer: 1.0.3
|
||||||
|
|
||||||
astro-compress@2.2.28(@types/node@20.14.7)(stylus@0.63.0)(typescript@5.5.2):
|
astro-compress@2.2.28(@types/node@20.14.7)(sass@1.77.6)(stylus@0.63.0)(typescript@5.5.2):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@playform/pipe': 0.0.6
|
'@playform/pipe': 0.0.6
|
||||||
'@types/csso': 5.0.4
|
'@types/csso': 5.0.4
|
||||||
'@types/html-minifier-terser': 7.0.2
|
'@types/html-minifier-terser': 7.0.2
|
||||||
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
||||||
csso: 5.0.5
|
csso: 5.0.5
|
||||||
html-minifier-terser: 7.2.0
|
html-minifier-terser: 7.2.0
|
||||||
kleur: 4.1.5
|
kleur: 4.1.5
|
||||||
|
|
@ -6598,7 +6609,7 @@ snapshots:
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2):
|
astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 2.8.0
|
'@astrojs/compiler': 2.8.0
|
||||||
'@astrojs/internal-helpers': 0.4.0
|
'@astrojs/internal-helpers': 0.4.0
|
||||||
|
|
@ -6657,8 +6668,8 @@ snapshots:
|
||||||
tsconfck: 3.1.0(typescript@5.5.2)
|
tsconfck: 3.1.0(typescript@5.5.2)
|
||||||
unist-util-visit: 5.0.0
|
unist-util-visit: 5.0.0
|
||||||
vfile: 6.0.1
|
vfile: 6.0.1
|
||||||
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
|
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
|
||||||
vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
|
vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||||
which-pm: 2.2.0
|
which-pm: 2.2.0
|
||||||
yargs-parser: 21.1.1
|
yargs-parser: 21.1.1
|
||||||
zod: 3.23.8
|
zod: 3.23.8
|
||||||
|
|
@ -7763,6 +7774,8 @@ snapshots:
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
|
immutable@4.3.6: {}
|
||||||
|
|
||||||
import-cwd@3.0.0:
|
import-cwd@3.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
import-from: 3.0.0
|
import-from: 3.0.0
|
||||||
|
|
@ -9451,6 +9464,12 @@ snapshots:
|
||||||
parse-srcset: 1.0.2
|
parse-srcset: 1.0.2
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
||||||
|
sass@1.77.6:
|
||||||
|
dependencies:
|
||||||
|
chokidar: 3.6.0
|
||||||
|
immutable: 4.3.6
|
||||||
|
source-map-js: 1.2.0
|
||||||
|
|
||||||
sax@1.3.0: {}
|
sax@1.3.0: {}
|
||||||
|
|
||||||
sax@1.4.1: {}
|
sax@1.4.1: {}
|
||||||
|
|
@ -10043,7 +10062,7 @@ snapshots:
|
||||||
unist-util-stringify-position: 4.0.0
|
unist-util-stringify-position: 4.0.0
|
||||||
vfile-message: 4.0.2
|
vfile-message: 4.0.2
|
||||||
|
|
||||||
vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1):
|
vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1):
|
||||||
dependencies:
|
dependencies:
|
||||||
esbuild: 0.21.5
|
esbuild: 0.21.5
|
||||||
postcss: 8.4.38
|
postcss: 8.4.38
|
||||||
|
|
@ -10052,12 +10071,13 @@ snapshots:
|
||||||
'@types/node': 20.14.7
|
'@types/node': 20.14.7
|
||||||
fsevents: 2.3.3
|
fsevents: 2.3.3
|
||||||
lightningcss: 1.25.1
|
lightningcss: 1.25.1
|
||||||
|
sass: 1.77.6
|
||||||
stylus: 0.63.0
|
stylus: 0.63.0
|
||||||
terser: 5.31.1
|
terser: 5.31.1
|
||||||
|
|
||||||
vitefu@0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)):
|
vitefu@0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)):
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
|
vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
|
||||||
|
|
||||||
volar-service-css@0.0.45(@volar/language-service@2.2.5):
|
volar-service-css@0.0.45(@volar/language-service@2.2.5):
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
|
||||||
|
|
@ -177,7 +177,7 @@ color_set({
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style is:global>
|
<style is:global lang="scss">
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
@ -192,11 +192,15 @@ color_set({
|
||||||
.card-shadow {
|
.card-shadow {
|
||||||
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
|
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
|
||||||
}
|
}
|
||||||
|
.expand-animation {
|
||||||
|
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
|
||||||
|
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
|
||||||
|
}
|
||||||
.link {
|
.link {
|
||||||
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
|
@apply transition rounded-md p-1 -m-1 expand-animation;
|
||||||
}
|
}
|
||||||
.link-lg {
|
.link-lg {
|
||||||
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
|
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
|
||||||
}
|
}
|
||||||
.float-panel {
|
.float-panel {
|
||||||
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
||||||
|
|
@ -217,14 +221,12 @@ color_set({
|
||||||
}
|
}
|
||||||
.btn-plain {
|
.btn-plain {
|
||||||
@apply transition relative flex items-center justify-center bg-none
|
@apply transition relative flex items-center justify-center bg-none
|
||||||
overflow-hidden text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
|
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
|
||||||
&:not(.scale-animation) {
|
&:not(.scale-animation) {
|
||||||
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
|
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
|
||||||
}
|
}
|
||||||
&.scale-animation {
|
&.scale-animation {
|
||||||
@apply before:ease-out hover:bg-none relative active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
|
@apply expand-animation;
|
||||||
before:absolute before:rounded-[inherit] before:inset-0 before:transition before:scale-[0.85] hover:before:scale-100 before:-z-10;
|
|
||||||
|
|
||||||
&.current-theme-btn {
|
&.current-theme-btn {
|
||||||
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
|
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,20 +34,22 @@ const { remarkPluginFrontmatter } = await entry.render();
|
||||||
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
|
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
|
||||||
<div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
|
<div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
|
||||||
<a href={url}
|
<a href={url}
|
||||||
class="transition w-full block font-bold mb-3 text-3xl text-90
|
class="transition group w-full block font-bold mb-3 text-3xl text-90
|
||||||
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
|
||||||
active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
|
active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
|
||||||
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
|
||||||
before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
|
before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
|
||||||
">
|
">
|
||||||
{title}<Icon class="inline text-[var(--primary)] md:hidden -translate-y-[0.15rem]" name="material-symbols:chevron-right-rounded" size={28} ></Icon>
|
{title}
|
||||||
|
<Icon class="inline text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
|
||||||
|
<Icon class="text-[var(--primary)] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- metadata -->
|
<!-- metadata -->
|
||||||
<PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
|
<PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class="mb-4"></PostMetadata>
|
||||||
|
|
||||||
<!-- description -->
|
<!-- description -->
|
||||||
<div class="transition text-75 mb-3.5">
|
<div class="transition text-75 mb-3.5 pr-4">
|
||||||
{ description }
|
{ description }
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -68,7 +70,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
||||||
<div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
<div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
|
||||||
<div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
|
<div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
|
||||||
<Icon name="material-symbols:chevron-right-rounded"
|
<Icon name="material-symbols:chevron-right-rounded"
|
||||||
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
|
class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl">
|
||||||
</Icon>
|
</Icon>
|
||||||
</div>
|
</div>
|
||||||
<ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
|
<ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
|
||||||
|
|
|
||||||
|
|
@ -13,25 +13,27 @@ const config = profileConfig;
|
||||||
<div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
|
<div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
|
||||||
w-full h-full z-50 flex items-center justify-center">
|
w-full h-full z-50 flex items-center justify-center">
|
||||||
<Icon name="fa6-regular:address-card"
|
<Icon name="fa6-regular:address-card"
|
||||||
class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
|
class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
|
||||||
</Icon>
|
</Icon>
|
||||||
</div>
|
</div>
|
||||||
<ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
|
<ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
|
||||||
</a>
|
</a>
|
||||||
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
|
<div class="px-2">
|
||||||
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
|
||||||
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
||||||
<div class="flex gap-2 justify-center mb-1">
|
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
||||||
{config.links.length > 1 && config.links.map(item =>
|
<div class="flex gap-2 justify-center mb-1">
|
||||||
<a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
|
{config.links.length > 1 && config.links.map(item =>
|
||||||
<Icon name={item.icon} size="1.5rem"></Icon>
|
<a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
|
||||||
</a>
|
<Icon name={item.icon} size="1.5rem"></Icon>
|
||||||
)}
|
</a>
|
||||||
{config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
|
)}
|
||||||
class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
|
{config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
|
||||||
<Icon name={config.links[0].icon} size="1.5rem"></Icon>
|
class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
|
||||||
{config.links[0].name}
|
<Icon name={config.links[0].icon} size="1.5rem"></Icon>
|
||||||
</a>}
|
{config.links[0].name}
|
||||||
|
</a>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue