Reusable components and Refactoring

Kept data in separate variables so that when we need to change them, we can do that easily, rather than finding them in code.

10 files changed, 80 insertions, 37 deletions

diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro
index 5f1f061..170d157 100644
--- a/src/components/Accordion.astro
+++ b/src/components/Accordion.astro
@@ -80,7 +80,7 @@ const accordionItems: AccordionItem[] = [
           {
             accordion.body.map((bodyLine) => (
               <p>
-                <a href={bodyLine.link}>{bodyLine.text}</a>
+                <a href={bodyLine.link} target="_blank">{bodyLine.text}</a>
               </p>
             ))
           }
@@ -101,7 +101,7 @@ const accordionItems: AccordionItem[] = [
   }
 
   .faq{
-    max-width: 100vw;
+    max-width: 100%;
     cursor: pointer;
     border: 1px solid #f6f4f4;
   }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index aaa2f51..55edea7 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -5,24 +5,24 @@
     <div class="footer-content">
         <ul class="about-list">
             <h2>About</h2>
-            <li><a class="footer-links" href="https://www.iitb.ac.in/">IIT Bombay</a></li>
-            <li><a class="footer-links" href="https://fossee.in/">FOSSEE</a></li>
-            <li><a class="footer-links" href="https://www.iittnif.org/">IITTNiF</a></li>
-            <li><a class="footer-links" href="https://spoken-tutorial.org/">Spoken Tutorial</a></li>
+            <li><a class="footer-links" href="https://www.iitb.ac.in/" target="_blank">IIT Bombay</a></li>
+            <li><a class="footer-links" href="https://fossee.in/" target="_blank">FOSSEE</a></li>
+            <li><a class="footer-links" href="https://www.iittnif.org/" target="_blank">IITTNiF</a></li>
+            <li><a class="footer-links" href="https://spoken-tutorial.org/" target="_blank">Spoken Tutorial</a></li>
         </ul>
     </div>
     <div class="footer-content">
         <ul>
             <h2>Resources</h2>
-            <li><a class="footer-links" href="https://qgis.org/en/site/forusers/download.html">QGIS</a></li>
-            <li><a class="footer-links" href="https://spoken-tutorial.org/tutorial-search/?search_foss=QGIS&search_language=English">Spoken Tutorials - FOSSEE - QGIS</a></li>
+            <li><a class="footer-links" href="https://qgis.org/en/site/forusers/download.html" target="_blank">QGIS</a></li>
+            <li><a class="footer-links" href="https://spoken-tutorial.org/tutorial-search/?search_foss=QGIS&search_language=English" target="_blank">Spoken Tutorials - FOSSEE - QGIS</a></li>
         </ul>
     </div>
     <div class="license-container">
-        <a href="http://creativecommons.org/licenses/by-sa/4.0/">
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
             <img class ="license-img" alt="Creative Commons License" style="border-width:0" src="https://iitb-isro-aicte-mapathon.fossee.in/static/cms/uploads/images/88x31.png">
         </a>
-        <p class="license">This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License .</p>    
+        <p class="license">This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.</p>    
     </divmcl>
 </div>
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d251d8a..af08977 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -19,7 +19,7 @@ import 'bootstrap/dist/css/bootstrap.css'
         flex-direction: row;
         justify-content: space-around;
         align-items: center;
-        width: 100vw;
+        width: 100%;
         height: 80vh;
         padding: 1vh;
         background-color: rgb(252, 230, 188);
@@ -42,13 +42,13 @@ import 'bootstrap/dist/css/bootstrap.css'
     }
     .hack-heading{
         font-family: 'Roboto Slab', serif !important;
-        font-size: 5vh;
+        font-size: 4.6vh;
         text-align: center;
         word-wrap: break-word;
     }
     .hack-img img{
         margin-top: 20px;
-        height: 35vh;
+        height: 31vh;
         width: 100%;
     }
 
