Events page

src/components/EventCard.astro

@@ -5,10 +5,10 @@ import Icon from "./Icon.astro";
 
 interface Props extends IEvent {}
 
-const { title, description, date, time, poster_img, location, link } = Astro.props as Props;
+const { title, description, date, time, poster_img, location, id } = Astro.props as Props;
 ---
 
-<a class="card" href={link}>
+<a class="card" href={`/events/${id}`}>
   <div class="card-img-wrapper">
     <img class="card-img" src={poster_img} alt="Workshop Poster" />
   </div>
@@ -55,7 +55,8 @@ const { title, description, date, time, poster_img, location, link } = Astro.pro
 
     @include raised;
 
-    width: 28%;
+    width: 35vw;
+    max-width: 300px;
     transition: all 300ms;
 
     min-height: fit-content;
@@ -64,6 +65,8 @@ const { title, description, date, time, poster_img, location, link } = Astro.pro
     @media screen and (max-device-width: $screen-md-max) {
       width: 100%;
     }
+
+    padding: 1px;
   }
 
   .reveal-on-hover {
@@ -117,45 +120,50 @@ const { title, description, date, time, poster_img, location, link } = Astro.pro
     position: absolute;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-end;
     gap: 0.5rem;
 
     text-align: center;
 
-    top: 75%;
+    top: 69%;
     bottom: 0;
-    padding: 0.5rem 1rem;
+    padding: 2.5rem 1rem 0rem 1rem;
 
     width: 100%;
 
     @media screen and (max-device-width: $screen-md-max) {
       bottom: 0;
-      top: auto;
-
       font-size: min(1rem, 2.8cqi);
     }
 
     .card-desc {
       color: $text-secondary;
-      font-size: min(1rem, 1cqi);
+      font-size: min(1rem, 1.2cqi);
 
       @media screen and (max-device-width: $screen-md-max) {
-        font-size: min(1rem, 2.8cqi);
+        font-size: min(2rem, 2.8cqi);
       }
     }
 
     .card-title {
-      font-size: max(1.4cqi, 1rem);
+      font-size: max(1.2cqi, 1rem);
 
       @media (max-width: #{$screen-md-max}) {
         font-size: min(1.3rem, 3.8cqi);
       }
     }
 
-    .card-footer {
-      padding-top: 1rem;
-      padding-bottom: 0.5rem;
+    .card-header {
+      border-bottom: 1px solid $accent-color;
+      padding-bottom: 1.5rem;
+      font-size: max(1.4cqi, 1rem);
 
+      @media (max-width: #{$screen-md-max}) {
+        padding-bottom: 0.5rem;
+        font-size: min(1.3rem, 3.8cqi);
+      }
+    }
+    .card-footer {
       display: flex;
       flex-direction: row;
       gap: 1rem;
@@ -164,9 +172,14 @@ const { title, description, date, time, poster_img, location, link } = Astro.pro
       fill: $accent-color;
       color: $text-primary;
 
-      border-top: 1px solid $accent-color;
+      padding-top: 0.5rem;
+      padding-bottom: 1.5rem;
+
+      @media (max-width: #{$screen-md-max}) {
+        padding-bottom: 0.5rem;
+      }
 
-      font-size: min(1rem, 1cqi);
+      font-size: min(1rem, 1.5cqi);
 
       @media screen and (max-device-width: $screen-md-max) {
         width: 100%;

src/data/events.json

@@ -1,41 +1,28 @@
 [
-	{
-		"title": "Ubuntu Install Fest",
-		"description": "Learn how to install Linux on your PC.",
-		"date": {
-			"day": 10,
-			"month": 9,
-			"year": 2023
-		},
-		"time": "2 PM",
-		"location": "NR222",
-		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/ubuntu-install/ubuntu-install-19.svg",
-		"link": "/events/install-fest"
-	},
 	{
 		"title": "Git and Github Workshop",
 		"description": "Introduction to Git and GitHub.",
 		"date": {
-			"day": 11,
-			"month": 8,
+			"day": 2,
+			"month": 9,
 			"year": 2023
 		},
-		"time": "3 PM",
-		"location": "V2",
-		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/git-github/git-github-20.png",
-		"link": "/events/git-and-github"
+		"time": "2 PM",
+		"location": "NR121",
+		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/git-github/git-github-autumn-23.png",
+		"id": "git-and-github-autumn-23"
 	},
 	{
-		"title": "Python Workshop",
-		"description": "Introduction to the Python programming language.",
+		"title": "Linux Install Fest",
+		"description": "Getting started with Linux and dual booting.",
 		"date": {
-			"day": 20,
-			"month": 9,
+			"day": 7,
+			"month": 10,
 			"year": 2023
 		},
-		"time": "3 PM",
-		"location": "NR123",
-		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/python/python-23.png",
-		"link": "/events/python-workshop"
+		"time": "2 PM",
+		"location": "NR121",
+		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/linux-install-fest/linux-install-23-autumn.png",
+		"id": "lif-23"
 	}
 ]

src/pages/events.astro

@@ -0,0 +1,73 @@
+---
+import Section from "../components/Section.astro";
+import Layout from "../layouts/Layout.astro";
+import Title from "../components/Title.astro";
+import Eventcard from "../components/EventCard.astro";
+
+import EVENTS from "../data/events.json";
+---
+
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro" />
+
+<Layout title="events">
+  <div id="title-container">
+    <h1 id="title"><Title title="Events" /></h1>
+  </div>
+  <ul role="list" class="event-card-grid">
+    {
+      EVENTS.length > 0 &&
+        EVENTS.map((event) => (
+          <Eventcard
+            title={event.title}
+            description={event.description}
+            date={event.date}
+            time={event.time}
+            location={event.location}
+            poster_img={event.poster_img}
+            id={event.id}
+          />
+        ))
+    }
+  </ul>
+</Layout>
+
+<style lang="scss">
+  @import "../styles/index.scss";
+
+  #title-container {
+    font-size: 3em;
+
+    text-align: center;
+
+    margin-top: 15vh;
+    margin-right: -3rem;
+
+    @media only screen and (max-device-width: $screen-md-min) {
+      margin-right: 0;
+      font-size: 1.7em;
+    }
+  }
+
+  .event-card-grid {
+    max-width: 70%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: center;
+    grid-gap: 1.5rem;
+    margin: 2rem 3.5rem 2rem 3.5rem;
+  }
+
+  @media only screen and (min-device-width: $screen-md-min) {
+    .event-card-grid {
+      max-width: 90%;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      grid-gap: 1.5rem;
+      margin: 2rem 4.5rem 2rem 4rem;
+    }
+  }
+</style>

src/types/events.ts

@@ -1,14 +1,14 @@
 export interface IEventDate {
-	day: number;
-	month: number;
-	year: number;
+  day: number;
+  month: number;
+  year: number;
 }
 export interface IEvent {
-	title: string;
-	description: string;
-	date: IEventDate;
-	time: string;
-	location: string;
-	poster_img: string;
-	link: string;
-}
+  title: string;
+  description: string;
+  date: IEventDate;
+  time: string;
+  location: string;
+  poster_img: string;
+  id: string;
+}