alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Activity

feat: organize footer to consistency

Browse Source
This commit is contained in:
Alex Lebens
2026-02-17 17:44:40 -06:00
parent 1a8473b964
commit c6f3179efb
3 changed files with 55 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/Footer.astro
View File

@@ -14,81 +14,67 @@ const currentYear = new Date().getFullYear();
--- ---
<footer <footer
class="w-full overflow-hidden bg-stone-300/40 dark:bg-stone-800/20" class="bg-background-accent w-full overflow-hidden"
transition:animate="none" transition:animate="none"
> >
<div class="relative px-4 pt-16 pb-12 sm:px-6"> <div class="relative px-4 sm:px-6 pt-16 pb-12">
<div class="mx-auto max-w-340"> <div class="max-w-340 mx-auto">
<div class="grid grid-cols-1 gap-10 md:grid-cols-12"> <div class="grid grid-cols-1 md:grid-cols-12 gap-10">
<!-- Brand section --> <!-- Brand section -->
<div class="col-span-1 md:col-span-3"> <div class="col-span-1 md:col-span-3">
<a href="/" class="group inline-block"> <a href="/" class="group inline-block">
<div class="flex items-center"> <div class="flex items-center">
<div class="mx-auto aspect-square overflow-hidden rounded-lg"> <div class="mx-auto aspect-square overflow-hidden">
<BrandLogo class="max-h-10 max-w-10 rounded-full" /> <BrandLogo class="rounded-lg max-h-10 max-w-10"/>
</div> </div>
<span class="text-header text-lg lg:text-2xl font-semibold leading-tight tracking-tight text-balance ml-3">
<span class="ml-3 text-xl font-bold text-neutral-800 dark:text-neutral-200">
{global.name} {global.name}
</span> </span>
</div> </div>
</a> </a>
<p class="text-primary text-sm lg:text-base text-pretty leading-relaxed mt-4">
<p class="mt-4 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
{global.about} {global.about}
</p> </p>
</div> </div>
<!-- Left links --> <!-- Left links -->
<div class="col-span-1 md:col-span-2"> <div class="col-span-1 md:col-span-2">
<h3 <h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100" Site
>
Blog
</h3> </h3>
<ul class="mt-4 space-y-3"> <ul class="mt-4 space-y-3">
{ {NavigationLinks.map((link) => (
NavigationLinks.map((link) => ( <li>
<li> <a
<a href={link.url}
href={link.url} class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200" >
> {link.name}
<span class="relative inline-block overflow-hidden"> </a>
<span class="relative z-10">{link.name}</span> </li>
</span> ))}
</a>
</li>
))
}
</ul> </ul>
</div> </div>
<!-- Right links --> <!-- Right links -->
<div class="col-span-1 md:col-span-3"> <div class="col-span-1 md:col-span-3">
<h3 <h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
>
Other Other
</h3> </h3>
<ul class="mt-4 space-y-3"> <ul class="mt-4 space-y-3">
{ {FooterLinks.map((link) => (
FooterLinks.map((link) => ( <li>
<li> <a
<a href={link.url}
href={link.url} class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200" >
> {link.name}
<span class="relative inline-block overflow-hidden"> </a>
<span class="relative z-10">{link.name}</span> </li>
</span> ))}
</a>
</li>
))
}
</ul> </ul>
</div> </div>
<!-- Right image --> <!-- Right image -->
<div class="col-span-3 mt-10 flex justify-center md:mt-0"> <div class="flex justify-center col-span-4 mt-10 md:mt-0">
<div class="-mt-10 hidden max-h-[460px] max-w-[220px] scale-80 md:block"> <div class="md:block max-h-115 max-w-55 -mt-10 scale-80 hidden">
<Image <Image
src={footerImg} src={footerImg}
alt={global.footer_image_alt} alt={global.footer_image_alt}
@@ -104,37 +90,36 @@ const currentYear = new Date().getFullYear();
</div> </div>
</div> </div>
<!-- Bottom section --> <!-- Bottom section -->
<div class="mt-12 border-t border-neutral-400/30 pt-8 dark:border-neutral-600/50"> <div class="border-t border-neutral-400/30 dark:border-neutral-600/50 pt-8 mt-12">
<div class="flex flex-col items-center justify-between gap-4 md:flex-row"> <div class="flex flex-col md:flex-row items-center justify-between gap-4">
<p class="text-sm text-neutral-600 dark:text-neutral-400"> <p class="text-secondary text-sm">
&copy; {currentYear} All rights reserved. &copy; {currentYear} All rights reserved.
</p> </p>
<div class="flex items-center"> <div class="flex items-center">
<p class="text-xs text-neutral-500 dark:text-neutral-400"> <span class="text-secondary text-sm">
Weather provided by Weather provided by
</p> </span>
<a <a
href="https://open-meteo.com/" href="https://open-meteo.com/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100" class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
> >
<span class="relative ml-1"> <span class="relative underline ml-1">
Open-Meteo. Open-Meteo.
</span> </span>
</a> </a>
<div class="ml-4"/>
<div class="ml-4"></div> <span class="text-secondary text-sm">
Built with
<span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span> </span>
<a <a
href="https://astro.build" href="https://astro.build"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100" class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
> >
<span class="relative ml-1"> <span class="relative underline ml-1">
Astro. Astro.
</span> </span>
</a> </a>

4
src/styles/global.css
View File

@@ -33,6 +33,10 @@
--color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200)); --color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
--color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400)); --color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400));
--color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400)); --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
--color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--color-background: light-dark(var(--color-steel), var(--color-bermuda));
--color-background-accent: light-dark(color-mix(in srgb, var(--color-stone-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
} }
@layer base { @layer base {

5
src/styles/utilities.css
View File

@@ -113,6 +113,11 @@
group-hover:text-main group-hover:text-main
} }
@utility card-hover-text-neutral {
@apply transition-all duration-300
group-hover:text-primary-hover
}
@utility card-hover-text-gitea { @utility card-hover-text-gitea {
@apply transition-all duration-300 @apply transition-all duration-300
group-hover:text-gitea-primary group-hover:text-gitea-primary