From b46d88d8c2cb61b8f168d130cb25631271f2d007 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Wed, 6 Jan 2021 16:23:22 -0600
Subject: [PATCH] Add newsletter link to footer

---
 templates/Footer.php     |  1 +
 www/css/core.css         | 69 ++++++++++++++++++++++++++++------------
 www/css/dark.css         |  3 ++
 www/newsletter/index.php | 43 +++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 21 deletions(-)
 create mode 100644 www/newsletter/index.php

diff --git a/templates/Footer.php b/templates/Footer.php
index 8848d44e..5059cc4f 100644
--- a/templates/Footer.php
+++ b/templates/Footer.php
@@ -1,4 +1,5 @@
 	<footer>
+		<p><a href="http://eepurl.com/hnc1Gn">Subscribe to our free newsletter</a></p>
 		<ul>
 			<li>
 				<a href="/ebooks">Ebooks</a>
diff --git a/www/css/core.css b/www/css/core.css
index 29bba9b5..0260a6ca 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -1111,7 +1111,15 @@ footer ul li:last-child::after{
 	display: none;
 }
 
-footer p{
+footer > p:first-child{
+	line-height: 1;
+	white-space: normal;
+	hyphens: none;
+	margin: 0 1rem 1rem 1rem;
+	text-transform: lowercase;
+}
+
+footer ul ~ p{
 	font-size: .6rem;
 }
 
@@ -1423,7 +1431,6 @@ p.no-results{
 }
 
 /* remove some styles from Chromium / Webkit */
-input[type="search"],
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button{
 	-webkit-appearance: none;
@@ -1434,41 +1441,46 @@ input::placeholder{
 	color: rgba(0, 0, 0, .75);
 }
 
-select{
-	-webkit-appearance: none;
-	appearance: none;
-	font-size: 1rem;
-	font-family: "ForkAwesome", "Crimson Pro";
-	color: var(--body-text);
-	background: rgba(0, 0, 0, .1);
-	border-radius: 5px;
-	border: 1px solid var(--input-border);
-	padding: 1rem;
-	padding-right: 2rem;
-	line-height: 1.4rem;
+label.email,
+label.search{
 	display: block;
 }
 
+select,
+input[type="text"],
+input[type="email"],
 input[type="search"]{
+	-webkit-appearance: none;
+	appearance: none;
 	box-sizing: border-box;
 	width: 100%;
-	background: rgba(0, 0, 0, .1);
+	background: rgba(0, 0, 0, .05);
 	border-radius: 5px;
 	border: 1px solid var(--input-border);
 	display: flex;
 	align-items: center;
 	padding: 1rem;
-	padding-left: 2.5rem;
 	color: inherit;
 	font-size: 1rem;
 	font-family: "Crimson Pro";
 	color: var(--body-text);
 	line-height: 1.4;
+	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
 }
 
-select,
-input[type="search"]{
-	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
+label[class] input{
+	padding-left: 2.5rem;
+}
+
+select{
+	font-family: "ForkAwesome", "Crimson Pro";
+	padding-left: 1rem;
+	padding-right: 2rem;
+	display: block;
+}
+
+select[multiple]{
+	padding: 1rem;
 }
 
 label.select > span{
@@ -1529,6 +1541,8 @@ nav li.highlighted a,
 nav a[rel],
 a.button,
 button,
+input[type="text"],
+input[type="email"],
 input[type="search"],
 select{
 	transition: border-color .5s, background-color .5s;
@@ -1541,12 +1555,16 @@ button:hover{
 	transition: none;
 }
 
+input[type="text"]:focus,
+input[type="text"]:hover,
+input[type="email"]:focus,
+input[type="email"]:hover,
 input[type="search"]:focus,
 input[type="search"]:hover,
 select:focus,
 select:hover{
 	border-color: var(--input-outline);
-	background: rgba(0, 0, 0, .15);
+	background: rgba(0, 0, 0, .1);
 	transition: none;
 }
 
@@ -1554,6 +1572,11 @@ select[multiple] option:last-child{
 	margin-bottom: 1rem; /* needed for firefox */
 }
 
+select[multiple] option:checked{
+	/* We have to use this method to set the bg color because browsers override background-color with !important */
+	background-image: linear-gradient(0deg, var(--button) 0%,  var(--button) 100%);
+}
+
 form[action="/settings"]{
 	margin: 0 1rem;
 }
@@ -2358,7 +2381,11 @@ article.ebook section aside.donation p::after{
 	}
 
 	body > footer{
-		padding-top: 0;
+		padding-top: 1rem;
+	}
+
+	body > footer > p:first-child{
+		line-height: 1.4;
 	}
 
 	footer ul li{
diff --git a/www/css/dark.css b/www/css/dark.css
index 8cfd425f..76a245a8 100644
--- a/www/css/dark.css
+++ b/www/css/dark.css
@@ -53,8 +53,11 @@ article.ebook section aside.donation{
 }
 
 select,
+input[type="text"],
+input[type="email"],
 input[type="search"]{
 	box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
+	background: rgba(0, 0, 0, .1);
 }
 
 input::placeholder{
diff --git a/www/newsletter/index.php b/www/newsletter/index.php
new file mode 100644
index 00000000..b7d4db4d
--- /dev/null
+++ b/www/newsletter/index.php
@@ -0,0 +1,43 @@
+<?
+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.']) ?>
+<main>
+	<h1>Subscribe to the Newsletter</h1>
+
+	<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="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /></div>
+	    </div>
+
+	</form>
+</main>
+<?= Template::Footer() ?>