Used relative sizes for padding instead of px for FAQ and HeadingCard

HackAtUCI · Oct 18, 2024 · cc8bb7c · cc8bb7c
1 parent e92e447
commit cc8bb7c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
@@ -1,11 +1,11 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
 
-$mobile-item-padding-y: 26px;
-$mobile-item-padding-x: 32px;
+$mobile-item-padding-y: 1.6rem;
+$mobile-item-padding-x: 2rem;
 
-$item-padding-y: 32px;
-$item-padding-x: 48px;
+$item-padding-y: 2rem;
+$item-padding-x: 3rem;
 
 .container {
 	position: relative;

diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss
@@ -1,11 +1,11 @@
 @use "zothacks-theme" as theme;
 @use "bootstrap-utils" as utils;
 
-$mobile-item-padding-y: 26px;
-$mobile-item-padding-x: 32px;
+$mobile-item-padding-y: 1.6rem;
+$mobile-item-padding-x: 2rem;
 
-$item-padding-y: 32px;
-$item-padding-x: 48px;
+$item-padding-y: 2rem;
+$item-padding-x: 3rem;
 
 $heading-font-size: 28px;
 
@@ -22,7 +22,7 @@ $heading-font-size: 28px;
 }
 
 .bang {
-	margin-right: $item-padding-x - 7;
+	margin-right: $mobile-item-padding-x - 0.4375;
 }
 
 .title {
@@ -40,4 +40,8 @@ $heading-font-size: 28px;
 	.card {
 		padding: $item-padding-y $item-padding-x;
 	}
+
+	.bang {
+		margin-right: $item-padding-x - 0.4375;
+	}
 }
diff --git a/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx b/apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx
@@ -22,7 +22,6 @@ async function ApiResources() {
 			/>
 
 			<div className={styles["bottom-spacer"] + " row"}>
-				{/* Sticky Notes */}
 				{resources.map(
 					({ _id, title, description, link, logo, background }) => (
 						<div className={styles.column + " col"} key={_id}>