fix: style improvements

This commit is contained in:
saicaca
2023-11-08 10:36:59 +08:00
parent b171ad463e
commit 3798fd6b64
7 changed files with 17 additions and 12 deletions

View File

@@ -6,9 +6,7 @@ import {siteConfig} from "../../config";
const enableBanner = siteConfig.banner.enable;
---
<div id="display-setting" class:list={["card-base closed absolute transition-all w-[320px] fixed right-4 border-[var(--primary)] px-4 py-4",
{"border-[3px]": !enableBanner}
]}>
<div id="display-setting" class:list={["float-panel closed absolute transition-all w-[320px] fixed right-4 px-4 py-4"]}>
<div class="flex flex-row gap-2 mb-3 items-center justify-between">
<div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]

View File

@@ -12,11 +12,9 @@ const links = Astro.props.links;
const enableBanner = siteConfig.banner.enable;
---
<div id="nav-menu-panel" class:list={["card-base closed absolute transition-all fixed right-4 border-[var(--primary)] px-2 py-2",
{"border-[3px]": !enableBanner}
]}>
<div id="nav-menu-panel" class:list={["float-panel closed absolute transition-all fixed right-4 px-2 py-2"]}>
{links.map((link) => (
<a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-md gap-8
<a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
"
target={link.external ? "_blank" : null}

View File

@@ -12,13 +12,13 @@ const config = profileConfig;
---
<div class="card-base">
<a aria-label="Go to About Page" href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
<a aria-label="Go to About Page" href="/about" class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3 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 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">
</Icon>
</div>
<ImageBox src={config.avatar} alt="Profile Image of the Author" class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
<ImageBox src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageBox>
</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>