Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: profile-card style tweak

This commit is contained in:
saicaca 2024-06-08 22:52:05 +08:00
parent 5dd1287255
commit ce36ba37c5
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/widget/Profile.astro
View File

@ -6,9 +6,9 @@ import {url} from "../../utils/url-utils";
const config = profileConfig; const config = profileConfig;
--- ---
<div class="card-base"> <div class="card-base p-3">
<a aria-label="Go to About Page" href={url('/about/')} <a aria-label="Go to About Page" href={url('/about/')}
class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3 class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95"> max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
<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">
@ -21,12 +21,17 @@ const config = profileConfig;
<div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div> <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="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="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
<div class="flex gap-2 mx-2 justify-center mb-4"> <div class="flex gap-2 justify-center mb-1">
{config.links.map(item => {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"> <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> <Icon name={item.icon} size="1.5rem"></Icon>
</a> </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> </div>