diff --git a/index.html b/index.html index 182ffd4..1bc5413 100644 --- a/index.html +++ b/index.html @@ -1,87 +1,145 @@ - + - - - - Murder Mystery Character Card Template - - - -
-
- -

- THE ADMIRAL'S - RECKONING -

+ + + + Murder Mystery Character Card Template + + + +
+
+ +

+ THE ADMIRAL'S + RECKONING +

-
-
-

Lady Juliana Talbot invites you to Talbot
House for an evening of merriment to
celebrate her birthday .

-

Your character: CHARLOTTE
TALBOT. The flighty and romantic
youngest daughter of Lord and Lady
Talbot.

-

DO NOT OPEN AND READ THIS
CARD UNTIL YOU ARE READY TO
BEGIN THE GAME.

+
+
+

+ Lady Juliana Talbot invites you to Talbot
House for an + evening of merriment to
celebrate her birthday . +

+

+ Your character: CHARLOTTE
TALBOT. + The flighty and romantic
youngest daughter of Lord and Lady + Talbot. +

+

+ DO NOT OPEN AND READ THIS
CARD UNTIL YOU ARE READY TO
BEGIN + THE GAME. +

+
+ +
+ Sketch of Talbot House + +
+
-
- Sketch of Talbot House - -
- -
+
+ -
- +
+
+

CHARLOTTE TALBOT

+

Younger daughter of Lord and Lady Talbot

+
-
-
-

CHARLOTTE TALBOT

-

Younger daughter of Lord and Lady Talbot

-
+
+
+

Key information

+

+ You are the youngest daughter of Lord and Lady Talbot. You are + beautiful, flighty, and romantic - some lesser souls call you + selfish or spoiled. +

+

+ You read sensational novels, write terrible poetry, and imagine + yourself the heroine of a great romance. +

+

Your father adores you, and would do anything for you.

+
-
-
-

Key information

-

You are the youngest daughter of Lord and Lady Talbot. You are beautiful, flighty, and romantic - some lesser souls call you selfish or spoiled.

-

You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.

-

Your father adores you, and would do anything for you.

-
+
+

Secret

+

+ You are beginning to have romantic feelings for the handsome + French naval officer, Henri Levesque. You caught him poking + around your father's study this afternoon, and you had a frisson + of sexual tension - you're sure he felt it too. +

+

+ He left without taking anything; he seemed surprised and + disappointed to have run into you there. It's a shame he's + married... but does that really count, if he's French? +

+
-
-

Secret

-

You are beginning to have romantic feelings for the handsome French naval officer, Henri Levesque. You caught him poking around your father's study this afternoon, and you had a frisson of sexual tension - you're sure he felt it too.

-

He left without taking anything; he seemed surprised and disappointed to have run into you there. It's a shame he's married... but does that really count, if he's French?

-
+
+

Goals

+
    +
  • + Make something dramatic happen. Maybe fall in love with + someone? +
    • +
  • Catch the murderer.
    • +
+
-
-

Goals

-
    -
  • Make something dramatic happen. Maybe fall in love with someone?
    • -
  • Catch the murderer.
    • -
-
+
+

Items

+
    +
  • A diamond necklace, worth around £200
    • +
  • + Several amateurish oil paintings, by you, of the house and + grounds +
    • +
+
-
-

Items

-
    -
  • A diamond necklace, worth around £200
    • -
  • Several amateurish oil paintings, by you, of the house and grounds
    • -
-
+
+

Clues

+

+ You borrowed a paint set from Marie-Claire Levesque. She was + running very low on green paint. And now, she's running low on + everything! (You produced some masterpieces.) +

+
-
-

Clues

-

You borrowed a paint set from Marie-Claire Levesque. She was running very low on green paint. And now, she's running low on everything! (You produced some masterpieces.)

-
+
+

Did you kill Juliana Talbot?

+

Of course not! She's your mother.

+
+
-
-

Did you kill Juliana Talbot?

-

Of course not! She's your mother.

