diff --git a/src/app.html b/src/app.html index 77a5ff5..f273cc5 100644 --- a/src/app.html +++ b/src/app.html @@ -2,7 +2,6 @@ - %sveltekit.head% diff --git a/src/lib/BackgroundGrid.svelte b/src/lib/BackgroundGrid.svelte index 9c8778e..d36e3db 100644 --- a/src/lib/BackgroundGrid.svelte +++ b/src/lib/BackgroundGrid.svelte @@ -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; });
Screen Resolution
{screenResolution}
- {#if windowResolution !== screenResolution} + {#if windowResolution && windowResolution !== screenResolution}
Window Resolution
{windowResolution}
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte index a3a595b..e16b42e 100644 --- a/src/lib/TestCard.svelte +++ b/src/lib/TestCard.svelte @@ -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};" > (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 { diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index a3d1578..189f71e 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1 +1 @@ -export const ssr = false; +export const prerender = true; diff --git a/svelte.config.js b/svelte.config.js index dfe9bb7..ae784dd 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; const config = { preprocess: vitePreprocess(), kit: { - adapter: adapter({ fallback: 'index.html' }) + adapter: adapter() } };