JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
871 lines
51 KiB
HTML
871 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>She Smiled at Me — Annotated Edition</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Cormorant+SC:wght@300;400;600&family=Special+Elite&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--cream: #f4ead8;
|
||
--cream-dark: #e8d8be;
|
||
--parchment: #f9f3e8;
|
||
--ink: #1e1610;
|
||
--ink-faded: #5c4030;
|
||
--raf-blue: #1f3a5f;
|
||
--raf-mid: #2e5480;
|
||
--rose: #8c3040;
|
||
--rose-light: #a84055;
|
||
--amber: #9a6820;
|
||
--amber-light: #c48a30;
|
||
--slate: #4a5868;
|
||
--border: #c8a870;
|
||
--shadow: rgba(30,22,16,0.22);
|
||
--note-bg: #fdf8ee;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
background: var(--raf-blue);
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
|
||
font-family: 'Cormorant Garamond', Georgia, serif;
|
||
color: var(--ink);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav {
|
||
position: sticky; top: 0; z-index: 1000;
|
||
background: var(--ink);
|
||
border-bottom: 2px solid var(--amber);
|
||
display: flex; overflow-x: auto;
|
||
}
|
||
nav button {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.82rem;
|
||
letter-spacing: 0.12em;
|
||
background: none; border: none;
|
||
color: #b89868;
|
||
padding: 0.8rem 1.5rem;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
border-bottom: 2px solid transparent;
|
||
margin-bottom: -2px;
|
||
transition: color 0.2s, border-color 0.2s;
|
||
}
|
||
nav button:hover { color: var(--cream); }
|
||
nav button.active { color: var(--cream); border-bottom-color: var(--rose); }
|
||
|
||
/* ── WRAPPER ── */
|
||
.page-wrap { max-width: 740px; margin: 0 auto; padding: 2.5rem 1rem 5rem; }
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
|
||
/* ── PAPER ── */
|
||
.paper {
|
||
background: var(--parchment);
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
|
||
border-top: 4px solid var(--rose);
|
||
box-shadow: 0 4px 32px var(--shadow), 0 1px 0 rgba(200,168,112,0.4);
|
||
padding: 2.8rem 3rem 3.2rem;
|
||
position: relative;
|
||
}
|
||
.paper::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: var(--raf-blue);
|
||
opacity: 0.15;
|
||
}
|
||
|
||
/* ── MASTHEAD ── */
|
||
.masthead-wrap {
|
||
text-align: center;
|
||
padding-bottom: 1.4rem;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 2rem;
|
||
}
|
||
.series-label {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.22em;
|
||
color: var(--ink-faded);
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
h1 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-weight: 300;
|
||
font-size: 3.2rem;
|
||
line-height: 1.05;
|
||
color: var(--ink);
|
||
letter-spacing: 0.01em;
|
||
}
|
||
h1 em {
|
||
font-style: italic;
|
||
font-weight: 300;
|
||
}
|
||
.byline-strip {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 1.2rem;
|
||
margin-top: 0.7rem;
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.14em;
|
||
color: var(--ink-faded);
|
||
}
|
||
.byline-strip a { color: var(--rose); text-decoration: none; }
|
||
.byline-strip a:hover { text-decoration: underline; }
|
||
.byline-sep { color: var(--border); }
|
||
|
||
/* ── PROSE ── */
|
||
p {
|
||
font-size: 1.08rem;
|
||
font-weight: 300;
|
||
line-height: 1.92;
|
||
margin-bottom: 1.25rem;
|
||
color: var(--ink);
|
||
text-align: justify;
|
||
hyphens: auto;
|
||
}
|
||
p + p { text-indent: 1.4em; }
|
||
p + p.no-indent { text-indent: 0; }
|
||
|
||
/* Drop cap on first p of tab */
|
||
.drop-cap::first-letter {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 4em;
|
||
font-weight: 700;
|
||
float: left;
|
||
line-height: 0.72;
|
||
margin-right: 0.07em;
|
||
margin-top: 0.1em;
|
||
color: var(--rose);
|
||
}
|
||
|
||
/* ── SECTION RULE ── */
|
||
.section-break {
|
||
text-align: center;
|
||
color: var(--amber);
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.5em;
|
||
margin: 2rem 0;
|
||
user-select: none;
|
||
}
|
||
|
||
/* ── THE NOTEBOOK NOTES ── */
|
||
/* These are the in-story exchanges rendered visually */
|
||
.note-exchange {
|
||
margin: 1.6rem auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.6rem;
|
||
max-width: 360px;
|
||
}
|
||
.note-card {
|
||
background: var(--note-bg);
|
||
border: 1px solid #d4c4a0;
|
||
box-shadow: 1px 2px 8px rgba(30,22,16,0.1);
|
||
padding: 0.7rem 1.1rem 0.6rem;
|
||
font-family: 'Special Elite', 'Courier New', monospace;
|
||
font-size: 1.05rem;
|
||
letter-spacing: 0.08em;
|
||
color: var(--ink);
|
||
position: relative;
|
||
}
|
||
.note-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 1px;
|
||
background: repeating-linear-gradient(90deg, #c8b888 0, #c8b888 6px, transparent 6px, transparent 12px);
|
||
opacity: 0.5;
|
||
}
|
||
.note-label {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.6rem;
|
||
letter-spacing: 0.15em;
|
||
color: var(--ink-faded);
|
||
display: block;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
.note-card.hers {
|
||
align-self: flex-end;
|
||
background: #fef8f0;
|
||
transform: rotate(0.5deg);
|
||
}
|
||
.note-card.his {
|
||
align-self: flex-start;
|
||
transform: rotate(-0.4deg);
|
||
}
|
||
.note-card.liz {
|
||
align-self: flex-end;
|
||
background: #fef4e8;
|
||
transform: rotate(1deg);
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.25em;
|
||
}
|
||
|
||
/* ── INLINE DECODERS ── */
|
||
.decoder { display: inline; position: relative; }
|
||
.decoder-trigger {
|
||
font-family: inherit; font-size: inherit;
|
||
font-style: inherit; font-weight: inherit;
|
||
background: none; border: none;
|
||
border-bottom: 1px dashed var(--rose);
|
||
color: inherit;
|
||
cursor: pointer; padding: 0 1px;
|
||
}
|
||
.decoder-trigger::after {
|
||
content: '\00b3';
|
||
font-size: 0.6em;
|
||
vertical-align: super;
|
||
color: var(--rose);
|
||
font-family: serif;
|
||
}
|
||
.decoder-trigger.open::after { content: '\00b2'; }
|
||
.decoder-panel {
|
||
display: none; position: absolute;
|
||
top: calc(100% + 5px); left: 0; z-index: 500;
|
||
width: 300px;
|
||
background: var(--raf-blue);
|
||
color: var(--cream);
|
||
border-top: 2px solid var(--rose);
|
||
padding: 0.85rem 1rem;
|
||
box-shadow: 3px 5px 22px var(--shadow);
|
||
font-size: 0.87rem; line-height: 1.6;
|
||
font-style: normal; font-weight: 300;
|
||
}
|
||
.decoder-panel.open { display: block; }
|
||
.decoder-panel.flip-left { left: auto; right: 0; }
|
||
.decode-label {
|
||
display: block;
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.66rem; letter-spacing: 0.15em;
|
||
color: var(--amber-light); margin-bottom: 0.2rem;
|
||
}
|
||
.decode-term {
|
||
display: block;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1.1rem; font-weight: 600;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.decode-link {
|
||
display: block; margin-top: 0.45rem;
|
||
color: var(--amber-light); text-decoration: none;
|
||
font-family: 'Cormorant SC', serif; font-size: 0.72rem;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.decode-link:hover { text-decoration: underline; }
|
||
|
||
/* ── LIGHTBOX TRIGGER ── */
|
||
.lb-trigger {
|
||
font-family: inherit; font-size: inherit; font-style: inherit;
|
||
font-weight: inherit;
|
||
background: rgba(31,58,95,0.06);
|
||
border: none;
|
||
border-bottom: 1px solid var(--raf-mid);
|
||
color: var(--raf-blue);
|
||
cursor: pointer; padding: 0 2px;
|
||
transition: background 0.15s;
|
||
}
|
||
.lb-trigger:hover { background: rgba(31,58,95,0.14); }
|
||
|
||
/* ── LIGHTBOX ── */
|
||
.lightbox-overlay {
|
||
display: none; position: fixed; inset: 0;
|
||
background: rgba(18,12,8,0.72); z-index: 2000;
|
||
align-items: center; justify-content: center; padding: 1rem;
|
||
}
|
||
.lightbox-overlay.open { display: flex; }
|
||
.lightbox-box {
|
||
background: var(--parchment);
|
||
border-top: 3px solid var(--rose);
|
||
max-width: 580px; width: 100%;
|
||
max-height: 88vh; overflow-y: auto;
|
||
box-shadow: 0 8px 48px rgba(18,12,8,0.5);
|
||
}
|
||
.lightbox-header {
|
||
display: flex; justify-content: space-between; align-items: flex-start;
|
||
padding: 1rem 1.3rem 0.8rem;
|
||
border-bottom: 1px solid var(--border);
|
||
position: sticky; top: 0; background: var(--parchment);
|
||
}
|
||
.lightbox-title {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1.35rem; font-weight: 600;
|
||
color: var(--rose); line-height: 1.2;
|
||
}
|
||
.lightbox-close {
|
||
background: none; border: none;
|
||
font-size: 1rem; cursor: pointer;
|
||
color: var(--ink-faded); margin-top: 0.15rem;
|
||
}
|
||
.lightbox-body {
|
||
padding: 1.2rem 1.5rem 1.6rem;
|
||
font-size: 0.96rem; line-height: 1.78;
|
||
font-weight: 300;
|
||
}
|
||
.lightbox-body h3 {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.8rem; letter-spacing: 0.12em;
|
||
color: var(--raf-blue); margin: 1rem 0 0.4rem;
|
||
}
|
||
.lightbox-body p { margin-bottom: 0.75rem; text-align: left; }
|
||
.lightbox-body p::first-letter { font-size: 1em; float: none; }
|
||
.lightbox-body a { color: var(--rose); }
|
||
.lightbox-body .date-flag {
|
||
font-family: 'Special Elite', monospace;
|
||
font-size: 0.82rem;
|
||
background: var(--raf-blue);
|
||
color: var(--cream);
|
||
display: inline-block;
|
||
padding: 0.2em 0.6em;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
/* ── ACCORDION ── */
|
||
.accordion-item { border-bottom: 1px solid var(--cream-dark); }
|
||
.accordion-trigger {
|
||
width: 100%; background: none; border: none; text-align: left;
|
||
padding: 0.9rem 0;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1.05rem; font-style: italic; font-weight: 300;
|
||
color: var(--ink); cursor: pointer;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
.accordion-trigger:hover { color: var(--rose); }
|
||
.accordion-trigger.open { color: var(--rose); font-style: normal; font-weight: 600; }
|
||
.accordion-arrow { color: var(--amber); font-style: normal; font-size: 0.75rem; flex-shrink: 0; transition: transform 0.2s; }
|
||
.accordion-trigger.open .accordion-arrow { transform: rotate(180deg); }
|
||
.accordion-panel { display: none; padding: 0 0 1.1rem; font-size: 0.97rem; font-weight: 300; line-height: 1.8; }
|
||
.accordion-panel.open { display: block; }
|
||
.accordion-panel p { margin-bottom: 0.75rem; text-align: left; }
|
||
.accordion-panel p::first-letter { font-size: 1em; float: none; }
|
||
.accordion-panel a { color: var(--rose); }
|
||
|
||
/* ── FACT / PULL BOXES ── */
|
||
.fact-box {
|
||
background: var(--raf-blue);
|
||
color: var(--cream);
|
||
padding: 1rem 1.25rem;
|
||
margin: 1.4rem 0;
|
||
font-size: 0.93rem;
|
||
font-weight: 300;
|
||
line-height: 1.7;
|
||
}
|
||
.fact-box strong { color: var(--amber-light); font-family: 'Cormorant SC', serif; font-size: 0.85rem; letter-spacing: 0.06em; }
|
||
.fact-box p { text-align: left; margin-bottom: 0.5rem; color: var(--cream); }
|
||
.fact-box p:last-child { margin-bottom: 0; }
|
||
.fact-box p::first-letter { font-size: 1em; float: none; }
|
||
|
||
.pull-quote {
|
||
border-left: 3px solid var(--rose);
|
||
padding: 0.5rem 1.2rem;
|
||
margin: 1.4rem 0 1.4rem 1rem;
|
||
font-style: italic;
|
||
font-size: 1.15rem;
|
||
font-weight: 300;
|
||
color: var(--ink-faded);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ── SIGNOFF ── */
|
||
.signoff {
|
||
font-style: italic; font-weight: 300;
|
||
color: var(--ink-faded);
|
||
text-align: right;
|
||
margin-top: 2rem;
|
||
padding-top: 1.2rem;
|
||
border-top: 1px solid var(--border);
|
||
font-size: 0.95rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ── STAMP ── */
|
||
.stamp {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.65rem; letter-spacing: 0.18em;
|
||
color: var(--rose); border: 1px solid var(--rose);
|
||
padding: 0.2em 0.7em; display: inline-block;
|
||
transform: rotate(-1deg); opacity: 0.65;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* ── READING CARDS ── */
|
||
.reading-section { margin-bottom: 1.8rem; }
|
||
.reading-section h3 {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.78rem; letter-spacing: 0.12em;
|
||
color: var(--raf-blue);
|
||
border-bottom: 1px solid var(--cream-dark);
|
||
padding-bottom: 0.3rem; margin-bottom: 0.7rem;
|
||
}
|
||
.reading-card {
|
||
display: block; padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
|
||
text-decoration: none; color: var(--ink);
|
||
border-left: 3px solid var(--cream-dark);
|
||
background: rgba(154,104,32,0.04);
|
||
font-size: 0.92rem; font-weight: 300; line-height: 1.55;
|
||
transition: border-left-color 0.15s;
|
||
}
|
||
.reading-card:hover { border-left-color: var(--rose); }
|
||
.reading-card strong { display: block; font-weight: 600; color: var(--rose); font-style: italic; font-size: 1.0rem; }
|
||
.reading-card span { font-size: 0.78rem; color: var(--ink-faded); font-family: 'Cormorant SC', serif; letter-spacing: 0.06em; }
|
||
|
||
/* ── TAB HEADERS ── */
|
||
h2 {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-weight: 600; font-size: 1.5rem;
|
||
color: var(--rose); margin: 2rem 0 0.6rem;
|
||
}
|
||
h3.sub {
|
||
font-family: 'Cormorant SC', serif;
|
||
font-size: 0.82rem; letter-spacing: 0.12em;
|
||
color: var(--slate); margin: 1.5rem 0 0.5rem;
|
||
}
|
||
|
||
/* ── TIMELINE ── */
|
||
.timeline { list-style: none; padding: 0; margin: 1rem 0; }
|
||
.timeline li {
|
||
padding: 0.5rem 0 0.5rem 2rem;
|
||
border-left: 2px solid var(--cream-dark);
|
||
position: relative; font-size: 0.93rem;
|
||
font-weight: 300; line-height: 1.65;
|
||
}
|
||
.timeline li::before {
|
||
content: ''; width: 8px; height: 8px;
|
||
background: var(--rose);
|
||
position: absolute; left: -5px; top: 0.85rem;
|
||
transform: rotate(45deg);
|
||
}
|
||
.timeline li strong {
|
||
font-family: 'Special Elite', monospace;
|
||
font-size: 0.82rem; color: var(--raf-blue);
|
||
display: block; letter-spacing: 0.05em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<button class="active" onclick="showTab('story',this)">✦ The Story</button>
|
||
<button onclick="showTab('moment',this)">✦ The Moment</button>
|
||
<button onclick="showTab('craft',this)">✦ The Craft</button>
|
||
<button onclick="showTab('reading',this)">✦ Further Reading</button>
|
||
</nav>
|
||
|
||
<div class="page-wrap">
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
TAB 1 — THE STORY
|
||
═══════════════════════════════════════ -->
|
||
<div id="tab-story" class="tab-content active">
|
||
<div class="paper">
|
||
|
||
<div class="masthead-wrap">
|
||
<p class="series-label">Short Fiction · Tumblr · 6 September 2013</p>
|
||
<h1><em>She Smiled at Me</em></h1>
|
||
<div class="byline-strip">
|
||
<span>by <a href="https://renegadestoryteller.tumblr.com" target="_blank">renegadestoryteller</a></span>
|
||
<span class="byline-sep">·</span>
|
||
<span>London, September 1940</span>
|
||
<span class="byline-sep">·</span>
|
||
<span>Annotated Edition</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="drop-cap">I wasn't sure why I decided to go to that particular coffee shop, on that particular day. In part, I think it was because it was French, and since
|
||
<span class="decoder" id="dec-hitler"><button class="decoder-trigger" onclick="toggleDecoder('dec-hitler',this)">Hitler had decided that he liked the sound of France</button><span class="decoder-panel"><span class="decode-label">Historical context</span><span class="decode-term">The Fall of France, June 1940</span>Germany invaded France in May 1940. France surrendered on 22 June 1940 — just ten weeks before this story is set. The shock was immense: France had been expected to hold. For a British soldier on a weekend pass in September, the fall of France was recent news, not history.
|
||
<a class="decode-link" href="https://en.wikipedia.org/wiki/Battle_of_France" target="_blank">→ Wikipedia: Battle of France</a></span></span>,
|
||
I hadn't been able to enjoy a real French croissant. I wasn't penniless, but just about,
|
||
<span class="decoder" id="dec-pass"><button class="decoder-trigger" onclick="toggleDecoder('dec-pass',this)">Friday night of a weekend pass</button><span class="decoder-panel"><span class="decode-label">Military term</span><span class="decode-term">Weekend Pass (British Army)</span>A short leave granted to soldiers, typically 48–72 hours, allowing them to leave their posting and return to civilian life briefly. In wartime, a weekend pass was precious and uncertain — the next one was never guaranteed. The narrator's hangover suggests Friday was spent accordingly.
|
||
</span></span>
|
||
is usually the most expensive. It was a quaint little place, the kind frequented by young couples these days; although in the days of the war, the couples were quite a bit older.</p>
|
||
|
||
<p class="no-indent">It was run by a fat old French lady by the name of
|
||
<span class="decoder" id="dec-frommage"><button class="decoder-trigger" onclick="toggleDecoder('dec-frommage',this)">Madame Frommage</button><span class="decoder-panel"><span class="decode-label">Name (French)</span><span class="decode-term">"Lady Cheese" — or is it?</span>The narrator acknowledges the absurdity: <em>fromage</em> is French for cheese. Whether this is the woman's actual name, a nickname, or a gentle joke the narrator has invented for himself is left open. It sets the story's tone immediately — warm, slightly comic, self-aware about its own nostalgia.
|
||
</span></span>,
|
||
quite literally 'Lady Cheese'. Whether that was her name or not, I will never know, but her cheese croissants were an ideal breakfast for a young infantryman who had had a little too much of London's ale the night before.</p>
|
||
|
||
<p>I remember walking in, sitting down near the entrance — beside the café's signature rose bush, and promptly ordering a cup of coffee. It was spring, and a beautifully clear day, so naturally, the glare was pounding my fragile brain like a prize fighter.</p>
|
||
|
||
<div class="fact-box">
|
||
<p><strong>Annotator's Note — "It was spring"</strong></p>
|
||
<p>The narrator says <em>spring</em>, but the story is set in September 1940. This is either a slip of the pen, or a deliberate choice: the narrator, looking back, remembers the day as spring-like — the rose bush in bloom, the sun blazing. September 1940 in London was, historically, unusually clear and warm. The RAF called it the "finest summer on record." It was that clarity of sky that made the Battle of Britain's dogfights so visible to those watching from below.</p>
|
||
</div>
|
||
|
||
<p>However, I had decided that I would triumph over it, and so I stood my ground and forced the headache to the back of my mind. Unfortunately, the back of my mind was also unhappy with my activities the previous night, and so it promptly issued its protest by forcing the headache forward.</p>
|
||
|
||
<div class="section-break">✦ ✦ ✦</div>
|
||
|
||
<p>And then I saw her.</p>
|
||
|
||
<p>A beautiful woman has the strangest effect on young men. We can be brutally wounded, terribly embarrassed or even, horror of horrors, completely focused on something else entirely — the smile of a beautiful woman erases all of that from our minds. Even if, it's only for a moment, it happens.</p>
|
||
|
||
<p class="no-indent"><strong>She smiled at me.</strong></p>
|
||
|
||
<p>Thankfully, I had the presence of mind, and the force of will, to smile back. It was exquisite. The moment, not necessarily my smile. Quite frankly, my stomach had lurched suddenly, and so I wasn't entirely sure if I had smiled or grimaced. I'd like to believe it was the latter.</p>
|
||
|
||
<p>She was wearing
|
||
<span class="decoder" id="dec-dress"><button class="decoder-trigger" onclick="toggleDecoder('dec-dress',this)">a red dress with white polka dots, completely out of place when one considers that this was England in September of 1940</button><span class="decoder-panel"><span class="decode-label">Fashion & wartime context</span><span class="decode-term">Utility Clothing & Wartime Fashion</span>From June 1941, the UK Board of Trade introduced "Utility" clothing — simplified designs with minimal fabric use, no decorative pockets, no turn-ups on trousers. Bright, extravagant civilian dress was culturally frowned upon as unpatriotic. The narrator notices her dress as a defiance of all that — vivid colour in a greying world. The red polka dots become the story's central image for a reason.
|
||
<a class="decode-link" href="https://en.wikipedia.org/wiki/Utility_clothing" target="_blank">→ Wikipedia: Utility Clothing</a></span></span>.
|
||
But it was a sight to behold; her nut brown hair fell so elegantly over her shoulders, and her brown eyes seemed to look at the world as if it were her playground and that dress completed a vision so magnificently stunning, and so elegantly gentle that I struggled to stop my mouth from catching flies. Of course, she went inside, and left me in quite a spot of bother.</p>
|
||
|
||
<p>I wasn't sure if the woman I had just seen was real, so I followed suit, completely forgetting about the waiter who had just hurried up to me with a cup of hot coffee, and proceeded into the café. Sure enough she was there; she was real enough and currently ordering from a petite French girl who resembled the Madame. From what I could tell, she was English, and apparently oblivious to the dark nature of the political climate at the time. I finally noticed my waiter. He had politely coughed to note the fact that he had followed me inside. I had to sit down.</p>
|
||
|
||
<p>The table directly in front of the one she was sitting was vacant, so I chose that one. It seemed like a good idea, but it presented another quandary to my still foggy mind. If I chose the seat facing her, I would risk ogling her at every conceivable moment — a terrible thought. However, if I sat facing away from her, I wouldn't see her at all. The latter was my choice, but only because a thought had occurred to me.</p>
|
||
|
||
<p>So I sat down, took my coffee and ordered a cheese croissant. I pulled out my notebook, and a pencil and wrote two words, quite boldly, on a blank page.</p>
|
||
|
||
<div class="note-exchange">
|
||
<div class="note-card his"><span class="note-label">— His notebook, held up over one shoulder —</span>BEAUTIFUL SMILE</div>
|
||
<div class="note-card hers"><span class="note-label">— Her serviette, left on his table —</span>NOT SO BAD YOURSELF</div>
|
||
</div>
|
||
|
||
<p>I leaned back in my seat, on the pretence of examining my handiwork, holding the notebook up, just enough to be read over my shoulder. I heard her laugh behind me. I had no way to be sure if it had been due to the note or due to a curious thought that had occurred to her. She seemed to be of such a sunny disposition that I wouldn't have put it past her to live in a world completely removed from this one — a world of her own where the most curiously wonderful things occur and at which one could do nothing but enjoy a giggle. If she had indeed laughed at the note, had she thought it sweet, or pathetic? I confess, the tumult this caused in my stomach did not help my already present nausea.</p>
|
||
|
||
<p>She walked past me, apparently on the way to powder her nose, and left a serviette on my table.</p>
|
||
|
||
<p>NOT SO BAD YOURSELF</p>
|
||
|
||
<p>It was a fantastic boon to my spirits, which were instantly crushed when I realised that I had no idea what I would say next. She came back. I averted her eyes for God-knows-what-reason, and sat staring at another empty page. The petite waitress shuffled past with a slice of lemon tart. Dessert? For breakfast? This woman was surely one of a kind. But my time was running out. I had to say something fast, lest she grow tired of this game and consider it too trivial to entertain any longer.</p>
|
||
|
||
<div class="note-exchange">
|
||
<div class="note-card his"><span class="note-label">— Notebook, page two —</span>NAME?</div>
|
||
<div class="note-card liz"><span class="note-label">— Toothpicks arranged on the corner of her table —</span>L I Z</div>
|
||
</div>
|
||
|
||
<p>It was crude, and oafish, but I had panicked. She said nothing, gave no indication that she had even noticed. Perhaps the lemon tart was so delectable that she had been momentarily distracted by the sheer joy of enjoying such a singular breakfast. I had to know.</p>
|
||
|
||
<p>I decided I needed a cigarette. There were no ashtrays that I could see, so I decided that I had to step outside for a moment. I glanced, as casually and discreetly as I could, over to her table. She had written it in toothpicks, arranging them on the corner of her table.</p>
|
||
|
||
<p>I felt like dancing a jig right there, on the spot. But, instead, I continued on my journey to the door. I rolled and lit the smoke, looking up to the heavens and thanking them for such luck.
|
||
<button class="lb-trigger" onclick="openLightbox('lb-bigben')">Big Ben said it was a quarter to twelve.</button>
|
||
I was late for luncheon with my father! Suddenly I was cursing the heavens for such awful luck. I was so close to an actual conversation with an angel, only to be thwarted by prior engagements.</p>
|
||
|
||
<p>I picked a rose. It was all I could think to do. That it was red, and therefore confessing ardent and undying love, would — I hoped — be overlooked, in favour of a hopeful confession of attraction. I scribbled the address of where I was stationed, and coupled it with a request for correspondence. When I entered the café once again, she was nowhere to be found, but her lemon tart was only half eaten, and so I placed the rose, and the note, beside it and left.</p>
|
||
|
||
<div class="section-break">✦ ✦ ✦</div>
|
||
|
||
<p>When I related the story to my father over
|
||
<span class="decoder" id="dec-bangers"><button class="decoder-trigger" onclick="toggleDecoder('dec-bangers',this)">a plate of bangers and mash</button><span class="decoder-panel"><span class="decode-label">Wartime food</span><span class="decode-term">Sausages and Mashed Potato</span>Rationing began in Britain in January 1940. Sausages (bangers) became a staple of wartime eating — though the filling was often as much breadcrumb and cereal as meat. "Bangers" got their nickname because the low-meat content caused them to explode when fried. A plate of bangers and mash at a pub or a professor's luncheon was respectable wartime frugality.
|
||
</span></span>,
|
||
he called me a fool and asked why I had come at all. Until that point, I thought I knew him. He had always been a man of sensibility and decorum, as professors are expected to be. But he said something that I have yet to forget:</p>
|
||
|
||
<div class="pull-quote">"My dear boy, in love and in war, an old man will have regrets. But the one regret a man will hold above all others, is the battle in which he ran away."</div>
|
||
|
||
<div class="section-break">✦ ✦ ✦</div>
|
||
|
||
<p><button class="lb-trigger" onclick="openLightbox('lb-blitz')">That afternoon, the Luftwaffe descended on London. The Blitz had begun.</button> Lady Frommage's café did not survive the bombing, and I never saw that red polka dot dress again.</p>
|
||
|
||
<div class="signoff">
|
||
Originally published to Tumblr, 6 September 2013<br>
|
||
<em>renegadestoryteller</em>
|
||
</div>
|
||
|
||
</div><!-- .paper -->
|
||
</div><!-- tab-story -->
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
TAB 2 — THE MOMENT
|
||
═══════════════════════════════════════ -->
|
||
<div id="tab-moment" class="tab-content">
|
||
<div class="paper">
|
||
<span class="stamp">Historical Context · London 1940</span>
|
||
<h1><em>The Morning of Black Saturday</em></h1>
|
||
<p style="font-style:italic; color:var(--ink-faded); font-weight:300; margin-bottom:1.4rem; font-size:1.0rem;">The story is set in September 1940. The narrator says "that afternoon, the Luftwaffe descended on London." This places his morning at the café on a specific, devastating date.</p>
|
||
|
||
<div class="fact-box">
|
||
<p><strong>The Date:</strong> 7 September 1940 — "Black Saturday"</p>
|
||
<p>The Blitz began at 4:43 PM on Saturday, 7 September 1940. The narrator's encounter with Liz — a Saturday morning, given he mentions "Friday night of a weekend pass" — took place that same morning. Big Ben struck quarter to twelve as he stepped outside. Four and a half hours later, the bombs fell.</p>
|
||
<p>Lady Frommage's café was destroyed that afternoon.</p>
|
||
</div>
|
||
|
||
<h2>What Happened That Day</h2>
|
||
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>The first wave — 4:43 PM, Black Saturday</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>At 4:43 PM on 7 September 1940, air raid sirens began to wail across London. Shortly after, the first wave of 400 German Heinkel and Dornier bombers reached the city. They targeted London's docks in the East End with saturation bombing — a mixture of high-explosive and incendiary bombs. At around 6:30 PM, the "all clear" sounded briefly. Then at 8 PM, guided by the fires from the first wave, a second wave of 300 planes began a night assault lasting until 4:30 the following morning.</p>
|
||
<p>In those few hours: 430 Londoners were killed. 1,600 were badly injured. London would then be bombed every night for 57 consecutive nights. The Blitz killed over 43,000 British civilians in total and lasted until May 1941.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>What London felt like that morning</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The summer of 1940 had been one of waiting. War had been declared in September 1939, but the expected bombing had not come — Londoners had nicknamed it the "phoney war." Gas masks had been issued. Evacuation plans existed. But the bombs had not fallen on the city itself. September 1940 was unusually warm and clear. The Battle of Britain had been raging in the skies above southern England all summer — Spitfires and Hurricanes against Messerschmitts, visible to those below as contrails and distant fire. But London had been, until that Saturday afternoon, largely untouched.</p>
|
||
<p>On the morning of 7 September, an infantryman on weekend leave could sit in a French café, nurse a hangover, and conduct an elaborate flirtation in a notebook. The war was real — France had just fallen, rationing had begun — but the city still had its rhythms. That afternoon, the rhythms broke.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>Wartime romance — why the urgency was real</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The story captures something historians of wartime Britain consistently note: the peculiar intensity of romantic encounters in wartime London. A soldier on weekend pass genuinely did not know if he would get another one. His regiment could be posted at any moment. The woman in the red dress could be dead by tonight — the thought was not melodrama, it was arithmetic. This is what the father's speech is actually about. "The battle in which he ran away" is a metaphor that works in both directions.</p>
|
||
<p>Wartime London saw a marked increase in hasty courtships, brief engagements, and marriages between strangers. The Blitz accelerated intimacy in the same way it accelerated everything else. The narrator's note-in-a-notebook gambit — absurd in peacetime — makes a different kind of sense when every conversation might be the last one.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>The red dress — its meaning in September 1940</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The narrator notes the dress is "completely out of place." Wartime Britain was rapidly becoming a world of browns and greys — utility fabrics, muted civilian dress, uniforms. The Board of Trade's Utility Clothing scheme (formally introduced in June 1941, though the cultural pressure toward austerity predated it) discouraged bright, elaborate clothing as unpatriotic waste of material.</p>
|
||
<p>Liz's red polka-dot dress is therefore not merely an attractive garment — it is an act of aesthetic defiance. She is, the narrator senses, a person who "lived in a world completely removed from this one." The red dress is the visual shorthand for everything she represents: colour against the coming grey, laughter against the sirens, a world that insists on joy in spite of evidence.</p>
|
||
<p>When the narrator says "I never saw that red polka dot dress again," he is not just saying he never saw Liz again. He is saying that particular kind of brightness — that particular insistence on beauty — was gone.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Timeline: 7 September 1940</h2>
|
||
<ul class="timeline">
|
||
<li><strong>Morning</strong> Narrator visits Madame Frommage's café. Meets Liz. Exchanges notebook notes. Leaves a rose. The morning is warm and clear.</li>
|
||
<li><strong>11:45 AM</strong> "Big Ben said it was a quarter to twelve." Narrator leaves for luncheon with his father.</li>
|
||
<li><strong>Afternoon</strong> Narrator tells his father about Liz over bangers and mash. His father delivers his speech.</li>
|
||
<li><strong>4:43 PM</strong> Air raid sirens sound across London. First wave of 400 German bombers arrives.</li>
|
||
<li><strong>~6:30 PM</strong> First wave ends. 430 already dead. Fires burning across the East End docks.</li>
|
||
<li><strong>8:00 PM</strong> Second wave of 300+ planes guided by the fires. Bombs fall through the night.</li>
|
||
<li><strong>4:30 AM, 8 Sept.</strong> Second wave ends. London has been bombed for 12 hours. "Black Saturday" — the first of 57 consecutive nights of bombing.</li>
|
||
<li><strong>After</strong> "Lady Frommage's café did not survive the bombing." Liz is not found. The rose is never answered.</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
TAB 3 — THE CRAFT
|
||
═══════════════════════════════════════ -->
|
||
<div id="tab-craft" class="tab-content">
|
||
<div class="paper">
|
||
<span class="stamp">Literary Analysis</span>
|
||
<h1><em>How the Story Works</em></h1>
|
||
<p style="font-style:italic; color:var(--ink-faded); font-weight:300; margin-bottom:1.4rem; font-size:1.0rem;">A short-form story written for Tumblr in 2013, set in 1940, which reads as if it were written in 1940. This is not an accident — and it is not quite accurate either. An appreciation of what is happening technically.</p>
|
||
|
||
<h2>The Anachronistic Voice</h2>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>It sounds like 1940 but feels like 2013</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The prose uses the vocabulary and cadence of a mid-century English voice — "spot of bother," "a boon to my spirits," "the waiter had politely coughed" — but the self-aware, slightly comic self-deprecation ("I confess," "I know, I know") belongs more to the blogosphere's confessional register. The result is not quite either thing. It is what wartime romance sounds like when filtered through 70-plus years of nostalgia and a Tumblr aesthetic.</p>
|
||
<p>This is the story's central trick, and it works. The slight anachronism makes the narrator feel <em>literary</em> without feeling stuffy — accessible to a 2013 reader while still evoking the period.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>The notebook conceit — showing rather than telling</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The central device of the story — two strangers exchanging notes rather than speaking — is elegant for several reasons. It externalises the narrator's interior state: we see exactly what he writes (<em>BEAUTIFUL SMILE</em>, <em>NAME?</em>), and the gap between what he writes and what he probably feels is comic and tender at once. The panic of "NAME?" — "It was crude, and oafish, but I had panicked" — is more revealing than any amount of internal monologue.</p>
|
||
<p>It also keeps the woman mysterious. Liz never speaks a word directly. We see only her four responses: a laugh, a serviette, silence, and toothpicks. The reader constructs her almost entirely from negative space. The narrator's projection — "a world of her own where the most curiously wonderful things occur" — is obviously idealisation, and the story knows it.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>Big Ben as dramatic clock</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>"Big Ben said it was a quarter to twelve." This is the story's pivot. The clock functions in three ways simultaneously: it is the thing that ends the encounter; it is a classic dramatic device (time running out); and it is an image richly loaded with Blitz associations — Big Ben became a symbol of London's survival precisely because it kept striking through the bombing campaign. Its chime was broadcast on BBC radio as proof that London still stood.</p>
|
||
<p>The narrator doesn't know any of that yet. He is annoyed by the clock. The reader — writing in 2013, reading about 1940 — knows what is coming in four hours.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>The father's speech — the story's emotional centre</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The father has one speech and it earns its place. "The battle in which he ran away" is the story's thesis delivered plainly, by a secondary character, and it reframes everything that came before: the notebook gambit was not running away. Leaving the rose was not running away. Getting up for luncheon was the only moment of retreat, and even then, he left the rose.</p>
|
||
<p>But the speech also sets up the cruelest beat. The father says a man will always regret the battle he ran from. Then the Blitz takes the café. The narrator never had the chance to return. The battle wasn't lost because he ran — it was bombed out of existence before he could rejoin it. The story quietly suggests that some battles are taken from you regardless of your courage. The regret the father promises is therefore a different kind of regret: not the regret of cowardice, but the regret of timing.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>The final line — what it does</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>"Lady Frommage's café did not survive the bombing, and I never saw that red polka dot dress again."</p>
|
||
<p>This sentence does several things at once. It is a temporal leap — we have been in the present tense of memory, and this suddenly steps back to a much longer retrospective. The narrator is old now, we understand. This is a story told from old age, not from the following week. He has been carrying this morning for decades.</p>
|
||
<p>The dress, not Liz, is the final image. This is precise. It keeps the story from sentimentality (we never quite knew Liz well enough to grieve her) while letting the dress carry the full weight of loss. Red polka dots against a grey September, against rising smoke, against the long grey years of war and whatever came after. The dress is what endures in memory because it was the most impossible thing in the world that morning: vivid, impractical, defiant, and briefly, completely, there.</p>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<button class="accordion-trigger" onclick="toggleAccordion(this)"><span>What is left unanswered — and why</span><span class="accordion-arrow">▾</span></button>
|
||
<div class="accordion-panel">
|
||
<p>The story ends without resolving: we don't know if Liz survived. We don't know if she ever saw the rose. We don't know if the narrator found her after the war. These are the questions a lesser story would answer. This one refuses to, and the refusal is the point.</p>
|
||
<p>Wartime stories are full of this structure — the encounter that couldn't be completed, the letter that never arrived, the name written in toothpicks. The open ending is not a failure of imagination; it is a documentary choice. The incompleteness is historically accurate. Thousands of wartime London encounters ended exactly like this: a morning, a name, a bomb.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pull-quote">"I never saw that red polka dot dress again."<br>— the narrator, from some point far in the future</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════
|
||
TAB 4 — FURTHER READING
|
||
═══════════════════════════════════════ -->
|
||
<div id="tab-reading" class="tab-content">
|
||
<div class="paper">
|
||
<span class="stamp">A Reading List</span>
|
||
<h1><em>Further Reading</em></h1>
|
||
<p style="font-style:italic; color:var(--ink-faded); font-weight:300; margin-bottom:1.4rem;">For those who found themselves in the café this morning and would like to stay a little longer.</p>
|
||
|
||
<div class="reading-section">
|
||
<h3>The Blitz — History & Memory</h3>
|
||
<a class="reading-card" href="https://www.londonmuseum.org.uk/collections/london-stories/black-saturday-first-day-blitz/" target="_blank">
|
||
<strong>Black Saturday: The First Day of the Blitz — London Museum</strong>
|
||
Detailed account of 7 September 1940 — the exact day this story is set. First-hand accounts, photographs, and analysis of what that afternoon felt like from below.
|
||
<span>londonmuseum.org.uk</span>
|
||
</a>
|
||
<a class="reading-card" href="https://www.iwm.org.uk/history/the-blitz-around-britain" target="_blank">
|
||
<strong>The Blitz Around Britain — Imperial War Museum</strong>
|
||
The full scope of the bombing campaign: London, Coventry, Birmingham, Liverpool. Essential context for understanding how the story's ending reverberates.
|
||
<span>iwm.org.uk</span>
|
||
</a>
|
||
<a class="reading-card" href="https://historicengland.org.uk/whats-new/features/blitz-stories/london-the-blitz-september-1940-june-1941/" target="_blank">
|
||
<strong>Blitz Stories — Historic England</strong>
|
||
First-person accounts of the Blitz from people who lived through it. The oral history equivalent of the narrator's voice in this story.
|
||
<span>historicengland.org.uk</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>Wartime London — Life on the Ground</h3>
|
||
<a class="reading-card" href="https://www.londonmuseum.org.uk/collections/london-stories/londons-blitz-a-city-at-war/" target="_blank">
|
||
<strong>London's Blitz: A City at War — London Museum</strong>
|
||
Covers daily life under bombing: tube shelter culture, "Blitz spirit," the social upheavals. The world in which a café breakfast in a French establishment on a Saturday morning was a small, ordinary miracle.
|
||
<span>londonmuseum.org.uk</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>Fiction in the Same Register</h3>
|
||
<a class="reading-card" href="https://www.goodreads.com/book/show/77773.The_English_Patient" target="_blank">
|
||
<strong>The English Patient — Michael Ondaatje (1992)</strong>
|
||
The canonical wartime love story told in fragments, from memory, by a narrator who has lost everything but the memory. The same structure as this story — retrospective, incomplete, haunted by a woman who is mostly absence.
|
||
<span>goodreads.com</span>
|
||
</a>
|
||
<a class="reading-card" href="https://www.goodreads.com/book/show/256008.Atonement" target="_blank">
|
||
<strong>Atonement — Ian McEwan (2001)</strong>
|
||
The Blitz as backdrop to a love story that cannot complete itself. Also set in the summer and autumn of 1940. Also, ultimately, about how war turns private stories into permanent incompleteness.
|
||
<span>goodreads.com</span>
|
||
</a>
|
||
<a class="reading-card" href="https://www.goodreads.com/book/show/5194" target="_blank">
|
||
<strong>Captain Corelli's Mandolin — Louis de Bernières (1994)</strong>
|
||
A wartime love story that refuses its happy ending, finding beauty and tragedy in the same moment. Similar emotional grammar to this piece — the beloved glimpsed through the smoke of war.
|
||
<span>goodreads.com</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reading-section">
|
||
<h3>The Original</h3>
|
||
<a class="reading-card" href="https://renegadestoryteller.tumblr.com/post/60453734408/c006-she-smiled-at-me" target="_blank">
|
||
<strong>She Smiled at Me — renegadestoryteller on Tumblr (2013)</strong>
|
||
The original post, published 6 September 2013. Filed under the author's fiction series. Worth visiting the blog for the full series context.
|
||
<span>renegadestoryteller.tumblr.com</span>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- .page-wrap -->
|
||
|
||
|
||
<!-- ═══ LIGHTBOXES ═══ -->
|
||
|
||
<div class="lightbox-overlay" id="lb-bigben" onclick="closeLightboxOnOverlay(event,'lb-bigben')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">Big Ben at Quarter to Twelve</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-bigben')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<div class="date-flag">Saturday, 7 September 1940 · 11:45 AM</div>
|
||
<h3>The clock as dramatic device</h3>
|
||
<p>The narrator hears Big Ben strike quarter to twelve. It is the pivot of the story — the thing that tears him away from Liz, the "prior engagement" that seems like a comic obstacle but is actually the mechanism of tragedy. Had he stayed even thirty minutes longer, he might have spoken to her. He might have a name to search for after.</p>
|
||
<h3>What Big Ben meant in wartime</h3>
|
||
<p>During the Blitz, Big Ben became one of the defining symbols of London's survival. Its chimes were broadcast by the BBC on the World Service — proof, transmitted around the globe, that the clock was still striking and the city was still standing. The bells of St. Paul's and the face of Big Ben were photographed repeatedly by wartime press photographers as evidence of defiance.</p>
|
||
<p>The narrator glances up at Big Ben to check the time. He is irritated by what it tells him. Four hours later, the city around it would be on fire. The clock continued to keep time through the entire Blitz.</p>
|
||
<h3>The timing within the story</h3>
|
||
<p>Quarter to twelve on a Saturday morning. Big Ben is also, in this context, a quiet reminder of where this story takes place: this is London, this is the real London, in the weeks before it becomes the London of the history books. The narrator is so close to the clock's world-historical future that he does not see it.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lightbox-overlay" id="lb-blitz" onclick="closeLightboxOnOverlay(event,'lb-blitz')">
|
||
<div class="lightbox-box">
|
||
<div class="lightbox-header">
|
||
<span class="lightbox-title">The Blitz Had Begun</span>
|
||
<button class="lightbox-close" onclick="closeLightbox('lb-blitz')">✕</button>
|
||
</div>
|
||
<div class="lightbox-body">
|
||
<div class="date-flag">Black Saturday · 7 September 1940 · 4:43 PM</div>
|
||
<h3>What the last line means</h3>
|
||
<p>The story ends in a single sentence. "That afternoon, the Luftwaffe descended on London. The Blitz had begun. Lady Frommage's café did not survive the bombing, and I never saw that red polka dot dress again."</p>
|
||
<p>Three sentences that carry the weight of everything the story has built. The Blitz arrived at 4:43 PM on that same Saturday. The narrator was at luncheon with his father. The bombs fell. The café was gone. Liz, and the rose, and the note with his address, were gone.</p>
|
||
<h3>The Blitz in numbers</h3>
|
||
<p>The bombing campaign ran from 7 September 1940 to 11 May 1941 — eight months. London was bombed on 57 consecutive nights beginning that Saturday. Over 43,000 British civilians were killed. More than a million London homes were damaged or destroyed. The Blitz did not break British morale — the phrase "Blitz spirit" became a defining element of British self-mythology. But it did destroy, permanently and without warning, a great deal of ordinary life: cafés, rose bushes, half-eaten lemon tarts, notes left beside them.</p>
|
||
<h3>The geography of the bombing</h3>
|
||
<p>The first bombs targeted the London Docks in the East End — but incendiary bombs and errant high-explosives spread widely. Small French cafés in West London were not the primary targets. But they were not spared either. The imprecision of night bombing made the Blitz effectively city-wide. A café near a rose bush, beside which a young soldier had sat with a hangover that morning, was well within range.</p>
|
||
<a href="https://www.londonmuseum.org.uk/collections/london-stories/black-saturday-first-day-blitz/" target="_blank">→ London Museum: Black Saturday</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
function showTab(id, btn) {
|
||
document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
|
||
document.getElementById('tab-' + id).classList.add('active');
|
||
btn.classList.add('active');
|
||
window.scrollTo(0, 0);
|
||
}
|
||
function toggleDecoder(id, btn) {
|
||
const wrapper = document.getElementById(id);
|
||
const panel = wrapper.querySelector('.decoder-panel');
|
||
const isOpen = panel.classList.contains('open');
|
||
document.querySelectorAll('.decoder-panel.open').forEach(p => p.classList.remove('open'));
|
||
document.querySelectorAll('.decoder-trigger.open').forEach(b => b.classList.remove('open'));
|
||
if (!isOpen) {
|
||
panel.classList.add('open'); btn.classList.add('open');
|
||
const rect = panel.getBoundingClientRect();
|
||
if (rect.right > window.innerWidth - 16) panel.classList.add('flip-left');
|
||
else panel.classList.remove('flip-left');
|
||
}
|
||
}
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.decoder')) {
|
||
document.querySelectorAll('.decoder-panel.open').forEach(p => p.classList.remove('open'));
|
||
document.querySelectorAll('.decoder-trigger.open').forEach(b => b.classList.remove('open'));
|
||
}
|
||
});
|
||
function toggleAccordion(btn) {
|
||
const panel = btn.nextElementSibling;
|
||
const isOpen = btn.classList.contains('open');
|
||
document.querySelectorAll('.accordion-trigger.open').forEach(b => {
|
||
b.classList.remove('open'); b.nextElementSibling.classList.remove('open');
|
||
});
|
||
if (!isOpen) { btn.classList.add('open'); panel.classList.add('open'); }
|
||
}
|
||
function openLightbox(id) {
|
||
document.getElementById(id).classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closeLightbox(id) {
|
||
document.getElementById(id).classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
function closeLightboxOnOverlay(e, id) {
|
||
if (e.target === document.getElementById(id)) closeLightbox(id);
|
||
}
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.lightbox-overlay.open').forEach(el => {
|
||
el.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |