style: constrain max width (#85)

designatuci · Apr 6, 2024 · 0166718 · 0166718
1 parent 2f05ade
commit 0166718
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 52 deletions.
diff --git a/src/app/Symbols.js b/src/app/Symbols.js
@@ -11,7 +11,11 @@ const Icon = (props) => {
 	return (
 		<div
 			id={props.id}
-			className={clsx("icon", props.hoverable && "hoverable", props.className)}
+			className={clsx(
+				"icon",
+				props.hoverable && "hoverable",
+				props.className,
+			)}
 			style={style}
 		>
 			{props.children}
@@ -60,7 +64,11 @@ export function Space({ block, ...props }) {
 		style.display = "block";
 	}
 	return (
-		<div className={"space " + props.className} {...props} style={style}></div>
+		<div
+			className={"space " + props.className}
+			{...props}
+			style={style}
+		></div>
 	);
 }
 

diff --git a/src/app/pages/Designathons/Designathon24/components/About/About.module.scss b/src/app/pages/Designathons/Designathon24/components/About/About.module.scss
@@ -8,6 +8,13 @@
 	padding: 3rem 1rem 5rem;
 	font-size: 0.75em;
 
+	.content {
+		margin: 0 auto;
+		max-width: 1280px;
+
+		position: relative;
+	}
+
 	.heading {
 		position: relative;
 		color: var(--des24-hot-pink);
@@ -54,21 +61,21 @@
 		max-width: 75px;
 		pointer-events: none;
 
-		top: 320px;
-		left: -24px;
+		top: 438px;
+		left: -55px;
 
 		@media screen and (min-width: 640px) {
 			max-width: 100px;
 
-			top: 374px;
-			left: 22px;
+			top: 358px;
+			left: -74px;
 		}
 
 		@media screen and (min-width: 1280px) {
 			max-width: 250px;
 
-			top: 386px;
-			left: 74px;
+			top: 340px;
+			left: -102px;
 		}
 	}
 

diff --git a/src/app/pages/Designathons/Designathon24/components/About/index.jsx b/src/app/pages/Designathons/Designathon24/components/About/index.jsx
@@ -24,6 +24,7 @@ const About = () => {
 			<img src={bl_blob_stars} alt="" className={cn.bl} />
 			<img src={tr_stars} alt="" className={cn.tr} />
 
+          			<div className={cn.content}>
 			<h2 className={cn.heading}>About</h2>
 
 			<Notecard lineAdjustment={2}>
@@ -53,13 +54,13 @@ const About = () => {
 					</p>
 				</div>
 			</Notecard>
+</div>
 
 			<img
 				src={airplane}
 				alt=""
 				className={clsx(cn.airplane, "wait flopR")}
 			/>
-			<img src={paperclip} alt="" className={cn.paperclip} />
 		</div>
 	);
 };

diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss b/src/app/pages/Designathons/Designathon24/components/FAQ/FAQ.module.scss
@@ -9,6 +9,11 @@
 		padding: 6rem 5rem;
 	}
 
+	.content {
+		margin: 0 auto;
+		max-width: 1280px;
+	}
+
 	.heading {
 		position: relative;
 		color: var(--des24-hot-pink);

diff --git a/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx b/src/app/pages/Designathons/Designathon24/components/FAQ/index.jsx
@@ -15,7 +15,7 @@ const FAQ = () => {
 					positions={[{ top: 0, left: 0 }]}
 					isLight={true}
 				/>
-
+            <div className={cn.content}>
 				<img
 					src={star_lines}
 					alt=""
@@ -222,6 +222,7 @@ const FAQ = () => {
 							/>
 						);
 					})}
+          </div>
 				</div>
 			</div>
 		</div>

diff --git a/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss b/src/app/pages/Designathons/Designathon24/components/Notecard/Notecard.module.scss
@@ -6,7 +6,7 @@
 
 	box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, 0.1);
 
-	margin: 1.5rem 1rem 0;
+	margin: 1.5rem 0rem 0;
 
 	overflow-y: scroll;
 	overflow-x: hidden;
