Add font scaling for sponsors section

acmucsd · Dec 14, 2024 · baf78a3 · baf78a3
1 parent ac671a7
commit baf78a3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/sections/Sponsors/index.tsx b/src/sections/Sponsors/index.tsx
@@ -33,7 +33,9 @@ const Sponsors: React.FC = () => {
           className={styles.button}
           data-variant="secondary"
         >
-          <Typography variant="title/small">Sponsor DiamondHacks!</Typography>
+          <Typography variant="title/small" className={styles.buttonText}>
+            Sponsor DiamondHacks!
+          </Typography>
         </Link>
       </div>
       <Image src={HoldingDiamond} alt="Diamond illustration" className={styles.background} />

diff --git a/src/sections/Sponsors/style.module.scss b/src/sections/Sponsors/style.module.scss
@@ -86,4 +86,16 @@
 
 .bottomText {
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    font-size: 1.25rem !important;
+    line-height: 1.5rem !important;
+  }
+}
+
+.buttonText {
+  @media screen and (max-width: vars.$breakpoint-md) {
+    font-size: 1rem !important;
+    line-height: 1.25rem !important;
+  }
 }