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

feat: refactor, add transparent edge mode (ish)
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Tomáš Mládek 2024-02-05 14:06:31 +01:00
parent 82907f451e
commit ee4673737f
1 changed files with 85 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
src/lib/BackgroundGrid.svelte
View file

@ -16,6 +16,8 @@
let verticalMargin = MARGIN_SIZE; let verticalMargin = MARGIN_SIZE;
let unloaded = true; let unloaded = true;
let transparent = false;
function updateCounts() { function updateCounts() {
const gridWidth = window.innerWidth - MARGIN_SIZE; const gridWidth = window.innerWidth - MARGIN_SIZE;
const gridHeight = window.innerHeight - MARGIN_SIZE; const gridHeight = window.innerHeight - MARGIN_SIZE;
@ -69,11 +71,11 @@
<div <div
class="background" class="background"
class:unloaded class:unloaded
class:transparent
class:even-vertical={verticalCount % 2 === 0} class:even-vertical={verticalCount % 2 === 0}
style="--horizontal-count: {horizontalCount}; style="--horizontal-count: {horizontalCount};
--vertical-count: {verticalCount}; --vertical-count: {verticalCount};
--block-size: {blockSize}px; --block-size: {blockSize}px;
--corner-blocks: {cornerBlocks};
--horizontal-margin: {horizontalMargin}px; --horizontal-margin: {horizontalMargin}px;
--vertical-margin: {verticalMargin}px;" --vertical-margin: {verticalMargin}px;"
> >
@ -86,15 +88,21 @@
<div class="edges"> <div class="edges">
{#each ['top', 'bottom'] as edge} {#each ['top', 'bottom'] as edge}
<div class="edge {edge}"> <div class="edge {edge}">
{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _} {#each [...Array(horizontalCount).keys()] as n}
<div class="block"></div> <div
class="block"
class:corner-block={n < cornerBlocks || n >= horizontalCount - cornerBlocks}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
{#each ['left', 'right'] as edge} {#each ['left', 'right'] as edge}
<div class="edge {edge}"> <div class="edge {edge}">
{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _} {#each [...Array(verticalCount).keys()] as n}
<div class="block"></div> <div
class="block"
class:corner-block={n < cornerBlocks || n >= verticalCount - cornerBlocks}
></div>
{/each} {/each}
</div> </div>
{/each} {/each}
@ -121,8 +129,6 @@
pointer-events: none; pointer-events: none;
--corner-color: white; --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 { .corner {
@ -131,19 +137,19 @@
position: absolute; position: absolute;
&.top { &.top {
top: 0; top: 0;
height: var(--corner-height); height: var(--vertical-margin);
} }
&.bottom { &.bottom {
bottom: 0; bottom: 0;
height: var(--corner-height); height: var(--vertical-margin);
} }
&.left { &.left {
left: 0; left: 0;
width: var(--corner-width); width: var(--horizontal-margin);
} }
&.right { &.right {
right: 0; right: 0;
width: var(--corner-width); width: var(--horizontal-margin);
} }
} }
@ -163,9 +169,14 @@
& .top, & .top,
& .bottom { & .bottom {
width: calc(100vw - var(--corner-width) * 2); width: calc(100vw - var(--horizontal-margin) * 2);
height: calc(var(--margin-size) * 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 { & .left {
@ -179,27 +190,79 @@
& .left, & .left,
& .right { & .right {
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--corner-height) * 2); height: calc(100vh - var(--vertical-margin) * 2);
width: calc(var(--margin-size) * 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 { & .block {
display: inline-block; display: inline-block;
height: var(--block-size);
width: var(--block-size);
background: white; background: black;
&:nth-child(odd) { &:nth-child(odd) {
background: black; background: white;
}
&.corner-block {
background: white;
} }
} }
} }
.background.even-vertical .edges .right .block { .block,
background: black; .corner {
transition: background 1s;
}
.background.even-vertical .edges .right .block:not(.corner-block) {
background: white;
&:nth-child(odd) { &: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;
} }
} }