remove abstract and modify header background

vizia · Jun 6, 2023 · a39cd9d · a39cd9d
1 parent 7169e72
commit a39cd9d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 158 deletions.
diff --git a/src/lib/components/BGElement.svelte b/src/lib/components/BGElement.svelte
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -6,15 +6,55 @@
 
 	import HeaderDropdown from './HeaderDropdown.svelte';
 	import { base } from '$app/paths';
+	import { afterUpdate, onMount } from 'svelte';
+	import { afterNavigate } from '$app/navigation';
 
 	let hamMenuOpen = false;
 
+	let header: Element | null = null;
+	let scrollWatcher: Element | null = null;
+
 	function hamMenuClick() {
 		hamMenuOpen = !hamMenuOpen;
 	}
+
+	onMount(() => {
+		updateStickingBehaviour();
+	});
+
+	afterUpdate(() => {
+		updateStickingBehaviour();
+	});
+
+	afterNavigate(() => {
+		updateStickingBehaviour();
+	});
+
+	function updateStickingBehaviour() {
+		header = document.querySelector('.header');
+		scrollWatcher = document.querySelector('.main-section');
+
+		if (scrollWatcher && header && scrollWatcher) {
+			scrollWatcher.setAttribute('data-scroll-watcher', '');
+			header?.before(scrollWatcher);
+
+			const navObserver = new IntersectionObserver(
+				(entries) => {
+					if (!entries[0].isIntersecting) {
+						header?.classList.add('sticking');
+					} else {
+						header?.classList.remove('sticking');
+					}
+				},
+				{ rootMargin: '-500px 0px 0px 0px' }
+			);
+
+			navObserver.observe(scrollWatcher);
+		}
+	}
 </script>
 
-<div class="header" aria-label="Primary">
+<div class="header sticking" aria-label="Primary">
 	<div class="wrapper">
 		<a class="logo-wrapper" href="{base}/">
 			<img src={ViziaLogo} class="logo" alt="Vizia Logo" />
@@ -70,18 +110,24 @@
 <style lang="scss">
 	.header {
 		width: 100%;
+		position: fixed;
 
 		display: flex;
 		justify-content: center;
 		flex-direction: row;
-		background-color: var(--c-1) !important;
-		border-bottom: 1px solid var(--border-color);
+		background-color: transparent;
+		backdrop-filter: blur(8px);
 
 		box-sizing: border-box;
 
 		z-index: 100;
 	}
 
