julien/andon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(board): reformat and center block labels

Browse Source
This commit is contained in:
Julien Calixte
2026-05-27 23:46:29 +02:00
parent 704b521b7d
commit bd427ab171
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@@ -17,4 +17,4 @@ GOOGLE_REDIRECT_URI=
# Web Push / VAPID (Task 10) # Web Push / VAPID (Task 10)
VAPID_PUBLIC_KEY= VAPID_PUBLIC_KEY=
VAPID_PRIVATE_KEY= VAPID_PRIVATE_KEY=
VAPID_SUBJECT=mailto:owner@theodo.com VAPID_SUBJECT=mailto:example@theodo.com

25
app/components/BoardView.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue";
import { board } from '~/board/definition' import { board } from "~/board/definition";
defineEmits<{ select: [sectionId: string] }>() defineEmits<{ select: [sectionId: string] }>();
// JS-tracked hover (rather than CSS :hover) so the highlight is observable in // JS-tracked hover (rather than CSS :hover) so the highlight is observable in
// tests and can later coordinate with the dashboard dot layer. // tests and can later coordinate with the dashboard dot layer.
const hoveredId = ref<string | null>(null) const hoveredId = ref<string | null>(null);
</script> </script>
<template> <template>
@@ -60,7 +60,8 @@ const hoveredId = ref<string | null>(null)
grid-template-columns: max-content max-content; grid-template-columns: max-content max-content;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 0.75rem;
font-family: 'Cutive Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family:
"Cutive Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Base = A4 long side; A3/A2 derive from it by √2 so ratios stay exact. /* Base = A4 long side; A3/A2 derive from it by √2 so ratios stay exact.
Tune this single value to resize the whole board. */ Tune this single value to resize the whole board. */
--sheet-base: 220px; --sheet-base: 220px;
@@ -76,11 +77,13 @@ const hoveredId = ref<string | null>(null)
font-size: 0.875rem; font-size: 0.875rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-align: center;
} }
.block__columns { .block__columns {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center;
gap: 0.5rem; gap: 0.5rem;
} }
@@ -107,9 +110,15 @@ const hoveredId = ref<string | null>(null)
/* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2, /* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2,
A2 = A4·2), so the boxes keep the true relative paper sizes. */ A2 = A4·2), so the boxes keep the true relative paper sizes. */
.section--a4 { width: var(--sheet-base); } .section--a4 {
.section--a3 { width: calc(var(--sheet-base) * 1.41421356); } width: var(--sheet-base);
.section--a2 { width: calc(var(--sheet-base) * 2); } }
.section--a3 {
width: calc(var(--sheet-base) * 1.41421356);
}
.section--a2 {
width: calc(var(--sheet-base) * 2);
}
.section.is-hovered { .section.is-hovered {
outline: 2px solid currentColor; outline: 2px solid currentColor;