margins & squares

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,27 +1,123 @@
 <script lang="ts">
-    let count = 12;
-    $: realCount = count + 2;
+	import { onMount } from 'svelte';
+
+	const START_COUNT = 13;
+	const MAX_COUNT = 50;
+
+	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++;
+			const currentDiscrepancy = discrepancy(count);
+			console.log({ currentDiscrepancy, count });
+			const workingDiscrepancy = currentDiscrepancy;
+			if (workingDiscrepancy < bestDiscrepancy) {
+				bestDiscrepancy = workingDiscrepancy;
+				finalCount = count;
+				console.log('New best discrepancy', bestDiscrepancy, 'at', finalCount);
+			}
+		}
+
+		count = finalCount;
+		horizontalCount = count;
+		verticalCount = Math.round(horizontalCount * (window.innerHeight / window.innerWidth));
+	}
+
+	onMount(() => {
+		// 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="grid" style="--count: {realCount}">
-  {#each Array.from({length: realCount}) as _}
+<div class="background">
+	<div
+		class="grid"
+		style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
+	>
+		{#each [...Array(verticalCount).keys()] as x}
 			<div class="row">
-      {#each Array.from({length: realCount}) as _}
-        <div class="block"></div>
+				{#each [...Array(horizontalCount).keys()] as y}
+					<div class="block" class:edge={isEdge(x, y)} class:corner={isCorner(x, y)}></div>
 				{/each}
 			</div>
 		{/each}
 	</div>
+</div>
 
 <style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(var(--count), 20px);
-    grid-template-rows: repeat(var(--count), 20px);
+	.background {
+		position: absolute;
+		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
 
-    position: relative;
+		--grid-color-dark: #666;
+		--grid-color-light: #888;
+		--corner-color: white;
+
+		pointer-events: none;
+	}
+
+	.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));*/
 	}
 
 	.row {
@@ -29,11 +125,29 @@
 	}
 
 	.block {
+		width: 100%;
+		height: 100%;
+		background-color: var(--grid-color-light);
 
-    background-color: gray;
+		&.edge {
+			background-color: white;
 		}
 
-  .row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
-    background-color: darkgray;
+		&.corner {
+			background-color: var(--corner-color);
+		}
+	}
+
+	.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);
+		}
 	}
 </style>

src/lib/TestCard.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-
-import BackgroundGrid from "$lib/BackgroundGrid.svelte";
-import ScreenInfo from "$lib/ScreenInfo.svelte";
+	import BackgroundGrid from '$lib/BackgroundGrid.svelte';
+	import ScreenInfo from '$lib/ScreenInfo.svelte';
 </script>
 
 <div class="test-card">
 	<div class="background">
 		<BackgroundGrid />
 	</div>
-  <ScreenInfo />
 
 	<div class="inner">
+		<ScreenInfo />
+
 		<div class="color-bars">
 			<div class="color-bar red"></div>
 			<div class="color-bar green"></div>
@@ -24,8 +24,19 @@ import ScreenInfo from "$lib/ScreenInfo.svelte";
 
 <style>
 	.test-card {
+		position: absolute;
+		top: 0;
+		left: 0;
+
 		width: 100vw;
 		height: 100vh;
+		overflow: hidden;
+	}
+
+	.background {
+		width: 100%;
+		height: 100%;
+		z-index: -9;
 	}
 
 	.inner {
@@ -35,16 +46,12 @@ import ScreenInfo from "$lib/ScreenInfo.svelte";
 		grid-template-columns: repeat(4, 1fr);
 		grid-template-rows: 2fr 1fr 1fr 1fr;
 		gap: 10px;
-    display: none;
 	}
 
 	.background {
 		position: absolute;
 	}
 
-
-
-
 	.color-bars {
 		display: flex;
 		grid-column: 1 / 5;
@@ -55,10 +62,21 @@ import ScreenInfo from "$lib/ScreenInfo.svelte";
 		height: 100%;
 	}
 
-  .red { background-color: #ff0000; }
-  .green { background-color: #00ff00; }
-  .blue { background-color: #0000ff; }
-  .black { background-color: #000; }
+	.red {
+		background-color: #ff0000;
+	}
+
+	.green {
+		background-color: #00ff00;
+	}
+
+	.blue {
+		background-color: #0000ff;
+	}
+
+	.black {
+		background-color: #000;
+	}
 
 	.grayscale-gradient {
 		grid-column: 1 / 5;
@@ -81,7 +99,8 @@ import ScreenInfo from "$lib/ScreenInfo.svelte";
 		align-items: center;
 	}
 
-  .circle, .square {
+	.circle,
+	.square {
 		background-color: #888;
 		aspect-ratio: 1 / 1;
 	}
@@ -100,7 +119,8 @@ import ScreenInfo from "$lib/ScreenInfo.svelte";
 			font-size: 5vw;
 		}
 
-    .circle, .square {
+		.circle,
+		.square {
 			width: 20vw;
 		}
 	}

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;