From 88e7d4a9b6d27f003f32cf59b282edbd4c8679e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 18 Feb 2024 23:38:44 +0100
Subject: [PATCH] wip nav

---
 src/index.css                 |  4 ++++
 src/lib/BackgroundGrid.svelte | 11 ++++++++++-
 src/lib/TestCard.svelte       | 19 +++++++++++++++++--
 src/routes/+layout.svelte     | 34 ++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte       | 27 +++++++++++++++++++--------
 src/routes/card/+page.svelte  |  0
 6 files changed, 84 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/card/+page.svelte

diff --git a/src/index.css b/src/index.css
index 442bd2d..3d613b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,4 +14,8 @@ body, html {
 
 * {
   box-sizing: border-box;
+}
+
+a {
+  color: white;
 }
\ No newline at end of file
diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte
index 90b99b9..6f2e438 100644
--- a/src/lib/BackgroundGrid.svelte
+++ b/src/lib/BackgroundGrid.svelte
@@ -16,7 +16,8 @@
 	let verticalMargin = MARGIN_SIZE;
 	let unloaded = true;
 
-	let transparent = false;
+	export let transparent = false;
+	export let subdued = false;
 
 	function updateCounts() {
 		const gridWidth = window.innerWidth - MARGIN_SIZE;
@@ -72,6 +73,7 @@
 	class="background"
 	class:unloaded
 	class:transparent
+	class:subdued
 	class:even-vertical={verticalCount % 2 === 0}
 	style="--horizontal-count: {horizontalCount};
 					 --vertical-count: {verticalCount};
@@ -266,6 +268,13 @@
 		}
 	}
 
+	.background.subdued {
+		& .edge,
+		& .corner {
+			opacity: 0.33;
+		}
+	}
+
 	.grid {
 		display: grid;
 		grid-template-columns: repeat(var(--horizontal-count), var(--block-size));
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index da59543..72602ed 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -6,6 +6,8 @@
 	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
 	import { onMount } from 'svelte';
 
+	export let full = false;
+
 	let sizes = {
 		blockSize: 64,
 		horizontalCount: 16,
@@ -30,6 +32,7 @@
 
 <div
 	class="test-card"
+	class:full
 	style="--block-size: {sizes.blockSize}px;
 				 --horizontal-margin: {sizes.horizontalMargin}px;
 				 --vertical-margin: {sizes.verticalMargin}px;
@@ -38,8 +41,11 @@
          --column-height: {columnHeight};
          --left-column: {leftColumn};"
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
-	<Axes />
+	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
+
+	<div class="axes">
+		<Axes />
+	</div>
 
 	<div class="outer"></div>
 	<div class="inner"></div>
@@ -137,4 +143,13 @@
 			flex-grow: 1;
 		}
 	}
+
+	.test-card:not(.full) {
+		& .info,
+		& .column,
+		& .axes,
+		& .inner {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..54deb88
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,34 @@
+<script>
+	import 'normalize.css/normalize.css';
+	import '@fontsource/b612';
+	import '@fontsource/b612/700.css';
+	import '../index.css';
+	import TestCard from '$lib/TestCard.svelte';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+
+	$: onlyCard = $page.url.pathname === '/card';
+</script>
+
+<TestCard full={onlyCard} />
+{#if !onlyCard}
+	<main>
+		<slot />
+	</main>
+{/if}
+
+<style>
+	main {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		max-height: 90vh;
+		max-width: 90vw;
+		background: rgba(0, 0, 0, 0.8);
+		border-radius: 0.5rem;
+		border: 1px solid white;
+
+		padding: 1rem;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ad8eb60..e5f6d19 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,20 @@
-<script>
-	import 'normalize.css/normalize.css';
-	import '@fontsource/b612';
-	import '@fontsource/b612/700.css';
-	import '../index.css';
-	import TestCard from '$lib/TestCard.svelte';
-</script>
+<nav>
+	<h1>Test Card</h1>
 
-<TestCard />
+	<div class="options">
+		<a href="card">Test Card</a>
+	</div>
+</nav>
+
+<style>
+	h1 {
+		text-align: center;
+		font-size: 2.5rem;
+		margin: 1rem;
+	}
+
+	.options {
+		display: flex;
+		justify-content: center;
+	}
+</style>
diff --git a/src/routes/card/+page.svelte b/src/routes/card/+page.svelte
new file mode 100644
index 0000000..e69de29