Merge pull request #6 from GDYUClub/new-ver

Cleanup and Tweaks
GDYUClub · Apr 16, 2024 · cee3764 · cee3764
2 parents d1a0b4f + f6e4def
commit cee3764
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 144 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.svelte b/src/routes/projects.svelte
@@ -23,36 +23,46 @@
   });
 </script>
 
-<div class="flex dark h-1000">
-    <div class="block w-full">
-        <div class="absolute lineBlockRight">
-            <div class="w-1/12">
-                <div>
-                    <div class="dotV pink" />
-                    <div class="lineV pink" />
-                    <div class="diamondNarrowV pink" />
-                </div>
-            </div>
-      </div>
+<div class="dark w-full">
+
+    <div class="flex h-20 ml-10">
+        <div class="yellowText blockTopText my-auto">PROJECTS</div>
+    </div>
 
+    <div class="flex">
+        <div class="flex flex-col w-1/12">
+
+        </div>
 
-        <div class="lg:ml-48 ml-10 lg:mr-36 mr-10 mt-28">
+        <div class="w-10/12">
             <!-- TITLE -->
             <div class="yellowText blockHeaderText">
                 PROJECTS MADE BY OUR CLUB MEMBERS
             </div>
             <!-- PROJECT CARDS -->
             <div class="py-5 flex gap-4 flex-wrap">
-             {#each clubProjects as project }
-              <ProjectCard project={project} />
-             {/each}
+                {#each clubProjects as project }
+                <ProjectCard project={project} />
+                {/each}
                 <a href="/projects" class="flex viewButton w-96 py-10">
                     <div class="text-center m-auto">
                         MORE <br> PROJECTS
                     </div>
                 </a>
             </div>
         </div>
+
+        <div class="flex flex-col w-1/12">
+            <div class="pink dot mx-auto -mb-1"/>
+            <div class="pink w-0.5 mx-auto grow"/>
+            <div class="pink diamond mx-auto -mt-1"/>
+        </div>
+    </div>
+
+    <div class="flex w-1/6 h-20">
+        <div class="pink dot my-auto -mr-1 ml-10"/>
+        <div class="pink h-0.5 my-auto grow"/>
+        <div class="pink diamond my-auto -ml-1"/>
     </div>
 </div>
 

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -1,50 +1,52 @@
 
 <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>
 
-<div class="flex dark h-1000">
-    <div class="block w-full">
-        <div class="absolute lineBlockRight">
-            <div class="w-1/12">
-                <div>
-                    <div class="dotV pink" />
-                    <div class="lineV pink" />
-                    <div class="diamondNarrowV pink" />
-                </div>
-            </div>
-      </div>
+<div class="dark w-full">
 
+  <div class="flex pt-10">
+        <div class="flex flex-col w-1/12">
+
+        </div>
 
-        <div class="lg:ml-48 ml-10 lg:mr-36 mr-10 mt-28">
+        <div class="w-10/12">
             <!-- TITLE -->
             <div class="yellowText blockHeaderText">
                 PROJECTS MADE BY OUR CLUB MEMBERS
             </div>
             <!-- PROJECT CARDS -->
             <div class="py-5 flex gap-4 flex-wrap">
-             {#each clubProjects as project }
-              <ProjectCard project={project} />
-             {/each}
+                {#each clubProjects as project }
+                <ProjectCard project={project} />
+                {/each}
             </div>
         </div>
+
+        <div class="flex flex-col w-1/12 pb-10">
+            <div class="pink dot mx-auto -mb-1"/>
+            <div class="pink w-0.5 mx-auto grow"/>
+            <div class="pink diamond mx-auto -mt-1"/>
+        </div>
     </div>
 </div>
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/W24-A2.md b/src/routes/zine/articles/W24-A2.md
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');