improvements in responsiveness

ComputerSocietyVITC · Mar 30, 2024 · cdcdf0c · cdcdf0c
1 parent dad91e5
commit cdcdf0c
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 58 deletions.
diff --git a/.github/workflows/automatedpr.yml b/.github/workflows/automatedpr.yml
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/countdown.tsx b/src/components/countdown.tsx
@@ -64,27 +64,27 @@ export default function Countdown({
 			<section className="font-offbittrialbold">
 				<section className="flex justify-center sm:text-[2em] text-7xl gap-16 sm:gap-6 mt-20 ">
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.days}</p>
-						<p className="text-custom_red font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.days}</p>
+						<p className="text-custom_red font-offbittrial sm:text-[80%] text-6xl">
 							days
 						</p>
 					</div>
 
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.hours}</p>
-						<p className="text-custom_lightblue font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.hours}</p>
+						<p className="text-custom_lightblue font-offbittrial sm:text-[80%] text-6xl">
 							hours
 						</p>
 					</div>
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.minutes}</p>
-						<p className="text-custom_white font-offbittrial sm:text-[1em] text-6xl">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.minutes}</p>
+						<p className="text-custom_white font-offbittrial sm:text-[80%] text-6xl">
 							minutes
 						</p>
 					</div>
 					<div className="flex flex-col items-center">
