page.html
No prose in this file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>Write It Down</title>
<meta name="description" content="A short guide to writing a talk, in four parts." />
<link rel="canonical" href="https://example.com/write-it-down/" />
<meta property="og:title" content="Write It Down" />
<meta property="og:description" content="A short guide to writing a talk, in four parts." />
<meta property="og:url" content="https://example.com/write-it-down/" />
<meta property="og:image" content="https://example.com/write-it-down/cover.svg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<style>
/* Pagez's theme.css */
</style>
</head>
<body>
<main>
<header><nav><p><a href="https://example.com/">Home</a> · <a href="#plan">Plan</a> · <a href="#draft">Draft</a> · <a href="#revise">Revise</a> · <a href="#share">Share</a></p>
</nav>
<h1 id="write-it-down" class="cursive">Write It Down</h1>
<p><em>A short guide to writing a talk, in four parts.</em></p>
<figure class="art"><p><img src="./cover.svg" alt="The guide's cover" /></p>
</figure>
<blockquote>
<p>A talk takes longer to write than to give.</p>
</blockquote>
<p>Writing a talk takes time, so plan for it. Here is a short guide, in four parts. Read it, then
start on your talk.</p>
</header>
<section id="plan"><h2 id="plan-the-talk" class="cursive">Plan the talk</h2>
<h3 id="idea-and-audience">Idea and audience</h3>
<figure class="art"><p><img src="./plan-1.svg" alt="Idea and audience" /></p>
</figure>
<blockquote>
<p>One idea is enough for a talk.</p>
</blockquote>
<p>One idea is enough for a talk. Say who it is for, and why they should care, before writing anything else.</p>
<h3 id="time-and-shape">Time and shape</h3>
<figure class="art"><p><img src="./plan-2.svg" alt="Time and shape" /></p>
</figure>
<blockquote>
<p>Give the plan its time.</p>
</blockquote>
<p>Give the plan its time. A short talk takes longer to prepare than a long one, because there's less room for the parts that don't work.</p>
</section>
<section id="draft"><h2 id="draft-it" class="cursive">Draft it</h2>
<h3 id="many-ideas">Many ideas</h3>
<figure class="art"><p><img src="./draft-1.svg" alt="Many ideas" /></p>
</figure>
<blockquote>
<p>Write down more than you need.</p>
</blockquote>
<p>Write down more than you need. Most won't last, and the ones that do are easier to see beside the rest.</p>
<h3 id="a-first-order">A first order</h3>
<figure class="art"><p><img src="./draft-2.svg" alt="A first order" /></p>
</figure>
<blockquote>
<p>Put the ideas in an order a listener can follow.</p>
</blockquote>
<p>Put the ideas in an order a listener can follow. Repeat the order as you go, so they know where they are.</p>
</section>
<section id="revise"><h2 id="revise-it" class="cursive">Revise it</h2>
<h3 id="cut">Cut</h3>
<figure class="art"><p><img src="./revise-1.svg" alt="Cut" /></p>
</figure>
<blockquote>
<p>Remove what doesn't serve the one idea.</p>
</blockquote>
<p>Remove what doesn't serve the one idea. What's left gets more of the audience's attention.</p>
<h3 id="contrast">Contrast</h3>
<figure class="art"><p><img src="./revise-2.svg" alt="Contrast" /></p>
</figure>
<blockquote>
<p>Put what changed beside what came before it.</p>
</blockquote>
<p>Put what changed beside what came before it. A difference is easier to see than a single thing.</p>
</section>
<section id="share"><h2 id="share-it" class="cursive">Share it</h2>
<h3 id="rehearse">Rehearse</h3>
<figure class="art"><p><img src="./share-1.svg" alt="Rehearse" /></p>
</figure>
<blockquote>
<p>Say it out loud, more than once.</p>
</blockquote>
<p>Say it out loud, more than once. The words that are hard to say are the ones to change.</p>
<h3 id="listen">Listen</h3>
<figure class="art"><p><img src="./share-2.svg" alt="Listen" /></p>
</figure>
<blockquote>
<p>Leave room for questions.</p>
</blockquote>
<p>Leave room for questions. What the audience asks shows what the talk didn't yet say.</p>
</section>
<footer><p>A stand-in page for Pagez's tests.</p>
</footer>
<style>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
:root {
font-family: Georgia, serif;
color-scheme: light;
}
body {
background: whitesmoke;
}
.cursive {
font-family: Pacifico, Georgia, serif;
}
a {
color: inherit;
text-decoration: none;
&:hover {
border-bottom: 3px solid;
}
}
/* Each section's background reaches the screen's edges, and its text keeps to the column, in rem
so a heading lines up with the text. */
main {
width: auto;
padding: 0;
}
header,
section,
footer {
display: flow-root;
padding: 4rem 2rem 2rem;
& > * {
max-width: 34rem;
margin-inline: auto;
}
}
#plan {
background: rgb(51 37 36 / 0.2);
}
#draft {
background: rgb(63 72 74 / 0.2);
}
#revise {
background: rgb(85 102 52 / 0.2);
}
#share {
background: rgb(50 72 85 / 0.2);
}
.art img {
width: 20rem;
border-radius: 5px;
}
@media (min-width: 48em) {
.art {
float: right;
clear: right;
width: 40%;
}
}
</style>
</main>
</body>
</html>