Finish setting up the project. Moving to implementation

README.md

@@ -8,14 +8,15 @@
 # Tech stack
 ## Frontend
 - SvelteKit (Svelte v5, Kit v2)
-- Frontend options:
   - JavaScript with JSDoc
-  - TailwindCSS (v4.0)
   - [Svelte Auto Adapter](https://svelte.dev/docs/kit/adapters)
+- TailwindCSS (v4.0)
+- Bits-UI (v1.22): Headless Component Library https://bits-ui.com
+
 - [`bun`](https://bun.sh) as Node.js package manager (similar to `npm`, `yarn`, `pnpm`, and `deno` v2)
 
 ## Content Management System (CMS)
-- Strapi CMS (v5)
+- Sanity CMS
 
 # Development guide
 - Clone the repo, install dependencies, and start dev environment:

src/app.css

@@ -1,10 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
+
 @theme {
     --color-ecsess-200: #A9B7A0;
     --color-ecsess-400: #5C8A5C;
     --color-ecsess-600: #3B6A3A;
     --color-ecsess-800: #0A3D2A;
     --color-ecsess-black: #1F1F1F;
-}
+}
+
+* {
+    font-family: "Saira", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+}
+
+h1 {
+    @apply text-3xl font-bold py-4;
+}
+
+.page-title {
+    @apply text-7xl font-bold py-4;
+}

src/components/Footer.svelte

@@ -2,9 +2,11 @@
 	const year = new Date().getFullYear();
 </script>
 
-<footer class="border-ecsess-black m-12 flex h-fit flex-col items-center justify-between border-t-2">
+<footer
+	class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 py-4"
+>
 	<div>
-		<p class="text-content py-3 text-center">
+		<p class="text-ecsess-200 py-3 text-center">
 			Created by ECSESS with love {'<3'}. <br />
 			&copy; {year} under GNU General Public License v3.0.
 		</p>

src/components/NavBar.svelte

@@ -1,15 +1,18 @@
 <script>
 	import NavButton from './NavButton.svelte';
-    
+	import ECSESS from 'assets/ECSESS.png';
 </script>
 
-<nav class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 pt-4">
+<nav
+	class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 pt-2"
+>
+	<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
 	<NavButton href="/">Home</NavButton>
 	<NavButton href="/council">Meet the council</NavButton>
 	<NavButton href="/events">Events</NavButton>
 	<NavButton href="/resources">Resources</NavButton>
 	<NavButton href="/join">Join ECSESS</NavButton>
-    {#if import.meta.env.DEV} 
+	{#if import.meta.env.DEV}
-    <NavButton href="/components">Componenets</NavButton>
+		<NavButton href="/showroom">Componenets</NavButton>
-    {/if}
+	{/if}
 </nav>

src/components/Section.svelte

@@ -1,7 +1,17 @@
 <script>
-    let { children = () => "Section placeholder" } = $props();
+	let { children = () => 'Section placeholder', black = false } = $props();
 </script>
 
-<div class="container mx-auto px-4 py-6 flex flex-col items-center justify-center gap-4 text-center">
+{#if black}
-    {@render children()}
+	<div
-</div>
+		class="bg-ecsess-black mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
+	>
+		{@render children()}
+	</div>
+{:else}
+	<div
+		class="bg-ecsess-800 mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
+	>
+		{@render children()}
+	</div>
+{/if}

src/routes/+layout.svelte

@@ -7,11 +7,5 @@
 </script>
 
 <Navbar />
-<div class="h-screen bg-ecsess-800">
+{@render children()}
-	{@render children()}
+<Footer />
-	<Footer />
-</div>
-
-<style>
-    @reference tailwindcss;
-</style>

src/routes/+page.svelte

@@ -1,10 +1,37 @@
+<script>
+	import Section from 'components/Section.svelte';
+
+	// Getting info from ECSESS CMS
+	let description =
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+
 <title> McGill ECSESS </title>
 
-<div class='flex flex-col items-center justify-center h-1/2 text-center'>
+<!-- ECSESS Introduction -->
-    <h1>
+<Section>
-        Welcome to the ECSESS website!
+	<div class="flex h-1/2 flex-col items-center justify-center text-center">
-    </h1>
+		<p class="page-title">What is ECSESS?</p>
-    <p>
+
-        This is a work in progress. Check back soon for updates!
+		<p>{description}</p>
-    </p>
+	</div>
-</div>
+</Section>
+
+<!-- Picture, FAQ -->
+<Section black>
+	<div class="flex justify-around gap-12">
+		<div>
+			<p>PICTURES</p>
+		</div>
+		<div>
+			<p>FAQ</p>
+		</div>
+	</div>
+</Section>
+
+<!-- Office Hours Calendar -->
+<Section>
+	<div>
+		<p class="text-2xl">Office Hours</p>
+	</div>
+</Section>

src/routes/council/+page.svelte

@@ -5,8 +5,8 @@
 <title> ECSESS council </title>
 
 <Section>
-	<h1>Meet the ECSESS council!</h1>
+	<p class="page-title">Meet the ECSESS council!</p>
-	<hr />
+
 	<p>Group picture!</p>
 
 	<p>Here are the members of the ECSESS council!</p>

svelte.config.js

@@ -8,6 +8,7 @@ const config = {
 		alias: {
             // So you can import with `from 'components/...'`
             'components': 'src/components/',
+			'assets': 'src/assets'
         }
 	},