-						<p className="text-9xl sm:text-[2em]">{timeLeft.seconds}</p>
-						<p className="text-custom_red font-offbittrial text-6xl sm:text-[1em]">
+						<p className="text-9xl sm:text-[120%]">{timeLeft.seconds}</p>
+						<p className="text-custom_red font-offbittrial text-6xl sm:text-[80%]">
 							seconds
 						</p>
 					</div>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -11,7 +11,7 @@ import devto from "../assets/socialmedia/devto.png";
 
 const Footer = () => {
 	return (
-		<div className="relative z-0 mx-32 backdrop-blur-md">
+		<div className="relative z-0 lg:mx-32 md:mx-32 sm:mx-12 backdrop-blur-md">
 			<section
 				id="contact"
 				className="h-0.5 bg-gradient-to-r from-[#CF1259] to-[#7161EF] my-4 "

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,12 +1,9 @@
 import React, { useState, useEffect } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 
 const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 	const [currentButton, setCurrentButton] = useState<string | null>(buttons[0]); // Set the first button as initially highlighted
 	const buttonRefs = React.useRef<{ [key: string]: HTMLElement | null }>({});
-	const [isDesktop, setDesktop] = useState(false);
 	const [isRadialNavbarOpen, setRadialNavbarOpen] = useState(false);
 
 	const openRadialNavbar = () => {
@@ -85,15 +82,15 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 				<nav className="sm:hidden md:hidden justify-center flex flex-nowrap font-normal text-[20px] w-screen">
 					{buttons.map((button) => {
 						return (
-							<Link href={`#${button.toLowerCase()}`} key={button}>
+							<a href={`#${button.toLowerCase()}`} key={button}>
 								<section
 									className={`px-16 py-5 
 									`}
 									id={button}
 								>
 									{button}
 								</section>
-							</Link>
+							</a>
 						);
 					})}
 				</nav>
@@ -115,7 +112,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 					>
 						{buttons.map((button) => {
 							return (
-								<Link href={`#${button.toLowerCase()}`} key={button}>
+								<a href={`#${button.toLowerCase()}`} key={button}>
 									<section
 										onClick={openRadialNavbar}
 										className={`px-16 py-6 hover:bg-black hover:bg-opacity-10 rounded-md 
@@ -124,7 +121,7 @@ const Navbar = ({ buttons }: { buttons: string[] }): JSX.Element => {
 									>
 										{button}
 									</section>
-								</Link>
+								</a>
 							);
 						})}
 					</motion.section>

diff --git a/src/components/pages/FAQ.tsx b/src/components/pages/FAQ.tsx
@@ -56,15 +56,14 @@ export default function FAQ(): JSX.Element {
 		<>
 			<motion.section
 				id="faqs"
-				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] min-h-screen"
+				className="relative mt-10 w-full flex py-20 font-bold text-[5rem] sm:text-[80%] min-h-screen sm:justify-center"
 			>
-				<div className="w-[80%] ml-24 p-4 z-10">
+				<div className="w-[80%] ml-24 sm:ml-0 z-10 sm:text-center">
 					<section className={`${spaceGrotesk.className} font-regular`}>
 						FAQs
 					</section>
 					<section className={`${spaceGrotesk.className} ml-[-1rem]`}>
 						{faqs.map((faq, index) => (
-
 							<motion.section
 								initial={{ opacity: 0 }}
 								animate={{ opacity: 1 }}
@@ -77,7 +76,7 @@ export default function FAQ(): JSX.Element {
 								key={index}
 							>
 								<section
-									className="text-[2.1rem] font-normal flex justify-between"
+									className="text-[2.1rem] sm:text-[40%] font-normal flex justify-between"
 									onClick={() => toggleTopic(index)}
 								>
 									<section>{faq.topic}</section>
@@ -87,7 +86,6 @@ export default function FAQ(): JSX.Element {
 									/>
 								</section>
 								{selectedTopic === index && (
-
 									<motion.section
 										initial={{ opacity: 0 }}
 										animate={{
@@ -98,7 +96,7 @@ export default function FAQ(): JSX.Element {
 											delay: 0,
 											ease: "easeInOut",
 										}}
-										className={` font-extralight text-[1.2rem] pt-4 pb-24 pr-24 `}
+										className={` font-extralight text-[1.2rem] sm:text-[25%] pt-4 pb-24 sm:pr-0`}
 									>
 										<p>{faq.description}</p>
 									</motion.section>

diff --git a/src/components/pages/about.tsx b/src/components/pages/about.tsx
@@ -17,7 +17,7 @@ export default function About(): JSX.Element {
 		<>
 			<div className="lg:w-[70%] sm:w-[95%] md:w-[90%] lg:ml-24 pb-24 p-12 z-10 backdrop-blur-lg rounded-[3rem] border border-custom_red shadow-2xl shadow-custom_darkblue md:self-center sm:self-center">
 				<section
-					className={`flex py-4 ${spaceGrotesk.className} md:text-[70%] sm:text-[50%] sm:justify-center`}
+					className={`flex py-4 ${spaceGrotesk.className} md:text-[70%] sm:text-[40%] sm:justify-center`}
 				>
 					<section className="text-custom_white font-glitch about-shadow mr-8">
 						About
@@ -31,7 +31,7 @@ export default function About(): JSX.Element {
 				</section>
 
 				<section
-					className={`text-[1.5rem] font-normal self-start sm:text-center sm:text-[1rem]`}
+					className={`text-[1.5rem] font-normal self-start sm:text-center sm:text-[20%]`}
 				>
 					Welcome to IEEE Computer Society VIT Chennai, where innovation meets
 					impact. This event is a vibrant arena for budding technologists,

diff --git a/src/components/pages/timeline.tsx b/src/components/pages/timeline.tsx
@@ -50,7 +50,7 @@ export default function Timeline(): JSX.Element {
 
 				<div className="p-4 flex w-screen flex-col items-center justify-center z-10">
 					<section className={`flex py-4 ${spaceGrotesk.className}`}>
-						<section className="text-custom_white text-start w-screen ml-[3em]">
+						<section className="text-custom_white text-start w-screen ml-[3em] sm:text-center sm:ml-0">
 							Timeline
 						</section>
 					</section>
@@ -59,24 +59,26 @@ export default function Timeline(): JSX.Element {
 					>
 						<section className="">
 							{times.map((time, index) => (
-								<section className={`justify-center w-screen rounded-lg p-12`}>
+								<section
+									className={`justify-center w-screen rounded-lg p-12 sm:p-0`}
+								>
 									<section
 										className={`${
 											index % 2 == 0
-												? "ml-[25em] mr-[4em] border-custom_red"
-												: "ml-[4em] mr-[25em] border-custom_lightblue"
-										} border rounded-lg p-12 backdrop-brightness-125 backdrop-blur-lg shadow-2xl shadow-custom_darkblue`}
+												? "ml-[25em] mr-[4em] sm:ml-[1em] sm:mr-[1em] border-custom_red"
+												: "ml-[4em] mr-[25em] sm:ml-[1em] sm:mr-[1em] border-custom_lightblue"
+										} border rounded-lg p-12 backdrop-brightness-125 sm:m-6 backdrop-blur-lg shadow-2xl shadow-custom_darkblue`}
 									>
 										<section
 											className={`${
 												index % 2 == 0
 													? "text-custom_red"
 													: "text-custom_lightblue"
-											} text-[3rem] font-normal self-start"`}
+											} text-[3rem] sm:text-[130%] font-normal self-start"`}
 										>
 											{time.topic}
 										</section>
-										<section className="text-[1.5rem] font-normal mt-12 text-end">
+										<section className="sm:text-[90%] font-normal sm:mt-6 mt-12 text-end">
 											{time.description}
 										</section>
 									</section>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -146,7 +146,7 @@ export default function Home() {
 							delay: 2,
 							ease: "easeInOut",
 						}}
-						className={`${roboto.className} absolute left-[6rem] top-[-19rem] text-[20rem] z-1 gradient-border`}
+						className={`${roboto.className} sm:hidden absolute left-[6rem] top-[-19rem] text-[20rem] z-1 gradient-border`}
 					>
 						×
 					</motion.p>