From f1cf572b3286101325c5be39cbe475026dca6645 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Thu, 24 Oct 2019 09:59:44 -0500
Subject: [PATCH] Tweak CSS for dark mode and accessibility

---
 www/css/core.css            | 196 ++++++++++++++++--------------------
 www/css/reset.css           |   4 +
 www/ebooks/index.php        |  14 +--
 www/images/no-copyright.svg |  31 +-----
 4 files changed, 103 insertions(+), 142 deletions(-)

diff --git a/www/css/core.css b/www/css/core.css
index 4412f7b2..1418eebc 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -78,25 +78,79 @@
 :root{
 	--light-body-text: #222;
 	--light-highlight: #1d6878;
+	--light-button: #1d6878;
+	--light-button-highlight: #3da5bb;
 	--light-border: #222;
 	--light-sub-text: #777;
+	--light-body-bg: #fcf5dd;
 	--dark-body-text: #eee;
 	--dark-highlight: #3da5bb;
+	--dark-button: #118460;
+	--dark-button-highlight: #4ab089;
 	--dark-border: #000;
 	--dark-sub-text: #aaa;
+	--dark-body-bg: #293542;
 
 	--body-text: var(--light-body-text);
 	--highlight: var(--light-highlight);
+	--button: var(--light-button);
+	--button-highlight: var(--light-button-highlight);
 	--border: var(--light-border);
 	--sub-text: var(--light-sub-text);
+	--body-bg: var(--light-body-bg);
 }
 
 @media (prefers-color-scheme: dark){
 	:root{
 		--body-text: var(--dark-body-text);
 		--highlight: var(--dark-highlight);
+		--button: var(--dark-button);
+		--button-highlight: var(--dark-button-highlight);
 		--border: var(--dark-border);
 		--sub-text: var(--dark-sub-text);
+		--body-bg: var(--dark-body-bg);
+	}
+
+	main.front-page > section > section figure img{
+		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
+	}
+
+	article.ebook section#download ul li a[class]::before,
+	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{
+		filter: invert() grayscale(100%) brightness(120%); /* grayscale and brightness makes it hit about #eeeeee */
+	}
+
+	label.search{
+		box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
+	}
+
+	input::placeholder{
+		color: rgba(255, 255, 255, .75);
+	}
+
+	blockquote,
+	figure.text{
+		background: rgba(0,0,0,.25);
+	}
+
+	code.terminal{
+		background-color: var(--light-body-text);
+	}
+
+	main.ebooks > ol img:hover{
+		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
+	}
+
+	article.ebook #more-ebooks img:hover{
+		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
+	}
+
+	label.search::before{
+		text-shadow: 1px 1px 0 #000;
 	}
 }
 
@@ -108,13 +162,9 @@ html{
 	hyphens: auto;
 	font-size: 22px;
 	line-height: 1.5;
+	/* fallback for ie */
 	background: url('/images/paper.png') #fcf5dd;
-}
-
-@media (prefers-color-scheme: dark){
-	html{
-		background: url('/images/paper.png') #293542;
-	}
+	background: url('/images/paper.png') var(--body-bg);
 }
 
 a,
@@ -124,11 +174,12 @@ a:visited{
 }
 
 a:hover{
-	color: var(--highlight);
+	color: var(--button-highlight);
 }
 
