Add X and Instagram links to site footer

templates/Footer.php

@@ -1,6 +1,18 @@
 	<footer>
+		<ul class="social-media">
+			<li>
+				<p>
+					<a href="https://twitter.com/standardebooks">X</a>
+				</p>
+			</li>
+			<li>
+				<p>
+					<a href="https://www.instagram.com/standardebooks/">Instagram</a>
+				</p>
+			</li>
+		</ul>
 		<p><a href="/newsletter">Subscribe to our free newsletter</a></p>
-		<ul>
+		<ul class="nav-links">
 			<li>
 				<a href="/ebooks">Ebooks</a>
 			</li>

www/css/core.css

@@ -1289,14 +1289,14 @@ body > footer{
 	padding: 2rem 0;
 }
 
-footer p:last-child a{
+footer > p:last-child a{
 	font-size: 0;
 	display: inline-block;
 	margin: auto;
 	margin-top: 2rem;
 }
 
-footer p:last-child a::before{
+footer > p:last-child a::before{
 	content: "";
 	background: url("/images/logo-small.svg");
 	background-size: contain;
@@ -1307,25 +1307,25 @@ footer p:last-child a::before{
 	margin: auto;
 }
 
-footer ul{
+footer ul.nav-links{
 	font-size: 0;
 	margin-bottom: 1rem;
 }
 
-footer ul li{
+footer ul.nav-links li{
 	display: inline-block;
 	list-style: none;
 	text-transform: lowercase;
 	font-size: 0;
 }
 
-footer ul li a,
+footer ul.nav-links li a,
-footer ul li::after{
+footer ul.nav-links li::after{
 	font-size: .9rem;
 	white-space: nowrap;
 }
 
-footer ul li:not(:last-child)::after{
+footer ul.nav-links li:not(:last-child)::after{
 	content: "\b7";
 	margin: 0 10px;
 }
@@ -1338,7 +1338,7 @@ footer > p:first-child{
 	text-transform: lowercase;
 }
 
-footer ul ~ p{
+footer ul.nav-links ~ p{
 	font-size: .6rem;
 }
 
@@ -1365,6 +1365,43 @@ footer > p:first-child::before{
 	font-size: .75rem;
 }
 
+footer ul.social-media{
+	display: flex;
+	gap: 1rem;
+	list-style: none;
+	justify-content: center;
+	margin-bottom: 1rem;
+}
+
+footer ul.social-media a{
+	font-size: 0;
+	display: block;
+	height: 1.5rem;
+	width: 1.5rem;
+}
+
+footer ul.social-media a::before{
+	content: "";
+	display: block;
+	height: 100%;
+	width: 100%;
+	background-size: cover;
+	filter: brightness(0) saturate(100%) invert(18%) sepia(33%) saturate(355%) hue-rotate(172deg) brightness(93%) contrast(89%); /* Change color of SVG to #303944 */
+}
+
+footer ul.social-media a[href^="https://twitter.com"]::before{
+	background-image: url("/images/x.svg");
+}
+
+footer ul.social-media a[href^="https://www.instagram.com"]::before{
+	background-image: url("/images/instagram.svg");
+}
+
+footer ul.social-media a:hover::before{
+	/* This filter changes a black background to #62bfa3, which is var(--button-highlight) */
+	filter: invert(69%) sepia(35%) saturate(459%) hue-rotate(111deg) brightness(92%) contrast(87%);
+}
+
 /* ebook list */
 h1,
 .masthead h2{

www/css/dark.css

@@ -32,7 +32,8 @@ article.ebook section#details ul li a[class]::before,
 footer p:last-child a::before,
 main.front-page > section > section figure.oss img + img,
 main.front-page > section > h2::before,
-main.front-page > section > h2::after{
+main.front-page > section > h2::after,
+footer ul.social-media a::before{
 	filter: invert() grayscale(100%) brightness(120%) drop-shadow(3px 3px 1px rgba(0, 0, 0, .25)); /* grayscale and brightness makes it hit about #eeeeee */
 }
 

www/images/instagram.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" height="99.44px" version="1.1" width="99.441px" viewBox="0 0 99.441 99.44">
+	<path d="M69.708,27.509h-6.66c-1.229,0-2.221,0.995-2.221,2.221v6.664c0,1.225,0.992,2.221,2.221,2.221h6.66   c1.229,0,2.223-0.996,2.223-2.221V29.73C71.931,28.504,70.937,27.509,69.708,27.509z"/>
+	<path d="M67.487,49.719c0,9.813-7.953,17.766-17.766,17.766s-17.767-7.952-17.767-17.766   c0-1.536,0.217-3.021,0.584-4.444h-5.027v24.433c0,1.225,0.993,2.219,2.223,2.219h39.974c1.229,0,2.223-0.994,2.223-2.219V45.275   h-5.025C67.271,46.698,67.487,48.183,67.487,49.719z"/>
+	<path d="M88.701,0h-77.96C4.809,0,0,4.809,0,10.74v77.962c0,5.93,4.809,10.738,10.74,10.738h77.96   c5.932,0,10.74-4.809,10.74-10.738V10.74C99.441,4.809,94.633,0,88.701,0z M78.593,71.926c0,3.682-2.982,6.666-6.662,6.666H27.511   c-3.68,0-6.662-2.984-6.662-6.666V27.509c0-3.68,2.982-6.661,6.662-6.661h44.419c3.68,0,6.662,2.981,6.662,6.661V71.926z"/>
+	<circle cx="49.722" cy="49.719" r="11.104"/>
+</svg>

www/images/x.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" height="99.44px" version="1.1" width="99.441px" viewBox="0 0 99.441 99.44">
+	<path d="M 14.20621,-2e-6 C 6.37087,-2e-6 5e-4,6.3703734 5e-4,14.205712 v 71.02857 c 0,7.83534 6.37037,14.205722 14.20571,14.205722 h 71.028576 c 7.83534,0 14.205711,-6.370382 14.205711,-14.205722 V 14.205712 C 99.440497,6.3703734 93.070126,-2e-6 85.234786,-2e-6 Z m 65.945596,18.645 -23.0399,26.324964 27.10184,35.82503 h -21.21978 l -16.60293,-21.7303 -19.022346,21.7303 H 16.82539 L 41.463426,52.627732 15.47141,18.644998 h 21.752496 l 15.02698,19.865804 17.35761,-19.865804 z M 71.761556,74.491212 34.049816,24.615839 H 27.76823 l 38.133456,49.875373 h 5.83767 z"/>
+</svg>