CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added accessibility and interaction

Browse Source
This commit is contained in:
adilallo
2025-07-27 17:59:49 -06:00
parent 4cf5034736
commit e0815084c2
1 changed files with 87 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Footer.js
+87 -45
View File
@@ -9,18 +9,18 @@ export default function Footer() {
px-[var(--spacing-measures-spacing-016)]
py-[var(--spacing-measures-spacing-040)]
gap-[var(--spacing-measures-spacing-040)]
md:px-[var(--spacing-measures-spacing-032)]
md:py-[var(--spacing-measures-spacing-024)]
md:gap-[var(--spacing-measures-spacing-024)]
sm:px-[var(--spacing-measures-spacing-032)]
sm:py-[var(--spacing-measures-spacing-024)]
sm:gap-[var(--spacing-measures-spacing-024)]
lg:px-[var(--spacing-measures-spacing-120,120px)]
lg:py-[var(--spacing-measures-spacing-096,96px)]
lg:gap-[var(--spacing-measures-spacing-060,60px)]"
>
{/* Logo*/}
<div className="block md:hidden">
<div className="block sm:hidden">
<Logo />
</div>
<div className="hidden md:block lg:hidden">
<div className="hidden sm:block lg:hidden">
<Logo size="footer" />
</div>
<div className="hidden lg:block">
@@ -28,66 +28,108 @@ export default function Footer() {
</div>
{/* Content section */}
<div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] md:flex-row md:justify-between md:gap-0">
{/* Social media links */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)] order-2 md:order-1">
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<img
src="/assets/Bluesky_Logo.svg"
alt="Bluesky"
width={24}
height={22}
className="flex-shrink-0"
/>
<div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">
{/* Branding Section */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
{/* Contact info */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
medlabboulder
Media Economies Design Lab
</div>
<a
href="mailto:medlab@colorado.edu"
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
medlab@colorado.edu
</a>
</div>
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<img
src="/assets/GitLab_Icon.png"
alt="GitLab"
width={22}
height={22}
className="flex-shrink-0 grayscale"
/>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
medlabboulder
</div>
{/* Social media links */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<a
href="#"
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
aria-label="Follow us on Bluesky"
>
<img
src="/assets/Bluesky_Logo.svg"
alt="Bluesky"
width={24}
height={22}
className="flex-shrink-0 group-hover:scale-110 transition-transform"
/>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
medlabboulder
</div>
</a>
<a
href="#"
className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
aria-label="Follow us on GitLab"
>
<img
src="/assets/GitLab_Icon.png"
alt="GitLab"
width={22}
height={22}
className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
/>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
medlabboulder
</div>
</a>
</div>
</div>
{/* Navigation */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 md:order-2 md:items-end">
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
{/* Navigation Section */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
<a
href="#"
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
Use cases
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
</a>
<a
href="#"
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
Learn
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
</a>
<a
href="#"
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
About
</div>
</a>
</div>
</div>
<Separator />
{/* Bottom section */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] md:flex-row md:justify-between md:items-center w-full">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium md:text-xs md:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
© All right reserved
</div>
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] md:flex-row md:gap-[var(--spacing-measures-spacing-040,40px)]">
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
<a
href="#"
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
Privacy Policy
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
</a>
<a
href="#"
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
Terms of Service
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
</a>
<a
href="#"
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
>
Cookies Settings
</div>
</a>
</div>
</div>
</div>