Nav color improvements & cleanup

GDYUClub · Apr 16, 2024 · f6e4def · f6e4def
1 parent 4fefa16
commit f6e4def
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 82 deletions.
diff --git a/src/lib/navMode.js b/src/lib/navMode.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export default writable('dark');
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,6 +3,8 @@
     import About from './about.svelte';
     import Programs from './programs.svelte';
     import Projects from './projects.svelte';
+    import navMode from '$lib/navMode'
+    $navMode = "dark"
 </script>
 <Hero/>
 <About/>

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -1,28 +1,7 @@
 <script>
-  // import * as Accordion from "$lib/components/ui/accordion";
-  import About from '.././about.svelte';
+    import About from '.././about.svelte'
+    import navMode from '$lib/navMode'
+    $navMode = "yellow"
 </script>
 
 <About/>
-
-<!-- <Accordion.Root class="w-3/5 sm:max-w-[70%] monofont">
-  <Accordion.Item value="item-1">
-    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
-    <Accordion.Content>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2">
-    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
-    <Accordion.Content>
-      Yes. It comes with default styles that matches the other components'
-      aesthetic.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3">
-    <Accordion.Trigger>Is it animated?</Accordion.Trigger>
-    <Accordion.Content>
-      Yes. It's animated by default, but you can disable it if you prefer.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Root> -->
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
@@ -1,8 +1,10 @@
 <script>
