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

style: switch from B612 to Atkinson Hyperlegible font, enable tabular numbers
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse source
This commit is contained in:
Tomáš Mládek 2025-09-26 00:06:23 +02:00
parent 2d5c5f4130
commit e6009c619c
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
av-sync/src/App.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import '@fontsource/b612'; import '@fontsource/atkinson-hyperlegible';
import '@fontsource/b612/700.css'; import '@fontsource/atkinson-hyperlegible/700.css';
import 'normalize.css/normalize.css'; import 'normalize.css/normalize.css';
import { onMount, tick } from 'svelte'; import { onMount, tick } from 'svelte';
@ -80,7 +80,8 @@
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
font-variant-numeric: tabular-nums;
} }
.circular { .circular {

14
src/lib/TestCard.svelte
View file

@ -23,11 +23,14 @@
}); });
let columnWidth = $derived(sizes.horizontalCount % 2 === 0 ? 3 : 4); let columnWidth = $derived(sizes.horizontalCount % 2 === 0 ? 3 : 4);
let columnHeight = $derived(2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2)); let columnHeight = $derived(
2 * Math.floor((sizes.verticalCount * 0.75) / 2) + (sizes.verticalCount % 2)
);
let leftColumn = $derived(sizes.horizontalCount / 4 - columnWidth / 2); let leftColumn = $derived(sizes.horizontalCount / 4 - columnWidth / 2);
let circleBlocks = let circleBlocks = $derived(
$derived(2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) + 2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
(sizes.horizontalCount % 2)); (sizes.horizontalCount % 2)
);
</script> </script>
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
@ -85,7 +88,8 @@
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
font-variant-numeric: tabular-nums;
font-size: min(4vw, 4vh); font-size: min(4vw, 4vh);
} }

2
src/routes/+layout.svelte
View file

@ -2,8 +2,6 @@
import 'normalize.css/normalize.css'; import 'normalize.css/normalize.css';
import '@fontsource/atkinson-hyperlegible'; import '@fontsource/atkinson-hyperlegible';
import '@fontsource/atkinson-hyperlegible/700.css'; import '@fontsource/atkinson-hyperlegible/700.css';
import '@fontsource/b612';
import '@fontsource/b612/700.css';
import '@tabler/icons-webfont/tabler-icons.css'; import '@tabler/icons-webfont/tabler-icons.css';
import '../index.css'; import '../index.css';
import { onMount } from 'svelte'; import { onMount } from 'svelte';