Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(badges): add 4×6 fanfold layout CSS for Epson single-sided stock

Browse Source 
Introduces badge_layout_epson_4x6_fanfold.css (layout code badge_4x6_fanfold)
for the Axonius Adapt 2026 June show. Wires @page size to 4in×6in in the print
page and cleans up the stale 4in×12in default. Imports new CSS in badge component.
Measured stock: 4in × 6in portrait with 5/8in lanyard hole 1/4in from top.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-15 15:26:13 -04:00
parent 21a44f96fa
commit 26fde2a566
4 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css Normal file
View File

@@ -0,0 +1,63 @@
/* =============================================================================
Badge Layout: Epson ColorWorks — Fanfold 4" × 6" (Single-sided)
layout code: badge_4x6_fanfold
Badge stock: 4in wide × 6in per label, single-sided continuous fanfold
Used for: Axonius Adapt 2026 (June 2026)
Physical notes (measured 2026-05-15):
Overall: 4.0in × 6.0in (portrait)
Lanyard hole: 5/8in wide × 1/8in tall, centered horizontally,
1/4in from top edge, 3/8in from each side edge.
Keep decorative header content below the hole zone (~3/8in from top).
Print behavior:
Single-sided only. Set duplex=0 on the template — the badge_back section
will not render at all. @page size (4in × 6in) is injected dynamically
by print/+page.svelte <svelte:head> based on the layout field.
CSS scope:
All rules scoped under [data-layout="badge_4x6_fanfold"] to avoid conflicts
with other layouts compiled into the same bundle. These override the
Tailwind utility classes (w-[4in], min-h-[6.0in], etc.) hardcoded on the
badge sections — attribute + class selectors win over single class selectors.
============================================================================= */
/* --- Badge front --- */
[data-layout='badge_4x6_fanfold'] .badge_front {
min-width: 4in;
width: 4in;
min-height: 6in;
max-height: 6in;
/* debug */
/* outline: thick solid orange; */
}
/* Body area: 6in total − ~1in header − ~0.5in footer ≈ 4.5in for content */
[data-layout='badge_4x6_fanfold'] .badge_body {
max-height: 4.5in;
}
/* Outer wrapper: strip the default padding/gap so the outline hugs the badge.
badge_front above supplies the exact 4×6in card size. */
[data-layout='badge_4x6_fanfold'].event_badge_wrapper {
padding: 0;
gap: 0;
min-height: 0;
min-width: 4in;
width: 4in;
max-width: 4in;
}
@media print {
[data-layout='badge_4x6_fanfold'].event_badge_wrapper {
width: 4in !important;
height: 6in !important;
max-width: 4in !important;
max-height: 6in !important;
/* overflow: visible so any intentional bleed element is not clipped by the
wrapper — the Epson driver clips at the physical label edge. */
overflow: visible !important;
}
}