wip nav

src/index.css

@@ -14,4 +14,8 @@ body, html {
 
 * {
   box-sizing: border-box;
+}
+
+a {
+  color: white;
 }

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));

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>

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>

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>