margins & squares
This commit is contained in:
parent
5d56a7341e
commit
aab961011d
4 changed files with 294 additions and 111 deletions
48
src/lib/BackgroundCorners.svelte
Normal file
48
src/lib/BackgroundCorners.svelte
Normal 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>
|
||||
|
|
@ -1,39 +1,153 @@
|
|||
<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="row">
|
||||
{#each Array.from({length: realCount}) as _}
|
||||
<div class="block"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
<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(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);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
--grid-color-dark: #666;
|
||||
--grid-color-light: #888;
|
||||
--corner-color: white;
|
||||
|
||||
.row {
|
||||
display: contents;
|
||||
}
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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) {
|
||||
background-color: darkgray;
|
||||
}
|
||||
</style>
|
||||
.block {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,127 @@
|
|||
<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="background">
|
||||
<BackgroundGrid />
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.test-card {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.test-card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.inner {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 2fr 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
display: none;
|
||||
}
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.color-bars {
|
||||
display: flex;
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
.color-bars {
|
||||
display: flex;
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
.color-bar {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-bar {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.red {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
.red { background-color: #ff0000; }
|
||||
.green { background-color: #00ff00; }
|
||||
.blue { background-color: #0000ff; }
|
||||
.black { background-color: #000; }
|
||||
.green {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
.grayscale-gradient {
|
||||
grid-column: 1 / 5;
|
||||
background: linear-gradient(to right, #000, #fff);
|
||||
}
|
||||
.blue {
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
.sharpness-pattern {
|
||||
grid-column: 1 / 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eee;
|
||||
font-size: 2vw;
|
||||
}
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.geometry-pattern {
|
||||
grid-column: 3 / 5;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.grayscale-gradient {
|
||||
grid-column: 1 / 5;
|
||||
background: linear-gradient(to right, #000, #fff);
|
||||
}
|
||||
|
||||
.circle, .square {
|
||||
background-color: #888;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.sharpness-pattern {
|
||||
grid-column: 1 / 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eee;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.geometry-pattern {
|
||||
grid-column: 3 / 5;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 10vw;
|
||||
}
|
||||
.circle,
|
||||
.square {
|
||||
background-color: #888;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sharpness-pattern span {
|
||||
font-size: 5vw;
|
||||
}
|
||||
.circle {
|
||||
width: 10vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.circle, .square {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.square {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sharpness-pattern span {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.circle,
|
||||
.square {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1
src/routes/+layout.ts
Normal file
1
src/routes/+layout.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export const ssr = false;
|
||||
Loading…
Reference in a new issue