From 11950a8b27e3365bf99378c199d15bc0d90a909a Mon Sep 17 00:00:00 2001 From: Technoduck Date: Wed, 18 Sep 2024 23:00:11 -0400 Subject: [PATCH] updated colorscheme and added dark mode --- astro.config.mjs | 7 ++-- package-lock.json | 6 +-- src/components/DarkModeSwitch.astro | 38 +++++++++++++++++ src/components/EventElement.astro | 14 +++---- src/components/MinutesElement.astro | 4 +- src/components/Navbar.astro | 14 ++++--- src/components/NavbarLink.astro | 4 +- src/events/GA.md | 12 ++++-- src/events/endyear_party.md | 5 +-- src/layouts/defaultLayout.astro | 46 ++++++++++++++++++++ src/meetings/exec_meet_2.md | 2 + src/pages/about.astro | 48 ++++++++------------- src/pages/contact.astro | 25 +++++++++++ src/pages/events.astro | 30 +++++--------- src/pages/index.astro | 53 +++++++++++------------- src/pages/meetings/[meeting_param].astro | 19 +++------ src/pages/minutes.astro | 45 ++++++++------------ src/pages/photos.astro | 42 +++++++------------ src/styles/tailwind.css | 22 ++++++++++ tailwind.config.mjs | 1 + 20 files changed, 262 insertions(+), 175 deletions(-) create mode 100644 src/components/DarkModeSwitch.astro create mode 100644 src/layouts/defaultLayout.astro create mode 100644 src/pages/contact.astro mode change 100755 => 100644 src/pages/events.astro create mode 100644 src/styles/tailwind.css diff --git a/astro.config.mjs b/astro.config.mjs index 7ecb96d..f858f6f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,8 +1,9 @@ import { defineConfig } from 'astro/config'; - import tailwind from '@astrojs/tailwind'; // https://astro.build/config export default defineConfig({ - integrations: [tailwind()] -}); \ No newline at end of file + integrations: [tailwind( + { applyBaseStyles: false } + )] +}); diff --git a/package-lock.json b/package-lock.json index bcc666c..3ee79e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6099,9 +6099,9 @@ } }, "node_modules/vite": { - "version": "5.4.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz", - "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==", + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", + "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==", "license": "MIT", "dependencies": { "esbuild": "^0.21.3", diff --git a/src/components/DarkModeSwitch.astro b/src/components/DarkModeSwitch.astro new file mode 100644 index 0000000..cac1c00 --- /dev/null +++ b/src/components/DarkModeSwitch.astro @@ -0,0 +1,38 @@ +--- +const {} = Astro.props; +--- + + + + diff --git a/src/components/EventElement.astro b/src/components/EventElement.astro index 877871b..635d5ae 100644 --- a/src/components/EventElement.astro +++ b/src/components/EventElement.astro @@ -8,11 +8,11 @@ interface Props { } const {name, time,location,description,past} = Astro.props; -var border_class = "border-y-4 p-2 border-accent-400"; -var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400"; +var border_class = "border-y-4 p-2 border-accent-400 dark:border-accent-500"; +var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400 dark:decoration-primary-500"; if (past) { - border_class = "border-y-4 p-2 border-primary-300"; - info_class = "underline underline-offset-4 decoration-4 decoration-accent-300"; + border_class = "border-y-4 p-2 border-primary-300 dark:border-primary-600"; + info_class = "underline underline-offset-4 decoration-4 decoration-accent-300 dark:decoration-accent-600"; } --- @@ -30,8 +30,8 @@ if (past) {

-

- {description} -

+

