Add icon to step by step guide

www/contribute/producing-an-ebook-step-by-step.php

@@ -551,7 +551,7 @@ proceed to seal up my confession, I bring the life of that unhappy Henry Jekyll
 			<li>
 				<h2>Create the cover image</h2>
 				<aside class="alert">
-					<p class="warning">!!! STOP !!!</p>
+					<p class="warning">STOP</p>
 					<p><strong>Do not commit cover art to your repository’s history until you have <a href="https://groups.google.com/g/standardebooks">cleared your selection with the S.E. Editor-in-Chief.</a></strong></p>
 					<p>If you commit non-public-domain cover art, you’ll have to rebase your repository to remove the art from its history. This is complicated, dangerous, and annoying, and you’ll be tempted to give up.</p>
 					<p><a href="https://groups.google.com/g/standardebooks">Contact us first</a> with page scans verifying your cover art’s public domain status before you commit your cover art!</p>
@@ -600,7 +600,10 @@ proceed to seal up my confession, I bring the life of that unhappy Henry Jekyll
 				<h2>Complete content.opf</h2>
 				<p><code class="path">content.opf</code> is the file that contains the ebook metadata like author, title, description, and reading order. Most of it will be filling in that basic information, and including links to various resources related to the text. We already completed the manifest and spine in an earlier step.</p>
 				<p><code class="path">content.opf</code> is standardized. See the <a href="/manual/latest/9-metadata">Metadata section of the <abbr class="acronym">SEMoS</abbr></a> for details on how to fill it out.</p>
-				<p>The last details to fill out here will be the short and long descriptions, verifying any Wikipedia links that <code class="bash"><b>se</b> create-draft</code> automatically found, adding cover artist metadata, filling out any missing author or contributor metadata, and adding your own metadata as the ebook producer. If you wrote the long description in unescaped HTML, run <code class="bash"><b>se</b> clean</code> to convert the long description to escaped HTML.</p>
+				<p>The last details to fill out here will be the short and long descriptions, verifying any Wikipedia links that <code class="bash"><b>se</b> create-draft</code> automatically found, adding cover artist metadata, filling out any missing author or contributor metadata, and adding your own metadata as the ebook producer.</p>
+				<aside class="tip">
+					<p>The long description must be <em>escaped</em> HTML, which can be difficult to write by hand. It’s much easier to write the long description in regular HTML, and then run <code class="bash"><b>se</b> clean</code>, which will escape the long description for you.</p>
+				</aside>
 				<p>Once you’re done, commit:</p>
 				<code class="terminal"><span><b>git</b> commit -am <i>"Complete content.opf"</i></span></code>
 			</li>

www/css/core.css

@@ -1,5 +1,5 @@
 @font-face{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	src: url("/fonts/fork-awesome-subset.woff2") format("woff2");
 	font-weight: normal;
 	font-style: normal;
@@ -51,14 +51,6 @@
 	font-display: swap;
 }
 
