Add embedded newsletter signup form

templates/Footer.php

@@ -1,5 +1,5 @@
 	<footer>
-		<p><a href="http://eepurl.com/hnc1Gn">Subscribe to our free newsletter</a></p>
+		<p><a href="/newsletter">Subscribe to our free newsletter</a></p>
 		<ul>
 			<li>
 				<a href="/ebooks">Ebooks</a>

templates/Header.php

@@ -65,6 +65,9 @@ print("\n");
 				<li>
 					<a<? if($highlight == 'about'){ ?> class="highlighted"<? } ?> href="/about">About</a>
 				</li>
+				<li>
+					<a<? if($highlight == 'newsletter'){ ?> class="highlighted"<? } ?> href="/newsletter">Newsletter</a>
+				</li>
 				<li>
 					<a<? if($highlight == 'contribute'){ ?> class="highlighted"<? } ?> href="/contribute">Get Involved</a>
 				</li>

www/css/core.css

@@ -607,9 +607,17 @@ form button{
 	margin-left: 1rem;
 }
 
+input[type="radio"]:focus,
+input[type="checkbox"]:focus{
+	outline: none;
+}
+
 .ebooks nav li.highlighted a:focus,
 a.button:focus,
+input[type="email"]:focus,
+input[type="text"]:focus,
 input[type="search"]:focus,