-    import { page } from '$app/stores';
+    import { page } from '$app/stores'
+    import navMode from '$lib/navMode'
+
     function navTextColor (route) {
         let unselectedText = 'yellowText'
-        if ($page.url.pathname.startsWith('/zine/'))
+        if ($navMode == "yellow")
         {
             unselectedText = 'darkText'
             if (route == '/zine')
@@ -15,13 +17,7 @@
     }
 
     function navColor () {
-        let color = 'dark'
-        if ($page.url.pathname.startsWith('/zine/'))
-        {
-            color = 'yellow'
-        }
-
-        return color
+        return $navMode
     }
 </script>
 

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -1,23 +1,25 @@
 
 <script>
-  import { onMount } from "svelte";
-  import ProjectCard from "$lib/components/ui/project-card/project-card.svelte";
-  export let clubProjects = [];
-
-  onMount(async () => {
-    const response = await fetch("/api/jam-games");
-    let jamGames = (await response.json()).data;
-
-    jamGames.forEach((game) => {
-      clubProjects.push({
-        name: game.game.title,
-        author: game.game.user.name,
-        url: game.game.url,
-        image: game.game.cover,
-      });
-    });
-
-    clubProjects = clubProjects;
+    import navMode from '$lib/navMode'
+    $navMode = "yellow"
+    import { onMount } from "svelte";
+    import ProjectCard from "$lib/components/ui/project-card/project-card.svelte";
+    export let clubProjects = [];
+
+    onMount(async () => {
+        const response = await fetch("/api/jam-games");
+        let jamGames = (await response.json()).data;
+
+        jamGames.forEach((game) => {
+        clubProjects.push({
+            name: game.game.title,
+            author: game.game.user.name,
+            url: game.game.url,
+            image: game.game.cover,
+        });
+        });
+
+        clubProjects = clubProjects;
   });
 </script>
 

diff --git a/src/routes/store/+page.svelte b/src/routes/store/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import navMode from '$lib/navMode'
+  $navMode = "yellow"
   import { merchItems } from "$lib";
   /**
 	 gdyu merch list

diff --git a/src/routes/zine/+page.svelte b/src/routes/zine/+page.svelte
@@ -1,45 +1,47 @@
 <script>
-  export let data;
-  import FlashAbout from './zineAbout.svelte';
-  import CurrentEdition from './currentEdition.svelte';
+    export let data;
+    import FlashAbout from './zineAbout.svelte';
+    import CurrentEdition from './currentEdition.svelte';
+    import navMode from '$lib/navMode'
+    $navMode = "dark"
 </script>
 
 <div class="yellow">
-  <div class="flex yellow w-full">
-    <div class="flex flex-col w-1/12">
-        <div class="blue dot mx-auto -mb-1 mt-10"/>
-        <div class="blue w-0.5 mx-auto grow"/>
-        <div class="blue diamond mx-auto -mt-1 mb-10"/>
-    </div>
+    <div class="flex yellow w-full">
+        <div class="flex flex-col w-1/12">
+            <div class="blue dot mx-auto -mb-1 mt-10"/>
+            <div class="blue w-0.5 mx-auto grow"/>
+            <div class="blue diamond mx-auto -mt-1 mb-10"/>
+        </div>
 
-    <div class="w-10/12 flex flex-col flashHero justify-center">
-      <div class="mx-auto">
-        <p class="darkText">GDYU Presents...</p>
-        <div class="pinkText pinkTextFlash mx-auto z-10">FLASH!</div>
-        <p class="darkText float-right">An Original Zine</p>
-      </div>
-    </div>
+        <div class="w-10/12 flex flex-col flashHero justify-center">
+            <div class="mx-auto">
+                <p class="darkText">GDYU Presents...</p>
+                <div class="pinkText pinkTextFlash mx-auto z-10">FLASH!</div>
+                <p class="darkText float-right">An Original Zine</p>
+            </div>
+        </div>
 
-    <div class="flex flex-col w-1/12">
-        <div class="pink dot mx-auto -mb-1 mt-10"/>
-        <div class="pink w-0.5 mx-auto grow"/>
-        <div class="pink diamond mx-auto -mt-1 mb-10"/>
+        <div class="flex flex-col w-1/12">
+            <div class="pink dot mx-auto -mb-1 mt-10"/>
+            <div class="pink w-0.5 mx-auto grow"/>
+            <div class="pink diamond mx-auto -mt-1 mb-10"/>
+        </div>
     </div>
-  </div>
 
-  <div class="flex pink w-full rounded-t-3xl flashApply">
-    <div class="flex flex-col w-1/12">
-      <div class="blue dot mx-auto -mb-1 mt-10"/>
-      <div class="blue w-0.5 mx-auto grow"/>
-      <div class="blue diamond mx-auto -mt-1 mb-10"/>
+    <div class="flex pink w-full rounded-t-3xl flashApply">
+        <div class="flex flex-col w-1/12">
+        <div class="blue dot mx-auto -mb-1 mt-10"/>
+        <div class="blue w-0.5 mx-auto grow"/>
+        <div class="blue diamond mx-auto -mt-1 mb-10"/>
     </div>
 
     <div class="w-10/12 flex flex-col">
-      <div class="yellowText mx-auto blockHeaderTextLG mt-10">WE WANT YOU!</div>
-      <div class="darkText mx-auto blockHeaderText">APPLICATIONS OPEN</div>
-      <a href="https://docs.google.com/forms/d/e/1FAIpQLSdvayep1gzVcGPeAyZzyqEHGDhGKKwzyRoNsAJ2uNOCFnYsVw/viewform"
-         class="applyButton mx-auto mb-10 px-10 py-5 mt-10 rounded-xl"
-         target="_blank">APPLY</a>
+        <div class="yellowText mx-auto blockHeaderTextLG mt-10">WE WANT YOU!</div>
+        <div class="darkText mx-auto blockHeaderText">APPLICATIONS OPEN</div>
+        <a href="https://docs.google.com/forms/d/e/1FAIpQLSdvayep1gzVcGPeAyZzyqEHGDhGKKwzyRoNsAJ2uNOCFnYsVw/viewform"
+            class="applyButton mx-auto mb-10 px-10 py-5 mt-10 rounded-xl"
+            target="_blank">APPLY</a>
     </div>
   </div>
 </div>

diff --git a/src/routes/zine/articles/[slug]/+page.svelte b/src/routes/zine/articles/[slug]/+page.svelte
@@ -1,6 +1,8 @@
 <script>
   export let data;
   import { page } from '$app/stores';
+  import navMode from '$lib/navMode'
+  $navMode = "dark"
 </script>
 
 <div class="flex md:flex-row flex-col dark">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { writable } from 'svelte/store';

		export default writable('dark');