nick/murder-mystery-layout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pdf fixes

Browse Source
This commit is contained in:
Nick Goodall
2026-02-09 15:58:49 +00:00
parent 2d70a9074e
commit 8a9e8847be
2 changed files with 192 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
index.html
View File

@@ -1,87 +1,145 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Murder Mystery Character Card Template</title> <title>Murder Mystery Character Card Template</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<main class="template-stack"> <main class="template-stack">
<section class="sheet cover-page" aria-label="Murder mystery invitation cover card"> <section
<div class="cover-rule" aria-hidden="true"></div> class="sheet cover-page"
<h1 class="cover-title"> aria-label="Murder mystery invitation cover card"
<span class="line-1">THE ADMIRAL'S</span> >
<span class="line-2">RECKONING</span> <div class="cover-rule" aria-hidden="true"></div>
</h1> <h1 class="cover-title">
<span class="line-1">THE ADMIRAL'S</span>
<span class="line-2">RECKONING</span>
</h1>
<div class="cover-main"> <div class="cover-main">
<div class="cover-copy"> <div class="cover-copy">
<p class="intro">Lady Juliana Talbot invites you to Talbot<br>House for an evening of merriment to<br>celebrate her birthday .</p> <p class="intro">
<p class="character">Your character: <strong>CHARLOTTE</strong><br><strong>TALBOT.</strong> The flighty and romantic<br>youngest daughter of Lord and Lady<br>Talbot.</p> Lady Juliana Talbot invites you to Talbot<br />House for an
<p class="warning">DO NOT OPEN AND READ THIS<br>CARD UNTIL YOU ARE READY TO<br>BEGIN THE GAME.</p> evening of merriment to<br />celebrate her birthday .
</p>
<p class="character">
Your character: <strong>CHARLOTTE</strong><br /><strong
>TALBOT.</strong
>
The flighty and romantic<br />youngest daughter of Lord and Lady
Talbot.
</p>
<p class="warning">
DO NOT OPEN AND READ THIS<br />CARD UNTIL YOU ARE READY TO<br />BEGIN
THE GAME.
</p>
</div>
<figure class="cover-portrait">
<img
class="cover-portrait-art"
src="assets/images/mansion-sketch.png"
alt="Sketch of Talbot House"
/>
<img
class="cover-portrait-frame"
src="assets/images/portrait-frame.png"
alt=""
aria-hidden="true"
/>
</figure>
</div> </div>
</section>
<figure class="cover-portrait"> <section
<img class="cover-portrait-art" src="assets/images/mansion-sketch.png" alt="Sketch of Talbot House"> class="sheet character-page"
<img class="cover-portrait-frame" src="assets/images/portrait-frame.png" alt="" aria-hidden="true"> aria-label="Character briefing sheet"
</figure> >
</div> <img
</section> class="sheet-border"
src="assets/images/sheet-border.png"
alt=""
aria-hidden="true"
/>
<section class="sheet character-page" aria-label="Character briefing sheet"> <div class="character-content">
<img class="sheet-border" src="assets/images/sheet-border.png" alt="" aria-hidden="true"> <header class="character-header">
<h2>CHARLOTTE TALBOT</h2>
<p>Younger daughter of Lord and Lady Talbot</p>
</header>
<div class="character-content"> <div class="cards-grid">
<header class="character-header"> <article class="ornate-card tall">
<h2>CHARLOTTE TALBOT</h2> <h3>Key information</h3>
<p>Younger daughter of Lord and Lady Talbot</p> <p>
</header> You are the youngest daughter of Lord and Lady Talbot. You are
beautiful, flighty, and romantic - some lesser souls call you
selfish or spoiled.
</p>
<p>
You read sensational novels, write terrible poetry, and imagine
yourself the heroine of a great romance.
</p>
<p>Your father adores you, and would do anything for you.</p>
</article>
<div class="cards-grid"> <article class="ornate-card tall">
<article class="ornate-card tall"> <h3>Secret</h3>
<h3>Key information</h3> <p>
<p>You are the youngest daughter of Lord and Lady Talbot. You are beautiful, flighty, and romantic - some lesser souls call you selfish or spoiled.</p> You are beginning to have romantic feelings for the handsome
<p>You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.</p> French naval officer, Henri Levesque. You caught him poking
<p>Your father adores you, and would do anything for you.</p> around your father's study this afternoon, and you had a frisson
</article> of sexual tension - you're sure he felt it too.
</p>
<p>
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?
</p>
</article>
<article class="ornate-card tall"> <article class="ornate-card medium">
<h3>Secret</h3> <h3>Goals</h3>
<p>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.</p> <ul>
<p>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?</p> <li>
</article> Make something dramatic happen. Maybe fall in love with
someone?
</li>
<li>Catch the murderer.</li>
</ul>
</article>
<article class="ornate-card medium"> <article class="ornate-card medium">
<h3>Goals</h3> <h3>Items</h3>
<ul> <ul>
<li>Make something dramatic happen. Maybe fall in love with someone?</li> <li>A diamond necklace, worth around &pound;200</li>
<li>Catch the murderer.</li> <li>
</ul> Several amateurish oil paintings, by you, of the house and
</article> grounds
</li>
</ul>
</article>
<article class="ornate-card medium"> <article class="ornate-card short">
<h3>Items</h3> <h3>Clues</h3>
<ul> <p>
<li>A diamond necklace, worth around &pound;200</li> You borrowed a paint set from Marie-Claire Levesque. She was
<li>Several amateurish oil paintings, by you, of the house and grounds</li> running very low on green paint. And now, she's running low on
</ul> everything! (You produced some masterpieces.)
</article> </p>
</article>
<article class="ornate-card short"> <article class="ornate-card short">
<h3>Clues</h3> <h3>Did you kill Juliana Talbot?</h3>
<p>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.)</p> <p>Of course not! She's your <em>mother</em>.</p>
</article> </article>
</div>
<article class="ornate-card short"> <div class="footer-flourish" aria-hidden="true">&#10086;</div>
<h3>Did you kill Juliana Talbot?</h3>
<p>Of course not! She's your <em>mother</em>.</p>
</article>
</div> </div>
</section>
<div class="footer-flourish" aria-hidden="true">&#10086;</div> </main>
</div> </body>
</section>
</main>
</body>
</html> </html>

93
styles.css
View File

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