feat: style improvements
This commit is contained in:
saicaca
parent
c642691dc8
commit
35f9260b58
|
|
@ -28,7 +28,8 @@ export default defineConfig({
|
|||
include: {
|
||||
'material-symbols': ['*'],
|
||||
'fa6-brands': ['*'],
|
||||
'fa6-regular': ['*']
|
||||
'fa6-regular': ['*'],
|
||||
'fa6-solid': ['*']
|
||||
}
|
||||
})
|
||||
],
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
"@astrojs/ts-plugin": "^1.1.3",
|
||||
"@iconify-json/fa6-brands": "^1.1.13",
|
||||
"@iconify-json/fa6-regular": "^1.1.13",
|
||||
"@iconify-json/fa6-solid": "^1.1.15",
|
||||
"@iconify-json/material-symbols": "^1.1.59",
|
||||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
|
|
|
|||
|
|
@ -61,6 +61,9 @@ devDependencies:
|
|||
'@iconify-json/fa6-regular':
|
||||
specifier: ^1.1.13
|
||||
version: 1.1.13
|
||||
'@iconify-json/fa6-solid':
|
||||
specifier: ^1.1.15
|
||||
version: 1.1.15
|
||||
'@iconify-json/material-symbols':
|
||||
specifier: ^1.1.59
|
||||
version: 1.1.59
|
||||
|
|
@ -990,6 +993,12 @@ packages:
|
|||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@iconify-json/fa6-solid@1.1.15:
|
||||
resolution: {integrity: sha512-RMiUSSdnxD4BLDW2QBskqr/+i1/6xhZK+E3sq24URnB3fSQUCWvyhNN3ZnU3RMjWaMVNxPy9pEXr1i/8s63GRQ==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@iconify-json/material-symbols@1.1.59:
|
||||
resolution: {integrity: sha512-azzJVyS2AKQ4cxIUUmeMHaTVlU9aWM6M98NEqf8luZ1RJpVWuDdSjExY+x58Y39wPFTf+6hgvS4pRwCJRdpohw==}
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -51,7 +51,14 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
|
|||
</Button></a>
|
||||
<div>
|
||||
{links.map((l) => {
|
||||
return <a aria-label={l.name} href={l.url} target={l.external ? "_blank" : null}><Button light class="font-bold px-5 rounded-lg active:scale-95">{l.name}</Button></a>;
|
||||
return <a aria-label={l.name} href={l.url} target={l.external ? "_blank" : null}>
|
||||
<Button light class="font-bold px-5 rounded-lg active:scale-95">
|
||||
<div class="flex items-center">
|
||||
{l.name}
|
||||
{l.external && <Icon size="14" name="fa6-solid:arrow-up-right-from-square" class="transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
|
||||
</div>
|
||||
</Button>
|
||||
</a>;
|
||||
})}
|
||||
</div>
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const className = Astro.props.class;
|
|||
const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
|
||||
|
||||
// TODO temporary workaround for images dynamic import
|
||||
// https://github.com/withastro/astro/issues/3373
|
||||
let img;
|
||||
if (isLocal) {
|
||||
const files = import.meta.glob<ImageMetadata>("../../**", { import: 'default' });
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ 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">
|
||||
<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="material-symbols:person-outline-rounded"
|
||||
class="transition opacity-0 group-hover:opacity-100 text-white text-6xl">
|
||||
<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>
|
||||
</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-3 transition"></div>
|
||||
<div class="text-center text-neutral-400 mb-2 transition">{config.bio}</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 mx-2 justify-center mb-4">
|
||||
{config.links.map(item =>
|
||||
<a aria-label={item.name} href={item.url} target="_blank">
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
<a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
|
||||
{entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
|
||||
<Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
|
||||
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
||||
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
||||
{entry.data.nextTitle}
|
||||
</div>
|
||||
</Button>}
|
||||
|
|
@ -98,7 +98,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
|
||||
<a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden active:scale-95">
|
||||
{entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
|
||||
<div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
||||
<div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
|
||||
{entry.data.prevTitle}
|
||||
</div>
|
||||
<Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue