README.md

@@ -1,38 +0,0 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

@@ -16,6 +16,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "8.56.0",
+		"@types/lodash": "^4.14.202",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"eslint": "^8.56.0",
@@ -31,6 +32,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@ibm/plex": "^6.4.0"
+		"@fontsource/b612": "^5.0.8",
+		"lodash": "^4.17.21",
+		"normalize.css": "^8.0.1"
 	}
 }

pnpm-lock.yaml

@@ -5,9 +5,15 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@ibm/plex':
-    specifier: ^6.4.0
-    version: 6.4.0
+  '@fontsource/b612':
+    specifier: ^5.0.8
+    version: 5.0.8
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
+  normalize.css:
+    specifier: ^8.0.1
+    version: 8.0.1
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -22,6 +28,9 @@ devDependencies:
   '@types/eslint':
     specifier: 8.56.0
     version: 8.56.0
+  '@types/lodash':
+    specifier: ^4.14.202
+    version: 4.14.202
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.0.0
     version: 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
@@ -318,6 +327,10 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fontsource/b612@5.0.8:
+    resolution: {integrity: sha512-PuOfVZB37asTrwI6GD5dcOjIuEZI+m9PW6/9MM05zRxA5pSUyPn280rLP7r7mOiFmEKSEWCFyI0Yf2XJOmqwNA==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -338,10 +351,6 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
-  /@ibm/plex@6.4.0:
-    resolution: {integrity: sha512-P70hmNoSJhpV6fGG4++JEivoccUVuvkyZoXprsDmPTtv3s6QvL+Q8bK3HFSGmK/VgyLMDptoKPV7b/h/1xaWAw==}
-    dev: false
-
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
@@ -592,6 +601,10 @@ packages:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
   /@types/pug@2.0.10:
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
     dev: true
@@ -1428,6 +1441,10 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -1517,6 +1534,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: false
+
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:

src/index.css

@@ -5,8 +5,13 @@ body, html {
   justify-content: center;
   align-items: center;
 
-  color: #d9d9d9;
+  color: white;
   background-color: black;
 
-  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 1.5vw;
+}
+
+* {
+  box-sizing: border-box;
 }

src/lib/Axes.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let heightOdd = false;
+	let widthOdd = false;
+
+	function updateOdd() {
+		heightOdd = window.innerHeight % 2 === 1;
+		widthOdd = window.innerWidth % 2 === 1;
+	}
+
+	onMount(() => {
+		updateOdd();
+		window.addEventListener('resize', updateOdd);
+	});
+</script>
+
+<div class="axes" class:heightOdd class:widthOdd>
+	<div class="horizontal"></div>
+	<div class="vertical"></div>
+</div>
+
+<style>
+	.axes {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+
+		--size: 3px;
+	}
+
+	.axes .horizontal,
+	.axes .vertical {
+		position: absolute;
+		background-color: red;
+		z-index: 5;
+		opacity: 0.66;
+	}
+
+	.axes .horizontal {
+		top: 50%;
+		left: 0;
+		width: 100%;
+		height: var(--size);
+		transform: translateY(-50%);
+	}
+
+	.axes .vertical {
+		top: 0;
+		left: 50%;
+		width: var(--size);
+		height: 100%;
+		transform: translateX(-50%);
+	}
+
+	/*.axes.heightOdd .horizontal {*/
+	/*	top: calc(50% + 1px);*/
+	/*}*/
+
+	/*.axes.widthOdd .vertical {*/
+	/*	left: calc(50% + 1px);*/
+	/*}*/
+</style>

src/lib/BackgroundCorners.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-
-    let count = 12;
-    $: realCount = count + 2;
-
-    onMount(() => {
-
-    })
-</script>
-
-<div class="grid" style='--count: {realCount}'>
-  {#each [...Array(realCount).keys()] as x}
-    <div class="row">
-      {#each [...Array(realCount).keys()] as y}
-        <div class="block" data-block-x={x} data-block-y={y}></div>
-      {/each}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(var(--count), 40px);
-    grid-template-rows: repeat(var(--count), 40px);
-    width: 100%;
-    height: 100%;
-
-    position: relative;
-  }
-
-  .row {
-    display: contents;
-  }
-
-  .block {
-    background-color: gray;
-  }
-
-  .row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
-    background-color: darkgray;
-  }
-
-  .block[data-block-x="0"][data-block-y="0"] {
-    background-color: red;
-  }
-</style>

src/lib/BackgroundGrid.svelte

@@ -1,93 +1,107 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import _ from 'lodash';
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher();
 
-	const START_COUNT = 13;
-	const MAX_COUNT = 50;
+	const START_COUNT = 27;
+	const MAX_COUNT = 33;
+	const MARGIN_SIZE = 16;
 
-	let count = START_COUNT;
-	let horizontalCount = count;
-	let verticalCount = count;
+	let horizontalCount = START_COUNT;
+	let verticalCount = START_COUNT;
+	let blockSize = 64;
+	let cornerBlocks = 2;
 
-	$: count && updateCounts();
+	let horizontalMargin = 0;
+	let verticalMargin = 0;
+
+	$: updateCounts();
 	function updateCounts() {
-		function discrepancy(count: number) {
-			const blockSize = window.innerWidth / count;
-			return window.innerHeight / blockSize - Math.floor(window.innerHeight / blockSize);
-		}
-		let finalCount = count;
+		const gridWidth = window.innerWidth - MARGIN_SIZE;
+		const gridHeight = window.innerHeight - MARGIN_SIZE;
 
-		count = START_COUNT;
+		const [longerSide, shorterSide] =
+			gridWidth > gridHeight ? [gridWidth, gridHeight] : [gridHeight, gridWidth];
+
+		function discrepancy(count: number) {
+			const blockSize = longerSide / count;
+			return shorterSide / blockSize - Math.floor(shorterSide / blockSize);
+		}
+
+		let finalCount = START_COUNT;
+		let count = START_COUNT;
 		let bestDiscrepancy = discrepancy(count);
 		while (count < MAX_COUNT) {
-			count++;
+			count += 2;
 			const currentDiscrepancy = discrepancy(count);
-			console.log({ currentDiscrepancy, count });
-			const workingDiscrepancy = currentDiscrepancy;
-			if (workingDiscrepancy < bestDiscrepancy) {
-				bestDiscrepancy = workingDiscrepancy;
+			if (currentDiscrepancy < bestDiscrepancy) {
+				bestDiscrepancy = currentDiscrepancy;
 				finalCount = count;
-				console.log('New best discrepancy', bestDiscrepancy, 'at', finalCount);
 			}
 		}
 
-		count = finalCount;
-		horizontalCount = count;
-		verticalCount = Math.round(horizontalCount * (window.innerHeight / window.innerWidth));
+		const longerCount = finalCount;
+		const shorterCount = Math.round(longerCount * (shorterSide / longerSide));
+
+		[horizontalCount, verticalCount] =
+			gridWidth > gridHeight ? [longerCount, shorterCount] : [shorterCount, longerCount];
+		blockSize = longerSide / finalCount;
+		horizontalMargin = (window.innerWidth - blockSize * horizontalCount) / 2;
+		verticalMargin = (window.innerHeight - blockSize * verticalCount) / 2;
+		cornerBlocks = shorterCount > 8 ? 3 : Math.max(1, Math.floor(shorterCount / 4));
+		dispatch('change', {
+			horizontalCount,
+			verticalCount,
+			blockSize,
+			horizontalMargin,
+			verticalMargin
+		});
 	}
+	const updateCountsOnResize = _.throttle(updateCounts, 200);
 
 	onMount(() => {
-		// window.addEventListener('resize', updateCounts);
+		window.addEventListener('resize', updateCountsOnResize);
 		updateCounts();
 	});
-
-	function isEdge(x: number, y: number) {
-		return x === 0 || y === 0 || x === verticalCount - 1 || y === horizontalCount - 1;
-	}
-
-	const CORNER_SIZE = 3;
-	function isCorner(x: number, y: number) {
-		// Top left
-		if ((x < CORNER_SIZE && y === 0) || (y < CORNER_SIZE && x === 0)) {
-			return true;
-		}
-
-		// Top right
-		if (
-			(x < CORNER_SIZE && y === horizontalCount - 1) ||
-			(y > horizontalCount - CORNER_SIZE - 1 && x === 0)
-		) {
-			return true;
-		}
-
-		// Bottom left
-		if (
-			(x > verticalCount - CORNER_SIZE - 1 && y === 0) ||
-			(y < CORNER_SIZE && x === verticalCount - 1)
-		) {
-			return true;
-		}
-		// Bottom right
-		// noinspection RedundantIfStatementJS
-		if (
-			(x > verticalCount - CORNER_SIZE - 1 && y === horizontalCount - 1) ||
-			(y > horizontalCount - CORNER_SIZE - 1 && x === verticalCount - 1)
-		) {
-			return true;
-		}
-
-		return false;
-	}
 </script>
 
-<div class="background">
-	<div
-		class="grid"
-		style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
-	>
+<div
+	class="background"
+	class:even-vertical={verticalCount % 2 === 0}
+	style="--horizontal-count: {horizontalCount};
+					 --vertical-count: {verticalCount};
+					 --block-size: {blockSize}px;
+					 --corner-blocks: {cornerBlocks};
+					 --horizontal-margin: {horizontalMargin}px;
+					 --vertical-margin: {verticalMargin}px;"
+>
+	<div class="corners">
+		<div class="corner top left"></div>
+		<div class="corner top right"></div>
+		<div class="corner bottom left"></div>
+		<div class="corner bottom right"></div>
+	</div>
+	<div class="edges">
+		{#each ['top', 'bottom'] as edge}
+			<div class="edge {edge}">
+				{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
+					<div class="block"></div>
+				{/each}
+			</div>
+		{/each}
+		{#each ['left', 'right'] as edge}
+			<div class="edge {edge}">
+				{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _}
+					<div class="block"></div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+	<div class="grid">
 		{#each [...Array(verticalCount).keys()] as x}
 			<div class="row">
 				{#each [...Array(horizontalCount).keys()] as y}
-					<div class="block" class:edge={isEdge(x, y)} class:corner={isCorner(x, y)}></div>
+					<div class="block"></div>
 				{/each}
 			</div>
 		{/each}
@@ -102,52 +116,115 @@
 		width: 100%;
 		height: 100%;
 
-		--grid-color-dark: #666;
-		--grid-color-light: #888;
-		--corner-color: white;
-
 		pointer-events: none;
+
+		--corner-color: white;
+		--corner-height: calc(var(--vertical-margin) + var(--corner-blocks) * var(--block-size));
+		--corner-width: calc(var(--horizontal-margin) + var(--corner-blocks) * var(--block-size));
+	}
+
+	.corner {
+		background-color: var(--corner-color);
+
+		position: absolute;
+		&.top {
+			top: 0;
+			height: var(--corner-height);
+		}
+		&.bottom {
+			bottom: 0;
+			height: var(--corner-height);
+		}
+		&.left {
+			left: 0;
+			width: var(--corner-width);
+		}
+		&.right {
+			right: 0;
+			width: var(--corner-width);
+		}
+	}
+
+	.edges {
+		& .edge {
+			position: absolute;
+			display: flex;
+		}
+
+		& .top {
+			top: 0;
+		}
+
+		& .bottom {
+			bottom: 0;
+		}
+
+		& .top,
+		& .bottom {
+			width: calc(100vw - var(--corner-width) * 2);
+			height: calc(var(--margin-size) * 2);
+			left: var(--corner-width);
+		}
+
+		& .left {
+			left: 0;
+		}
+
+		& .right {
+			right: 0;
+		}
+
+		& .left,
+		& .right {
+			flex-direction: column;
+			height: calc(100vh - var(--corner-height) * 2);
+			width: calc(var(--margin-size) * 2);
+			top: var(--corner-height);
+		}
+
+		& .block {
+			display: inline-block;
+			height: var(--block-size);
+			width: var(--block-size);
+
+			background: white;
+			&:nth-child(odd) {
+				background: black;
+			}
+		}
+	}
+
+	.background.even-vertical .edges .right .block {
+		background: black;
+		&:nth-child(odd) {
+			background: white;
+		}
 	}
 
 	.grid {
 		display: grid;
-		--margin: calc(100vw / var(--count) / 2);
-		--block-size: calc(100vw / (var(--count)) - (var(--margin) / (var(--count))));
 		grid-template-columns: repeat(var(--horizontal-count), var(--block-size));
 		grid-template-rows: repeat(var(--vertical-count), var(--block-size));
 		position: absolute;
-		/*top: calc(50% - (var(--block-size) * var(--vertical-count) / 2));*/
-		/*left: calc(50% - (var(--block-size) * var(--horizontal-count) / 2));*/
-	}
+		top: var(--vertical-margin);
+		left: var(--horizontal-margin);
 
-	.row {
+		& .row {
 			display: contents;
 		}
 
-	.block {
-		width: 100%;
-		height: 100%;
-		background-color: var(--grid-color-light);
-
-		&.edge {
-			background-color: white;
+		& .block {
+			background: black;
+			border-right: 1px solid gray;
+			border-bottom: 1px solid gray;
 		}
 
-		&.corner {
-			background-color: var(--corner-color);
-		}
+		& .row:first-child .block {
+			border-top: 1px solid gray;
 		}
 
-	.row:nth-child(even) .block:nth-child(odd),
-	.row:nth-child(odd) .block:nth-child(even) {
-		background-color: var(--grid-color-dark);
-
-		&.edge {
-			background-color: black;
-		}
-
-		&.corner {
-			background-color: var(--corner-color);
+		& .block:first-child {
+			border-left: 1px solid gray;
 		}
 	}
 </style>

src/lib/BrightnessGradient.svelte

@@ -0,0 +1,10 @@
+<div class="gradient"></div>
+
+<style>
+	.gradient {
+		width: 100%;
+		height: 100%;
+
+		background: linear-gradient(0deg, white, black);
+	}
+</style>

src/lib/ColorGradient.svelte

@@ -0,0 +1,19 @@
+<div class="gradient"></div>
+
+<style>
+	.gradient {
+		width: 100%;
+		height: 100%;
+
+		background: linear-gradient(
+			180deg,
+			#ff0000,
+			#ff7f00,
+			#ffff00,
+			#00ff00,
+			#0000ff,
+			#4b0082,
+			#9400d3
+		);
+	}
+</style>

src/lib/ScreenInfo.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 
-    let screenResolution = "";
-    let windowResolution = "";
+	let screenResolution = '';
+	let windowResolution = '';
 
 	function updateResolution() {
-        screenResolution = `${screen.width} x ${screen.height}`;
-        windowResolution = `${window.innerWidth} x ${window.innerHeight}`;
+		const realWidth = Math.round(screen.width * window.devicePixelRatio);
+		const realHeight = Math.round(screen.height * window.devicePixelRatio);
+		const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
+		const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
+		screenResolution = `${realWidth} x ${realHeight}`;
+		windowResolution = `${windowWidth} x ${windowHeight}`;
 	}
 
 	onMount(() => {
@@ -14,7 +19,7 @@
 			updateResolution();
 		});
 		updateResolution();
-    })
+	});
 </script>
 
 <div class="info">
@@ -22,10 +27,25 @@
 		<div class="title">Screen Resolution</div>
 		<div class="value">{screenResolution}</div>
 		{#if windowResolution !== screenResolution}
-      <div class="window">
+			<div class="window" transition:fade>
 				<div class="title">Window Resolution</div>
 				<div class="value">{windowResolution}</div>
 			</div>
 		{/if}
 	</div>
 </div>
+
+<style>
+	.info {
+		text-align: center;
+	}
+
+	.title {
+		font-weight: bold;
+	}
+
+	.window {
+		margin-top: 1em;
+		font-size: 0.8em;
+	}
+</style>

src/lib/TestCard.svelte

@@ -1,24 +1,61 @@
 <script lang="ts">
 	import BackgroundGrid from '$lib/BackgroundGrid.svelte';
 	import ScreenInfo from '$lib/ScreenInfo.svelte';
+	import Axes from '$lib/Axes.svelte';
+	import ColorGradient from '$lib/ColorGradient.svelte';
+	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
+
+	let sizes = {
+		blockSize: 64,
+		horizontalCount: 8,
+		verticalCount: 8,
+		horizontalMargin: 0,
+		verticalMargin: 0
+	};
+
+	$: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4;
+	$: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2);
+	$: columnTop = (sizes.verticalCount - columnHeight) / 2;
+	$: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2;
+	$: circleBlocks =
+		2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
+		(sizes.horizontalCount % 2);
 </script>
 
-<div class="test-card">
-	<div class="background">
-		<BackgroundGrid />
-	</div>
+<div
+	class="test-card"
+	style="--block-size: {sizes.blockSize}px;
+				 --horizontal-margin: {sizes.horizontalMargin}px;
+				 --vertical-margin: {sizes.verticalMargin}px;
+         --circle-blocks: {circleBlocks};
+         --column-width: {columnWidth};
+         --column-height: {columnHeight};
+         --column-top: {columnTop};
+         --left-column: {leftColumn};"
+>
+	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
+	<Axes />
 
+	<div class="outer"></div>
 	<div class="inner">
 		<ScreenInfo />
-
-		<div class="color-bars">
-			<div class="color-bar red"></div>
-			<div class="color-bar green"></div>
-			<div class="color-bar blue"></div>
-			<div class="color-bar black"></div>
 	</div>
-		<div class="grayscale-gradient"></div>
-		<div class="color-gradient-background"></div>
+
+	<div class="column left">
+		<div class="gradient">
+			<ColorGradient />
+		</div>
+		<div class="gradient">
+			<BrightnessGradient />
+		</div>
+	</div>
+	<div class="column right">
+		<div class="gradient">
+			<ColorGradient />
+		</div>
+		<div class="gradient">
+			<BrightnessGradient />
+		</div>
 	</div>
 </div>
 
@@ -33,95 +70,57 @@
 		overflow: hidden;
 	}
 
-	.background {
-		width: 100%;
-		height: 100%;
-		z-index: -9;
-	}
-
 	.inner {
-		width: 80%;
-		height: 80%;
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-		grid-template-rows: 2fr 1fr 1fr 1fr;
-		gap: 10px;
-	}
-
-	.background {
 		position: absolute;
-	}
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
 
-	.color-bars {
-		display: flex;
-		grid-column: 1 / 5;
-	}
+		width: calc(var(--block-size) * var(--circle-blocks));
+		height: calc(var(--block-size) * var(--circle-blocks));
 
-	.color-bar {
-		flex-grow: 1;
-		height: 100%;
-	}
-
-	.red {
-		background-color: #ff0000;
-	}
-
-	.green {
-		background-color: #00ff00;
-	}
-
-	.blue {
-		background-color: #0000ff;
-	}
-
-	.black {
-		background-color: #000;
-	}
-
-	.grayscale-gradient {
-		grid-column: 1 / 5;
-		background: linear-gradient(to right, #000, #fff);
-	}
-
-	.sharpness-pattern {
-		grid-column: 1 / 3;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background-color: #eee;
-		font-size: 2vw;
-	}
-
-	.geometry-pattern {
-		grid-column: 3 / 5;
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
-	}
-
-	.circle,
-	.square {
-		background-color: #888;
-		aspect-ratio: 1 / 1;
-	}
-
-	.circle {
-		width: 10vw;
+		border: 1px solid white;
+		background: rgba(0, 0, 0, 0.66);
 		border-radius: 50%;
 	}
 
-	.square {
-		width: 10vw;
+	.outer {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
+		height: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
+
+		border: 2px dashed white;
+		border-radius: 50%;
+		opacity: 0.5;
 	}
 
-	@media (max-width: 600px) {
-		.sharpness-pattern span {
-			font-size: 5vw;
+	.column {
+		position: absolute;
+		top: calc(var(--vertical-margin) + var(--block-size) * var(--column-top));
+		width: calc(var(--block-size) * var(--column-width));
+		height: calc(var(--block-size) * var(--column-height));
+		z-index: 9;
+
+		display: flex;
+
+		&.left {
+			left: calc(var(--horizontal-margin) + var(--block-size) * 3);
 		}
 
-		.circle,
-		.square {
-			width: 20vw;
+		&.right {
+			right: calc(var(--horizontal-margin) + var(--block-size) * 3);
+			transform: rotate(180deg);
+		}
+
+		& .gradient {
+			flex-grow: 1;
 		}
 	}
 </style>

src/routes/+page.svelte

@@ -1,7 +1,9 @@
 <script>
-    import "../index.css";
-    import "@ibm/plex/css/ibm-plex.css";
-    import TestCard from "$lib/TestCard.svelte";
+	import 'normalize.css/normalize.css';
+	import '@fontsource/b612';
+	import '@fontsource/b612/700.css';
+	import '../index.css';
+	import TestCard from '$lib/TestCard.svelte';
 </script>
 
 <TestCard />