+	.header.sticking {
+		background-color: var(--c-1);
+		border-bottom: 1px solid var(--border-color);
+	}
+
 	.wrapper {
 		width: 100%;
 		margin: 0 auto;
@@ -186,10 +232,6 @@
 	}
 
 	@media (min-width: 0) {
-		.header {
-			position: flex;
-		}
-
 		.links-wrapper {
 			display: none;
 		}
@@ -204,10 +246,6 @@
 	}
 
 	@media (min-width: 55rem) {
-		.header {
-			position: fixed;
-		}
-
 		.links-wrapper {
 			display: flex;
 		}

diff --git a/src/lib/components/landing_page/LandingMainSection.svelte b/src/lib/components/landing_page/LandingMainSection.svelte
@@ -1,42 +1,22 @@
 <script lang="ts">
-	import BgElement from '$lib/components/BGElement.svelte';
 	import LandingPageButton from '$lib/components/landing_page/LandingPageButton.svelte';
 </script>
 
 <section class="main-section">
-	<div class="wrapper">
-		<div class="main-info">
-			<h1>
-				Declarative <b>GUI Framework</b>
-				for <i>any</i> kind of applications.
-			</h1>
-			<p>Combine versatility, modularity and speed in one</p>
-
-			<div class="actions-container">
-				<LandingPageButton
-					text="Get Started"
-					link="/guide/introduction/getting_started#getting-started"
-					style="accent"
-				/>
-				<LandingPageButton text="Tutorial" link="/tutorial" />
-			</div>
-		</div>
-		<div class="abstract">
-			<BgElement
-				color="#51afef44"
-				offset_x={1}
-				offset_y={1}
-				rotation={90}
-				type="circle"
-				size_y={3}
+	<div class="main-info">
+		<h1>
+			Declarative <b>GUI Framework</b>
+			for <i>any</i> kind of applications.
+		</h1>
+		<p>Combine versatility, modularity and speed in one</p>
+
+		<div class="actions-container">
+			<LandingPageButton
+				text="Get Started"
+				link="/guide/introduction/getting_started#getting-started"
+				style="accent"
 			/>
-			<BgElement color="#51afef" offset_x={-1} offset_y={2} type="circle" />
-			<BgElement color="#51afef" offset_x={0} offset_y={1} rotation={90} />
-			<BgElement color="#efcc51" offset_x={0} offset_y={0} rotation={-90} type="circle" />
-			<BgElement color="#ef5151" offset_x={-1} offset_y={0} />
-			<BgElement color="#efcc51" offset_x={-1} offset_y={-1} rotation={180} />
-			<BgElement color="#51afef" offset_x={2} offset_y={0} rotation={180} />
-			<BgElement color="#ef5151" offset_x={1} offset_y={-2} rotation={-90} type="circle" />
+			<LandingPageButton text="Tutorial" link="/tutorial" />
 		</div>
 	</div>
 </section>
@@ -50,32 +30,14 @@
 		place-items: center;
 
 		background: radial-gradient(
-				75% 100% at 50% 100%,
-				rgba(81, 175, 239, 0.25) 0%,
+				75% 150% at 50% 100%,
+				rgba(81, 175, 239, 0.33) 0%,
 				rgba(0, 0, 0, 0) 100%
 			),
 			var(--background-main);
 		background-blend-mode: color-dodge;
 	}
 
-	.wrapper {
-		width: 100%;
-		max-width: var(--page-width);
-		display: flex;
-
-		align-items: center;
-		justify-content: space-between;
-		padding: 2rem;
-	}
-
-	.abstract {
-		position: relative;
-		width: calc(4 * var(--size));
-		height: calc(5 * var(--size));
-		display: flex;
-		margin: 2rem;
-	}
-
 	.main-info {
 		height: fit-content;
 		display: flex;
@@ -91,8 +53,8 @@
 		}
 
 		p {
-			font-size: 1.2rem;
-			color: #ffffff88;
+			font-size: 1.4rem;
+			color: #ffffffaa;
 			margin-bottom: 1rem;
 		}
 
@@ -104,6 +66,14 @@
 			font-weight: 600;
 		}
 
+		i {
+			background: linear-gradient(to right, #ef5151, #e3c351);
+			color: transparent;
+			background-clip: text;
+			-webkit-background-clip: text;
+			font-weight: 600;
+		}
+
 		.actions-container {
 			display: flex;
 			gap: 1rem;
@@ -143,7 +113,7 @@
 		}
 
 		.main-info {
-			width: 50%;
+			width: calc(var(--page-width) / 2);
 		}
 
 		.actions-container {
@@ -153,14 +123,6 @@
 
 	@media (min-width: 55rem) {
 		.main-info {
-			align-items: flex-start;
-			width: 60%;
-
-			h1,
-			p {
-				text-align: start;
-			}
-
 			h1 {
 				font-size: 3.5rem;
 			}
@@ -169,12 +131,6 @@
 		.main-section {
 			flex-direction: row;
 		}
-
-		.abstract {
-			--size: 4rem;
-			display: initial;
-			width: 30%;
-		}
 	}
 
 	@media (min-width: 75rem) {
@@ -191,9 +147,5 @@
 		.actions-container {
 			align-items: flex-start;
 		}
-
-		.abstract {
-			--size: 6rem;
-		}
 	}
 </style>