-
+
- - -
-
-
- + + + diff --git a/styles.css b/styles.css index 8de0edd..8f3f5af 100644 --- a/styles.css +++ b/styles.css @@ -169,7 +169,7 @@ body { font-size: 22px; font-size: 2.52cqi; font-weight: 400; - line-height: 0.95; + line-height: 1.1; letter-spacing: -0.012em; } @@ -295,35 +295,49 @@ body { border: 0; border-radius: 0; background: - linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 0 / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat, - linear-gradient(var(--card-border), var(--card-border)) calc(var(--corner-cut) - var(--join-overlap)) 100% / calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) no-repeat, - linear-gradient(var(--card-border), var(--card-border)) 0 calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat, - linear-gradient(var(--card-border), var(--card-border)) 100% calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat, + linear-gradient(var(--card-border), var(--card-border)) + calc(var(--corner-cut) - var(--join-overlap)) 0 / + calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) + no-repeat, + linear-gradient(var(--card-border), var(--card-border)) + calc(var(--corner-cut) - var(--join-overlap)) 100% / + calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) var(--bw) + no-repeat, + linear-gradient(var(--card-border), var(--card-border)) 0 + calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) + calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat, + linear-gradient(var(--card-border), var(--card-border)) 100% + calc(var(--corner-cut) - var(--join-overlap)) / var(--bw) + calc(100% - (2 * var(--corner-cut)) + (2 * var(--join-overlap))) no-repeat, radial-gradient( - circle at top left, - var(--paper) 0 calc(var(--corner-cut) - var(--bw)), - var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), - transparent var(--corner-cut) - ) top left / var(--corner-cut) var(--corner-cut) no-repeat, + circle at top left, + var(--paper) 0 calc(var(--corner-cut) - var(--bw)), + var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), + var(--paper) var(--corner-cut) + ) + top left / var(--corner-cut) var(--corner-cut) no-repeat, radial-gradient( - circle at top right, - var(--paper) 0 calc(var(--corner-cut) - var(--bw)), - var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), - transparent var(--corner-cut) - ) top right / var(--corner-cut) var(--corner-cut) no-repeat, + circle at top right, + var(--paper) 0 calc(var(--corner-cut) - var(--bw)), + var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), + var(--paper) var(--corner-cut) + ) + top right / var(--corner-cut) var(--corner-cut) no-repeat, radial-gradient( - circle at bottom left, - var(--paper) 0 calc(var(--corner-cut) - var(--bw)), - var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), - transparent var(--corner-cut) - ) bottom left / var(--corner-cut) var(--corner-cut) no-repeat, + circle at bottom left, + var(--paper) 0 calc(var(--corner-cut) - var(--bw)), + var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), + var(--paper) var(--corner-cut) + ) + bottom left / var(--corner-cut) var(--corner-cut) no-repeat, radial-gradient( - circle at bottom right, - var(--paper) 0 calc(var(--corner-cut) - var(--bw)), - var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), - transparent var(--corner-cut) - ) bottom right / var(--corner-cut) var(--corner-cut) no-repeat, - rgba(233, 220, 202, 0.88); + circle at bottom right, + var(--paper) 0 calc(var(--corner-cut) - var(--bw)), + var(--card-border) calc(var(--corner-cut) - var(--bw)) var(--corner-cut), + var(--paper) var(--corner-cut) + ) + bottom right / var(--corner-cut) var(--corner-cut) no-repeat, + #e9dcca; padding: 2.35cqi 2.8cqi 2.45cqi; } @@ -448,26 +462,41 @@ body { @media print { @page { - size: 419.25pt 595.5pt; + size: A4 portrait; margin: 0; } + * { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + html, body { + width: 210mm; margin: 0; padding: 0; - background: #fff; + background: var(--paper); } .template-stack { - width: auto; + display: block; + width: 210mm; margin: 0; - gap: 0; + padding: 0; + background: var(--paper); } .sheet { - width: 419.25pt; - height: 595.5pt; + /* Use exact A4 width so Safari does not auto-scale up, keep slight height headroom. */ + width: 210mm; + height: 296.8mm; + max-width: none; + aspect-ratio: auto; + margin: 0; box-shadow: none; + break-inside: avoid-page; + page-break-inside: avoid; break-after: page; page-break-after: always; }