README.md

@@ -0,0 +1,38 @@
+# 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,7 +16,6 @@
 		"@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",
@@ -32,8 +31,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/b612": "^5.0.8",
+		"@ibm/plex": "^6.4.0"
-		"lodash": "^4.17.21",
-		"normalize.css": "^8.0.1"
 	}
 }

pnpm-lock.yaml

@@ -5,15 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@fontsource/b612':
+  '@ibm/plex':
-    specifier: ^5.0.8
+    specifier: ^6.4.0
-    version: 5.0.8
+    version: 6.4.0
-  lodash:
-    specifier: ^4.17.21
-    version: 4.17.21
-  normalize.css:
-    specifier: ^8.0.1
-    version: 8.0.1
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -28,9 +22,6 @@ 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)
@@ -327,10 +318,6 @@ 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'}
@@ -351,6 +338,10 @@ 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'}
@@ -601,10 +592,6 @@ 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
@@ -1441,10 +1428,6 @@ 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'}
@@ -1534,10 +1517,6 @@ 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,13 +5,8 @@ body, html {
   justify-content: center;
   align-items: center;
 
-  color: white;
+  color: #d9d9d9;
   background-color: black;
 
-  font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  font-size: 1.5vw;
-}
-
-* {
-  box-sizing: border-box;
 }

src/lib/Axes.svelte

@@ -1,65 +0,0 @@
-<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

@@ -0,0 +1,48 @@
+<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,107 +1,93 @@
 <script lang="ts">
-	import _ from 'lodash';
+	import { onMount } from 'svelte';
-	import { createEventDispatcher, onMount } from 'svelte';
-	const dispatch = createEventDispatcher();
 
-	const START_COUNT = 27;
+	const START_COUNT = 13;
-	const MAX_COUNT = 33;
+	const MAX_COUNT = 50;
-	const MARGIN_SIZE = 16;
 