@@ -74,7 +74,7 @@
 	}
 
 	@media screen and (min-width: 640px) {
-		margin: 1.5rem 4rem 0;
+		margin: 1.5rem 0rem 0;
 
 		.noteCardHeader {
 			height: 80px;
@@ -101,7 +101,7 @@
 
 		box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, 0.1);
 
-		margin: 1.5rem 6rem 0;
+		margin: 1.5rem 0rem 0;
 
 		.text {
 			margin-top: 0.5rem;

diff --git a/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss b/src/app/pages/Designathons/Designathon24/components/Rules/Rules.module.scss
@@ -9,7 +9,7 @@
 
 	.content {
 		margin: 0 auto;
-		max-width: 980px;
+		max-width: 1280px;
 	}
 
 	.heading {

diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Modal/Modal.module.scss b/src/app/pages/Designathons/Designathon24/components/Speakers/Modal/Modal.module.scss
@@ -11,6 +11,8 @@
 	z-index: 10;
 
 	padding-top: 5%;
+	padding-left: 5%;
+	padding-right: 5%;
 
 	& > .container {
 		background-color: black;

diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.jsx
@@ -71,46 +71,43 @@ const Speakers = () => {
 				alt=""
 				className={clsx(cn.decoration, cn.br_star_stripe_gradient)}
 			/>
-			<h2 className={cn.heading}>Speakers</h2>
-			<div className={cn.polaroids}>
-				<div className={cn.keynote}>
-					<h3 className={cn.polaroidHeading}>Keynote Speaker</h3>
-
-					<div
-						className={cn.keynotePolaroid}
-						style={{ backgroundImage: `url(${splat})` }}
-					>
-						<div className={cn.content}>
-							<Polaroid person={JUDGES[0]} />
+			<div className={cn.content}>
+				<h2 className={cn.heading}>Speakers</h2>
+				<div className={cn.polaroids}>
+					<div className={cn.keynote}>
+						<h3 className={cn.polaroidHeading}>Keynote Speaker</h3>
+						<div
+							className={cn.keynotePolaroid}
+							style={{ backgroundImage: `url(${splat})` }}
+						>
+							<div className={cn.content}>
+								<Polaroid person={JUDGES[0]} />
+							</div>
 						</div>
 					</div>
-				</div>
-
-				<div className={cn.peopleContainer}>
-					<h3 className={cn.polaroidHeading}>Judges</h3>
-
-					<div className={cn.people}>
-						{JUDGES.map((judge, index) => (
-							<Polaroid
-								key={judge.name}
-								person={judge}
-								odd={index % 2 === 0}
-							/>
-						))}
+					<div className={cn.peopleContainer}>
+						<h3 className={cn.polaroidHeading}>Judges</h3>
+						<div className={cn.people}>
+							{JUDGES.map((judge, index) => (
+								<Polaroid
+									key={judge.name}
+									person={judge}
+									odd={index % 2 === 0}
+								/>
+							))}
+						</div>
 					</div>
-				</div>
-
-				<div className={cn.peopleContainer}>
-					<h3 className={cn.polaroidHeading}>Workshop Hosts</h3>
-
-					<div className={cn.people}>
-						{WORKSHOP_HOSTS.map((host, index) => (
-							<Polaroid
-								key={host.name}
-								person={host}
-								odd={index % 2 === 0}
-							/>
-						))}
+					<div className={cn.peopleContainer}>
+						<h3 className={cn.polaroidHeading}>Workshop Hosts</h3>
+						<div className={cn.people}>
+							{WORKSHOP_HOSTS.map((host, index) => (
+								<Polaroid
+									key={host.name}
+									person={host}
+									odd={index % 2 === 0}
+								/>
+							))}
+						</div>
 					</div>
 				</div>
 			</div>

diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss
@@ -7,6 +7,11 @@
 
 	padding: 5rem 2rem;
 
+	.content {
+		margin: 0 auto;
+		max-width: 1280px;
+	}
+
 	.heading {
 		position: relative;
 		color: var(--des24-hot-pink);
@@ -26,15 +31,16 @@
 
 	.polaroids {
 		margin: 0 auto;
-		max-width: 980px;
 		margin-top: 3rem;
 
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		gap: 4rem;
+		max-width: 80%;
 
 		.polaroidHeading {
+			position: relative;
 			font-size: 2rem;
 			font-weight: 700;