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

Tablet breakpoint added

Browse Source
This commit is contained in:
adilallo
2025-07-26 23:46:46 -06:00
parent 0539989be6
commit 47b0b0c48f
4 changed files with 504 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Footer.js
+34 -55
View File
@@ -1,18 +1,24 @@
import Logo from "./Logo";
import Separator from "./Separator";
export default function Footer() {
return (
<footer className="bg-[var(--color-surface-default-primary)] w-full">
<div className="flex flex-col items-start mx-auto max-w-[1920px] px-[var(--spacing-measures-spacing-120,120px)] py-[var(--spacing-measures-spacing-096,96px)] gap-[var(--spacing-measures-spacing-060,60px)]">
{/* Logo at the top - scaled larger for footer */}
<div
className="mb-[var(--spacing-measures-spacing-060,60px)]"
style={{
transform: "scale(2.05)",
transformOrigin: "left top",
}}
>
<Logo />
<div
className="flex flex-col items-start mx-auto max-w-[1920px]
px-[var(--spacing-measures-spacing-032)]
py-[var(--spacing-measures-spacing-024)]
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 lg:hidden">
<Logo size="footer" />
</div>
<div className="hidden lg:block">
<Logo size="footerLg" />
</div>
{/* Content section - horizontal layout */}
@@ -21,10 +27,10 @@ export default function Footer() {
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)]">
{/* Contact info */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
<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">
Media Economies Design Lab
</div>
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
<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">
medlab@colorado.edu
</div>
</div>
@@ -32,31 +38,14 @@ export default function Footer() {
{/* Social media links */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<svg
<img
src="/assets/Bluesky_Logo.svg"
alt="Bluesky"
width={24}
height={22}
viewBox="0 0 24 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_18411_59624)">
<path
d="M5.42884 2.24436C8.08868 4.22236 10.9496 8.23292 12 10.3852C13.0505 8.23308 15.9113 4.22232 18.5712 2.24436C20.4904 0.817109 23.6 -0.287214 23.6 3.2268C23.6 3.9286 23.1938 9.12225 22.9556 9.96542C22.1275 12.8969 19.1098 13.6445 16.4256 13.192C21.1176 13.983 22.3112 16.6032 19.7335 19.2234C14.8379 24.1996 12.6971 17.9748 12.1483 16.3798C12.0477 16.0874 12.0007 15.9506 12 16.0669C11.9993 15.9506 11.9522 16.0874 11.8517 16.3798C11.3031 17.9748 9.16234 24.1997 4.26646 19.2234C1.6887 16.6032 2.88226 13.9829 7.57434 13.192C4.89002 13.6445 1.87234 12.8969 1.04434 9.96542C0.806094 9.12217 0.399902 3.92852 0.399902 3.2268C0.399902 -0.287214 3.50958 0.817109 5.4287 2.24436H5.42884Z"
fill="#949494"
/>
</g>
<defs>
<clipPath id="clip0_18411_59624">
<rect
width={24}
height={21}
fill="white"
transform="translate(0 0.5)"
/>
</clipPath>
</defs>
</svg>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
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>
@@ -66,10 +55,9 @@ export default function Footer() {
alt="GitLab"
width={22}
height={22}
className="flex-shrink-0"
style={{ filter: "grayscale(100%)" }}
className="flex-shrink-0 grayscale"
/>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[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>
@@ -78,42 +66,33 @@ export default function Footer() {
{/* Right side navigation */}
<div className="flex flex-col justify-start items-end gap-[var(--spacing-measures-spacing-032,32px)]">
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
<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">
Use cases
</div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
<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">
Learn
</div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
<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">
About
</div>
</div>
</div>
{/* Divider */}
<div className="flex flex-col items-center self-stretch">
<div
className="flex items-start self-stretch h-px"
style={{
backgroundColor:
"var(--color-border-color-default-primary, #1f1f1f)",
}}
/>
</div>
<Separator />
{/* Bottom section */}
<div className="flex justify-between items-start self-stretch">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5">
<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">
© All right reserved
</div>
<div className="flex items-start gap-[var(--spacing-measures-spacing-040,40px)]">
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
<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">
Privacy Policy
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
<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">
Terms of Service
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
<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">
Cookies Settings
</div>
</div>
app/components/Logo.js
+36 -15
View File
@@ -1,22 +1,43 @@
export default function Logo() {
export default function Logo({ size = "default" }) {
// Size configurations
const sizes = {
default: {
containerHeight: "h-10",
gap: "gap-2",
textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]",
iconSize: "w-[27.05px] h-[27.05px]",
},
footer: {
containerHeight: "h-[calc(40px*1.37)]",
gap: "gap-[calc(8px*1.37)]",
textSize: "text-[calc(21.97px*1.37)]",
lineHeight: "leading-[calc(27.05px*1.37)]",
iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]",
},
footerLg: {
containerHeight: "h-[calc(40px*2.05)]",
gap: "gap-[calc(8px*2.05)]",
textSize: "text-[calc(21.97px*2.05)]",
lineHeight: "leading-[calc(27.05px*2.05)]",
iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]",
},
};
const config =
size === "footer"
? sizes.footer
: size === "footerLg"
? sizes.footerLg
: sizes.default;
return (
<div
className="flex items-center"
style={{
height: "40px",
gap: "8px",
}}
className={`flex items-center ${config.containerHeight} ${config.gap}`}
>
{/* Logo Text */}
<div
className="font-['Bricolage_Grotesque']"
style={{
color: "var(--color-content-default-primary)",
fontSize: "21.97px",
lineHeight: "27.05px",
fontWeight: "400",
letterSpacing: "0px",
}}
className={`font-['Bricolage_Grotesque'] text-[var(--color-content-default-primary)] ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
>
CommunityRule
</div>
@@ -27,7 +48,7 @@ export default function Logo() {
alt="CommunityRule Logo Icon"
width={27.05}
height={27.05}
className="flex-shrink-0"
className={`flex-shrink-0 ${config.iconSize}`}
/>
</div>
);
app/components/Separator.js
+7
View File
@@ -0,0 +1,7 @@
export default function Separator() {
return (
<div className="flex flex-col items-center self-stretch">
<div className="flex items-start self-stretch h-px w-full bg-[var(--border-color-default-secondary)]" />
</div>
);
}