mirror of
https://github.com/standardebooks/web.git
synced 2025-07-20 13:24:48 -04:00
Tweak CSS for dark mode and accessibility
This commit is contained in:
parent
e44a6bffa2
commit
f1cf572b32
4 changed files with 103 additions and 142 deletions
196
www/css/core.css
196
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;
|
||||
|
|
|
@ -70,6 +70,10 @@ figure{
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ie 11 compatibility */
|
||||
header{
|
||||
display: block;
|
||||
|
|
|
@ -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{ ?>&<? } ?>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{ ?>&<? } ?>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{ ?>&<? } ?>sort=<?= $sort ?><? } ?>"><?= $i ?></a></li>
|
||||
<? } ?>
|
||||
</ol>
|
||||
<a<? if($page < ceil($totalEbooks / EBOOKS_PER_PAGE)){ ?> href="/ebooks/?page=<?= $page + 1 ?><? if($sort != SORT_NEWEST){ ?>&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){ ?>&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
|
||||
|
|
|
@ -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>
|
||||
|
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 948 B |
Loading…
Add table
Add a link
Reference in a new issue