finished production imminent

zs0c131y · Nov 21, 2024 · ea90a31 · ea90a31
1 parent 4203d0a
commit ea90a31
Show file tree

Hide file tree

Showing 22 changed files with 2,184 additions and 841 deletions.
diff --git a/art_events.css b/art_events.css
@@ -18,6 +18,7 @@ body {
   background: #111 url("assets/images/bg.jpg") center/cover fixed;
   min-height: 100vh;
   line-height: 1.6;
+  overflow-x: hidden;
 }
 
 .navbar {
@@ -27,17 +28,23 @@ body {
   padding: 1rem 2rem;
   position: relative;
   z-index: 1000;
+  background: rgba(0, 0, 0, 0.8);
 }
 
 .logo {
   height: 110px;
   width: auto;
+  transition: height 0.3s ease;
 }
 
-.nav-links ul {
+.logo-cu {
+  height: 100px;
+  width: auto;
+}
+
+.nav-links {
   display: flex;
   gap: 2rem;
-  list-style: none;
 }
 
 .nav-links a {
@@ -61,6 +68,24 @@ body {
   border-radius: 7px;
 }
 
+.mobile-menu-btn {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  z-index: 1001;
+}
+
+.mobile-menu-btn span {
+  display: block;
+  width: 25px;
+  height: 2px;
+  background-color: var(--primary-color);
+  margin: 5px 0;
+  transition: all 0.3s ease;
+}
+
 .main-content {
   max-width: 1200px;
   margin: 2rem auto;
@@ -76,6 +101,7 @@ body {
   backdrop-filter: blur(5px);
   border-radius: 10px;
   padding: 1rem;
+  position: sticky;
   top: 2rem;
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
@@ -106,10 +132,6 @@ body {
   min-height: 500px;
 }
 
-.event-details ul li {
-  list-style: none;
-}
-
 .event-title {
   font-family: Georgia, serif;
   font-size: 2.5rem;
@@ -128,6 +150,7 @@ body {
   margin-bottom: 1rem;
   padding-left: 1.5rem;
   position: relative;
+  list-style: none;
 }
 
 .event-rules li::before {
@@ -140,21 +163,112 @@ body {
 footer {
   text-align: center;
   padding: 2rem;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.8);
   margin-top: 2rem;
 }
 
+footer p {
+  margin: 0.5rem 0;
+  font-size: clamp(0.875rem, 2.5vw, 1rem);
+}
+
 .heart {
   color: #ff0000;
 }
 
 @media (max-width: 768px) {
+  .navbar {
+    padding: 0.5rem 1rem;
+  }
+
+  .logo {
+    height: 70px;
+  }
+
+  .logo-cu {
+    height: 60px;
+  }
+
+  .mobile-menu-btn {
+    display: block;
+    position: relative;
+    z-index: 1002;
+    margin-left: 25px;
+  }
+
+  .nav-links {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    height: 100vh;
+    width: 70%;
+    background: rgba(0, 0, 0, 0.95);
+    transition: right 0.3s ease;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 80px 0;
+  }
+
+  .nav-links.active {
+    right: 0;
+  }
+
+  .nav-links a {
+    font-size: 1.2rem;
+    width: 200px;
+    text-align: center;
+    margin: 1rem 0;
+  }
+
+  .mobile-menu-btn.active span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 6px);
+  }
+
+  .mobile-menu-btn.active span:nth-child(2) {
+    opacity: 0;
+  }
+
+  .mobile-menu-btn.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(5px, -6px);
+  }
+
   .main-content {
     grid-template-columns: 1fr;
+    padding: 1rem;
+    gap: 1rem;
   }
 
   .events-list {
+    position: relative;
+    top: 0;
     max-height: 300px;
-    overflow-y: auto;
+  }
+
+  .event-title {
+    font-size: 2rem;
+  }
+
+  .event-rules {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo {
+    height: 50px;
+  }
+
+  .logo-cu {
+    height: 45px;
+  }
+
+  .nav-links a {
+    width: 160px;
+    font-size: 1.1rem;
+  }
+
+  .event-title {
+    font-size: 1.75rem;
   }
 }
diff --git a/art_events.html b/art_events.html
@@ -3,48 +3,54 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Art Events - Blossoms</title>
+    <title>Art Events - BLOSSOMS 2024-25</title>
+    <link rel="stylesheet" href="art_events.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Questrial&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="art_events.css" />
   </head>
   <body>
     <nav class="navbar">
       <img src="./assets/images/swo-logo-tp.png" alt="SWO Logo" class="logo" />
+
+      <button class="mobile-menu-btn">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+
       <div class="nav-links">
-        <ul>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="events.html">Events</a></li>
-          <li><a href="schedule.html">Schedule</a></li>
-          <li><a href="gallery.html">Gallery</a></li>
-        </ul>
+        <a href="index.html">Home</a>
+        <a href="events.html" class="active">Events</a>
+        <a href="schedule.html">Schedule</a>
+        <!-- <a href="#gallery">Gallery</a> -->
       </div>
+
       <img
         src="./assets/images/cu-logo-tp.png"
         alt="CHRIST Logo"
-        class="logo"
+        class="logo logo-cu"
       />
     </nav>
 
     <div class="main-content">
-      <div class="events-list">
-        <!-- Event items will be dynamically populated -->
-      </div>
-      <div class="event-details">
-        <!-- Event details will be dynamically populated -->
-      </div>
+      <!-- Events list will be populated by JavaScript -->
+      <div class="events-list"></div>
+
+      <!-- Event details will be updated by JavaScript -->
+      <div class="event-details"></div>
     </div>
 
     <footer>
       <p>
         In case of queries, please drop a mail to
-        [email protected] or visit the SWO Office on 7th
-        Floor, Block C.
+        [email protected]
       </p>
+      <p>or visit the SWO Office on 7th Floor, Block C.</p>
       <p>Made with <span class="heart">❤</span> in CHRIST BYC</p>
     </footer>
+
     <script src="art_events.js"></script>
   </body>
 </html>