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

105
src/lib/BackgroundGrid.svelte
View file

@ -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 @@
<div
class="background"
class:unloaded
class:transparent
class:even-vertical={verticalCount % 2 === 0}
style="--horizontal-count: {horizontalCount};
--vertical-count: {verticalCount};
--block-size: {blockSize}px;
--corner-blocks: {cornerBlocks};
--horizontal-margin: {horizontalMargin}px;
--vertical-margin: {verticalMargin}px;"
>
@ -86,15 +88,21 @@
<div class="edges">
{#each ['top', 'bottom'] as edge}
<div class="edge {edge}">
{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
<div class="block"></div>
{#each [...Array(horizontalCount).keys()] as n}
<div
class="block"
class:corner-block={n < cornerBlocks || n >= horizontalCount - cornerBlocks}
></div>
{/each}
</div>
{/each}
{#each ['left', 'right'] as edge}
<div class="edge {edge}">
{#each [...Array(verticalCount - cornerBlocks * 2).keys()] as _}
<div class="block"></div>
{#each [...Array(verticalCount).keys()] as n}
<div
class="block"
class:corner-block={n < cornerBlocks || n >= verticalCount - cornerBlocks}
></div>
{/each}
</div>
{/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: black;
&:nth-child(odd) {
background: white;
}
&.corner-block {
background: white;
}
}
}
.block,
.corner {
transition: background 1s;
}
.background.even-vertical .edges .right .block:not(.corner-block) {
background: white;
&:nth-child(odd) {
background: black;
}
}
.background.transparent {
& .block {
background: transparent !important;
}
.background.even-vertical .edges .right .block {
background: black;
&:nth-child(odd) {
background: white;
& .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;
}
}