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

Compare commits

base: thm:854dcbdcc4266d58c3df74ff370d9699a4588085
Branches Tags
thm:main
thm:develop
..
compare: thm:75c0dce27a69fb093c1bfcca05db5bc4bb05dc9c
Branches Tags
thm:main
thm:develop

1 commit
854dcbdcc4 ... 75c0dce27a

Author SHA1 Message Date
Tomáš Mládek
75c0dce27a ci: enable CI
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details
2024-02-02 21:46:22 +01:00
7 changed files with 14 additions and 29 deletions
Show stats Expand all files Collapse all files

1
Earthfile
View file

@ -5,7 +5,6 @@ site:
RUN npm install -g pnpm RUN npm install -g pnpm
COPY package.json pnpm-lock.yaml /site COPY package.json pnpm-lock.yaml /site
WORKDIR /site WORKDIR /site
CACHE $HOME/.local/share/pnpm
RUN pnpm install --frozen-lockfile RUN pnpm install --frozen-lockfile
COPY . /site COPY . /site
RUN pnpm build RUN pnpm build

1
src/app.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

21
src/lib/BackgroundGrid.svelte
View file

@ -12,10 +12,10 @@
let blockSize = 64; let blockSize = 64;
let cornerBlocks = 2; let cornerBlocks = 2;
let horizontalMargin = MARGIN_SIZE; let horizontalMargin = 0;
let verticalMargin = MARGIN_SIZE; let verticalMargin = 0;
let unloaded = true;
$: updateCounts();
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;
@ -62,13 +62,11 @@
onMount(() => { onMount(() => {
window.addEventListener('resize', updateCountsOnResize); window.addEventListener('resize', updateCountsOnResize);
updateCounts(); updateCounts();
unloaded = false;
}); });
</script> </script>
<div <div
class="background" class="background"
class:unloaded
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};
@ -229,17 +227,4 @@
border-left: 1px solid gray; 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> </style>

4
src/lib/ScreenInfo.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
let screenResolution = '... x ...'; let screenResolution = '';
let windowResolution = ''; let windowResolution = '';
function updateResolution() { function updateResolution() {
@ -26,7 +26,7 @@
<div class="resolution"> <div class="resolution">
<div class="title">Screen Resolution</div> <div class="title">Screen Resolution</div>
<div class="value">{screenResolution}</div> <div class="value">{screenResolution}</div>
{#if windowResolution && windowResolution !== screenResolution} {#if windowResolution !== screenResolution}
<div class="window" transition:fade> <div class="window" transition:fade>
<div class="title">Window Resolution</div> <div class="title">Window Resolution</div>
<div class="value">{windowResolution}</div> <div class="value">{windowResolution}</div>

12
src/lib/TestCard.svelte
View file

@ -7,14 +7,15 @@
let sizes = { let sizes = {
blockSize: 64, blockSize: 64,
horizontalCount: 16, horizontalCount: 8,
verticalCount: 16, verticalCount: 8,
horizontalMargin: 0, horizontalMargin: 0,
verticalMargin: 0 verticalMargin: 0
}; };
$: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4; $: columnWidth = sizes.horizontalCount % 2 === 0 ? 3 : 4;
$: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2); $: columnHeight = 2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2);
$: columnTop = (sizes.verticalCount - columnHeight) / 2;
$: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2; $: leftColumn = sizes.horizontalCount / 4 - columnWidth / 2;
$: circleBlocks = $: circleBlocks =
2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) + 2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
@ -29,6 +30,7 @@
--circle-blocks: {circleBlocks}; --circle-blocks: {circleBlocks};
--column-width: {columnWidth}; --column-width: {columnWidth};
--column-height: {columnHeight}; --column-height: {columnHeight};
--column-top: {columnTop};
--left-column: {leftColumn};" --left-column: {leftColumn};"
> >
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} /> <BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
@ -101,9 +103,7 @@
.column { .column {
position: absolute; position: absolute;
top: 50%; top: calc(var(--vertical-margin) + var(--block-size) * var(--column-top));
transform: translateY(-50%);
width: calc(var(--block-size) * var(--column-width)); width: calc(var(--block-size) * var(--column-width));
height: calc(var(--block-size) * var(--column-height)); height: calc(var(--block-size) * var(--column-height));
z-index: 9; z-index: 9;
@ -116,7 +116,7 @@
&.right { &.right {
right: calc(var(--horizontal-margin) + var(--block-size) * 3); right: calc(var(--horizontal-margin) + var(--block-size) * 3);
transform: translateY(-50%) rotate(180deg); transform: rotate(180deg);
} }
& .gradient { & .gradient {

2
src/routes/+layout.ts
View file

@ -1 +1 @@
export const prerender = true; export const ssr = false;

2
svelte.config.js
View file

@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
const config = { const config = {
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
adapter: adapter() adapter: adapter({ fallback: 'index.html' })
} }
}; };