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

Fix Hero Banner fonts

Browse Source
This commit is contained in:
adilallo
2025-08-21 17:21:39 -06:00
parent d430ec0552
commit b486022c3b
7 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Button.js
+5 -10
View File
@@ -25,16 +25,11 @@ export default function Button({
}; };
const fontStyles = { const fontStyles = {
xsmall: xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]", small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]",
small: medium: "font-inter text-[14px] leading-[16px] font-medium tracking-[0%]",
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]", large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]",
medium: xlarge: "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]",
"font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
large:
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
xlarge:
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
}; };
const variantStyles = { const variantStyles = {
app/components/ContentLockup.js
+1 -1
View File
@@ -35,7 +35,7 @@ const ContentLockup = ({
</div> </div>
{/* Description - 20px gap from subtitle at xl */} {/* Description - 20px gap from subtitle at xl */}
<p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]"> <p className="font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]">
{description} {description}
</p> </p>
</div> </div>
app/components/Footer.js
+11 -11
View File
@@ -51,12 +51,12 @@ export default function Footer() {
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1"> <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
{/* Contact info */} {/* Contact info */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]"> <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"> <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">
Media Economies Design Lab Media Economies Design Lab
</div> </div>
<a <a
href="mailto:medlab@colorado.edu" 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" 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 medlab@colorado.edu
</a> </a>
@@ -76,7 +76,7 @@ export default function Footer() {
height={22} height={22}
className="flex-shrink-0 group-hover:scale-110 transition-transform" 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"> <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 medlabboulder
</div> </div>
</a> </a>
@@ -92,7 +92,7 @@ export default function Footer() {
height={22} height={22}
className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform" 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"> <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 medlabboulder
</div> </div>
</a> </a>
@@ -103,19 +103,19 @@ export default function Footer() {
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end"> <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
<a <a
href="#" 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" 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 Use cases
</a> </a>
<a <a
href="#" 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" 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 Learn
</a> </a>
<a <a
href="#" 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" 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 About
</a> </a>
@@ -126,25 +126,25 @@ export default function Footer() {
{/* Bottom section */} {/* Bottom section */}
<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="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"> <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 © All right reserved
</div> </div>
<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)]"> <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 <a
href="#" 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" 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 Privacy Policy
</a> </a>
<a <a
href="#" 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" 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 Terms of Service
</a> </a>
<a <a
href="#" 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" 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 Cookies Settings
</a> </a>
app/components/Logo.js
+1 -1
View File
@@ -123,7 +123,7 @@ export default function Logo({ size = "default", showText = true }) {
{/* Logo Text - only show if showText is true */} {/* Logo Text - only show if showText is true */}
{showText && ( {showText && (
<div <div
className={`font-['Bricolage_Grotesque'] ${ className={`font-bricolage-grotesque ${
size === "homeHeaderXsmall" || size === "homeHeaderXsmall" ||
size === "homeHeaderSm" || size === "homeHeaderSm" ||
size === "homeHeaderMd" || size === "homeHeaderMd" ||
app/components/MenuBarItem.js
+4 -4
View File
@@ -78,13 +78,13 @@ export default function MenuBarItem({
}; };
const smallTextStyle = const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]"; "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]";
const mediumTextStyle = const mediumTextStyle =
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]"; "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]";
const largeTextStyle = const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]"; "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]";
const xlargeTextStyle = const xlargeTextStyle =
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]"; "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]";
const textStyles = { const textStyles = {
default: smallTextStyle, default: smallTextStyle,
app/components/NavigationItem.js
+2 -4
View File
@@ -23,10 +23,8 @@ export default function NavigationItem({
// Text styles based on size // Text styles based on size
const textStyles = { const textStyles = {
default: default: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]", xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
xsmall:
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
}; };
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`; const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
app/globals.css
+19
View File
@@ -1,5 +1,24 @@
@import "./tailwind.css"; @import "./tailwind.css";
/* Map next/font CSS variables to handy classes */
.font-inter {
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
"Apple Color Emoji", "Segoe UI Emoji";
}
.font-bricolage-grotesque {
font-family: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* Set default body text face */
html,
body {
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body { body {
background-color: black; background-color: black;
min-height: 100vh; min-height: 100vh;