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/sanitize-html": "^2.11.0",
|
||||
"remark-github-admonitions-to-directives": "^1.0.5",
|
||||
"sass": "^1.77.6",
|
||||
"stylus": "^0.63.0"
|
||||
},
|
||||
"pnpm": {
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@ importers:
|
|||
version: 3.1.6
|
||||
'@astrojs/svelte':
|
||||
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':
|
||||
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':
|
||||
specifier: ^5.0.21
|
||||
version: 5.0.21
|
||||
|
|
@ -38,10 +38,10 @@ importers:
|
|||
version: 1.4.1(@types/babel__core@7.20.5)
|
||||
astro:
|
||||
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:
|
||||
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:
|
||||
specifier: 1.1.0
|
||||
version: 1.1.0
|
||||
|
|
@ -145,6 +145,9 @@ importers:
|
|||
remark-github-admonitions-to-directives:
|
||||
specifier: ^1.0.5
|
||||
version: 1.0.5
|
||||
sass:
|
||||
specifier: ^1.77.6
|
||||
version: 1.77.6
|
||||
stylus:
|
||||
specifier: ^0.63.0
|
||||
version: 0.63.0
|
||||
|
|
@ -2650,6 +2653,9 @@ packages:
|
|||
peerDependencies:
|
||||
postcss: ^8.1.0
|
||||
|
||||
immutable@4.3.6:
|
||||
resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
|
||||
|
||||
import-cwd@3.0.0:
|
||||
resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
|
||||
engines: {node: '>=8'}
|
||||
|
|
@ -4047,6 +4053,11 @@ packages:
|
|||
sanitize-html@2.13.0:
|
||||
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:
|
||||
resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
|
||||
|
||||
|
|
@ -4811,10 +4822,10 @@ snapshots:
|
|||
stream-replace-string: 2.0.0
|
||||
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:
|
||||
'@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))
|
||||
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)
|
||||
'@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)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
|
||||
svelte: 4.2.18
|
||||
svelte2tsx: 0.7.10(svelte@4.2.18)(typescript@5.5.2)
|
||||
typescript: 5.5.2
|
||||
|
|
@ -4822,9 +4833,9 @@ snapshots:
|
|||
- supports-color
|
||||
- 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:
|
||||
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)
|
||||
postcss: 8.4.38
|
||||
postcss-load-config: 4.0.2(postcss@8.4.38)
|
||||
|
|
@ -6155,26 +6166,26 @@ snapshots:
|
|||
magic-string: 0.25.9
|
||||
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:
|
||||
'@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
|
||||
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:
|
||||
- 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:
|
||||
'@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
|
||||
deepmerge: 4.3.1
|
||||
kleur: 4.1.5
|
||||
magic-string: 0.30.10
|
||||
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)
|
||||
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))
|
||||
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)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
|
|
@ -6568,12 +6579,12 @@ snapshots:
|
|||
is-array-buffer: 3.0.4
|
||||
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:
|
||||
'@playform/pipe': 0.0.6
|
||||
'@types/csso': 5.0.4
|
||||
'@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
|
||||
html-minifier-terser: 7.2.0
|
||||
kleur: 4.1.5
|
||||
|
|
@ -6598,7 +6609,7 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- 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:
|
||||
'@astrojs/compiler': 2.8.0
|
||||
'@astrojs/internal-helpers': 0.4.0
|
||||
|
|
@ -6657,8 +6668,8 @@ snapshots:
|
|||
tsconfck: 3.1.0(typescript@5.5.2)
|
||||
unist-util-visit: 5.0.0
|
||||
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)
|
||||
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))
|
||||
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)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
|
||||
which-pm: 2.2.0
|
||||
yargs-parser: 21.1.1
|
||||
zod: 3.23.8
|
||||
|
|
@ -7763,6 +7774,8 @@ snapshots:
|
|||
dependencies:
|
||||
postcss: 8.4.38
|
||||
|
||||
immutable@4.3.6: {}
|
||||
|
||||
import-cwd@3.0.0:
|
||||
dependencies:
|
||||
import-from: 3.0.0
|
||||
|
|
@ -9451,6 +9464,12 @@ snapshots:
|
|||
parse-srcset: 1.0.2
|
||||
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.4.1: {}
|
||||
|
|
@ -10043,7 +10062,7 @@ snapshots:
|
|||
unist-util-stringify-position: 4.0.0
|
||||
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:
|
||||
esbuild: 0.21.5
|
||||
postcss: 8.4.38
|
||||
|
|
@ -10052,12 +10071,13 @@ snapshots:
|
|||
'@types/node': 20.14.7
|
||||
fsevents: 2.3.3
|
||||
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)):
|
||||
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):
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ color_set({
|
|||
|
||||
|
||||
</style>
|
||||
<style is:global>
|
||||
<style is:global lang="scss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -192,11 +192,15 @@ color_set({
|
|||
.card-shadow {
|
||||
@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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@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 {
|
||||
@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) {
|
||||
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
|
||||
}
|
||||
&.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
|
||||
before:absolute before:rounded-[inherit] before:inset-0 before:transition before:scale-[0.85] hover:before:scale-100 before:-z-10;
|
||||
|
||||
@apply expand-animation;
|
||||
&.current-theme-btn {
|
||||
@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={["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}
|
||||
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)]
|
||||
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: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>
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="transition text-75 mb-3.5">
|
||||
<div class="transition text-75 mb-3.5 pr-4">
|
||||
{ description }
|
||||
</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-20 w-full h-full flex items-center justify-center ">
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
w-full h-full z-50 flex items-center justify-center">
|
||||
<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>
|
||||
</div>
|
||||
<ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
|
||||
</a>
|
||||
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
|
||||
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
||||
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
||||
<div class="flex gap-2 justify-center mb-1">
|
||||
{config.links.length > 1 && config.links.map(item =>
|
||||
<a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
|
||||
<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">
|
||||
<Icon name={config.links[0].icon} size="1.5rem"></Icon>
|
||||
{config.links[0].name}
|
||||
</a>}
|
||||
<div class="px-2">
|
||||
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
|
||||
<div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
|
||||
<div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
|
||||
<div class="flex gap-2 justify-center mb-1">
|
||||
{config.links.length > 1 && config.links.map(item =>
|
||||
<a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
|
||||
<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">
|
||||
<Icon name={config.links[0].icon} size="1.5rem"></Icon>
|
||||
{config.links[0].name}
|
||||
</a>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue