Compare commits
2 commits
75c0dce27a
...
854dcbdcc4
| Author | SHA1 | Date | |
|---|---|---|---|
| 854dcbdcc4 | |||
| c31aed6ba4 |
7 changed files with 29 additions and 14 deletions
|
|
@ -5,6 +5,7 @@ site:
|
|||
RUN npm install -g pnpm
|
||||
COPY package.json pnpm-lock.yaml /site
|
||||
WORKDIR /site
|
||||
CACHE $HOME/.local/share/pnpm
|
||||
RUN pnpm install --frozen-lockfile
|
||||
COPY . /site
|
||||
RUN pnpm build
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
let blockSize = 64;
|
||||
let cornerBlocks = 2;
|
||||
|
||||
let horizontalMargin = 0;
|
||||
let verticalMargin = 0;
|
||||
let horizontalMargin = MARGIN_SIZE;
|
||||
let verticalMargin = MARGIN_SIZE;
|
||||
let unloaded = true;
|
||||
|
||||
$: updateCounts();
|
||||
function updateCounts() {
|
||||
const gridWidth = window.innerWidth - MARGIN_SIZE;
|
||||
const gridHeight = window.innerHeight - MARGIN_SIZE;
|
||||
|
|
@ -62,11 +62,13 @@
|
|||
onMount(() => {
|
||||
window.addEventListener('resize', updateCountsOnResize);
|
||||
updateCounts();
|
||||
unloaded = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="background"
|
||||
class:unloaded
|
||||
class:even-vertical={verticalCount % 2 === 0}
|
||||
style="--horizontal-count: {horizontalCount};
|
||||
--vertical-count: {verticalCount};
|
||||
|
|
@ -227,4 +229,17 @@
|
|||
border-left: 1px solid gray;
|
||||
}
|
||||
}
|
||||
|
||||
.background.unloaded {
|
||||
& .grid {
|
||||
width: calc(100vw - var(--horizontal-margin) * 2);
|
||||
height: calc(100vh - var(--vertical-margin) * 2);
|
||||
grid-template-rows: repeat(var(--vertical-count), 1fr);
|
||||
grid-template-columns: repeat(var(--horizontal-count), 1fr);
|
||||
}
|
||||
|
||||
& .edge {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let screenResolution = '';
|
||||
let screenResolution = '... x ...';
|
||||
let windowResolution = '';
|
||||
|
||||
function updateResolution() {
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<div class="resolution">
|
||||
<div class="title">Screen Resolution</div>
|
||||
<div class="value">{screenResolution}</div>
|
||||
{#if windowResolution !== screenResolution}
|
||||
{#if windowResolution && windowResolution !== screenResolution}
|
||||
<div class="window" transition:fade>
|
||||
<div class="title">Window Resolution</div>
|
||||
<div class="value">{windowResolution}</div>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@
|
|||
|
||||
let sizes = {
|
||||
blockSize: 64,
|
||||
horizontalCount: 8,
|
||||
verticalCount: 8,
|
||||
horizontalCount: 16,
|
||||
verticalCount: 16,
|
||||
horizontalMargin: 0,
|
||||
verticalMargin: 0
|
||||
};
|
||||
|
||||
$: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4;
|
||||
$: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2);
|
||||
$: columnTop = (sizes.verticalCount - columnHeight) / 2;
|
||||
$: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2;
|
||||
$: circleBlocks =
|
||||
2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
--circle-blocks: {circleBlocks};
|
||||
--column-width: {columnWidth};
|
||||
--column-height: {columnHeight};
|
||||
--column-top: {columnTop};
|
||||
--left-column: {leftColumn};"
|
||||
>
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
|
||||
|
|
@ -103,7 +101,9 @@
|
|||
|
||||
.column {
|
||||
position: absolute;
|
||||
top: calc(var(--vertical-margin) + var(--block-size) * var(--column-top));
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: calc(var(--block-size) * var(--column-width));
|
||||
height: calc(var(--block-size) * var(--column-height));
|
||||
z-index: 9;
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
&.right {
|
||||
right: calc(var(--horizontal-margin) + var(--block-size) * 3);
|
||||
transform: rotate(180deg);
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
& .gradient {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export const ssr = false;
|
||||
export const prerender = true;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
|||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: {
|
||||
adapter: adapter({ fallback: 'index.html' })
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue