From 6d53ff1fde288cc203b609c0a1e2e17c8d6b372b Mon Sep 17 00:00:00 2001
From: Adarsh <108751847+zs0c131y@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:54:13 +0530
Subject: [PATCH] update

---
 events.css    |   1 +
 index.css     |  64 +++++++++++++++++++--------
 index.html    |  12 ++---
 schedule.css  | 118 +++++++++++++++++++++++++++-----------------------
 schedule.html |  45 ++++++++++++++++---
 5 files changed, 155 insertions(+), 85 deletions(-)

diff --git a/events.css b/events.css
index 0d25ed8..d85a540 100644
--- a/events.css
+++ b/events.css
@@ -251,6 +251,7 @@ footer p {
   color: #ff0000;
 }
 
+/* Mobile Styles */
 @media (max-width: 768px) {
   .navbar {
     padding: 1rem;
diff --git a/index.css b/index.css
index 0a7023f..d14d9bc 100644
--- a/index.css
+++ b/index.css
@@ -183,14 +183,25 @@ nav {
 }
 
 .nav-links {
+  display: block;
+}
+
+.nav-links ul {
   display: flex;
   gap: 2rem;
+  list-style: none;
+}
+
+.nav-links li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .nav-links a {
   color: var(--primary-color);
   text-decoration: none;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   transition: all 0.3s ease;
@@ -356,13 +367,6 @@ footer p {
     padding: 0.5rem 1rem;
   }
 
-  .mobile-menu-btn {
-    display: block;
-    position: relative;
-    z-index: 1002;
-    margin-left: 25px;
-  }
-
   .logo {
     height: 70px;
   }
@@ -371,11 +375,6 @@ footer p {
     height: 60px;
   }
 
-  .blossoms-logo {
-    max-width: 400px;
-    margin: -30px auto 20px;
-  }
-
   .nav-links {
     position: fixed;
     top: 0;
@@ -384,21 +383,48 @@ footer p {
     width: 70%;
     background: rgba(0, 0, 0, 0.95);
     transition: right 0.3s ease;
+    padding: 80px 0;
+    z-index: 1000;
+  }
+
+  .nav-links ul {
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    padding: 80px 0;
+    height: auto;
+    padding: 0;
   }
 
-  .nav-links.active {
-    right: 0;
+  .nav-links li {
+    width: 100%;
+    text-align: center;
   }
 
   .nav-links a {
     font-size: 1.2rem;
-    width: auto;
+    width: 200px;
     text-align: center;
-    margin: 1rem 0;
+  }
+
+  .mobile-menu-btn {
+    display: block;
+    position: relative;
+    z-index: 1002;
+  }
+
+  .nav-links.active {
+    right: 0;
+  }
+
+  /* .nav-links a.active {
+    background: var(--bg-transparent);
+  } */
+
+  .nav-links.active ul {
+    right: 0;
+  }
+  .blossoms-logo {
+    max-width: 400px;
+    margin: -30px auto 20px;
   }
 
   .mobile-menu-btn.active span:nth-child(1) {
diff --git a/index.html b/index.html
index 5f466d9..71e649d 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="BLOSSOMS 2024-25 CU-BYC" />
     <meta property="og:url" content="https://blossomsbyc.netlify.app/" />
     <meta
       property="og:title"
@@ -71,7 +72,7 @@
 
     <!-- Main Content -->
     <div class="main-content">
-      <nav>
+      <nav class="navbar">
         <img
           src="./assets/images/swo-logo-tp.png"
           alt="SWO Logo"
@@ -85,10 +86,11 @@
         </button>
 
         <div class="nav-links">
-          <a href="#home" class="active">Home</a>
-          <a href="events.html">Events</a>
-          <a href="schedule.html">Schedule</a>
-          <!-- <a href="#gallery">Gallery</a> -->
+          <ul>
+            <li><a href="#home" class="active">Home</a></li>
+            <li><a href="events.html">Events</a></li>
+            <li><a href="schedule.html">Schedule</a></li>
+          </ul>
         </div>
 
         <img
diff --git a/schedule.css b/schedule.css
index e859ac3..c3900ef 100644
--- a/schedule.css
+++ b/schedule.css
@@ -57,7 +57,6 @@ body {
   padding: 0.5rem 1rem;
   border-radius: 4px;
   transition: all 0.3s ease;
-  display: block;
 }
 
 .nav-links a:hover {
@@ -120,22 +119,26 @@ main {
   margin: 0 auto;
   padding: 0;
   position: relative;
-  overflow-x: auto;
+  overflow: hidden;
   -webkit-overflow-scrolling: touch;
+  background: transparent !important;
 }
 
 iframe {
-  width: 800px;
-  min-height: 600px;
-  height: 400vh !important;
+  width: 100%;
+  height: 100vh !important;
   border: none;
   border-radius: 10px;
-  /* margin: 1rem auto; */
-  /* background: var(--bg-transparent); */
-  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); */
-  -webkit-overflow-scrolling: touch;
-  transform-origin: 0 0;
-  /* zoom: 0.85; */
+  margin: 0;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  background: transparent !important;
+}
+
+/* Add this to hide Heyzine logo */
+iframe::after {
+  content: none !important;
 }
 
 .contact-btn {
@@ -194,25 +197,17 @@ footer p {
 
 /* Mobile Styles */
 @media screen and (max-width: 768px) {
-  .doc {
+  doc {
     padding: 0;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    overflow: hidden;
   }
 
   iframe {
     width: 100%;
-    min-height: 500px;
-    height: 530vh !important;
-    margin: 0.5rem auto;
-    zoom: 0.68;
-  }
-
-  .mobile-menu-btn {
-    display: block;
-    position: relative;
-    z-index: 1002;
-    margin-left: 25px;
+    height: 100vh !important; /* Changed from 530vh */
+    margin: 0;
+    transform: scale(1); /* Remove zoom property */
+    background: transparent !important;
   }
 
   .error {
@@ -223,28 +218,8 @@ footer p {
     font-size: 0.9rem;
   }
 
-  /* Adjust for very small screens */
-  @media screen and (max-width: 480px) {
-    iframe {
-      min-height: 300px;
-      height: 160vh !important;
-      zoom: 0.58; /* Further reduce zoom for very small screens */
-    }
-  }
   .navbar {
-    padding: 0.5rem 1rem;
-  }
-
-  .logo {
-    height: 70px;
-  }
-
-  .christ-logo {
-    height: 60px;
-  }
-
-  .mobile-menu-btn {
-    display: block;
+    padding: 1rem;
   }
 
   .nav-links {
@@ -255,6 +230,25 @@ footer p {
     width: 70%;
     background: rgba(0, 0, 0, 0.95);
     transition: right 0.3s ease;
+    padding: 80px 0;
+    z-index: 1000;
+  }
+
+  .nav-links li {
+    width: 100%;
+    text-align: center;
+  }
+
+  .nav-links a {
+    font-size: 1.2rem;
+    width: 200px;
+    text-align: center;
+  }
+
+  .mobile-menu-btn {
+    display: block;
+    position: relative;
+    z-index: 1002;
   }
 
   .nav-links.active {
@@ -262,18 +256,31 @@ footer p {
   }
 
   .nav-links ul {
-    height: 100%;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: 2rem;
-    padding: 80px 40px;
+    height: auto;
+    padding: 0;
   }
 
-  .nav-links a {
-    font-size: 1.2rem;
-    width: 200px;
-    text-align: center;
+  .nav-links.active ul {
+    right: 0;
+  }
+
+  /* Adjust for very small screens */
+  @media screen and (max-width: 480px) {
+    iframe {
+      min-height: 300px;
+      height: 160vh !important;
+      zoom: 0.58; /* Further reduce zoom for very small screens */
+    }
+  }
+
+  .logo {
+    height: 70px;
+  }
+
+  .christ-logo {
+    height: 60px;
   }
 
   .mobile-menu-btn.active span:nth-child(1) {
@@ -318,7 +325,8 @@ footer p {
   }
 
   iframe {
-    height: 60vh;
+    height: 100vh !important; /* Changed from 60vh */
+    transform: scale(1); /* Remove zoom property */
   }
 
   .title {
diff --git a/schedule.html b/schedule.html
index 51e4149..f40e074 100644
--- a/schedule.html
+++ b/schedule.html
@@ -6,6 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"
     />
+    <meta name="theme-color" content="transparent" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>Schedule - SWO</title>
     <link rel="stylesheet" href="schedule.css" />
@@ -14,6 +15,12 @@
       href="./assets/images/swo.png"
       type="image/x-icon"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Headland+One&family=Questrial&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <nav class="navbar">
@@ -50,12 +57,38 @@ <h1 class="title">Schedule</h1>
       <p class="subtitle">View the schedule of events!</p>
 
       <div class="doc">
-        <iframe
-          src="https://docs.google.com/document/d/e/2PACX-1vRpZbz3ufIKZcbyxSZy-0velzjcDGv6WmNSDIDSLkEn_EC72VrZ3SCVoUAeSe5D8P8JRpN5CG5CWDtz/pub?embedded=true"
-          title="Schedule Document"
-          scrolling="yes"
-          allowfullscreen="true"
-        ></iframe>
+        <div class="doc-container">
+          <style>
+            /* Inject critical styles directly */
+            #magazineViewport,
+            .magazine-viewport,
+            .container,
+            #canvas {
+              background: transparent !important;
+            }
+            .logo-backs, .logo-backs2, a[href="https://heyzine.com"], .controls-pdf
+            {
+              display: none !important;
+            }
+          </style>
+          <div
+            id="canvas"
+            style="background: transparent !important; padding: 0"
+          >
+            <iframe
+              src="https://heyzine.com/flip-book/3b26db88f8.html"
+              style="
+                width: 100%;
+                height: 100vh;
+                border: none;
+                background: transparent;
+              "
+              frameborder="0"
+              allowfullscreen
+            >
+            </iframe>
+          </div>
+        </div>
       </div>
       <a
         href="https://docs.google.com/document/d/e/2PACX-1vRpZbz3ufIKZcbyxSZy-0velzjcDGv6WmNSDIDSLkEn_EC72VrZ3SCVoUAeSe5D8P8JRpN5CG5CWDtz/pub?embedded=true"