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

96
index.html
View File

@@ -1,14 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Murder Mystery Character Card Template</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="template-stack">
<section class="sheet cover-page" aria-label="Murder mystery invitation cover card">
<section
class="sheet cover-page"
aria-label="Murder mystery invitation cover card"
>
<div class="cover-rule" aria-hidden="true"></div>
<h1 class="cover-title">
<span class="line-1">THE ADMIRAL'S</span>
@@ -17,20 +20,49 @@
<div class="cover-main">
<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="character">Your character: <strong>CHARLOTTE</strong><br><strong>TALBOT.</strong> The flighty and romantic<br>youngest daughter of Lord and Lady<br>Talbot.</p>
<p class="warning">DO NOT OPEN AND READ THIS<br>CARD UNTIL YOU ARE READY TO<br>BEGIN THE GAME.</p>
<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="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">
<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>
</section>
<section class="sheet character-page" aria-label="Character briefing sheet">
<img class="sheet-border" src="assets/images/sheet-border.png" alt="" aria-hidden="true">
<section
class="sheet character-page"
aria-label="Character briefing sheet"
>
<img
class="sheet-border"
src="assets/images/sheet-border.png"
alt=""
aria-hidden="true"
/>
<div class="character-content">
<header class="character-header">
@@ -41,21 +73,40 @@
<div class="cards-grid">
<article class="ornate-card tall">
<h3>Key information</h3>
<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>
<p>You read sensational novels, write terrible poetry, and imagine yourself the heroine of a great romance.</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>
<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>
<article class="ornate-card tall">
<h3>Secret</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>
<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>
<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>
<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 medium">
<h3>Goals</h3>
<ul>
<li>Make something dramatic happen. Maybe fall in love with someone?</li>
<li>
Make something dramatic happen. Maybe fall in love with
someone?
</li>
<li>Catch the murderer.</li>
</ul>
</article>
@@ -64,13 +115,20 @@
<h3>Items</h3>
<ul>
<li>A diamond necklace, worth around &pound;200</li>
<li>Several amateurish oil paintings, by you, of the house and grounds</li>
<li>
Several amateurish oil paintings, by you, of the house and
grounds
</li>
</ul>
</article>
<article class="ornate-card short">
<h3>Clues</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>
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>
</article>
<article class="ornate-card short">

69
styles.css
View File

@@ -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,
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,
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,
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);
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;
}