-@font-face{
-	font-family: "Bebas Neue";
-	src: url("/fonts/bebas-neue-subset.woff2") format("woff2");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-
 :root{
 	--light-body-bg: #e9e7e0;
 	--light-body-text: #222;
@@ -675,7 +667,7 @@ form button:active{
 
 a.button.next::after,
 .ebooks nav > a:last-child::after{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f061";
 	transition: all 200ms ease;
 	position: relative;
@@ -691,7 +683,7 @@ a[href].button.next:hover::after,
 }
 
 .ebooks nav > a:first-child:before{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f060";
 	transition: all 200ms ease;
 	position: relative;
@@ -1165,7 +1157,7 @@ footer > p{
 	align-items: center;
 }
 footer > p:first-child::before{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f0e0";
 	display: inline;
 	margin-right: .25rem;
@@ -1530,7 +1522,7 @@ label.search input{
 }
 
 select{
-	font-family: "ForkAwesome", "Crimson Pro";
+	font-family: "Fork Awesome", "Crimson Pro";
 	padding-left: 1rem;
 	padding-right: 2rem;
 	display: block;
@@ -1554,7 +1546,7 @@ label.select > span + span::after{
 	top: calc((2rem + 1.4rem + 2px) / 2 - 10px);
 	right: calc(1rem - 12px / 2);
 	content: "\f107";
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	font-size: 1rem;
 	line-height: 1;
 	color: var(--sub-text);
@@ -1583,7 +1575,7 @@ label.search::before{
 	position: absolute;
 	top: calc(2rem + .7rem);
 	left: 1rem;
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	font-size: 1rem;
 	line-height: 1;
 	margin-right: 1rem;
@@ -2221,7 +2213,7 @@ aside header{
 .progress > div{
 	/* Animate the div instead of the bar itself, because animating the bar triggers an
 	FF bug that causes infinite requsts to stripes.svg */
-	background: url('/images/stripes.svg') transparent;
+	background: url("/images/stripes.svg") transparent;
 	background-position: 0 0;
 	animation: progress 2s linear infinite;
 	z-index: 3;
@@ -2298,7 +2290,7 @@ aside button.close{
 	position: absolute;
 	top: 0;
 	right: 0;
-	background: url('/images/close.svg') transparent;
+	background: url("/images/close.svg") transparent;
 	background-size: 1rem 1rem;
 	background-position: center;
 	background-repeat: no-repeat;
@@ -2381,12 +2373,12 @@ aside button.close:active{
 }
 
 .ebook figure::after{ /* spine */
-	content: '';
+	content: "";
 	position: absolute;
 	width: calc(var(--size) + 2px);
 	height: 100%;
 	left: calc(-1 * var(--size));
-	background: no-repeat center center url('/images/logo-spine.svg') #222;
+	background: no-repeat center center url("/images/logo-spine.svg") #222;
 	background-size: calc(var(--size) - .5rem) calc(var(--size) - .5rem);
 	transform-origin: right;
 	transform: skewY(45deg);
@@ -2398,11 +2390,11 @@ aside button.close:active{
 }
 
 .ebook figure picture::before{ /* pages */
-	content: '';
+	content: "";
 	position: absolute;
 	width: var(--size);
 	height: 235px;
-	background: url('/images/pages-texture.svg') #fff;
+	background: url("/images/pages-texture.svg") #fff;
 	background-size: .5rem; /* needed to prevent visual glitch in FF */
 	top: calc(-1 * (234px + (var(--size) / 2)) + 5px);
 	left: calc(-1 * var(--size));
@@ -2414,7 +2406,7 @@ aside button.close:active{
 }
 
 .ebook figure picture::after{ /* back board */
-	content: '';
+	content: "";
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -2428,7 +2420,7 @@ aside button.close:active{
 }
 
 .ebook figure::before{ /* shadow */
-	content: '';
+	content: "";
 	background: rgba(0, 0, 0, .5);
 	position: absolute;
 	top: calc(353px - var(--size));

www/css/dark.css

@@ -89,3 +89,7 @@ aside.donation .flipboard span{
 	border-color: rgba(255,255,255,.5);
 	box-shadow: none;
 }
+
+label.email::before{
+	text-shadow: none;
+}

www/css/manual.css

@@ -60,7 +60,7 @@ main.manual{
 }
 
 main.manual.outdated{
-	background: url('/images/outdated.svg');
+	background: url("/images/outdated.svg");
 }
 
 main code:first-child{
@@ -335,6 +335,20 @@ code.full .utf{
 	text-align: center;
 }
 
+.alert p.warning::before,
+.alert p.warning::after{
+	content: "\f071";
+	font-family: "Fork Awesome";
+}
+
+.alert p.warning::before{
+	margin-right: 1rem;
+}
+
+.alert p.warning::after{
+	margin-left: 1rem;
+}
+
 figure p.wrong{
 	text-decoration-line: underline;
 	text-decoration-style: wavy;
@@ -343,7 +357,7 @@ figure p.wrong{
 
 figure p.wrong::before,
 figure.wrong::before{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f00d";
 	font-size: 1.5rem;
 	width: 1.5rem;
@@ -357,7 +371,7 @@ figure.wrong::before{
 
 figure p.corrected::before,
 figure.corrected::before{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f00c";
 	font-size: 1.5rem;
 	line-height: 1;
@@ -578,7 +592,7 @@ figure.corrected code{
 }
 
 .manual aside.tip::before{
-	font-family: "ForkAwesome";
+	font-family: "Fork Awesome";
 	content: "\f0eb";
 	font-size: 1rem;
 	position: absolute;