thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

margins & squares

Browse source
This commit is contained in:
Tomáš Mládek 2024-02-01 12:40:55 +01:00
parent 5d56a7341e
commit aab961011d
4 changed files with 294 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/lib/BackgroundCorners.svelte Normal file
View file

@ -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>

168
src/lib/BackgroundGrid.svelte
View file

@ -1,39 +1,153 @@
<script lang="ts"> <script lang="ts">
let count = 12; import { onMount } from 'svelte';
$: realCount = count + 2;
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> </script>
<div class="grid" style="--count: {realCount}"> <div class="background">
{#each Array.from({length: realCount}) as _} <div
<div class="row"> class="grid"
{#each Array.from({length: realCount}) as _} style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
<div class="block"></div> >
{/each} {#each [...Array(verticalCount).keys()] as x}
</div> <div class="row">
{/each} {#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> </div>
<style> <style>
.grid { .background {
display: grid; position: absolute;
grid-template-columns: repeat(var(--count), 20px); top: 0;
grid-template-rows: repeat(var(--count), 20px); left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; --grid-color-dark: #666;
} --grid-color-light: #888;
--corner-color: white;
.row { pointer-events: none;
display: contents; }
}
.block { .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));*/
}
background-color: gray; .row {
} display: contents;
}
.row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) { .block {
background-color: darkgray; width: 100%;
} height: 100%;
background-color: var(--grid-color-light);
&.edge {
background-color: white;
}
&.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> </style>

184
src/lib/TestCard.svelte
View file

@ -1,107 +1,127 @@
<script lang="ts"> <script lang="ts">
import BackgroundGrid from '$lib/BackgroundGrid.svelte';
import BackgroundGrid from "$lib/BackgroundGrid.svelte"; import ScreenInfo from '$lib/ScreenInfo.svelte';
import ScreenInfo from "$lib/ScreenInfo.svelte";
</script> </script>
<div class="test-card"> <div class="test-card">
<div class="background"> <div class="background">
<BackgroundGrid /> <BackgroundGrid />
</div> </div>
<ScreenInfo />
<div class="inner"> <div class="inner">
<div class="color-bars"> <ScreenInfo />
<div class="color-bar red"></div>
<div class="color-bar green"></div> <div class="color-bars">
<div class="color-bar blue"></div> <div class="color-bar red"></div>
<div class="color-bar black"></div> <div class="color-bar green"></div>
</div> <div class="color-bar blue"></div>
<div class="grayscale-gradient"></div> <div class="color-bar black"></div>
<div class="color-gradient-background"></div> </div>
</div> <div class="grayscale-gradient"></div>
<div class="color-gradient-background"></div>
</div>
</div> </div>
<style> <style>
.test-card { .test-card {
width: 100vw; position: absolute;
height: 100vh; top: 0;
} left: 0;
.inner { width: 100vw;
width: 80%; height: 100vh;
height: 80%; overflow: hidden;
display: grid; }
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 2fr 1fr 1fr 1fr;
gap: 10px;
display: none;
}
.background { .background {
position: absolute; 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;
}
.color-bars {
display: flex;
grid-column: 1 / 5;
}
.color-bars { .color-bar {
display: flex; flex-grow: 1;
grid-column: 1 / 5; height: 100%;
} }
.color-bar { .red {
flex-grow: 1; background-color: #ff0000;
height: 100%; }
}
.red { background-color: #ff0000; } .green {
.green { background-color: #00ff00; } background-color: #00ff00;
.blue { background-color: #0000ff; } }
.black { background-color: #000; }
.grayscale-gradient { .blue {
grid-column: 1 / 5; background-color: #0000ff;
background: linear-gradient(to right, #000, #fff); }
}
.sharpness-pattern { .black {
grid-column: 1 / 3; background-color: #000;
display: flex; }
justify-content: center;
align-items: center;
background-color: #eee;
font-size: 2vw;
}
.geometry-pattern { .grayscale-gradient {
grid-column: 3 / 5; grid-column: 1 / 5;
display: flex; background: linear-gradient(to right, #000, #fff);
justify-content: space-around; }
align-items: center;
}
.circle, .square { .sharpness-pattern {
background-color: #888; grid-column: 1 / 3;
aspect-ratio: 1 / 1; display: flex;
} justify-content: center;
align-items: center;
background-color: #eee;
font-size: 2vw;
}
.circle { .geometry-pattern {
width: 10vw; grid-column: 3 / 5;
border-radius: 50%; display: flex;
} justify-content: space-around;
align-items: center;
}
.square { .circle,
width: 10vw; .square {
} background-color: #888;
aspect-ratio: 1 / 1;
}
@media (max-width: 600px) { .circle {
.sharpness-pattern span { width: 10vw;
font-size: 5vw; border-radius: 50%;
} }
.circle, .square { .square {
width: 20vw; width: 10vw;
} }
}
@media (max-width: 600px) {
.sharpness-pattern span {
font-size: 5vw;
}
.circle,
.square {
width: 20vw;
}
}
</style> </style>

1
src/routes/+layout.ts Normal file
View file

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