@@ -84,7 +84,10 @@ import 'bootstrap/dist/css/bootstrap.css'
         }
     }
 
-    @media screen and (max-width: 613px) {
+    @media screen and (max-width: 754px) {
+        .registration{
+            margin-top: 10vh;
+        }
         .head{
             flex-direction: column-reverse;
             height: 100vh;
@@ -110,18 +113,18 @@ import 'bootstrap/dist/css/bootstrap.css'
 
     @media screen and (max-width: 982px) {
         .head{
-            margin-top: 9vh;
+            margin-top: 8vh;
         }
     }
 
-    @media screen and (max-width: 602px){
+    /* @media screen and (max-width: 580px){
         .head{
-            margin-top: 9vh;
+            margin-top: 7vw;
         }
         .nav{
             margin: 1vh;
         }
-    }
+    } */
 
 
 
diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro
index 2a973bd..6e295a2 100644
--- a/src/components/HomeBody.astro
+++ b/src/components/HomeBody.astro
@@ -109,7 +109,7 @@ const coreteam: CoreTeam[] = [
 <div class="registration-container" id ="register">
     <h1 class="intro">Registration</h1>
     <p>Please click on the following button to register yourself for the Hackathon</p>
-    <div class="hack-button"> <a href="https://forms.gle/aVopwiwmRM35FXQT8"><button class="btn-register slide-right">Register</button></a></div>
+    <div class="hack-button"> <a href="https://forms.gle/aVopwiwmRM35FXQT8" target="_blank"><button class="btn-register slide-right">Register</button></a></div>
 </div>
 
 
@@ -161,7 +161,7 @@ const coreteam: CoreTeam[] = [
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props}>
             <path fill="black" d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-2.2 2L16 14.78L6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" />
         </svg>
-        Email : <a href="mailto:contact-oshw@fossee.in ">contact-oshw[at]fossee[dot]in </a>
+        Email : <a href="mailto:contact-oshw@fossee.in" target="_blank">contact-oshw[at]fossee[dot]in </a>
     </p>
 </div>
 
@@ -175,6 +175,7 @@ const coreteam: CoreTeam[] = [
         flex-direction: column;
         justify-content: center;
         padding: 0 10vh;
+        width: 100%;
     }
     .intro{
         color: rgb(2, 2, 110);
@@ -299,8 +300,18 @@ const coreteam: CoreTeam[] = [
         text-align: center;
         font-size: 2.5vh;
         padding: 1vh 0;
-        /* font-weight: 500; */
+        font-weight: 500;
     }
+    .email a{
+        text-decoration: none;
+        color: rgb(31, 104, 128);
+    }
+
+    .email a:hover{
+        color: blue;
+        text-decoration: underline;
+    }
+
     .email svg{
         display: inline;
         margin: 0 1vh
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index ac7f4d7..425b65c 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -7,12 +7,12 @@ interface Routes {
 
 const routes : Routes[] = [
   { path: '/', name: 'Home' },
-  { path: '#purpose', name: 'About' },
+  { path: '/#purpose', name: 'About' },
   { path: '/resources', name: 'Resources' },
   { path: '/schedule', name: 'Schedule' },
-  { path: '#register', name: 'Register' },
-  { path: '#partners', name: 'Partners' },
-  { path: '#contact-us', name: 'Contact Us' },
+  { path: '/#register', name: 'Register' },
+  { path: '/#partners', name: 'Partners' },
+  { path: '/#contact-us', name: 'Contact Us' },
 
 ]
 ---
@@ -133,24 +133,28 @@ const routes : Routes[] = [
     .navbar {
       font-family: 'Roboto', sans-serif;
       display: flex;
-      justify-content: space-around;
-      padding: 0 10.8vw;
+      justify-content: center;
+      padding: 0;
       background-color: rgb(252, 230, 188);
       position: sticky;
       top: 0%; /* Add this line */
       z-index: 1000;
     }
     .navbar a {
-      font-size: 2.4vh;
+      font-size: 2.2vh;
       font-weight:600;
       text-decoration: none;
-      padding: 18px;
+      padding: 1.7vh 1.5vw;
     }
     .navbar a:hover{
       background-color: rgb(1, 1, 131);
       color: white;
     }
 
+    @media screen and (max-width: 550px){
+      
+    }
+
     @media screen and (max-width: 613px) {
       .container {
         width: 100%; /* Adjust as needed */
@@ -169,23 +173,34 @@ const routes : Routes[] = [
       .off-screen-menu{
         top: 20%;
       }
+      .active{
+        top: 13%;
+      }
     }
-    @media screen and (max-width: 982px){
-      .hamburger-navbar{
-        display: block;
+    @media screen and (min-width: 772px) and (max-width: 982px){
+      .nav{
+        padding: 1.3rem;
+      }
+      .active{
+        top: 12vh;
       }
+    }
+    @media screen and (max-width: 982px){
       .navbar{
         display: none;
       }
-      .nav{
-        padding: 1.3rem;
+      .hamburger-navbar{
+        display: block;
+      }
+      nav{
+        width: 100vh;
       }
+      
     }
     @media screen and (min-width: 983px){
       .off-screen-menu{
         display: none;
       }
-
     }
 
   </style>
@@ -199,5 +214,8 @@ const routes : Routes[] = [
     hamMenu.classList.toggle('active');
     if(offScreenMenu)
       offScreenMenu.classList.toggle('active');
+    if(window.innerWidth >= 982){
+      offScreenMenu?.classList.remove('active');
+    }
   })
 </script>
diff --git a/src/components/ResourcesBody.astro b/src/components/ResourcesBody.astro
index b1204c3..69ecdb9 100644
--- a/src/components/ResourcesBody.astro
+++ b/src/components/ResourcesBody.astro
@@ -28,6 +28,7 @@ import Accordion from './Accordion.astro'
         .resources-heading h1{
             font-size: 4.5vh;
             padding: 3vh 10%;
+            margin-top: 10vh;
         }
     }
   </style>
diff --git a/src/components/ScheduleBody.astro b/src/components/ScheduleBody.astro
index a143cbe..bc79e5d 100644
--- a/src/components/ScheduleBody.astro
+++ b/src/components/ScheduleBody.astro
@@ -111,6 +111,7 @@ const scheduleItems : ScheduleItem[] = [
         }
         .schedule-heading h1{
             font-size: 5vh;
+            margin-top: 10vh;
         }
         .weeks p{
             border-left: 2px solid blue;
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro
index b8978c4..e3bfe70 100644
--- a/src/components/TopBar.astro
+++ b/src/components/TopBar.astro
@@ -46,6 +46,13 @@ import 'bootstrap/dist/css/bootstrap.css'
   </div>
   
   <style>
+
+    a{
+      cursor: pointer;
+    }
+    a .big-img{
+      cursor:auto;
+    }
     .banner-content div div{
       align-items: center;
     }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0be8914..6922ee9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -39,9 +39,9 @@ const { title } = Astro.props;
 		background-size: 224px;
 	}
 	body{
-		width: 100vw;
+		width: 100%;
 		overflow-x: hidden;
-		min-width: 100vw;
+		min-width: 460px;
 		/* min-height: 100vh; */
 	}
 	code {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 96c1f83..b7a9603 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,7 @@ import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import HomeBody from '../components/HomeBody.astro';
 import IconBar from '../components/IconBar.astro';
+import TestNavbar from '../components/TestNavbar.astro';
 ---
 
 <Layout title="Welcome to FOSSEE.">
@@ -13,6 +14,7 @@ import IconBar from '../components/IconBar.astro';
 		<div class="main">
 			<TopBar />
 			<Navbar />
+			<!-- <TestNavbar /> -->
 			<Header />
 			<IconBar />
 			<HomeBody />