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

Mobile breakpoint added

Browse Source
This commit is contained in:
adilallo
2025-07-27 17:23:47 -06:00
parent 47b0b0c48f
commit 4cf5034736
2 changed files with 47 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Footer.js
+45 -52
View File
@@ -6,73 +6,66 @@ export default function Footer() {
<footer className="bg-[var(--color-surface-default-primary)] w-full"> <footer className="bg-[var(--color-surface-default-primary)] w-full">
<div <div
className="flex flex-col items-start mx-auto max-w-[1920px] className="flex flex-col items-start mx-auto max-w-[1920px]
px-[var(--spacing-measures-spacing-032)] px-[var(--spacing-measures-spacing-016)]
py-[var(--spacing-measures-spacing-024)] py-[var(--spacing-measures-spacing-040)]
gap-[var(--spacing-measures-spacing-024)] 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)]
lg:px-[var(--spacing-measures-spacing-120,120px)] lg:px-[var(--spacing-measures-spacing-120,120px)]
lg:py-[var(--spacing-measures-spacing-096,96px)] lg:py-[var(--spacing-measures-spacing-096,96px)]
lg:gap-[var(--spacing-measures-spacing-060,60px)]" lg:gap-[var(--spacing-measures-spacing-060,60px)]"
> >
{/* Logo*/} {/* Logo*/}
<div className="block lg:hidden"> <div className="block md:hidden">
<Logo />
</div>
<div className="hidden md:block lg:hidden">
<Logo size="footer" /> <Logo size="footer" />
</div> </div>
<div className="hidden lg:block"> <div className="hidden lg:block">
<Logo size="footerLg" /> <Logo size="footerLg" />
</div> </div>
{/* Content section - horizontal layout */} {/* Content section */}
<div className="flex justify-between items-start w-full"> <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">
{/* Left side - Contact info and social media */} {/* Social media links */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)]"> <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)] order-2 md:order-1">
{/* Contact info */} <div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]"> <img
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal"> src="/assets/Bluesky_Logo.svg"
Media Economies Design Lab alt="Bluesky"
</div> width={24}
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal"> height={22}
medlab@colorado.edu className="flex-shrink-0"
/>
<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> </div>
</div> </div>
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
{/* Social media links */} <img
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]"> src="/assets/GitLab_Icon.png"
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]"> alt="GitLab"
<img width={22}
src="/assets/Bluesky_Logo.svg" height={22}
alt="Bluesky" className="flex-shrink-0 grayscale"
width={24} />
height={22} <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">
className="flex-shrink-0" medlabboulder
/>
<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>
</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>
</div> </div>
</div> </div>
</div> </div>
{/* Right side navigation */} {/* Navigation */}
<div className="flex flex-col justify-start items-end gap-[var(--spacing-measures-spacing-032,32px)]"> <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)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal"> <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">
Use cases Use cases
</div> </div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal"> <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">
Learn Learn
</div> </div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal"> <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">
About About
</div> </div>
</div> </div>
@@ -81,18 +74,18 @@ export default function Footer() {
<Separator /> <Separator />
{/* Bottom section */} {/* Bottom section */}
<div className="flex justify-between items-start self-stretch"> <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-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal"> <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">
© All right reserved © All right reserved
</div> </div>
<div className="flex items-start gap-[var(--spacing-measures-spacing-040,40px)]"> <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-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal"> <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">
Privacy Policy Privacy Policy
</div> </div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal"> <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">
Terms of Service Terms of Service
</div> </div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal"> <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">
Cookies Settings Cookies Settings
</div> </div>
</div> </div>
app/components/Logo.js
+2 -2
View File
@@ -2,8 +2,8 @@ export default function Logo({ size = "default" }) {
// Size configurations // Size configurations
const sizes = { const sizes = {
default: { default: {
containerHeight: "h-10", containerHeight: "h-[41px]",
gap: "gap-2", gap: "gap-[8.28px]",
textSize: "text-[21.97px]", textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]", lineHeight: "leading-[27.05px]",
iconSize: "w-[27.05px] h-[27.05px]", iconSize: "w-[27.05px] h-[27.05px]",