From be22aa35e733119139eb700513f12688931be2ba Mon Sep 17 00:00:00 2001
From: Manurbhav
Date: Sat, 27 Apr 2024 20:28:11 +0530
Subject: 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.
---
src/components/Accordion.astro | 4 ++--
src/components/Footer.astro | 16 ++++++-------
src/components/Header.astro | 19 +++++++++-------
src/components/HomeBody.astro | 17 +++++++++++---
src/components/Navbar.astro | 46 ++++++++++++++++++++++++++------------
src/components/ResourcesBody.astro | 1 +
src/components/ScheduleBody.astro | 1 +
src/components/TopBar.astro | 7 ++++++
src/layouts/Layout.astro | 4 ++--
src/pages/index.astro | 2 ++
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) => (
- {bodyLine.text}
+ {bodyLine.text}
))
}
@@ -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 @@
-
+
-
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License .
+
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Registration
Please click on the following button to register yourself for the Hackathon
-
+
@@ -161,7 +161,7 @@ const coreteam: CoreTeam[] = [
- Email : contact-oshw[at]fossee[dot]in
+ Email : contact-oshw[at]fossee[dot]in
@@ -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;
}
-
}
@@ -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');
+ }
})
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;
}
}
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'