+label.checkbox:focus-within,
 select:focus,
 button:focus,
 nav a[rel]:focus{
@@ -1129,6 +1137,18 @@ footer > a{
 	font-size: 0;
 }
 
+footer > p{
+	display: inlie-flex;
+	align-items: center;
+}
+footer > p:first-child::before{
+	font-family: "ForkAwesome";
+	content: "\f0e0";
+	display: inline;
+	margin-right: .25rem;
+	font-size: .75rem;
+}
+
 /* ebook list */
 h1,
 .masthead h2{
@@ -1468,7 +1488,7 @@ input[type="search"]{
 	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
 }
 
-label[class] input{
+label[class]:not(.text) input{
 	padding-left: 2.5rem;
 }
 
@@ -1514,17 +1534,18 @@ label.select:hover > span + span::after{
 }
 
 label.select > span + span,
+label.email,
 label.search{
 	position: relative;
 	max-width: 100%;
 }
 
+label.email::before,
 label.search::before{
 	display: block;
 	position: absolute;
 	top: calc(2rem + 2px + .7rem);
 	left: 1rem;
-	content: "\f002";
 	font-family: "ForkAwesome";
 	font-size: 1rem;
 	line-height: 1;
@@ -1537,6 +1558,14 @@ label.search::before{
 	cursor: text;
 }
 
+label.search::before{
+	content: "\f002";
+}
+
+label.email::before{
+	content: "\f0e0";
+}
+
 nav li.highlighted a,
 nav a[rel],
 a.button,
@@ -1662,7 +1691,7 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
 	display: none;
 }
 
-.donate hgroup{
+.has-hero hgroup{
 	padding: 2rem;
 	padding-bottom: 1.75rem;
 	display: flex;
@@ -1671,32 +1700,45 @@ main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
 	max-width: none;
 }
 
-.donate picture{
+.has-hero picture{
 	max-width: none;
 	text-align: center;
 	margin-bottom: 2rem;
 }
 
-.donate img{
+.has-hero picture + p{
+	margin-top: 0;
+}
+
+.has-hero img{
 	border: 1px solid var(--border);
 	border-radius: .25rem;
 	max-width: 100%;
 }
 
-.donate hgroup h1,
+.has-hero hgroup h1,
-.donate hgroup h2{
+.has-hero > h1,
+.has-hero hgroup h2,
+.has-hero > h2{
 	border: none;
 	padding: 0;
 	margin: 0;
 }
 
-.donate hgroup h1{
+.has-hero hgroup h1,
+.has-hero > h1{
 	margin-bottom: 1rem;
 	text-transform: uppercase;
 	letter-spacing: 1px;
 }
 
-.donate hgroup h2{
+.has-hero > h1{
+	padding: 2rem;
+	margin: 0;
+}
+
+.has-hero hgroup h2,
+.has-hero > h2{
 	font-family: "Crimson Pro", serif;
 	font-style: italic;
 	font-weight: normal;
@@ -1904,6 +1946,58 @@ article.ebook section aside.donation p::after{
 	font-variant: all-small-caps;
 }
 
+.anti-spam{
+	position: absolute;
+	left: -5000px;
+}
+
+form[action*="list-manage.com"]{
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr 1fr;
+	margin-top: 1rem;
+	margin-bottom: 0;
+}
+
+form[action*="list-manage.com"] label.email{
+	grid-column: 1 / span 2;
+}
+
+form[action*="list-manage.com"] ul{
+	list-style: none;
+}
+
+form[action*="list-manage.com"] button{
+	grid-column: 2;
+	justify-self: end;
+	margin-left: 0;
+}
+
+form[action*="list-manage.com"] fieldset{
+	margin-top: 1rem;
+}
+
+fieldset{
+	padding: 0;
+	border: none;
+}
+
+fieldset p{
+	border-bottom: 1px dashed var(--input-border);
+}
+
+label.checkbox{
+	display: inline-flex;
+	align-items: flex-start;
+	text-align: left;
+	line-height: 1;
+}
+
+label.checkbox input{
+	margin-right: .25rem;
+}
+
+
 @media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */
 	/* For iPad, unset the height so it matches the other elements */
 	select[multiple]{
@@ -1990,6 +2084,15 @@ article.ebook section aside.donation p::after{
 }
 
 @media(max-width: 1000px){
+	body > header{
+		flex-direction: column;
+		align-items: center;
+	}
+
+	body > header li{
+		margin-top: 2rem;
+	}
+
 	main.front-page h1{
 		padding: 2rem;
 	}
@@ -2056,15 +2159,6 @@ article.ebook section aside.donation p::after{
 		grid-template-columns: repeat(3, 1fr);
 	}
 
-	body > header{
-		flex-direction: column;
-		align-items: center;
-	}
-
-	body > header li{
-		margin-top: 2rem;
-	}
-
 	.button-row{
 		grid-template-columns: 1fr;
 	}
@@ -2195,6 +2289,43 @@ article.ebook section aside.donation p::after{
 	article.ebook section aside.donation{
 		text-align: justify;
 	}
+
+	body > header{
+		padding: 1rem 0;
+	}
+
+	body > header > a{
+		max-width: calc(100% - 2rem);
+	}
+
+	body > header ul{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		margin: 1rem;
+		margin-bottom: 0;
+	}
+
+	body > header ul li:nth-child(3){
+		display: contents;
+	}
+
+	body > header ul li:nth-child(3)::after{
+		content: "";
+		width: 100%;
+	}
+
+	body > header ul li{
+		margin: 0;
+	}
+
+	body > header ul li:nth-child(4)::before{
+		display: none;
+	}
+
+	body > header ul li:nth-child(3) ~ li{
+		margin-top: .5rem;
+	}
 }
 
 @media(max-width: 550px){
@@ -2233,41 +2364,9 @@ article.ebook section aside.donation p::after{
 		margin-top: 0;
 	}
 
-	body > header{
+	form[action*="list-manage.com"] label.text,
-		padding: 1rem 0;
+	form[action*="list-manage.com"] fieldset{
-	}
+		grid-column: 1 / span 2;
-
-	body > header > a{
-		max-width: calc(100% - 2rem);
-	}
-
-	body > header ul{
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		margin: 1rem;
-		margin-bottom: 0;
-	}
-
-	body > header ul li:nth-child(2){
-		display: contents;
-	}
-
-	body > header ul li:nth-child(2)::after{
-		content: "";
-		width: 100%;
-	}
-
-	body > header ul li{
-		margin: 0;
-	}
-
-	body > header ul li:nth-child(odd)::before{
-		display: none;
-	}
-
-	body > header ul li:nth-child(2) ~ li{
-		margin-top: .5rem;
 	}
 }
 
@@ -2432,10 +2531,6 @@ article.ebook section aside.donation p::after{
 		grid-row: 6;
 	}
 
-	body > header ul li:nth-child(2n)::after{
-		display: none;
-	}
-
 	body > header ul{
 		flex-direction: column;
 	}
@@ -2444,6 +2539,10 @@ article.ebook section aside.donation p::after{
 		display: none;
 	}
 
+	body > header ul li:nth-child(3){
+		display: block;
+	}
+
 	body > header ul li:nth-child(2) ~ li,
 	body > header ul li + li{
 		margin-top: 1rem;

www/donate/index.php

@@ -2,7 +2,7 @@
 require_once('Core.php');
 ?><?= Template::Header(['title' => 'Donate', 'highlight' => 'donate', 'description' => 'Donate to the Standard Ebooks project.']) ?>
 <main>
-	<article class="donate">
+	<article class="donate has-hero">
 		<hgroup>
 			<h1>Donate to Standard Ebooks</h1>
 			<h2>and help bring the beauty of literature to the digital age</h2>

www/newsletter/index.php

@@ -1,43 +1,57 @@
 <?
 require_once('Core.php');
-?><?= Template::Header(['title' => 'About Standard Ebooks', 'highlight' => 'about', 'description' => 'The Standard Ebooks project is a volunteer driven, not-for-profit effort to produce a collection of high quality, carefully formatted, accessible, open source, and free public domain ebooks that meet or exceed the quality of commercially produced ebooks. The text and cover art in our ebooks is already believed to be in the public domain, and Standard Ebook dedicates its own work to the public domain, thus releasing the entirety of each ebook file into the public domain.']) ?>
+?><?= Template::Header(['title' => 'Subscribe to the Standard Ebooks newsletter', 'highlight' => 'newsletter', 'description' => 'Subscribe to the Standard Ebooks newsletter to receive occasional updates about the project.']) ?>
 <main>
+	<article class="has-hero">
+		<hgroup>
 			<h1>Subscribe to the Newsletter</h1>
-
+			<h2>to receive missives from the forefront of digital literature</h2>
+		</hgroup>
+		<picture>
+			<source srcset="/images/the-newsletter@2x.avif 2x, /images/the-newsletter.avif 1x" type="image/avif"/>
+			<source srcset="/images/the-newsletter@2x.jpg 2x, /images/the-newsletter.jpg 1x" type="image/jpg"/>
+			<img src="/images/the-newsletter@2x.jpg" alt="An old man in Renaissance-era costume reading a sheet of paper."/>
+		</picture>
+		<p>Subscribe to receive news, updates, and more from Standard Ebooks. Your information will never be shared, and you can unsubscribe at any time.</p>
 		<form action="https://standardebooks.us7.list-manage.com/subscribe/post?u=da307dcb73c74f6a3d597f056&amp;id=f8832654aa" method="post">
-
-			<label class="search">Email
-				<input type="email" name="EMAIL" value="" required="required" />
-			</label>
-
-
-	    <div id="mc_embed_signup_scroll">
-
-	<div class="mc-field-group">
-		<label for="mce-FNAME">First Name </label>
-		<input type="text" value="" name="FNAME" class="" id="mce-FNAME"/>
-	</div>
-	<div class="mc-field-group">
-		<label for="mce-LNAME">Last Name </label>
-		<input type="text" value="" name="LNAME" class="" id="mce-LNAME"/>
-	</div>
-	<div class="mc-field-group input-group">
-	    <strong>What kind of email would you like to receive? </strong>
-	    <ul><li><input type="checkbox" value="1" name="group[78748][1]" id="mce-group[78748]-78748-0"/><label for="mce-group[78748]-78748-0">The occasional Standard Ebooks newsletter</label></li>
-	<li><input type="checkbox" value="2" name="group[78748][2]" id="mce-group[78748]-78748-1"/><label for="mce-group[78748]-78748-1">A monthly summary of new releases</label></li>
-	</ul>
-	</div>
-	<div class="mc-field-group input-group">
-	    <strong>Email Format </strong>
-	    <ul><li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0" /><label for="mce-EMAILTYPE-0">html</label></li>
-	<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"/><label for="mce-EMAILTYPE-1">text</label></li>
-	</ul>
-	</div>
 			<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-	    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_da307dcb73c74f6a3d597f056_f8832654aa" tabindex="-1" value="" /></div>
+			<div class="anti-spam" aria-hidden="true"><input type="text" name="b_da307dcb73c74f6a3d597f056_f8832654aa" tabindex="-1" value=""/></div>
-	    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /></div>
+			<label class="email">Email
-	    </div>
+				<input type="email" name="EMAIL" value="" required="required"/>
-
+			</label>
+			<label class="text">First name
+				<input type="text" name="FNAME" value=""/>
+			</label>
+			<label class="text">Last name
+				<input type="text" name="LNAME" value=""/>
+			</label>
+			<fieldset>
+				<p>What kind of email would you like to receive?</p>
+				<ul>
+					<li>
+						<label class="checkbox"><input type="checkbox" value="1" name="group[78748][1]" checked="checked"/>The occasional Standard Ebooks newsletter</label>
+					</li>
+					<li>
+						<label class="checkbox"><input type="checkbox" value="2" name="group[78748][2]"/>A monthly summary of new ebook releases</label>
+					</li>
+				</ul>
+			</fieldset>
+			<fieldset>
+				<p>What email format do you prefer?</p>
+				<ul>
+					<li>
+						<label class="checkbox"><input type="radio" value="html" name="EMAILTYPE" checked="checked"/>I don’t know</label>
+					</li>
+					<li>
+						<label class="checkbox"><input type="radio" value="html" name="EMAILTYPE"/>HTML</label>
+					</li>
+					<li>
+						<label class="checkbox"><input type="radio" value="text" name="EMAILTYPE"/>Plain text</label>
+					</li>
+				</ul>
+			</fieldset>
+			<button>Subscribe</button>
 		</form>
+	</article>
 </main>
 <?= Template::Footer() ?>