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

styling works

Browse Source
This commit is contained in:
Nick Goodall
2026-02-09 15:22:08 +00:00
commit 2d70a9074e
31 changed files with 566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/cormorant-garamond-400.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/cormorant-garamond-500.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/cormorant-garamond-700.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-cormorant-bold-cards.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-cormorant-bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-cormorant-regular-cards.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-cormorant-regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/124-AAAAAA+CormorantGaramond-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/125-CAAAAA+CormorantGaramond-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/134-AAAAAA+CormorantGaramond-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/135-BAAAAA+Raleway-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/136-DAAAAA+Raleway-Medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/137-EAAAAA+Raleway-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/83-AAAAAA+CormorantGaramond-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-embedded/84-BAAAAA+CormorantGaramond-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-raleway-medium-italic.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-raleway-medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/pdf-raleway-regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/raleway-400.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/raleway-500-italic.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/raleway-500.ttf Normal file
View File

Binary file not shown.

BIN
assets/images/mansion-sketch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
assets/images/portrait-frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 793 KiB

BIN
assets/images/sheet-border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/pdf/extract-000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
assets/pdf/extract-001.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 709 KiB

BIN
assets/pdf/extract-002.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/pdf/extract-003.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
assets/pdf/extract-004.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

87
index.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<main class="template-stack">
<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>
<span class="line-2">RECKONING</span>
</h1>
<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>
</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>
</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">
<div class="character-content">
<header class="character-header">
<h2>CHARLOTTE TALBOT</h2>
<p>Younger daughter of Lord and Lady Talbot</p>
</header>
<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>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>
</article>
<article class="ornate-card medium">
<h3>Goals</h3>
<ul>
<li>Make something dramatic happen. Maybe fall in love with someone?</li>
<li>Catch the murderer.</li>
</ul>
</article>
<article class="ornate-card medium">
<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>
</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>
</article>
<article class="ornate-card short">
<h3>Did you kill Juliana Talbot?</h3>
<p>Of course not! She's your <em>mother</em>.</p>
</article>
</div>
<div class="footer-flourish" aria-hidden="true">&#10086;</div>
</div>
</section>
</main>
</body>
</html>

479
styles.css Normal file
View File

