Compare commits
No commits in common. "44143234c85c462b24d60a4fce872c1d18461e6d" and "aab961011d2b9bfdc094d491c4a6ac65beb61c0f" have entirely different histories.
44143234c8
...
aab961011d
13 changed files with 307 additions and 442 deletions
38
README.md
Normal file
38
README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "8.56.0",
|
||||
"@types/lodash": "^4.14.202",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"eslint": "^8.56.0",
|
||||
|
|
@ -32,8 +31,6 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/b612": "^5.0.8",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1"
|
||||
"@ibm/plex": "^6.4.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,9 @@ settings:
|
|||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@fontsource/b612':
|
||||
specifier: ^5.0.8
|
||||
version: 5.0.8
|
||||
lodash:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
normalize.css:
|
||||
specifier: ^8.0.1
|
||||
version: 8.0.1
|
||||
'@ibm/plex':
|
||||
specifier: ^6.4.0
|
||||
version: 6.4.0
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto':
|
||||
|
|
@ -28,9 +22,6 @@ devDependencies:
|
|||
'@types/eslint':
|
||||
specifier: 8.56.0
|
||||
version: 8.56.0
|
||||
'@types/lodash':
|
||||
specifier: ^4.14.202
|
||||
version: 4.14.202
|
||||
'@typescript-eslint/eslint-plugin':
|
||||
specifier: ^6.0.0
|
||||
version: 6.20.0(@typescript-eslint/parser@6.20.0)(eslint@8.56.0)(typescript@5.3.3)
|
||||
|
|
@ -327,10 +318,6 @@ packages:
|
|||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dev: true
|
||||
|
||||
/@fontsource/b612@5.0.8:
|
||||
resolution: {integrity: sha512-PuOfVZB37asTrwI6GD5dcOjIuEZI+m9PW6/9MM05zRxA5pSUyPn280rLP7r7mOiFmEKSEWCFyI0Yf2XJOmqwNA==}
|
||||
dev: false
|
||||
|
||||
/@humanwhocodes/config-array@0.11.14:
|
||||
resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
|
|
@ -351,6 +338,10 @@ packages:
|
|||
resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
|
||||
dev: true
|
||||
|
||||
/@ibm/plex@6.4.0:
|
||||
resolution: {integrity: sha512-P70hmNoSJhpV6fGG4++JEivoccUVuvkyZoXprsDmPTtv3s6QvL+Q8bK3HFSGmK/VgyLMDptoKPV7b/h/1xaWAw==}
|
||||
dev: false
|
||||
|
||||
/@jridgewell/gen-mapping@0.3.3:
|
||||
resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
|
@ -601,10 +592,6 @@ packages:
|
|||
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
|
||||
dev: true
|
||||
|
||||
/@types/lodash@4.14.202:
|
||||
resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
|
||||
dev: true
|
||||
|
||||
/@types/pug@2.0.10:
|
||||
resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
|
||||
dev: true
|
||||
|
|
@ -1441,10 +1428,6 @@ packages:
|
|||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
dev: true
|
||||
|
||||
/lodash@4.17.21:
|
||||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||
dev: false
|
||||
|
||||
/lru-cache@6.0.0:
|
||||
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
@ -1534,10 +1517,6 @@ packages:
|
|||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/normalize.css@8.0.1:
|
||||
resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
|
||||
dev: false
|
||||
|
||||
/once@1.4.0:
|
||||
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -5,13 +5,8 @@ body, html {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: white;
|
||||
color: #d9d9d9;
|
||||
background-color: black;
|
||||
|
||||
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let heightOdd = false;
|
||||
let widthOdd = false;
|
||||
|
||||
function updateOdd() {
|
||||
heightOdd = window.innerHeight % 2 === 1;
|
||||
widthOdd = window.innerWidth % 2 === 1;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
updateOdd();
|
||||
window.addEventListener('resize', updateOdd);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="axes" class:heightOdd class:widthOdd>
|
||||
<div class="horizontal"></div>
|
||||
<div class="vertical"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.axes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
--size: 3px;
|
||||
}
|
||||
|
||||
.axes .horizontal,
|
||||
.axes .vertical {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
z-index: 5;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
.axes .horizontal {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.axes .vertical {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: var(--size);
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/*.axes.heightOdd .horizontal {*/
|
||||
/* top: calc(50% + 1px);*/
|
||||
/*}*/
|
||||
|
||||
/*.axes.widthOdd .vertical {*/
|
||||
/* left: calc(50% + 1px);*/
|
||||
/*}*/
|
||||
</style>
|
||||
48
src/lib/BackgroundCorners.svelte
Normal file
48
src/lib/BackgroundCorners.svelte
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script lang="ts">
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let count = 12;
|
||||
$: realCount = count + 2;
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="grid" style='--count: {realCount}'>
|
||||
{#each [...Array(realCount).keys()] as x}
|
||||
<div class="row">
|
||||
{#each [...Array(realCount).keys()] as y}
|
||||
<div class="block" data-block-x={x} data-block-y={y}></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--count), 40px);
|
||||
grid-template-rows: repeat(var(--count), 40px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
|
||||
background-color: darkgray;
|
||||
}
|
||||
|
||||
.block[data-block-x="0"][data-block-y="0"] {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,107 +1,93 @@
|
|||
<script lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const START_COUNT = 27;
|
||||
const MAX_COUNT = 33;
|
||||
const MARGIN_SIZE = 16;
|
||||
const START_COUNT = 13;
|
||||
const MAX_COUNT = 50;
|
||||
|
||||
let horizontalCount = START_COUNT;
|
||||
let verticalCount = START_COUNT;
|
||||
let blockSize = 64;
|
||||
let cornerBlocks = 2;
|
||||
let count = START_COUNT;
|
||||
let horizontalCount = count;
|
||||
let verticalCount = count;
|
||||
|
||||
let horizontalMargin = 0;
|
||||
let verticalMargin = 0;
|
||||
|
||||
$: updateCounts();
|
||||
$: count && updateCounts();
|
||||
function updateCounts() {
|
||||
const gridWidth = window.innerWidth - MARGIN_SIZE;
|
||||
const gridHeight = window.innerHeight - MARGIN_SIZE;
|
||||
|
||||
const [longerSide, shorterSide] =
|
||||
gridWidth > gridHeight ? [gridWidth, gridHeight] : [gridHeight, gridWidth];
|
||||
|
||||
function discrepancy(count: number) {
|
||||
const blockSize = longerSide / count;
|
||||
return shorterSide / blockSize - Math.floor(shorterSide / blockSize);
|
||||
const blockSize = window.innerWidth / count;
|
||||
return window.innerHeight / blockSize - Math.floor(window.innerHeight / blockSize);
|
||||
}
|
||||
let finalCount = count;
|
||||
|
||||
let finalCount = START_COUNT;
|
||||
let count = START_COUNT;
|
||||
count = START_COUNT;
|
||||
let bestDiscrepancy = discrepancy(count);
|
||||
while (count < MAX_COUNT) {
|
||||
count += 2;
|
||||
count++;
|
||||
const currentDiscrepancy = discrepancy(count);
|
||||
if (currentDiscrepancy < bestDiscrepancy) {
|
||||
bestDiscrepancy = currentDiscrepancy;
|
||||
console.log({ currentDiscrepancy, count });
|
||||
const workingDiscrepancy = currentDiscrepancy;
|
||||
if (workingDiscrepancy < bestDiscrepancy) {
|
||||
bestDiscrepancy = workingDiscrepancy;
|
||||
finalCount = count;
|
||||
console.log('New best discrepancy', bestDiscrepancy, 'at', finalCount);
|
||||
}
|
||||
}
|
||||
|
||||
const longerCount = finalCount;
|
||||
const shorterCount = Math.round(longerCount * (shorterSide / longerSide));
|
||||
|
||||
[horizontalCount, verticalCount] =
|
||||
gridWidth > gridHeight ? [longerCount, shorterCount] : [shorterCount, longerCount];
|
||||
blockSize = longerSide / finalCount;
|
||||
horizontalMargin = (window.innerWidth - blockSize * horizontalCount) / 2;
|
||||
verticalMargin = (window.innerHeight - blockSize * verticalCount) / 2;
|
||||
cornerBlocks = shorterCount > 8 ? 3 : Math.max(1, Math.floor(shorterCount / 4));
|
||||
dispatch('change', {
|
||||
horizontalCount,
|
||||
verticalCount,
|
||||
blockSize,
|
||||
horizontalMargin,
|
||||
verticalMargin
|
||||
});
|
||||
count = finalCount;
|
||||
horizontalCount = count;
|
||||
verticalCount = Math.round(horizontalCount * (window.innerHeight / window.innerWidth));
|
||||
}
|
||||
const updateCountsOnResize = _.throttle(updateCounts, 200);
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('resize', updateCountsOnResize);
|
||||
// window.addEventListener('resize', updateCounts);
|
||||
updateCounts();
|
||||
});
|
||||
|
||||
function isEdge(x: number, y: number) {
|
||||
return x === 0 || y === 0 || x === verticalCount - 1 || y === horizontalCount - 1;
|
||||
}
|
||||
|
||||
const CORNER_SIZE = 3;
|
||||
function isCorner(x: number, y: number) {
|
||||
// Top left
|
||||
if ((x < CORNER_SIZE && y === 0) || (y < CORNER_SIZE && x === 0)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Top right
|
||||
if (
|
||||
(x < CORNER_SIZE && y === horizontalCount - 1) ||
|
||||
(y > horizontalCount - CORNER_SIZE - 1 && x === 0)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Bottom left
|
||||
if (
|
||||
(x > verticalCount - CORNER_SIZE - 1 && y === 0) ||
|
||||
(y < CORNER_SIZE && x === verticalCount - 1)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
// Bottom right
|
||||
// noinspection RedundantIfStatementJS
|
||||
if (
|
||||
(x > verticalCount - CORNER_SIZE - 1 && y === horizontalCount - 1) ||
|
||||
(y > horizontalCount - CORNER_SIZE - 1 && x === verticalCount - 1)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="background"
|
||||
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;"
|
||||
>
|
||||
<div class="corners">
|
||||
<div class="corner top left"></div>
|
||||
<div class="corner top right"></div>
|
||||
<div class="corner bottom left"></div>
|
||||
<div class="corner bottom right"></div>
|
||||
</div>
|
||||
<div class="edges">
|
||||
{#each ['top', 'bottom'] as edge}
|
||||
<div class="edge {edge}">
|
||||
{#each [...Array(horizontalCount - cornerBlocks * 2).keys()] as _}
|
||||
<div class="block"></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}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="background">
|
||||
<div
|
||||
class="grid"
|
||||
style="--count: {count}; --horizontal-count: {horizontalCount}; --vertical-count: {verticalCount}"
|
||||
>
|
||||
{#each [...Array(verticalCount).keys()] as x}
|
||||
<div class="row">
|
||||
{#each [...Array(horizontalCount).keys()] as y}
|
||||
<div class="block"></div>
|
||||
<div class="block" class:edge={isEdge(x, y)} class:corner={isCorner(x, y)}></div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -116,115 +102,52 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
--grid-color-dark: #666;
|
||||
--grid-color-light: #888;
|
||||
--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 {
|
||||
background-color: var(--corner-color);
|
||||
|
||||
position: absolute;
|
||||
&.top {
|
||||
top: 0;
|
||||
height: var(--corner-height);
|
||||
}
|
||||
&.bottom {
|
||||
bottom: 0;
|
||||
height: var(--corner-height);
|
||||
}
|
||||
&.left {
|
||||
left: 0;
|
||||
width: var(--corner-width);
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
width: var(--corner-width);
|
||||
}
|
||||
}
|
||||
|
||||
.edges {
|
||||
& .edge {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& .top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
& .bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
& .top,
|
||||
& .bottom {
|
||||
width: calc(100vw - var(--corner-width) * 2);
|
||||
height: calc(var(--margin-size) * 2);
|
||||
left: var(--corner-width);
|
||||
}
|
||||
|
||||
& .left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
& .right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
& .left,
|
||||
& .right {
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--corner-height) * 2);
|
||||
width: calc(var(--margin-size) * 2);
|
||||
top: var(--corner-height);
|
||||
}
|
||||
|
||||
& .block {
|
||||
display: inline-block;
|
||||
height: var(--block-size);
|
||||
width: var(--block-size);
|
||||
|
||||
background: white;
|
||||
&:nth-child(odd) {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.background.even-vertical .edges .right .block {
|
||||
background: black;
|
||||
&:nth-child(odd) {
|
||||
background: white;
|
||||
}
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
--margin: calc(100vw / var(--count) / 2);
|
||||
--block-size: calc(100vw / (var(--count)) - (var(--margin) / (var(--count))));
|
||||
grid-template-columns: repeat(var(--horizontal-count), var(--block-size));
|
||||
grid-template-rows: repeat(var(--vertical-count), var(--block-size));
|
||||
position: absolute;
|
||||
top: var(--vertical-margin);
|
||||
left: var(--horizontal-margin);
|
||||
/*top: calc(50% - (var(--block-size) * var(--vertical-count) / 2));*/
|
||||
/*left: calc(50% - (var(--block-size) * var(--horizontal-count) / 2));*/
|
||||
}
|
||||
|
||||
& .row {
|
||||
display: contents;
|
||||
.row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--grid-color-light);
|
||||
|
||||
&.edge {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
& .block {
|
||||
background: black;
|
||||
border-right: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
&.corner {
|
||||
background-color: var(--corner-color);
|
||||
}
|
||||
}
|
||||
|
||||
.row:nth-child(even) .block:nth-child(odd),
|
||||
.row:nth-child(odd) .block:nth-child(even) {
|
||||
background-color: var(--grid-color-dark);
|
||||
|
||||
&.edge {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
& .row:first-child .block {
|
||||
border-top: 1px solid gray;
|
||||
}
|
||||
|
||||
& .block:first-child {
|
||||
border-left: 1px solid gray;
|
||||
&.corner {
|
||||
background-color: var(--corner-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<div class="gradient"></div>
|
||||
|
||||
<style>
|
||||
.gradient {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(0deg, white, black);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="gradient"></div>
|
||||
|
||||
<style>
|
||||
.gradient {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#ff0000,
|
||||
#ff7f00,
|
||||
#ffff00,
|
||||
#00ff00,
|
||||
#0000ff,
|
||||
#4b0082,
|
||||
#9400d3
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,51 +1,31 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let screenResolution = '';
|
||||
let windowResolution = '';
|
||||
let screenResolution = "";
|
||||
let windowResolution = "";
|
||||
|
||||
function updateResolution() {
|
||||
const realWidth = Math.round(screen.width * window.devicePixelRatio);
|
||||
const realHeight = Math.round(screen.height * window.devicePixelRatio);
|
||||
const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
|
||||
const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
|
||||
screenResolution = `${realWidth} x ${realHeight}`;
|
||||
windowResolution = `${windowWidth} x ${windowHeight}`;
|
||||
}
|
||||
function updateResolution() {
|
||||
screenResolution = `${screen.width} x ${screen.height}`;
|
||||
windowResolution = `${window.innerWidth} x ${window.innerHeight}`;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
updateResolution();
|
||||
});
|
||||
updateResolution();
|
||||
});
|
||||
onMount(() => {
|
||||
window.addEventListener('resize', () => {
|
||||
updateResolution();
|
||||
});
|
||||
updateResolution();
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="info">
|
||||
<div class="resolution">
|
||||
<div class="title">Screen Resolution</div>
|
||||
<div class="value">{screenResolution}</div>
|
||||
{#if windowResolution !== screenResolution}
|
||||
<div class="window" transition:fade>
|
||||
<div class="title">Window Resolution</div>
|
||||
<div class="value">{windowResolution}</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.window {
|
||||
margin-top: 1em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
<div class="resolution">
|
||||
<div class="title">Screen Resolution</div>
|
||||
<div class="value">{screenResolution}</div>
|
||||
{#if windowResolution !== screenResolution}
|
||||
<div class="window">
|
||||
<div class="title">Window Resolution</div>
|
||||
<div class="value">{windowResolution}</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,61 +1,24 @@
|
|||
<script lang="ts">
|
||||
import BackgroundGrid from '$lib/BackgroundGrid.svelte';
|
||||
import ScreenInfo from '$lib/ScreenInfo.svelte';
|
||||
import Axes from '$lib/Axes.svelte';
|
||||
import ColorGradient from '$lib/ColorGradient.svelte';
|
||||
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
||||
|
||||
let sizes = {
|
||||
blockSize: 64,
|
||||
horizontalCount: 8,
|
||||
verticalCount: 8,
|
||||
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) +
|
||||
(sizes.horizontalCount % 2);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="test-card"
|
||||
style="--block-size: {sizes.blockSize}px;
|
||||
--horizontal-margin: {sizes.horizontalMargin}px;
|
||||
--vertical-margin: {sizes.verticalMargin}px;
|
||||
--circle-blocks: {circleBlocks};
|
||||
--column-width: {columnWidth};
|
||||
--column-height: {columnHeight};
|
||||
--column-top: {columnTop};
|
||||
--left-column: {leftColumn};"
|
||||
>
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} />
|
||||
<Axes />
|
||||
<div class="test-card">
|
||||
<div class="background">
|
||||
<BackgroundGrid />
|
||||
</div>
|
||||
|
||||
<div class="outer"></div>
|
||||
<div class="inner">
|
||||
<ScreenInfo />
|
||||
</div>
|
||||
|
||||
<div class="column left">
|
||||
<div class="gradient">
|
||||
<ColorGradient />
|
||||
</div>
|
||||
<div class="gradient">
|
||||
<BrightnessGradient />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column right">
|
||||
<div class="gradient">
|
||||
<ColorGradient />
|
||||
</div>
|
||||
<div class="gradient">
|
||||
<BrightnessGradient />
|
||||
<div class="color-bars">
|
||||
<div class="color-bar red"></div>
|
||||
<div class="color-bar green"></div>
|
||||
<div class="color-bar blue"></div>
|
||||
<div class="color-bar black"></div>
|
||||
</div>
|
||||
<div class="grayscale-gradient"></div>
|
||||
<div class="color-gradient-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -70,57 +33,95 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -9;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: 2fr 1fr 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
width: calc(var(--block-size) * var(--circle-blocks));
|
||||
height: calc(var(--block-size) * var(--circle-blocks));
|
||||
.color-bars {
|
||||
display: flex;
|
||||
grid-column: 1 / 5;
|
||||
}
|
||||
|
||||
.color-bar {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #0000ff;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.grayscale-gradient {
|
||||
grid-column: 1 / 5;
|
||||
background: linear-gradient(to right, #000, #fff);
|
||||
}
|
||||
|
||||
.sharpness-pattern {
|
||||
grid-column: 1 / 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid white;
|
||||
background: rgba(0, 0, 0, 0.66);
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.outer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
|
||||
height: calc(min(100vw, 100vh) - max(var(--horizontal-margin), var(--vertical-margin)) * 2);
|
||||
|
||||
border: 2px dashed white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.column {
|
||||
position: absolute;
|
||||
top: calc(var(--vertical-margin) + var(--block-size) * var(--column-top));
|
||||
width: calc(var(--block-size) * var(--column-width));
|
||||
height: calc(var(--block-size) * var(--column-height));
|
||||
z-index: 9;
|
||||
|
||||
.geometry-pattern {
|
||||
grid-column: 3 / 5;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: calc(var(--horizontal-margin) + var(--block-size) * 3);
|
||||
.circle,
|
||||
.square {
|
||||
background-color: #888;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.square {
|
||||
width: 10vw;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sharpness-pattern span {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: calc(var(--horizontal-margin) + var(--block-size) * 3);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
& .gradient {
|
||||
flex-grow: 1;
|
||||
.circle,
|
||||
.square {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<script>
|
||||
import 'normalize.css/normalize.css';
|
||||
import '@fontsource/b612';
|
||||
import '@fontsource/b612/700.css';
|
||||
import '../index.css';
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
import "../index.css";
|
||||
import "@ibm/plex/css/ibm-plex.css";
|
||||
import TestCard from "$lib/TestCard.svelte";
|
||||
</script>
|
||||
|
||||
<TestCard />
|
||||
|
|
|
|||
BIN
static/favicon.png
Normal file
BIN
static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in a new issue