+ +
diff --git a/src/components/MinutesElement.astro b/src/components/MinutesElement.astro index d248617..09e510b 100644 --- a/src/components/MinutesElement.astro +++ b/src/components/MinutesElement.astro @@ -6,8 +6,8 @@ interface Props { } const {name, date, meeting_link} = Astro.props; -var border_class = "hover:bg-neutral-300 border-y-4 p-2 border-accent-400"; -var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400"; +var border_class = "hover:bg-neutral-300 dark:hover:bg-neutral-800 border-y-4 p-2 border-accent-400 dark:border-accent-500"; +var info_class = "underline underline-offset-4 decoration-4 decoration-primary-400 dark:decoration-primary-500"; ---
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index bebc81a..a0b427c 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -1,5 +1,6 @@ --- import NavbarLink from './NavbarLink.astro'; +import DarkModeSwitch from './DarkModeSwitch.astro' interface Props { current_page: string } @@ -8,6 +9,7 @@ const {current_page} = Astro.props;
+
@@ -16,16 +18,18 @@ const {current_page} = Astro.props; - +
- + + +
diff --git a/src/components/NavbarLink.astro b/src/components/NavbarLink.astro index c72fd8f..5ca5a44 100644 --- a/src/components/NavbarLink.astro +++ b/src/components/NavbarLink.astro @@ -5,9 +5,9 @@ interface Props { current_page?: boolean; } const { current_page, text, link} = Astro.props; -var underline_class = "block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent-500" +var underline_class = "block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent-500 dark:bg-accent-400" if (current_page) { - underline_class = "block max-w-full transition-all duration-500 h-0.5 bg-primary-600" + underline_class = "block max-w-full transition-all duration-500 h-0.5 bg-primary-600 dark:bg-primary-400" } --- diff --git a/src/events/GA.md b/src/events/GA.md index d68ede1..9954e09 100644 --- a/src/events/GA.md +++ b/src/events/GA.md @@ -1,8 +1,14 @@ --- title: General Assembly -date: September 2024 +date: 4th of October 2024 past: false -location: idk +location: TBA --- -For the love of all the gods please show up +First General Assembly of the 2024-2025 year, new executive positions will be voted on, and plans for the followings year's events will be discussed. + + +
+ +## **Free pizza will be provided** + diff --git a/src/events/endyear_party.md b/src/events/endyear_party.md index 6ef41ba..fe1d1f8 100644 --- a/src/events/endyear_party.md +++ b/src/events/endyear_party.md @@ -1,9 +1,8 @@ --- title: End of the Year party -date: May 4th 2024 +date: 4th of May 2024 past: true location: Hive --- -You should have been there - +Thank you everyone for being there! We have all enjoyed this year with you and are looking forward to the next. diff --git a/src/layouts/defaultLayout.astro b/src/layouts/defaultLayout.astro new file mode 100644 index 0000000..0231e62 --- /dev/null +++ b/src/layouts/defaultLayout.astro @@ -0,0 +1,46 @@ +--- +import '../styles/tailwind.css'; +interface Props { + title: string; + curr_navpage: string; +} +import Navbar from "../components/Navbar.astro" +const {title,curr_navpage} = Astro.props +--- + + + + + + + + + + + + {title} + + + + + + + + diff --git a/src/meetings/exec_meet_2.md b/src/meetings/exec_meet_2.md index dffde3c..145e6d0 100644 --- a/src/meetings/exec_meet_2.md +++ b/src/meetings/exec_meet_2.md @@ -8,3 +8,5 @@ date: October 2024 ## waa + +[ok](what_about_links) diff --git a/src/pages/about.astro b/src/pages/about.astro index ba09a15..8951eab 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,35 +1,21 @@ --- -import Navbar from "../components/Navbar.astro" +import DefaultLayout from "../layouts/defaultLayout.astro" --- + - - - - - - - CUBCAPS - - - - +
+

+ Hello Everyone! +

+
+

+ We are CUBCAPS,

Concordia
Undergraduate
Biochemistry,
+ Chemistry,
And
Physics
Society,
a member association for students of these departments under ASFA. +

+

+ We run an array of Events thorughout the year. + With some being social, like tabletop game or movie nights, but also research symposiums, 2 conferences one in the Fall and another in the Winter semester. +

-
-

- - explanation who we are -

-
-

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum. - -Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis. - -Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus. - -

-
- - +
+ diff --git a/src/pages/contact.astro b/src/pages/contact.astro new file mode 100644 index 0000000..6f44a5e --- /dev/null +++ b/src/pages/contact.astro @@ -0,0 +1,25 @@ +--- +import DefaultLayout from "../layouts/defaultLayout.astro" +--- + + + + + +
+

+ Our Contact information: +

+ +

+ Or if you would like, sign up for our mailing list +

+ + Subscribe + + +
+
+ + + diff --git a/src/pages/events.astro b/src/pages/events.astro old mode 100755 new mode 100644 index f2fc894..8f338ae --- a/src/pages/events.astro +++ b/src/pages/events.astro @@ -1,20 +1,10 @@ --- import EventElement from "../components/EventElement.astro" -import Navbar from "../components/Navbar.astro" - +import DefaultLayout from "../layouts/defaultLayout.astro"; const events = await Astro.glob('../events/*.md'); --- - - - - - - - CUBCAPS - - - +
@@ -30,12 +20,12 @@ events.filter((event) => !event.frontmatter.past).map((event) => name={event.frontmatter.title} time={event.frontmatter.date} location={event.frontmatter.location} - description={event.rawContent()} - past={event.frontmatter.past}/>
+ description={event.compiledContent()} + past={event.frontmatter.past}/>
) } -

+

Past Events: @@ -48,10 +38,12 @@ events.filter((event) => !event.frontmatter.past).map((event) => name={event.frontmatter.title} time={event.frontmatter.date} location={event.frontmatter.location} - description={event.rawContent()} - past={event.frontmatter.past}/>
+ description={event.compiledContent()} + past={event.frontmatter.past}/>
)}

- - + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index 7378bdf..966a472 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,33 +1,28 @@ --- -import Navbar from "../components/Navbar.astro" +import DefaultLayout from "../layouts/defaultLayout.astro" --- - - - - - - - CUBCAPS - - - -
-

CUBCAPS (this should be a better logo)

-
+ + + + +
+

CUBCAPS (this should be a better logo)

+
+ +
+

+ + Some landing page i still not sure about what it should be. +

+
+

+ maybe pictuers? some intro? overview. +

+

+ not sure yet +

+
+ + -
-

- - Some landing page i still not sure about what it should be. -

-
-

- maybe pictuers? some intro? overview. -