@@ -0,0 +1,479 @@
@font-face {
font-family: "CGCoverRegular";
src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "CGCoverBold";
src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "CGCardsRegular";
src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "CGCardsBold";
src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "RalewayPDF";
src: url("assets/fonts/raleway-400.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "RalewayPDF";
src: url("assets/fonts/raleway-500.ttf") format("truetype");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "RalewayPDF";
src: url("assets/fonts/raleway-500-italic.ttf") format("truetype");
font-style: italic;
font-weight: 500;
font-display: swap;
}
:root {
--paper: #eddcc9;
--ink-strong: #2f4762;
--ink-body: #3e3d3c;
--card-border: #b3a188;
--page-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.26);
--font-display: "CGCardsBold", "Times New Roman", serif;
--font-body: "RalewayPDF", "Arial", sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
padding: 2rem 1rem 3rem;
background: linear-gradient(180deg, #c2b39d 0%, #ac9d86 100%);
}
.template-stack {
width: min(100%, 56rem);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.sheet {
position: relative;
width: min(874px, 100%);
aspect-ratio: 874 / 1241;
overflow: hidden;
background: var(--paper);
box-shadow: var(--page-shadow);
container-type: inline-size;
}
@supports not (aspect-ratio: 1 / 1) {
.sheet {
width: 874px;
height: 1241px;
max-width: 100%;
}
}
.cover-rule {
position: absolute;
left: 34%;
top: 49.72%;
width: 31.92%;
border-top: 4px solid #070707;
border-top: 0.62cqi solid #070707;
}
.cover-title {
position: absolute;
inset: 0;
margin: 0;
text-transform: uppercase;
letter-spacing: -0.05cqi;
color: var(--ink-strong);
font-family: "CGCoverBold", "Times New Roman", serif;
font-weight: 700;
font-size: 74px;
font-size: 8.58cqi;
line-height: 0.89;
}
.cover-title span {
position: absolute;
display: block;
white-space: nowrap;
width: max-content;
left: 50%;
transform: translateX(-50%);
}
.cover-title .line-1 {
top: 52.81%;
}
.cover-title .line-2 {
top: 58.2%;
}
.cover-main {
position: absolute;
inset: 0;
}
.cover-copy {
position: absolute;
left: 9.84%;
top: 0;
width: 40.61%;
height: 100%;
overflow: hidden;
}
.cover-copy p {
position: absolute;
left: 0;
width: 100%;
margin: 0;
text-align: center;
color: var(--ink-strong);
font-family: "CGCoverRegular", "Times New Roman", serif;
font-size: 22px;
font-size: 2.52cqi;
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.012em;
}
.cover-copy strong {
font-family: "CGCoverBold", "Times New Roman", serif;
font-weight: 700;
}
.cover-copy .intro {
top: 68.53%;
font-family: "CGCoverBold", "Times New Roman", serif;
font-weight: 700;
}
.cover-copy .character {
top: 76.04%;
}
.cover-copy .warning {
top: 85.33%;
text-transform: uppercase;
}
.cover-portrait {
position: absolute;
left: 53.66%;
top: 67.24%;
width: 41.53%;
margin: 0;
aspect-ratio: 261 / 218;
}
.cover-portrait::before {
content: "";
position: absolute;
left: 7.3%;
top: 16.5%;
width: 92.7%;
height: 73.9%;
background: #e8dbc8;
}
.cover-portrait-art {
position: absolute;
left: 7.3%;
top: 16.5%;
width: 92.7%;
height: 73.9%;
object-fit: cover;
filter: sepia(0.16) saturate(0.62) brightness(0.99);
}
.cover-portrait-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.character-page {
background: var(--paper);
}
.sheet-border {
position: absolute;
left: -3.82%;
top: -1.12%;
width: 108.5%;
height: 108.1%;
max-width: none;
object-fit: fill;
pointer-events: none;
user-select: none;
}
.character-content {
position: relative;
z-index: 1;
height: 100%;
padding: 16.4% 9% 4.2% 8.5%;
display: flex;
flex-direction: column;
}
.character-header {
text-align: center;
}
.character-header h2 {
margin: 0;
color: var(--ink-strong);
text-transform: uppercase;
letter-spacing: -0.04cqi;
line-height: 0.96;
font-family: "CGCardsBold", "Times New Roman", serif;
font-size: 42px;
font-size: 4.8cqi;
font-weight: 700;
}
.character-header p {
margin: 0.9cqi 0 0;
color: var(--ink-strong);
font-family: "CGCardsRegular", "Times New Roman", serif;
font-size: 26px;
font-size: 3.02cqi;
line-height: 1;
}
.cards-grid {
margin-top: 4.25cqi;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.9cqi 6.5cqi;
}
.ornate-card {
--corner-cut: 2.3cqi;
--bw: 0.18cqi;
--join-overlap: calc(var(--bw) * 0.32);
position: relative;
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,
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,
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,
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,
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);
padding: 2.35cqi 2.8cqi 2.45cqi;
}
.ornate-card::before {
content: none;
}
.ornate-card::after {
content: none;
}
.ornate-card.tall {
min-height: 40cqi;
}
.ornate-card.medium {
min-height: 21.2cqi;
}
.ornate-card.short {
min-height: 19.6cqi;
}
.ornate-card h3 {
margin: 0 0 1.1cqi;
text-align: center;
color: #1d1e22;
font-family: "CGCardsBold", "Times New Roman", serif;
font-size: 26px;
font-size: 3.02cqi;
line-height: 0.97;
font-weight: 700;
}
.ornate-card p,
.ornate-card li {
margin: 0 0 1.3cqi;
color: var(--ink-body);
font-family: "RalewayPDF", "Arial", sans-serif;
font-size: 14px;
font-size: 1.6cqi;
line-height: 1.58;
font-weight: 400;
}
.ornate-card p:last-child,
.ornate-card li:last-child {
margin-bottom: 0;
}
.ornate-card ul {
margin: 0;
padding: 0 0 0 2.2cqi;
}
.footer-flourish {
position: relative;
margin-top: 5.2cqi;
align-self: center;
width: 175px;
width: 20cqi;
text-align: center;
color: #4f5563;
font-family: "RalewayPDF", "Arial", sans-serif;
font-size: 36px;
font-size: 4.1cqi;
line-height: 1;
}
.ornate-card em {
font-family: "RalewayPDF", "Arial", sans-serif;
font-style: italic;
font-weight: 500;
}
.footer-flourish::before,
.footer-flourish::after {
content: "";
position: absolute;
top: 53%;
width: 66px;
width: 7.5cqi;
height: 2px;
height: 0.2cqi;
border-radius: 999px;
background: currentColor;
opacity: 0.7;
}
.footer-flourish::before {
left: 0;
}
.footer-flourish::after {
right: 0;
}
@media (max-width: 680px) {
body {
padding: 0.9rem 0.35rem 1.2rem;
}
.template-stack {
gap: 1rem;
}
.sheet {
box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.2);
}
.cards-grid {
gap: 3.6cqi;
grid-template-columns: 1fr;
}
.ornate-card.tall,
.ornate-card.medium,
.ornate-card.short {
min-height: auto;
}
}
@media print {
@page {
size: 419.25pt 595.5pt;
margin: 0;
}
body {
margin: 0;
padding: 0;
background: #fff;
}
.template-stack {
width: auto;
margin: 0;
gap: 0;
}
.sheet {
width: 419.25pt;
height: 595.5pt;
box-shadow: none;
break-after: page;
page-break-after: always;
}
.sheet:last-child {
break-after: auto;
page-break-after: auto;
}
}