+label.search:focus-within,
 a:focus{
-	outline: 1px dashed var(--highlight);
+	outline: 1px dashed var(--button-highlight);
 }
 
 main{
@@ -382,12 +433,6 @@ main.front-page > section > section figure.oss img{
 	margin: 1rem;
 }
 
-@media (prefers-color-scheme: dark){
-	main.front-page > section > section figure.oss img + img{
-		filter: invert();
-	}
-}
-
 main.front-page > section > section figure img{
 	width: auto;
 	max-width: 100%;
@@ -397,12 +442,6 @@ main.front-page > section > section figure img{
 	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
 }
 
-@media (prefers-color-scheme: dark){
-	main.front-page > section > section figure img{
-		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
-	}
-}
-
 main.front-page > section > section p{
 	width: 475px;
 	max-width: 100%;
@@ -450,13 +489,6 @@ main.front-page > section > h2::after{
 	background: url('/images/divider.svg') center no-repeat;
 }
 
-@media (prefers-color-scheme: dark){
-	main.front-page > section > h2::before,
-	main.front-page > section > h2::after{
-		filter: invert();
-	}
-}
-
 main.front-page > section > h2::before{
 	margin-bottom: 3rem;
 }
@@ -497,13 +529,12 @@ h1 + section > h2:first-child{
 }
 
 a.button,
-a[rel~="previous"],
-a[rel~="next"],
+.ebooks nav > a,
 aside.sort button{
 	font-style: normal;
 	box-sizing: border-box;
 	background-color: #1d6878; /* fallback for IE */
-	background-color: var(--highlight);
+	background-color: var(--button);
 	border-width: 0;
 	border-radius: 5px;
 	padding: 1rem 2rem;
@@ -519,13 +550,20 @@ aside.sort button{
 
 a.button:focus,
 .ebooks nav li.highlighted a:focus,
+button:focus,
+select:focus,
 nav a[rel]:focus{
 	outline: 1px dashed #fff;
 }
 
+select:-moz-focusring,
+select::-moz-focus-inner{
+	color: transparent !important;
+	text-shadow: 0 0 0 var(--body-text) !important;
+}
+
 a.button:active,
-a[rel~="previous"]:active,
-a[rel~="next"]:active,
+.ebooks nav > a[href]:active,
 aside.sort button:active{
 	top: 2px;
 	left: 2px;
@@ -533,7 +571,7 @@ aside.sort button:active{
 }
 
 a.button.next::after,
-a[rel="next"]::after{
+.ebooks nav > a:last-child::after{
 	font-family: "FontAwesome";
 	content: "\f061";
 	transition: all 200ms ease;
@@ -543,13 +581,13 @@ a[rel="next"]::after{
 }
 
 a[href].button.next:hover::after,
-a[rel="next"][href]::hover::after{
+.ebooks nav > a:last-child[href]::hover::after{
 	left: .25rem;
 	position: relative;
 	transition: all 200ms ease;
 }
 
-a[rel="previous"]:before{
+.ebooks nav > a:first-child:before{
 	font-family: "FontAwesome";
 	content: "\f060";
 	transition: all 200ms ease;
@@ -558,7 +596,7 @@ a[rel="previous"]:before{
 	margin-right: .5rem;
 }
 
-a[rel="previous"][href]:hover::before{
+.ebooks nav > a:first-child[href]:hover::before{
 	right: .25rem;
 	position: relative;
 	transition: all 200ms ease;
@@ -583,17 +621,21 @@ aside.sort button{
 	font-size: 1rem;
 }
 
+
+article nav ol li a:hover,
+main.ebooks nav ol li a:hover,
+main.ebooks nav ol li.highlighted a:hover,
 a.button:hover,
-a[rel~="previous"]:hover,
-a[rel~="next"]:hover,
+.ebooks nav > a:hover,
 aside.sort button:hover{
+	/* fallback for ie */
 	background-color: #288da4;
+	background-color: var(--button-highlight);
 }
 
-a[rel~="previous"]:not([href]),
-a[rel~="next"]:not([href]){
+.ebooks nav > a:not([href]){
+	cursor: default;
 	color: #efefef;
-	text-shadow: none;
 	box-shadow: none;
 	background: #bbb url('/images/stripes-dark.svg');
 }
@@ -766,13 +808,6 @@ article.ebook section#details ul li a[class]::before{
 	transition: transform .2s ease;
 }
 
-@media (prefers-color-scheme: dark){
-	article.ebook section#download ul li a[class]::before,
-	article.ebook section#details ul li a[class]::before{
-		filter: invert();
-	}
-}
-
 article.ebook section#download ul li a[class]:hover::before,
 article.ebook section#details ul li a[class]:hover::before{
 	transform: scale(1.1);
@@ -820,12 +855,6 @@ article.ebook #more-ebooks img:hover{
 	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
 }
 
-@media (prefers-color-scheme: dark){
-	article.ebook #more-ebooks img:hover{
-		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
-	}
-}
-
 article.ebook #more-ebooks a:active img{
 	transform: scale(1.025);
 	transition: none;
@@ -992,12 +1021,6 @@ footer p:last-child a::before{
 	margin: auto;
 }
 
-@media (prefers-color-scheme: dark){
-	footer p:last-child a::before{
-		filter: invert();
-	}
-}
-
 footer ul{
 	font-size: 0;
 	margin-bottom: 1rem;
@@ -1058,12 +1081,6 @@ main.ebooks > ol img:hover{
 	box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
 }
 
-@media (prefers-color-scheme: dark){
-	main.ebooks > ol img:hover{
-		box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
-	}
-}
-
 main.ebooks > ol > li a:active img{
 	transform: scale(1.025);
 	transition: none;
@@ -1183,7 +1200,9 @@ ul.tags li a{
 
 ul.tags li a:hover{
 	color: #fff;
+	/* fallback for ie */
 	background: #288da4;
+	background: var(--button-highlight);
 }
 
 ul.tags li + li{
@@ -1264,12 +1283,6 @@ code.terminal{
 	overflow: auto;
 }
 
-@media (prefers-color-scheme: dark){
-	code.terminal{
-		background-color: var(--light-body-text);
-	}
-}
-
 code.terminal::before{
 	content: url('/images/terminal.svg');
 	height: 1rem;
@@ -1306,14 +1319,6 @@ figure.text{
 	border-radius: .25rem;
 }
 
-
-@media (prefers-color-scheme: dark){
-	blockquote,
-	figure.text{
-		background: rgba(0,0,0,.25);
-	}
-}
-
 blockquote{
 	font-style: italic;
 }
@@ -1498,15 +1503,10 @@ main.ebooks nav ol li a{
 article nav ol li.highlighted a,
 main.ebooks nav ol li.highlighted a{
 	background-color: #1d6878; /* fallback for IE */
-	background: var(--highlight);
+	background: var(--button);
 	padding: 1.25rem;
 }
 
-article nav ol li a:hover,
-main.ebooks nav ol li a:hover{
-	background: #288da4;
-}
-
 article nav ol li.highlighted a,
 main.ebooks nav ol li.highlighted a,
 article nav ol li a:hover,
@@ -1518,6 +1518,7 @@ main.ebooks nav ol li a:hover{
 
 p.no-results{
 	margin-top: 4rem;
+	margin-bottom: 2rem;
 	font-style: italic;
 	text-align: center;
 }
@@ -1547,12 +1548,6 @@ input::placeholder{
 	color: rgba(0, 0, 0, .75);
 }
 
-@media (prefers-color-scheme: dark){
-	input::placeholder{
-		color: rgba(255, 255, 255, .75);
-	}
-}
-
 main > article > form{
 	max-width: calc(100% - 2rem);
 }
@@ -1571,16 +1566,6 @@ label.search{
 	color: inherit;
 }
 
-@media (prefers-color-scheme: dark){
-	label.search{
-		box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
-	}
-}
-
-input[type="search"]{
-	font-size: 1rem;
-}
-
 input[type="search"]:focus{
 	outline: none;
 }
@@ -1597,13 +1582,6 @@ label.search::before{
 	text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
 }
 
-
-@media (prefers-color-scheme: dark){
-	label.search::before{
-		text-shadow: 1px 1px 0 #000;
-	}
-}
-
 .utf{
 	border: 1px solid var(--body-text);
 	padding: .1rem;
diff --git a/www/css/reset.css b/www/css/reset.css
index 77dc756c..fa2560d7 100644
--- a/www/css/reset.css
+++ b/www/css/reset.css
@@ -70,6 +70,10 @@ figure{
 	margin: 0;
 }
 
+button::-moz-focus-inner{
+	border: 0;
+}
+
 /* ie 11 compatibility */
 header{
 	display: block;
diff --git a/www/ebooks/index.php b/www/ebooks/index.php
index dc5e606a..516ad4f1 100644
--- a/www/ebooks/index.php
+++ b/www/ebooks/index.php
@@ -95,28 +95,28 @@ catch(\Exception $ex){
 		<? }else{ ?>
 			<?= Template::EbookGrid(['ebooks' => $ebooks]) ?>
 		<? } ?>
-		<? if($query === null && $tag === null && $collection === null){ ?>
+		<? if(sizeof($ebooks) > 0 && $query === null && $tag === null && $collection === null){ ?>
 			<nav>
-				<a<? if($page > 1){ ?> href="/ebooks/<? if($page - 1 > 1){ ?>?page=<?= $page - 1 ?><? } ?><? if($sort != SORT_NEWEST){ ?><? if($page - 1 <= 1){ ?>?<? }else{ ?>&amp;<? } ?>sort=<?= $sort ?><? } ?>"<? } ?> rel="previous">Back</a>
+				<a<? if($page > 1){ ?> href="/ebooks/<? if($page - 1 > 1){ ?>?page=<?= $page - 1 ?><? } ?><? if($sort != SORT_NEWEST){ ?><? if($page - 1 <= 1){ ?>?<? }else{ ?>&amp;<? } ?>sort=<?= $sort ?><? } ?>" rel="previous"<? }else{ ?> aria-disabled="true"<? } ?>>Back</a>
 				<ol>
 				<? for($i = 1; $i < $pages + 1; $i++){ ?>
 					<li<? if($page == $i){ ?> class="highlighted"<? } ?>><a href="/ebooks/<? if($i - 1 >= 1){ ?>?page=<?= $i ?><? } ?><? if($sort != SORT_NEWEST){ ?><? if($i - 1 < 1){ ?>?<? }else{ ?>&amp;<? } ?>sort=<?= $sort ?><? } ?>"><?= $i ?></a></li>
 				<? } ?>
 				</ol>
-				<a<? if($page < ceil($totalEbooks / EBOOKS_PER_PAGE)){ ?> href="/ebooks/?page=<?= $page + 1 ?><? if($sort != SORT_NEWEST){ ?>&amp;sort=<?= $sort ?><? } ?>"<? }else{ ?> class="disabled"<? } ?> rel="next">Next</a>
+				<a<? if($page < ceil($totalEbooks / EBOOKS_PER_PAGE)){ ?> href="/ebooks/?page=<?= $page + 1 ?><? if($sort != SORT_NEWEST){ ?>&amp;sort=<?= $sort ?><? } ?>" rel="next"<? }else{ ?> aria-disabled="true"<? } ?>>Next</a>
 			</nav>
-		<? }elseif($tag !== null){ ?>
+		<? }elseif(sizeof($ebooks) > 0 && $tag !== null){ ?>
 			<nav>
-				<a<? if($page > 1){ ?> href="/tags/<?= Formatter::ToPlainText(str_replace(' ', '-', $tag)) ?>/<? if($page - 1 > 1){ ?>?page=<?= $page - 1 ?><? } ?>"<? } ?> rel="previous">Back</a>
+				<a<? if($page > 1){ ?> href="/tags/<?= Formatter::ToPlainText(str_replace(' ', '-', $tag)) ?>/<? if($page - 1 > 1){ ?>?page=<?= $page - 1 ?><? } ?>" rel="previous"<? }else{ ?> aria-disabled="true"<? } ?>>Back</a>
 				<ol>
 				<? for($i = 1; $i < $pages + 1; $i++){ ?>
 					<li<? if($page == $i){ ?> class="highlighted"<? } ?>><a href="/tags/<?= Formatter::ToPlainText(str_replace(' ', '-', $tag)) ?>/<? if($i - 1 >= 1){ ?>?page=<?= $i ?><? } ?>"><?= $i ?></a></li>
 				<? } ?>
 				</ol>
-				<a<? if($page < ceil($totalEbooks / EBOOKS_PER_PAGE)){ ?> href="/tags/<?= Formatter::ToPlainText(str_replace(' ', '-', $tag)) ?>/?page=<?= $page + 1 ?>"<? }else{ ?> class="disabled"<? } ?> rel="next">Next</a>
+				<a<? if($page < ceil($totalEbooks / EBOOKS_PER_PAGE)){ ?> href="/tags/<?= Formatter::ToPlainText(str_replace(' ', '-', $tag)) ?>/?page=<?= $page + 1 ?>" rel="next"<? }else{ ?> aria-disabled="true"<? } ?>>Next</a>
 			</nav>
 		<? } ?>
-		<? if($query === null && $tag === null && $collection === null){ ?>
+		<? if(sizeof($ebooks) > 0 && $query === null && $tag === null && $collection === null){ ?>
 			<aside class="sort">
 				<form action="" method="get">
 					<label>Sort by
diff --git a/www/images/no-copyright.svg b/www/images/no-copyright.svg
index 0a6bcc0b..6dfb843e 100644
--- a/www/images/no-copyright.svg
+++ b/www/images/no-copyright.svg
@@ -1,27 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns="http://www.w3.org/2000/svg"
-   viewBox="0 0 196 196"
-   version="1.0"
-   width="100%"
-   height="100%">
-  <g
-     id="g2538"
-     transform="translate(-1.2155218e-5,0)">
-    <path
-       style="fill:#303944;fill-opacity:1"
-       d="M 98 0 C 43.876095 -9.4739031e-15 1.5222578e-16 43.876095 0 98 C -9.4739031e-15 152.12391 43.876095 196 98 196 C 152.12391 196 196 152.12391 196 98 C 196 43.876095 152.12391 -2.8269484e-14 98 0 z M 98 20 C 141.07821 20 176 54.92179 176 98 C 176 141.07821 141.07821 176 98 176 C 54.92179 176 20 141.07821 20 98 C 20 54.92179 54.92179 20 98 20 z "
-       transform="translate(1.2155218e-5,0)" />
-    <path
-       style="fill:#303944;fill-opacity:1"
-       d="M 98 43 C 67.624339 43 43 67.624339 43 98 C 43 107.92431 45.619887 117.243 50.21875 125.28125 L 69.1875 106.3125 C 68.425094 103.66844 68 100.88949 68 98 C 68 81.431458 81.431458 68 98 68 C 100.88711 68 103.6713 68.425749 106.3125 69.1875 L 125.25 50.25 C 117.21491 45.651058 107.9241 43 98 43 z M 145.75 70.75 L 131.5 85 L 151.4375 85 C 150.2109 79.939155 148.26715 75.155627 145.75 70.75 z M 125.5 110 C 120.8707 120.59553 110.30199 128 98 128 C 95.110511 128 92.331564 127.57491 89.6875 126.8125 L 70.71875 145.78125 C 78.756997 150.38011 88.075686 153 98 153 C 124.25599 153 146.21414 134.60747 151.6875 110 L 125.5 110 z "
-       id="circle2520" />
-    <rect
-       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
-       height="169.70563"
-       width="24.748737"
-       y="-84.852806"
-       x="126.21857"
-       style="fill:#303944;fill-opacity:1" />
-  </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.0" viewBox="0 0 196 196" xmlns="http://www.w3.org/2000/svg">
+	<path d="m98 0c-54.124 0-98 43.876-98 98 0 54.124 43.876 98 98 98 54.124 0 98-43.876 98-98 0-54.124-43.876-98-98-98zm0 20c43.078 0 78 34.922 78 78s-34.922 78-78 78-78-34.922-78-78 34.922-78 78-78z" fill="#303944"/>
+	<path d="m98 43c-30.376 0-55 24.624-55 55 0 9.9243 2.6199 19.243 7.2188 27.281l18.969-18.969c-0.76241-2.6441-1.1875-5.423-1.1875-8.3125 0-16.569 13.431-30 30-30 2.8871 0 5.6713 0.42575 8.3125 1.1875l18.938-18.938c-8.0351-4.5989-17.326-7.25-27.25-7.25zm47.75 27.75-14.25 14.25h19.938c-1.2266-5.0608-3.1704-9.8444-5.6875-14.25zm-20.25 39.25c-4.6293 10.596-15.198 18-27.5 18-2.8895 0-5.6684-0.42509-8.3125-1.1875l-18.969 18.969c8.0382 4.5989 17.357 7.2188 27.281 7.2188 26.256 0 48.214-18.393 53.688-43z" fill="#303944"/>
+	<path transform="rotate(45)" d="m126.22-84.853h24.749v169.71h-24.749z" fill="#303944"/>
 </svg>