pushkarscripts · pushkarscripts · May 16, 2026 · May 14, 2026 · May 14, 2026 · May 14, 2026
diff --git a/app/components/contribute.tsx b/app/components/contribute.tsx
@@ -2,19 +2,19 @@ import Link from "next/link";
 
 export default function ContributionsSection() {
   return (
-    <section id="contribute" className="px-6 py-12 text-center">
-      <h2 className="text-8xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Contributions are Welcome!</h2>
+    <section id="contribute" className="px-6 py-12 text-center scroll-mt-20">
+      <h2 className="text-7xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Contributions are Welcome!</h2>
       <p className="mb-8 text-2xl flex px-6" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
         openCSE is community-driven. Want to add or improve docs? Contribute on GitHub.
       </p>
-      <div className="mt-6 px-6 flex flex-col md:flex-row gap-8">
-        <img src="/Contribute.png" alt="GitHub Issues" className="w-[40vw] shadow-md" />
-        <div className="text-left max-w-[60vw]">
-          <h3 className="font-semibold text-5xl mb-4" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>Browse and Tackle Issues</h3>
-          <p className="mt-2 text-2xl" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
+      <div className="mt-6 px-6 flex flex-col md:flex-row gap-8 w-full">
+        <img src="/Contribute.png" alt="GitHub Issues" className="w-full md:w-[40%] " />
+        <div className="text-left w-full md:w-[60%]">
+          <h3 className="font-semibold w-full text-5xl mb-4" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>Browse and Tackle Issues</h3>
+          <p className="mt-2 text-2xl w-full" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
             Check out the available issues on our <span className="underline"><Link href="https://github.com/pushkarsinghh/opencse/issues">GitHub repository</Link></span>. Pick one to work on, or raise your own if you spot something new!
           </p>
-          <ul className="list-disc ml-5 text-2xl mt-3 space-y-1" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
+          <ul className="list-disc md:w-[60%] ml-5 text-2xl mt-3 space-y-1" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
             <li>Find beginner-friendly and advanced issues</li>
             <li>Discuss solutions and get feedback</li>
             <li>Help us improve by reporting bugs or suggesting features</li>

diff --git a/app/components/hero.tsx b/app/components/hero.tsx
@@ -11,8 +11,9 @@ export default function HeroSection() {
   return (
     <section
       className="relative overflow-hidden text-center 
-        py-4 sm:py-6 md:py-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 
-        rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-15 mb-6"
+        py-12 sm:py-6 md:py-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 
+        rounded-3xl mt-6 mx-4 sm:mx-6 md:mx-10 lg:mx-15 mb-6
+        min-h-[70vh] sm:min-h-fit flex items-center justify-center"
       style={{
         backgroundImage: "url('/HeroBG.png')",
         backgroundSize: "cover",
@@ -28,10 +29,10 @@ export default function HeroSection() {
       />
 
       {/* Content Container */}
-      <div className="relative z-10">
+      <div className="relative z-10 px-2 sm:px-4 md:px-6 lg:px-8">
         <h1
           className={`font-bold ${roadRage.variable} text-black text-center 
-            text-3xl sm:text-5xl md:text-5xl lg:text-[90px] xl:text-[112px] 
+            text-7xl sm:text-6xl md:text-5xl lg:text-[90px] xl:text-[112px] 
             leading-snug sm:leading-tight md:leading-tight lg:leading-[95px] xl:leading-[102px] pt-6 sm:pt-8 md:pt-10 lg:pt-[70px]`}
           style={{
             fontFamily: "var(--font-road-rage), 'Road Rage', cursive",
@@ -44,7 +45,7 @@ export default function HeroSection() {
         </h1>
 
         <p
-          className="mt-4 sm:mt-6 text-base sm:text-lg md:text-2xl lg:text-3xl xl:text-[45px] text-black"
+          className="mt-6 sm:mt-6 text-xl sm:text-lg md:text-2xl lg:text-3xl xl:text-[45px] text-black"
           style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
         >
           Free, open, and beginner-friendly documentation
@@ -57,11 +58,11 @@ export default function HeroSection() {
             const el = document.getElementById("subjects");
             if (el) el.scrollIntoView({ behavior: "smooth" });
           }}
-          className="mt-8 sm:mt-10 mb-6 sm:mb-8 px-5 sm:px-8 md:px-12 lg:px-18 
-            py-2.5 sm:py-3.5 md:py-5 lg:py-6 rounded-full 
-            text-base sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl
+          className="mt-12 sm:mt-10 mb-8 sm:mb-8 px-6 sm:px-8 md:px-12 lg:px-18 
+            py-3 sm:py-3.5 md:py-5 lg:py-6 rounded-full 
+            text-xl sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl
             bg-[#38220b] text-white hover:bg-[#2a1809] hover:scale-105 
-            transition-all duration-300 cursor-pointer"
+            transition-all duration-300 cursor-pointer font-semibold"
           style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
         >
           Explore Subjects

diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
@@ -13,7 +13,7 @@ export default function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <nav className="sticky h-14 top-0 left-0 w-full z-50 flex justify-between items-center pr-6 pl-4 py-1 bg-[#1B0D00] text-white">
+    <nav className="fixed h-14 top-0 inset-x-0 z-50 flex justify-between items-center pr-6 pl-4 py-1 bg-[#1B0D00] text-white">
       <Link href="/"><div className="flex items-center gap-1">
         <img src="/mascot.png" alt="openCSE" className="w-8 h-11 pt-0.5" />
         {/* <img src="/logo.png" alt="openCSE" className="w-38 h-17" /> */}
@@ -38,7 +38,9 @@ export default function Navbar() {
         }}
       >
         <li>
-          <Link href="/">HOME</Link>
+          <Link href="/" className="hover:opacity-80 transition-opacity">
+            HOME
+          </Link>
         </li>
         <li>
           <Link href="/#subjects">SUBJECTS</Link>
@@ -76,47 +78,51 @@ export default function Navbar() {
         />
       </button>
       {/* Mobile Menu */}
-      {menuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg">
-          <ul
-            className="flex flex-col items-center gap-4 py-4 font-bold"
-            style={{
-              color: "white",
-              fontFamily: '"Road Rage", sans-serif',
-              fontSize: "28px",
-              fontStyle: "normal",
-              fontWeight: 400,
-              lineHeight: "normal",
-            }}
-          >
-            <li>
-              <Link href="/" onClick={() => setMenuOpen(false)}>
-          HOME
-              </Link>
-            </li>
-            <li>
-              <Link href="#subjects" onClick={() => setMenuOpen(false)}>
-          SUBJECTS
-              </Link>
-            </li>
-            <li>
-              <Link href="#contribute" onClick={() => setMenuOpen(false)}>
-          CONTRIBUTE
-              </Link>
-            </li>
-            <li>
-              <Link href="#sponsor" onClick={() => setMenuOpen(false)}>
-          SPONSOR
-              </Link>
-            </li>
-            <li>
+      <div 
+        className={`md:hidden absolute top-full left-0 w-full bg-[#1B0D00]/95 shadow-lg transition-all duration-300 origin-top ${
+          menuOpen 
+            ? "opacity-100 scale-y-100" 
+            : "opacity-0 scale-y-0 pointer-events-none"
+        }`}
+      >
+        <ul
+          className="flex flex-col items-center gap-4 py-4 font-bold"
+          style={{
+            color: "white",
+            fontFamily: '"Road Rage", sans-serif',
+            fontSize: "28px",
+            fontStyle: "normal",
+            fontWeight: 400,
+            lineHeight: "normal",
+          }}
+        >
+          <li>
+            <Link href="/" onClick={() => setMenuOpen(false)} className="hover:opacity-80 transition-opacity">
+        HOME
+            </Link>
+          </li>
+          <li>
+            <Link href="/#subjects" onClick={() => setMenuOpen(false)}>
+        SUBJECTS
+            </Link>
+          </li>
+          <li>
+            <Link href="/#contribute" onClick={() => setMenuOpen(false)}>
+        CONTRIBUTE
+            </Link>
+          </li>
+          <li>
+            <Link href="/#sponsor" onClick={() => setMenuOpen(false)}>
+        SPONSOR
+            </Link>
+          </li>
+          <li>
               <Link href="/quiz" onClick={() => setMenuOpen(false)}>
           QUIZ
               </Link>
             </li>
-          </ul>
-        </div>
-      )}
+        </ul>
+      </div>
     </nav>
   );
 }
diff --git a/app/components/sponsor.tsx b/app/components/sponsor.tsx
@@ -1,11 +1,11 @@
 export default function SponsorSection() {
   return (
-    <section id="sponsor" className="px-6 py-12 text-center">
-      <h2 className="text-8xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Sponsor Us</h2>
+    <section id="sponsor" className="px-6 py-12 text-center scroll-mt-20">
+      <h2 className="text-8xl items-center justify-center flex md:justify-start px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>Sponsor Us</h2>
       <p className="mb-8 text-2xl flex px-6" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
         If you find openCSE useful, consider supporting us to keep the project alive:
       </p>
-      <div className="mt-12 flex px-6 gap-4 flex-wrap">
+      <div className="mt-12 flex justify-center md:justify-start items-center px-6 gap-4 flex-wrap">
         <a href="https://buymeacoffee.com/pushkarsinghh" className="rounded-md font-bold flex items-center gap-2 hover:scale-105">
           <img src="/BuyMeACoffee.png" alt="Buy Me a Coffee" className="h-22" />
         </a>

diff --git a/app/components/subjects.tsx b/app/components/subjects.tsx
@@ -127,9 +127,9 @@ const available = ["ep", "c", "em1", "em2", "oops","os", "ml"];
 
 export default function SubjectsSection() {
   return (
-    <section id="subjects" className="px-6 py-12 text-center">
+    <section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
       <h2
-        className="text-8xl flex px-6 mb-0"
+        className="text-7xl flex px-6 mb-0"
         style={{ fontFamily: '"Road Rage", sans-serif' }}
       >
         Browse Subjects

diff --git a/app/globals.css b/app/globals.css
@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+html {
+  scroll-behavior: smooth;
+}
+
 :root {
   --background: #FAE8D7;
   --foreground: #1B0D00;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,5 @@
 // app/layout.tsx
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -20,6 +20,13 @@ export const metadata: Metadata = {
   description: "Free and Open Documentations for CSE subjects",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 0,
+  maximumScale: 5,
+  userScalable: true,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -5,7 +5,7 @@ export default function NotFound() {
   return (
     // BREAKOUT CONTAINER: Ignores the body's broken flex rules and covers the screen
     <div 
-      className="absolute inset-0 z-50 flex flex-col"
+      className="absolute inset-0 z-50 flex flex-col pt-14"
       style={{ backgroundColor: 'var(--background)' }}
     >
       {/* We keep the Navbar inside our breakout container so it still shows up */}

diff --git a/app/page.tsx b/app/page.tsx
@@ -10,7 +10,7 @@ export default function Home() {
       scrollbarColor: "yellow transparent",
       scrollbarWidth: "thin",
       }}
-      className="scrollbar-yellow"
+      className="scrollbar-yellow pt-14"
     >
       <Navbar />
       <HeroSection />

diff --git a/app/quiz/[slug]/QuizClient.tsx b/app/quiz/[slug]/QuizClient.tsx
@@ -84,7 +84,7 @@ export default function QuizClient({ quiz }: Props) {
 
   if (state === "idle") {
     return (
-      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
         <Navbar />
 
         <section
@@ -150,7 +150,7 @@ export default function QuizClient({ quiz }: Props) {
     const grade = pct >= 80 ? "Excellent!" : pct >= 60 ? "Good work!" : "Keep studying!";
 
     return (
-      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+      <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
         <Navbar />
 
         <section
@@ -254,7 +254,7 @@ export default function QuizClient({ quiz }: Props) {
   }
 
   return (
-    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
       <Navbar />
       <section
         className="relative overflow-hidden w-full py-16 sm:py-24 px-4 sm:px-6 md:px-10 lg:px-16 text-center shadow-lg"

diff --git a/app/quiz/page.tsx b/app/quiz/page.tsx
@@ -24,7 +24,7 @@ export const metadata = {
 
 export default function QuizIndexPage() {
   return (
-    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1]">
+    <div className="min-h-screen bg-[#1B0D00] text-[#e2d1c1] pt-14">
       <Navbar />
 
       <section

diff --git a/app/sem1/c/components/sidebar.tsx b/app/sem1/c/components/sidebar.tsx
@@ -2,7 +2,7 @@
 import { Righteous } from "next/font/google";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const righteous = Righteous({
   subsets: ["latin"],
@@ -12,7 +12,13 @@ const righteous = Righteous({
 
 export default function Sidebar() {
   const pathname = usePathname();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (window.innerWidth >= 768) {
+      setOpen(true);
+    }
+  }, []);
 
   const chapters = [
     { id: "ch0", title: "Course Outline" },
@@ -38,12 +44,20 @@ export default function Sidebar() {
   const quizActive = pathname.startsWith("/quiz");
 
   return (
-    <div className="flex relative">
-      <aside
-        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
-          open ? "w-64" : "w-0 overflow-hidden"
-        }`}
-      >
+    <>
+      {/* Backdrop overlay - only on mobile when open */}
+      <div 
+        className={`fixed inset-0 md:hidden bg-black/50 z-30 transition-opacity duration-300 ${open ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={() => setOpen(false)}
+      />
+
+      <div className="flex sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-[50px] md:w-auto pointer-events-none md:pointer-events-auto">
+        {/* Sidebar */}
+        <aside
+          className={`h-full shrink-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 pointer-events-auto border-r-0 ${
+            open ? "w-64 border-r-2 md:border-r-0" : "w-0 overflow-hidden"
+          }`}
+        >
         <h2
           className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
           style={{ fontFamily: "Rockwell, Serif, serif" }}
@@ -101,13 +115,17 @@ export default function Sidebar() {
 
       <button
         onClick={() => setOpen(!open)}
-        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
-        style={{ fontFamily: "Rockwell, Serif, serif" }}
+        className="toggle-sidebar shrink-0 pointer-events-auto bg-[#ffdda7] h-full w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300 md:shadow-none"
+        style={{
+          fontFamily: "Rockwell, Serif, serif",
+          boxShadow: open ? "4px 0 15px rgba(0,0,0,0.1)" : "none"
+        }}
       >
         <p className="leading-5">
           C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
         </p>
       </button>
     </div>
+    </>
   );
 }
diff --git a/app/sem1/c/layout.tsx b/app/sem1/c/layout.tsx
@@ -9,18 +9,18 @@ export const metadata = {
 
 export default function Sem1CLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="sem1-c-root min-h-screen">
+    <div className="sem1-c-root min-h-screen flex flex-col pt-14">
       {/* Navigation Bar */}
       <Navbar />
 
-      <div className="flex flex-1">
+      <div className="flex bg-[#1b0d00] flex-1 min-h-0">
         {/* Sidebar */}
         <Sidebar />
 
         {/* Main Area */}
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col min-w-0">
           {/* Page Content */}
-          <main className="flex-1 overflow-y-auto px-6">
+          <main className="flex-1 overflow-auto">
             {children}
           </main>
         </div>