From ee4673737f0f7b1b408e3962e5ca2e8a556bff3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Mon, 5 Feb 2024 14:06:31 +0100 Subject: [PATCH] feat: refactor, add transparent edge mode (ish) --- src/lib/BackgroundGrid.svelte | 107 +++++++++++++++++++++++++++------- 1 file changed, 85 insertions(+), 22 deletions(-) diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte index d36e3db..90b99b9 100644 --- a/src/lib/BackgroundGrid.svelte +++ b/src/lib/BackgroundGrid.svelte @@ -16,6 +16,8 @@ let verticalMargin = MARGIN_SIZE; let unloaded = true; + let transparent = false; + function updateCounts() { const gridWidth = window.innerWidth - MARGIN_SIZE; const gridHeight = window.innerHeight - MARGIN_SIZE; @@ -69,11 +71,11 @@
@@ -86,15 +88,21 @@
{#each ['top', 'bottom'] as edge}
- {#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _} -
+ {#each [...Array(horizontalCount).keys()] as n} +
= horizontalCount - cornerBlocks} + >
{/each}
{/each} {#each ['left', 'right'] as edge}
- {#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _} -
+ {#each [...Array(verticalCount).keys()] as n} +
= verticalCount - cornerBlocks} + >
{/each}
{/each} @@ -121,8 +129,6 @@ 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 { @@ -131,19 +137,19 @@ position: absolute; &.top { top: 0; - height: var(--corner-height); + height: var(--vertical-margin); } &.bottom { bottom: 0; - height: var(--corner-height); + height: var(--vertical-margin); } &.left { left: 0; - width: var(--corner-width); + width: var(--horizontal-margin); } &.right { right: 0; - width: var(--corner-width); + width: var(--horizontal-margin); } } @@ -163,9 +169,14 @@ & .top, & .bottom { - width: calc(100vw - var(--corner-width) * 2); + width: calc(100vw - var(--horizontal-margin) * 2); height: calc(var(--margin-size) * 2); - left: var(--corner-width); + left: var(--horizontal-margin); + + & .block { + width: var(--block-size); + height: var(--vertical-margin); + } } & .left { @@ -179,27 +190,79 @@ & .left, & .right { flex-direction: column; - height: calc(100vh - var(--corner-height) * 2); + height: calc(100vh - var(--vertical-margin) * 2); width: calc(var(--margin-size) * 2); - top: var(--corner-height); + top: var(--vertical-margin); + + & .block { + width: var(--horizontal-margin); + height: var(--block-size); + } } & .block { display: inline-block; - height: var(--block-size); - width: var(--block-size); - background: white; + background: black; &:nth-child(odd) { - background: black; + background: white; + } + + &.corner-block { + background: white; } } } - .background.even-vertical .edges .right .block { - background: black; + .block, + .corner { + transition: background 1s; + } + + .background.even-vertical .edges .right .block:not(.corner-block) { + background: white; &:nth-child(odd) { - background: white; + background: black; + } + } + + .background.transparent { + & .block { + background: transparent !important; + } + + & .edge { + &.top .block { + border-right: 1px solid gray; + &:first-child { + border-left: 1px solid gray; + } + } + + &.bottom .block { + border-right: 1px solid gray; + &:first-child { + border-left: 1px solid gray; + } + } + + &.left .block { + border-bottom: 1px solid gray; + &:first-child { + border-top: 1px solid gray; + } + } + + &.right .block { + border-bottom: 1px solid gray; + &:first-child { + border-top: 1px solid gray; + } + } + } + + & .corner { + background: transparent !important; } }