From 94c1879b405e5a049ac80a979a7d517dbb7eafd3 Mon Sep 17 00:00:00 2001 From: Harsh Khandeparkar Date: Tue, 26 Sep 2023 14:14:38 +0530 Subject: [PATCH 1/2] feat: updated events data --- src/components/EventCard.astro | 6 ++--- src/data/events.json | 41 ++++++++++++---------------------- src/pages/events.astro | 0 src/types/events.ts | 22 +++++++++--------- 4 files changed, 28 insertions(+), 41 deletions(-) create mode 100644 src/pages/events.astro diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 0100b76..0a0e67f 100644 --- a/src/components/EventCard.astro +++ b/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; --- - +
Workshop Poster
@@ -122,7 +122,7 @@ const { title, description, date, time, poster_img, location, link } = Astro.pro text-align: center; - top: 75%; + top: 70%; bottom: 0; padding: 0.5rem 1rem; diff --git a/src/data/events.json b/src/data/events.json index dba717f..c9f36d2 100644 --- a/src/data/events.json +++ b/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/ubuntu-install/ubuntu-install-19.svg", + "id": "lif-23" } ] \ No newline at end of file diff --git a/src/pages/events.astro b/src/pages/events.astro new file mode 100644 index 0000000..e69de29 diff --git a/src/types/events.ts b/src/types/events.ts index 240f3dd..bfa681e 100644 --- a/src/types/events.ts +++ b/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; -} \ No newline at end of file + title: string; + description: string; + date: IEventDate; + time: string; + location: string; + poster_img: string; + id: string; +} From f1954311402e05f2a93932e6ddbd090b2aafc2d7 Mon Sep 17 00:00:00 2001 From: SachdevJai Date: Wed, 18 Oct 2023 21:23:57 +0530 Subject: [PATCH 2/2] added event cards --- src/components/EventCard.astro | 41 ++++++++++++------- src/data/events.json | 2 +- src/pages/events.astro | 73 ++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 15 deletions(-) diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 0a0e67f..7a76780 100644 --- a/src/components/EventCard.astro +++ b/src/components/EventCard.astro @@ -55,7 +55,8 @@ const { title, description, date, time, poster_img, location, id } = Astro.props @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, id } = Astro.props @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, id } = Astro.props position: absolute; display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-end; gap: 0.5rem; text-align: center; - top: 70%; + 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, id } = Astro.props 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%; diff --git a/src/data/events.json b/src/data/events.json index c9f36d2..5fae933 100644 --- a/src/data/events.json +++ b/src/data/events.json @@ -22,7 +22,7 @@ }, "time": "2 PM", "location": "NR121", - "poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/ubuntu-install/ubuntu-install-19.svg", + "poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/linux-install-fest/linux-install-23-autumn.png", "id": "lif-23" } ] \ No newline at end of file diff --git a/src/pages/events.astro b/src/pages/events.astro index e69de29..7eb0978 100644 --- a/src/pages/events.astro +++ b/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"; +--- + + + + +
+

</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>