CampusSyncUp · Vianpyro · Jan 19, 2025 · Jan 16, 2025
diff --git a/src/assets/ets.svg b/src/assets/ets.svg
diff --git a/src/assets/logo-original.svg b/src/assets/logo-original.svg
diff --git a/src/components/Post.astro b/src/components/Post.astro
@@ -43,10 +43,6 @@ const formattedDate = now.toLocaleString();
 </Fragment>
 
 <style>
-    * {
-        color: black;
-    }
-
     article {
         display: flex;
         gap: 1rem;

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -10,7 +10,6 @@ const { title } = Astro.props;
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
     </head>
@@ -52,7 +51,6 @@ const { title } = Astro.props;
 
 <style>
     main {
-        background-color: var(--font-color);
         flex: 1;
         overflow-y: auto;
         width: 100%;
@@ -63,7 +61,6 @@ const { title } = Astro.props;
     }
 
     nav > ul {
-        background-color: var(--font-color);
         display: flex;
         justify-content: space-around;
     }

diff --git a/src/layouts/MenuLayout.astro b/src/layouts/MenuLayout.astro
@@ -9,7 +9,6 @@ const { title } = Astro.props;
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
     </head>

diff --git a/src/pages/feed.astro b/src/pages/feed.astro
@@ -11,12 +11,10 @@ const components = [
     {
         title: "This is another post",
         description: "The feed will be like LinkedIn's feed.",
-        date: "2021-10-02",
     },
     {
         title: "This is a third post",
         description: "Users will share their projects, thoughts, and more.",
-        date: "2021-10-03",
     },
     {
         title: "This is a fourth post",
@@ -27,7 +25,7 @@ const components = [
 
 <MainLayout title="Feed">
     <nav>
-        <span><Icon icon="ets" /></span>
+        <span><Icon icon="logo-original" /></span>
         <div>
             <span><Icon icon="bell" /></span>
             <span><Icon icon="message" /></span>
@@ -39,7 +37,6 @@ const components = [
                 <Post
                     title={component.title}
                     description={component.description}
-                    date={component.date}
                 />
             ))
         }
@@ -56,10 +53,6 @@ const components = [
         overflow-y: auto;
     }
 
-    * {
-        color: black;
-    }
-
     #feed {
         flex: 1;
     }
@@ -70,7 +63,6 @@ const components = [
         height: 2rem;
         position: sticky;
         top: 0;
-        background-color: white;
     }
 
     nav > span:first-child {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,8 +6,8 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
 
 <MenuLayout title="Welcome to TindÉTS">
     <div id="loading-screen">
-        <div id="logo-ets">
-            <Icon icon="ets" />
+        <div id="logo">
+            <Icon icon="logo-original" />
         </div>
         <LoadingSpinner size="10vw" />
     </div>
@@ -28,7 +28,7 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
         flex: 1;
     }
 
-    #logo-ets {
+    #logo {
         width: 100vw;
         height: 100vw;
     }

diff --git a/src/pages/login.astro b/src/pages/login.astro
@@ -5,8 +5,8 @@ import MenuLayout from "../layouts/MenuLayout.astro";
 
 <MenuLayout title="Login">
     <div id="login-page">
-        <div id="logo-ets">
-            <Icon icon="ets" />
+        <div id="logo">
+            <Icon icon="logo-original" />
         </div>
         <form id="login-form">
             <input type="text" placeholder="Universal Code" />
@@ -61,7 +61,7 @@ import MenuLayout from "../layouts/MenuLayout.astro";
         gap: 1rem;
     }
 
-    #logo-ets {
+    #logo {
         display: flex;
         justify-content: center;
         width: 50vw;

diff --git a/src/pages/matches.astro b/src/pages/matches.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Matches</h1>
+    <h2>Find new friends here</h2>
+</MainLayout>
diff --git a/src/pages/post.astro b/src/pages/post.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Post</h1>
+    <h2>Share your thoughts here</h2>
+</MainLayout>
diff --git a/src/pages/profile.astro b/src/pages/profile.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Profile</h1>
+    <h2>Manage your personal information here</h2>
+</MainLayout>
diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -0,0 +1,8 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <h1>Search</h1>
+    <h2>Know what you're looking for? Find it here!</h2>
+</MainLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,11 +1,39 @@
 :root {
-    --background-color: #e3022c;
-    --font-color: #fefefe;
+    color-scheme: light dark;
+
+    /* Colors */
+    --color-primary: light-dark(#67F498, #2D8C4E);
+    --color-secondary: light-dark(#BCD2FF, #4A66B8);
+    --color-tertiary: light-dark(#B894ED, #6A4BA5);
+    --color-quaternary: light-dark(#F25F6C, #A13A43);
+    --color-quinary: light-dark(#FC8FBE, #A54A73);
+    --color-senary: light-dark(#FFC196, #A56442);
+    --color-septenary: light-dark(#FEF198, #A39E40);
+    --color-error: red;
+    --color-success: green;
+
+    /* Typography */
+    --font-family: 'Roboto', sans-serif;
+    --font-size-heading: 2rem;
+    --font-size-title: 1.6rem;
+    --font-size-body: 1.1rem;
+
+    /* Spacing */
+    --spacing-small: 0.4rem;
+    --spacing-medium: 1.6rem;
+    --spacing-large: 3.2rem;
+
+    /* Curvature */
+    --border-radius-small: 0.4rem;
+    --border-radius-medium: 1.6rem;
+    --border-radius-large: 3.2rem;
+
+    /* Personalized elements */
+    --icon-size: 2rem;
 }
 
 * {
-    color: var(--font-color);
-    font-family: sans-serif;
+    font-family: var(--font-family);
     margin: 0;
     padding: 0;
     transition-duration: .5s;
@@ -18,7 +46,6 @@ a {
 
 body {
     align-items: center;
-    background-color: var(--background-color);
     display: flex;
     flex-direction: column;
     height: 100svh;