refactor: move header and footer

deepsquare-io · Jan 19, 2024 · 54069f4 · 54069f4
1 parent 8ecf816
commit 54069f4
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 168 deletions.
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -8,6 +8,18 @@ declare global {
 		// interface PageState {}
 		// interface Platform {}
 	}
+
+	// add these lines
+	interface ViewTransition {
+		updateCallbackDone: Promise<void>;
+		ready: Promise<void>;
+		finished: Promise<void>;
+		skipTransition: () => void;
+	}
+
+	interface Document {
+		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
+	}
 }
 
 export {};
diff --git a/src/app.scss b/src/app.scss
@@ -209,6 +209,7 @@ nav details[role=list] summary, nav li[role=list] a {
   align-self: center;
 }
 
+// TODO: view transition disable for heade
 header nav a, header nav a[role="button"], header nav summary[role="link"] {
   color: #fff;
   font-weight: 600;
@@ -325,3 +326,12 @@ details > summary {
 [data-theme='dark'] .drop-shadow-a {
   filter: drop-shadow(0 4px 3px rgba(255, 255, 255, 0.212)) drop-shadow(0 2px 2px rgba(255, 255, 255, 0.212));
 }
+
+/** ViewTransitions */
+@media (prefers-reduced-motion) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
diff --git a/src/lib/components/Applications.svelte b/src/lib/components/Applications.svelte
@@ -74,19 +74,3 @@
 		{/each}
 	</div>
 </div>
-
-<style>
-	@keyframes -global-from-bottom {
-		0% {
-			transform: translateY(100vh);
-			opacity: 0;
-		}
-		50% {
-			opacity: 0;
-			transform: translateY(20vh);
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,77 +1,107 @@
 <script lang="ts">
-	import { base } from '$app/paths';
-	import Whitepaper from '$lib/assets/media/DeepSquare_White-Paper-1.pdf';
-	import Yellowpaper from '$lib/assets/media/Yellow-Paper_Tokenize_HPC.pdf';
-	import logo from '$lib/assets/media/deepsquare-logo-h-neg-BIJELI-1.svg';
-	import poweredby from '$lib/assets/media/poweredby.svg';
-	import Nav from '$lib/components/Nav.svelte';
+	import { onNavigate } from '$app/navigation';
+	import { fade } from 'svelte/transition';
 	import '../app.scss';
+	import Footer from './Footer.svelte';
+	import Header from './Header.svelte';
 
 	const year = new Date().getFullYear();
 
-	import { fade } from 'svelte/transition';
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
-<Nav />
+<Header />
 
 <main in:fade={{ duration: 100, delay: 200 }} out:fade={{ duration: 100 }}>
 	<slot />
 </main>
 
-<footer>
-	<div class="grid md:grid-cols-4 justify-around place-items-center">
-		<div class="md:col-span-2">
-			<div class="box">
-				<div class="py-4">
-					<img src={logo} alt="DeepSquare Logo" />
-				</div>
-				<p>
-					DeepSquare Association, Switzerland, is the founder and holds the initial governance of
-					DeepSquare token. The Association’s purpose is to offer goods and services in the fields
-					of information and communication technologies, software, hardware, and related consulting
-					services.
-				</p>
-				<p>
-					Copyright © {year} – <b>The DeepSquare Association</b> – CHE-130.663.967, Switzerland.
-				</p>
-			</div>
-		</div>
-		<div>
-			<div>
-				<div>
-					<h5 class="py-4 m-0">Resources</h5>
-				</div>
-				<div>
-					<aside>
-						<nav>
-							<ul>
-								<li>
-									<a href={Whitepaper}>Whitepaper</a>
-								</li>
-								<li>
-									<a href={Yellowpaper}>Yellow Paper</a>
-								</li>
-								<li>
-									<a href="https://docs.deepsquare.run/workflow/overview">Documentation</a>
-								</li>
-								<li>
-									<a title="Terms and Conditions" href="{base}/terms-and-conditions"
-										>Terms and Conditions</a
-									>
-								</li>
-								<li>
-									<a title="Privacy Policy" rel="privacy-policy" href="{base}/privacy-policy"
-										>Privacy Policy</a
-									>
-								</li>
-							</ul>
-						</nav>
-					</aside>
-				</div>
-			</div>
-		</div>
-		<div class="py-4">
-			<img src={poweredby} alt="Powered by Avalanche" />
-		</div>
-	</div>
-</footer>
+<Footer />
+
+<style>
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@keyframes fade-out {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@keyframes slide-from-right {
+		from {
+			transform: translateX(30px);
+		}
+	}
+
+	@keyframes slide-to-left {
+		to {
+			transform: translateX(-30px);
+		}
+	}
+
+	@keyframes -global-from-bottom {
+		0% {
+			transform: translateY(100vh);
+			opacity: 0;
+		}
+		50% {
+			opacity: 0;
+			transform: translateY(20vh);
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-bottom-slow {
+		0% {
+			opacity: 0;
+			transform: translateY(10vh);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-left-slow {
+		0% {
+			opacity: 0;
+			transform: translateX(-10vw);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-from-right-slow {
+		0% {
+			opacity: 0;
+			transform: translateX(10vw);
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+</style>