-

- not sure yet -

-
- - diff --git a/src/pages/meetings/[meeting_param].astro b/src/pages/meetings/[meeting_param].astro index 09a1488..35eda8e 100644 --- a/src/pages/meetings/[meeting_param].astro +++ b/src/pages/meetings/[meeting_param].astro @@ -1,5 +1,6 @@ --- import Navbar from '../../components/Navbar.astro'; +import DefaultLayout from '../../layouts/defaultLayout.astro'; export async function getStaticPaths() { @@ -20,20 +21,11 @@ export async function getStaticPaths() { const { meeting_param } = Astro.params; const { meeting } = Astro.props; --- - - - - - - - CUBCAPS - - - +
-
+

{meeting.frontmatter.name}

@@ -41,7 +33,8 @@ const { meeting } = Astro.props; {meeting.frontmatter.date}
+
- - + + diff --git a/src/pages/minutes.astro b/src/pages/minutes.astro index 852a15f..0d165c8 100644 --- a/src/pages/minutes.astro +++ b/src/pages/minutes.astro @@ -1,39 +1,30 @@ --- -import Navbar from "../components/Navbar.astro" +import DefaultLayout from "../layouts/defaultLayout.astro"; import MinutesElement from "../components/MinutesElement.astro" const meetings = await Astro.glob('../meetings/*.md'); --- + - - - - - - - CUBCAPS - - - +
-
+

+ Previous meetings +

-

- Previous meetings -

- -
+
- { -meetings.reverse().map((meeting) => ( -
- )) - } - - + { + meetings.reverse().map((meeting) => ( + +
+ )) + } -
- - +
+ diff --git a/src/pages/photos.astro b/src/pages/photos.astro index 3c52408..6ccd2e4 100644 --- a/src/pages/photos.astro +++ b/src/pages/photos.astro @@ -1,35 +1,21 @@ --- -import Navbar from "../components/Navbar.astro" +import DefaultLayout from "../layouts/defaultLayout.astro" --- + - - - - - - - CUBCAPS - - - -
-

CUBCAPS (this should be a better logo)

-
+
+

-

-

- - Some landing page i still not sure about what it should be. -

-
-

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum. + explanation who we are +

+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis velit sed nibh lobortis facilisis. Nam lacinia, purus in convallis maximus, eros nisi lacinia sapien, ac accumsan erat ipsum vitae ligula. Aliquam euismod faucibus ipsum, quis molestie est pulvinar nec. Proin egestas feugiat mollis. Vivamus vestibulum nisi tortor, ut laoreet risus eleifend ut. Quisque porta tellus et tortor lacinia, vel scelerisque neque varius. Sed tempus justo mi, nec egestas nisl ultrices quis. In fermentum velit luctus massa luctus varius. Integer augue risus, suscipit ut efficitur eu, suscipit sed justo. Vivamus diam nulla, semper at ipsum et, interdum efficitur risus. Donec dignissim sagittis erat. In dignissim bibendum augue quis sagittis. Integer nec lacus a lacus commodo varius ut sit amet elit. Pellentesque mattis congue massa non gravida. Pellentesque cursus eget ex sed imperdiet. Sed sed suscipit ipsum. -Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis. + Sed malesuada lorem non libero pellentesque, id maximus quam fermentum. Vestibulum eu eros porta, tempor eros eget, maximus augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse porta, mauris id maximus dignissim, quam ex hendrerit est, quis rutrum enim nibh a neque. Nunc eu massa sit amet lectus euismod viverra eu vel sem. Maecenas sit amet dictum lorem. Nulla ac est vel arcu rutrum pharetra. Sed mattis, lectus ac fringilla euismod, libero nisl porttitor nisl, id gravida ipsum dui viverra ex. In hac habitasse platea dictumst. Nunc lobortis rutrum augue et hendrerit. Quisque vel hendrerit ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam sodales tellus euismod justo iaculis tempus. Phasellus ultricies convallis lectus, sed aliquam tortor semper quis. -Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus. + Vestibulum et venenatis libero, non iaculis ligula. Vestibulum tempor porta viverra. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consectetur dui. Donec non mi lobortis turpis rutrum dignissim. Aenean quis tempor quam. Duis et cursus libero. Ut augue velit, mattis sed dapibus id, ornare sit amet tellus. Duis eu velit ac felis fermentum dictum. Quisque ut ultrices nisl, ac accumsan nunc. Maecenas suscipit fringilla dui sit amet vehicula. Nulla venenatis faucibus libero vitae sodales. Cras nisl sapien, dictum ut purus id, dapibus laoreet lacus. -

-
- - +

+
+ diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css new file mode 100644 index 0000000..d9bd2a5 --- /dev/null +++ b/src/styles/tailwind.css @@ -0,0 +1,22 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + p { + @apply font-normal + } + h1 { + @apply text-4xl; + } + h2 { + @apply text-2xl; + } + h3 { + @apply text-xl + } + + ol,ul { + @apply list-decimal; + } +} diff --git a/tailwind.config.mjs b/tailwind.config.mjs index ffafd15..973a137 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ export default { + darkMode: 'class', content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: {