From c4330373ae9ce0541d8ea54ac0d867913e6a0b49 Mon Sep 17 00:00:00 2001
From: Chris <26607885+chrisglein@users.noreply.github.com>
Date: Wed, 8 Jul 2026 00:25:45 -0700
Subject: [PATCH] Add fancier borders for chorus sections
---
booklet/sea-shanties-single.html | 38 +++++++++++++++++++++++++++-----
booklet/sea-shanties.html | 38 +++++++++++++++++++++++++++-----
booklet/shanties.css | 38 +++++++++++++++++++++++++++-----
3 files changed, 99 insertions(+), 15 deletions(-)
diff --git a/booklet/sea-shanties-single.html b/booklet/sea-shanties-single.html
index 4e2ea73..cd695af 100644
--- a/booklet/sea-shanties-single.html
+++ b/booklet/sea-shanties-single.html
@@ -68,6 +68,10 @@
--rule: #333;
--display: "Primitive", "UnifrakturCook", "Blackletter", serif;
--body: "Lucida Bright", "Lucida Serif", "Georgia", "Times New Roman", serif;
+
+ /* Corner lozenge for the chorus/cue frame: a fixed 8px ink diamond, placed at
+ each corner in a ::before overlay. Colour tracks --rule (hard-coded %23333). */
+ --lozenge: url("data:image/svg+xml;utf8,");
}
/* Body, page numbers, chorus headers — everything but titles — in Lucida Bright. */
@@ -199,14 +203,38 @@
margin: -0.12in 0 0.14in;
}
+/* Chorus/cue frame — the "engraver's double rule": a 1px inner border and a 1px
+ outline separated by a 2px gap, with an ink lozenge bridging each corner. Both
+ rules are real lines (border + outline) so the frame is identical on every box
+ size and prints crisply; the corner diamonds ride a ::before overlay. */
+.chorus,
+.cue {
+ box-sizing: border-box;
+ position: relative;
+ border: 1px solid var(--rule);
+ outline: 1px solid var(--rule);
+ outline-offset: 2px;
+}
+.chorus::before,
+.cue::before {
+ content: "";
+ position: absolute;
+ inset: -6px; /* centres each 8px lozenge on the inner-rule corner */
+ pointer-events: none;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ background:
+ var(--lozenge) left top / 8px 8px no-repeat,
+ var(--lozenge) right top / 8px 8px no-repeat,
+ var(--lozenge) left bottom / 8px 8px no-repeat,
+ var(--lozenge) right bottom / 8px 8px no-repeat;
+}
.chorus {
- border: 1.5px dashed var(--rule);
- padding: 0.1in;
- margin: 0 0 0.18in;
+ padding: 0.08in 0.1in;
+ margin: 0 0 0.2in;
}
.cue {
- border: 1.5px dashed var(--rule);
- padding: 0.05in 0.1in;
+ padding: 0.03in 0.1in;
margin: 0.16in 0;
}
.label,
diff --git a/booklet/sea-shanties.html b/booklet/sea-shanties.html
index b9d63c6..8f0d6b2 100644
--- a/booklet/sea-shanties.html
+++ b/booklet/sea-shanties.html
@@ -70,6 +70,10 @@
--rule: #333;
--display: "Primitive", "UnifrakturCook", "Blackletter", serif;
--body: "Lucida Bright", "Lucida Serif", "Georgia", "Times New Roman", serif;
+
+ /* Corner lozenge for the chorus/cue frame: a fixed 8px ink diamond, placed at
+ each corner in a ::before overlay. Colour tracks --rule (hard-coded %23333). */
+ --lozenge: url("data:image/svg+xml;utf8,");
}
/* Body, page numbers, chorus headers — everything but titles — in Lucida Bright. */
@@ -201,14 +205,38 @@
margin: -0.12in 0 0.14in;
}
+/* Chorus/cue frame — the "engraver's double rule": a 1px inner border and a 1px
+ outline separated by a 2px gap, with an ink lozenge bridging each corner. Both
+ rules are real lines (border + outline) so the frame is identical on every box
+ size and prints crisply; the corner diamonds ride a ::before overlay. */
+.chorus,
+.cue {
+ box-sizing: border-box;
+ position: relative;
+ border: 1px solid var(--rule);
+ outline: 1px solid var(--rule);
+ outline-offset: 2px;
+}
+.chorus::before,
+.cue::before {
+ content: "";
+ position: absolute;
+ inset: -6px; /* centres each 8px lozenge on the inner-rule corner */
+ pointer-events: none;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ background:
+ var(--lozenge) left top / 8px 8px no-repeat,
+ var(--lozenge) right top / 8px 8px no-repeat,
+ var(--lozenge) left bottom / 8px 8px no-repeat,
+ var(--lozenge) right bottom / 8px 8px no-repeat;
+}
.chorus {
- border: 1.5px dashed var(--rule);
- padding: 0.1in;
- margin: 0 0 0.18in;
+ padding: 0.08in 0.1in;
+ margin: 0 0 0.2in;
}
.cue {
- border: 1.5px dashed var(--rule);
- padding: 0.05in 0.1in;
+ padding: 0.03in 0.1in;
margin: 0.16in 0;
}
.label,
diff --git a/booklet/shanties.css b/booklet/shanties.css
index 028e77a..3065668 100644
--- a/booklet/shanties.css
+++ b/booklet/shanties.css
@@ -19,6 +19,10 @@
--rule: #333;
--display: "Primitive", "UnifrakturCook", "Blackletter", serif;
--body: "Lucida Bright", "Lucida Serif", "Georgia", "Times New Roman", serif;
+
+ /* Corner lozenge for the chorus/cue frame: a fixed 8px ink diamond, placed at
+ each corner in a ::before overlay. Colour tracks --rule (hard-coded %23333). */
+ --lozenge: url("data:image/svg+xml;utf8,");
}
/* Body, page numbers, chorus headers — everything but titles — in Lucida Bright. */
@@ -150,14 +154,38 @@
margin: -0.12in 0 0.14in;
}
+/* Chorus/cue frame — the "engraver's double rule": a 1px inner border and a 1px
+ outline separated by a 2px gap, with an ink lozenge bridging each corner. Both
+ rules are real lines (border + outline) so the frame is identical on every box
+ size and prints crisply; the corner diamonds ride a ::before overlay. */
+.chorus,
+.cue {
+ box-sizing: border-box;
+ position: relative;
+ border: 1px solid var(--rule);
+ outline: 1px solid var(--rule);
+ outline-offset: 2px;
+}
+.chorus::before,
+.cue::before {
+ content: "";
+ position: absolute;
+ inset: -6px; /* centres each 8px lozenge on the inner-rule corner */
+ pointer-events: none;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ background:
+ var(--lozenge) left top / 8px 8px no-repeat,
+ var(--lozenge) right top / 8px 8px no-repeat,
+ var(--lozenge) left bottom / 8px 8px no-repeat,
+ var(--lozenge) right bottom / 8px 8px no-repeat;
+}
.chorus {
- border: 1.5px dashed var(--rule);
- padding: 0.1in;
- margin: 0 0 0.18in;
+ padding: 0.08in 0.1in;
+ margin: 0 0 0.2in;
}
.cue {
- border: 1.5px dashed var(--rule);
- padding: 0.05in 0.1in;
+ padding: 0.03in 0.1in;
margin: 0.16in 0;
}
.label,