-	let horizontalCount = START_COUNT;
-	let verticalCount = START_COUNT;
-	let blockSize = 64;
-	let cornerBlocks = 2;
-
-	let horizontalMargin = 0;
-	let verticalMargin = 0;
-
-	$: updateCounts();
-	function updateCounts() {
-		const gridWidth = window.innerWidth - MARGIN_SIZE;
-		const gridHeight = window.innerHeight - MARGIN_SIZE;
-
-		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 horizontalCount = count;
+	let verticalCount = count;
+
+	$: count && updateCounts();
+	function updateCounts() {
+		function discrepancy(count: number) {
+			const blockSize = window.innerWidth / count;
+			return window.innerHeight / blockSize - Math.floor(window.innerHeight / blockSize);
+		}
+		let finalCount = count;
+
+		count = START_COUNT;
 		let bestDiscrepancy = discrepancy(count);
 		while (count < MAX_COUNT) {
-			count += 2;
+			count++;
 			const currentDiscrepancy = discrepancy(count);
-			if (currentDiscrepancy < bestDiscrepancy) {
+			console.log({ currentDiscrepancy, count });
-				bestDiscrepancy = currentDiscrepancy;
+			const workingDiscrepancy = currentDiscrepancy;
+			if (workingDiscrepancy < bestDiscrepancy) {
+				bestDiscrepancy = workingDiscrepancy;
 				finalCount = count;
+				console.log('New best discrepancy', bestDiscrepancy, 'at', finalCount);
 			}
 		}
 
-		const longerCount = finalCount;
+		count = finalCount;
-		const shorterCount = Math.round(longerCount * (shorterSide / longerSide));
+		horizontalCount = count;
-
+		verticalCount = Math.round(horizontalCount * (window.innerHeight / window.innerWidth));
-		[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', updateCountsOnResize);
+		// window.addEventListener('resize', updateCounts);
 		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="background"
+		class="grid"
-	class:even-vertical={verticalCount % 2 === 0}
+		style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
-	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"></div>
+					<div class="block" class:edge={isEdge(x, y)} class:corner={isCorner(x, y)}></div>
 				{/each}
 			</div>
 		{/each}
@@ -116,115 +102,52 @@
 		width: 100%;
 		height: 100%;
 
-		pointer-events: none;
+		--grid-color-dark: #666;
-
+		--grid-color-light: #888;
 		--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 {
+		pointer-events: none;
-		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: var(--vertical-margin);
+		/*top: calc(50% - (var(--block-size) * var(--vertical-count) / 2));*/
-		left: var(--horizontal-margin);
+		/*left: calc(50% - (var(--block-size) * var(--horizontal-count) / 2));*/
+	}
 
-		& .row {
+	.row {
 		display: contents;
 	}
 
-		& .block {
+	.block {
-			background: black;
+		width: 100%;
-			border-right: 1px solid gray;
+		height: 100%;
-			border-bottom: 1px solid gray;
+		background-color: var(--grid-color-light);
+
+		&.edge {
+			background-color: white;
 		}
 
-		& .row:first-child .block {
+		&.corner {
-			border-top: 1px solid gray;
+			background-color: var(--corner-color);
+		}
 	}
 
-		& .block:first-child {
+	.row:nth-child(even) .block:nth-child(odd),
-			border-left: 1px solid gray;
+	.row:nth-child(odd) .block:nth-child(even) {
+		background-color: var(--grid-color-dark);
+
+		&.edge {
+			background-color: black;
+		}
+
+		&.corner {
+			background-color: var(--corner-color);
 		}
 	}
 </style>

src/lib/BrightnessGradient.svelte

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

src/lib/ColorGradient.svelte

@@ -1,19 +0,0 @@
-<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,17 +1,12 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+    import {onMount} from "svelte";
-	import { fade } from 'svelte/transition';
 
-	let screenResolution = '';
+    let screenResolution = "";
-	let windowResolution = '';
+    let windowResolution = "";
 
     function updateResolution() {
-		const realWidth = Math.round(screen.width * window.devicePixelRatio);
+        screenResolution = `${screen.width} x ${screen.height}`;
-		const realHeight = Math.round(screen.height * window.devicePixelRatio);
+        windowResolution = `${window.innerWidth} x ${window.innerHeight}`;
-		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(() => {
@@ -19,7 +14,7 @@
             updateResolution();
         });
         updateResolution();
-	});
+    })
 </script>
 
 <div class="info">
@@ -27,25 +22,10 @@
     <div class="title">Screen Resolution</div>
     <div class="value">{screenResolution}</div>
     {#if windowResolution !== screenResolution}
-			<div class="window" transition:fade>
+      <div class="window">
         <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,61 +1,24 @@
 <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
+<div class="test-card">
-	class="test-card"
+	<div class="background">
-	style="--block-size: {sizes.blockSize}px;
+		<BackgroundGrid />
-				 --horizontal-margin: {sizes.horizontalMargin}px;
+	</div>
-				 --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>
 
-	<div class="column left">
+		<div class="color-bars">
-		<div class="gradient">
+			<div class="color-bar red"></div>
-			<ColorGradient />
+			<div class="color-bar green"></div>
-		</div>
+			<div class="color-bar blue"></div>
-		<div class="gradient">
+			<div class="color-bar black"></div>
-			<BrightnessGradient />
-		</div>
-	</div>
-	<div class="column right">
-		<div class="gradient">
-			<ColorGradient />
-		</div>
-		<div class="gradient">
-			<BrightnessGradient />
 		</div>
+		<div class="grayscale-gradient"></div>
+		<div class="color-gradient-background"></div>
 	</div>
 </div>
 
@@ -70,57 +33,95 @@
 		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%);
 
-		width: calc(var(--block-size) * var(--circle-blocks));
+	.color-bars {
-		height: calc(var(--block-size) * var(--circle-blocks));
+		display: flex;
+		grid-column: 1 / 5;
+	}
 
+	.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;
-		border: 1px solid white;
+		background-color: #eee;
-		background: rgba(0, 0, 0, 0.66);
+		font-size: 2vw;
-		border-radius: 50%;
 	}
 
-	.outer {
+	.geometry-pattern {
-		position: absolute;
+		grid-column: 3 / 5;
-		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;
-	}
-
-	.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;
-
+		justify-content: space-around;
-		&.left {
+		align-items: center;
-			left: calc(var(--horizontal-margin) + var(--block-size) * 3);
 	}
 
-		&.right {
+	.circle,
-			right: calc(var(--horizontal-margin) + var(--block-size) * 3);
+	.square {
-			transform: rotate(180deg);
+		background-color: #888;
+		aspect-ratio: 1 / 1;
 	}
 
-		& .gradient {
+	.circle {
-			flex-grow: 1;
+		width: 10vw;
+		border-radius: 50%;
+	}
+
+	.square {
+		width: 10vw;
+	}
+
+	@media (max-width: 600px) {
+		.sharpness-pattern span {
+			font-size: 5vw;
+		}
+
+		.circle,
+		.square {
+			width: 20vw;
 		}
 	}
 </style>

src/routes/+page.svelte

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