web/www/css/core.css
2021-10-06 15:52:24 -05:00

2676 lines
46 KiB
CSS

@font-face{
font-family: "ForkAwesome";
src: url("/fonts/fork-awesome-subset.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
font-family: "League Spartan";
src: url("/fonts/league-spartan-bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face{
/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
font-family: "Crimson Pro";
src: url("/fonts/crimson-pro.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
font-family: "Crimson Pro";
src: url("/fonts/crimson-pro-bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face{
/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
font-family: "Crimson Pro";
src: url("/fonts/crimson-pro-italic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face{
/* Note: Don't use local() as a source, because our version matches Georgia's x-height */
font-family: "Crimson Pro";
src: url("/fonts/crimson-pro-bold-italic.woff2") format("woff2");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face{
font-family: "Fira Mono";
src: local("Fira Mono"), url("/fonts/fira-mono.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: "Fira Mono";
src: local("Fira Mono"), url("/fonts/fira-mono-bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
font-display: swap;
}
:root{
--light-body-bg: #e9e7e0;
--light-body-text: #222;
--light-header: #333;
--light-button: #4f9d85;
--light-button-highlight: #62bfa3;
--light-border: #222;
--light-sub-text: #777;
--light-input-hover: #000;
--light-input-border: #777;
--light-input-outline: #000;
--dark-body-bg: #2c3035;
--dark-body-text: #fff;
--dark-header: #fff;
--dark-button: #4f9d85;
--dark-button-highlight: #62bfa3;
--dark-border: #000;
--dark-sub-text: #aaa;
--dark-input-border: #aaa;
--dark-input-hover: #118460;
--dark-input-outline: #fff;
--body-text: var(--light-body-text);
--header: var(--light-header);
--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);
--input-hover: var(--light-input-hover);
--input-border: var(--light-input-border);
--input-outline: var(--light-input-outline);
--link-highlight: var(--button);
}
/* Start CSS reset */
/* Dont @import this, to prevent FOUC */
html{
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body{
margin: 0;
padding: 0;
}
a{
outline: 0;
}
blockquote{
margin: 0;
quotes: none;
}
p{
margin: 0;
}
ol{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
}
h1{
margin: 0;
}
h2{
margin: 0;
}
h3{
margin: 0;
}
h4{
margin: 0;
}
h5{
margin: 0;
}
h6{
margin: 0;
}
figure{
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
q{
quotes: none;
}
button::-moz-focus-inner{
border: 0;
}
/* End reset */
html{
color: var(--body-text);
font-family: "Crimson Pro", Georgia, serif;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 22px;
line-height: 1.4;
background: var(--body-bg);
}
a,
a:link,
a:visited{
color: inherit;
}
a:hover{
color: var(--link-highlight);
}
a:focus{
outline: 1px dashed var(--input-outline);
}
main{
width: 100%;
max-width: 60rem;
box-sizing: border-box;
text-align: justify;
display: flex;
flex-direction: column;
font-variant-numeric: oldstyle-nums;
}
main.front-page{
max-width: none;
align-items: center;
}
section{
display: flex;
flex-direction: column;
}
picture{
font-size: 0;
}
main.front-page h1 ~ section{
margin-left: auto;
margin-right: auto;
align-items: center;
width: 50rem; /* for ie11 */
}
main.front-page > p,
main.front-page > picture img{
width: 40rem;
max-width: 100%; /* for responsive */
}
main.front-page > picture img{
margin-top: 2rem;
margin-bottom: 1rem;
}
main > article{
display: flex;
flex-direction: column;
align-items: center;
}
main > article > *{
width: 100%;
max-width: 40rem;
}
main ol ol{
list-style-type: lower-latin;
}
main p, main ul, main ol, main li, main blockquote{
margin-top: 1rem;
}
main p:first-child, main ul:first-child, main ol:first-child, main ul li:first-child, main ol li:first-child, main blockquote:first-child{
margin-top: 0;
}
blockquote{
margin: 1rem;
background: rgba(0, 0, 0, .25);
padding: 1rem;
border-radius: .25rem;
border: 1px solid rgba(255,255,255,.25);
}
ol > li > ul{
list-style: disc; /* dark discs when nested in ol */
}
ol ol, ol ul, ul ul, ul ol{
margin-left: 1.2rem;
}
h1,h2,h3,h4,h5,h6{
color: var(--header);
}
h1,h2,h3,h4,h5,h6,.ebook h1 + p{
-webkit-hyphens: none;
hyphens: none;
}
body{
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
/* When the site was first designed, we used the official build of Crimson Pro.
The font is much smaller than Georgia so we had to make the default body text larger to compensate.
But this causes a big page layout change once the font is loaded. So later we altered the font to have the same
x-height of Georgia, but we can't change the root element rem size because the rest of the site would be affected.
So instead we change the font size here, which doesn't change the root rem size. */
font-size: .88rem;
line-height: 1.6;
}
body > header{
background: #394451;
display: flex;
justify-content: space-around;
border-bottom: 1px solid var(--border);
padding: 1.5rem 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 1);
position: relative;
width: calc(100% + 2rem + 2rem);
z-index: 100; /* to step on the splash box shadow */
}
body > header > a{
background: url("/images/logo-full.svg");
-webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
/* brightness(0) ensures the images are stark white when inverted, since the originals are usually not #000 */
filter: brightness(0) invert(100%) drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
height: 70px;
width: 300px;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
transition: transform 200ms ease;
}
body > header > a:link,
body > header > a:visited{
color: #fff; /* Contrast for accessibility */
}
body > header a:focus{
outline: 1px dashed #fff;
}
body > header > a:hover{
transform: scale(1.025) rotate(1deg);
}
header nav{
font-family: "League Spartan";
text-transform: uppercase;
align-self: center;
text-align: right;
font-size: 0;
}
header nav li{
color: #fff;
display: inline-block;
}
header nav li + li:before{
content: "•";
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
position: relative;
top: -1px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
}
header nav li a{
text-decoration: none;
font-size: .75rem;
transition: border 200ms ease, color 200ms ease;
letter-spacing: 1px;
position: relative;
display: inline-block;
}
header nav li a:link,
header nav li a:visited{
text-shadow: 1px 1px 0 rgba(0, 0, 0, .75);
border-bottom: 5px solid rgba(0,0,0,0); /* for the transition */
}
header nav li a:hover,
header nav li a.highlighted:hover{
color: #fff;
border-bottom: 5px solid var(--button);
transition: none;
}
header nav li a.highlighted{
color: #fff;
border-bottom: 5px solid var(--button);
}
header nav li a.highlighted::after{
position: absolute;
content: "";
width: 0px;
height: 0px;
border-top: 10px solid var(--button);
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -20px;
right: calc(50% - 10px);
}
article > h1{
width: 100%;
max-width: 100%;
}
main.front-page h1{
background: #29292b url("/images/book.jpg") center / cover;
background-image: image-set("/images/book.avif" type("image/avif"), "/images/book.jpg" type("image/jpeg"));
border-bottom: 1px solid var(--border);
box-shadow: 0 0 10px rgba(0, 0, 0, .75);
width: calc(100% + 4rem);
margin: 0;
padding: 6rem;
box-sizing: border-box;
-webkit-hyphens: none;
hyphens: none;
line-height: 1.2;
letter-spacing: 1px;
color: #fff;
font-size: 2.8rem;
font-family: "League Spartan";
text-shadow: 2px 2px 0 rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, 1);
}
main.front-page > section > section{
max-width: 100%;
}
main.front-page > section > section > div{
display: flex;
margin-top: 2rem;
max-width: 100%;
}
main.front-page > section > section > div > div{
max-width: 100%;
}
main.front-page > section > section figure{
margin-top: 0;
margin-left: 2rem;
width: 400px;
max-width: 100%;
position: relative;
align-self: center;
}
main.front-page > section > section figure.stacked{
height: 229px;
}
main.front-page > section > section figure.stacked img.bottom,
main.front-page > section > section figure.stacked img.top{
width: 316px;
position: absolute;
}
main.front-page > section > section figure.stacked img.bottom{
left: 0;
}
main.front-page > section > section figure.stacked img.top{
top: 72px;
left: 72px;
}
main.front-page > section > section figure.stacked img.arrow{
border: none;
box-shadow: none;
position: absolute;
right: 1rem;
top: 1rem;
width: 2.5rem;
}
main.front-page > section > section figure.oss{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
main.front-page > section > section figure.oss img{
border: none;
box-shadow: none;
width: 150px;
display: inline;
filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .25));
margin: 1rem;
}
main.front-page > section > section figure img{
width: auto;
max-width: 100%;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid var(--border);
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}
main.front-page > section > section p{
width: 475px;
max-width: 100%;
text-align: justify;
}
main.front-page > section > section:first-of-type{
margin-top: 4rem;
}
main.front-page > section > section + section{
margin-top: 6rem;
}
main.front-page > img{
width: 700px;
max-width: 100%;
margin: auto;
margin-top: 4rem;
}
main.front-page > img + p{
margin-top: 4rem;
}
main.front-page > section{
max-width: 100%;
}
main.front-page > section > h2{
font-family: "Crimson Pro", Georgia, serif;
font-style: italic;
font-size: 2.2rem;
text-align: center;
text-transform: none;
font-weight: normal;
max-width: 100%;
border-top: 3px double var(--sub-text);
border-bottom: 3px double var(--sub-text);
padding: 2rem 4rem;
hyphens: none;
letter-spacing: 0;
}
main.front-page > section > h2::before{
margin-bottom: 3rem;
}
main.front-page > section > h2::after{
margin-top: 3rem;
}
main.front-page > section > section > h3{
text-align: center;
font-size: 2rem;
margin-top: 0;
hyphens: none;
}
main.center h1{
margin-top: 4rem;
border: none;
padding: 0;
margin-bottom: 0;
text-align: center;
}
h1 a{
text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
text-align: left;
}
h1 + p{
margin-top: 0;
}
h1 + section > h2:first-child{
margin-top: 0rem;
}
.miniheader{
text-align: center;
font-size: 1.2rem;
font-family: "Crimson Pro", Georgia, serif;
font-style: italic;
font-weight: normal;
margin-top: 0;
margin-bottom: 1rem;
text-transform: none;
letter-spacing: 0;
}
a.button,
.ebooks nav > a,
form button{
border: 1px solid rgba(0, 0, 0, .5);
font-style: normal;
box-sizing: border-box;
background-color: var(--button);
border-radius: 5px;
padding: 1rem 2rem;
color: #fff;
text-decoration: none;
font-family: "League Spartan", Arial, sans-serif;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
box-shadow: 2px 2px 0 rgba(0, 0, 0, .5), 1px 1px 0px rgba(255,255,255, .5) inset;
position: relative;
text-transform: lowercase;
cursor: pointer;
white-space: nowrap;
font-size: 1rem;
height: calc(1.4rem + 2rem + 2px);
hyphens: none;
line-height: 1.2;
}
form button{
line-height: 1;
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{
outline: 1px dashed var(--input-outline);
}
select:-moz-focusring,
select::-moz-focus-inner{
color: transparent !important;
text-shadow: 0 0 0 var(--body-text) !important;
}
a.button:active,
.ebooks nav > a[href]:active,
form button:active{
top: 2px;
left: 2px;
box-shadow: none;
}
a.button.next::after,
.ebooks nav > a:last-child::after{
font-family: "ForkAwesome";
content: "\f061";
transition: all 200ms ease;
position: relative;
left: 0;
margin-left: .5rem;
}
a[href].button.next:hover::after,
.ebooks nav > a:last-child[href]:hover::after{
left: .25rem;
position: relative;
transition: all 200ms ease;
}
.ebooks nav > a:first-child:before{
font-family: "ForkAwesome";
content: "\f060";
transition: all 200ms ease;
position: relative;
right: 0;
margin-right: .5rem;
}
.ebooks nav > a:first-child[href]:hover::before{
right: .25rem;
position: relative;
transition: all 200ms ease;
}
a.button.next:hover::after,
.ebooks nav > a:last-child[href]:hover::after{
left: .25rem;
position: relative;
transition: all 200ms ease;
}
article nav ol li a:hover,
main.ebooks nav ol li a:hover,
main.ebooks nav ol li.highlighted a:hover,
a.button:hover,
.ebooks nav > a:hover,
form button:hover{
background-color: var(--button-highlight);
}
.ebooks nav > a:not([href]){
cursor: default;
color: #efefef;
box-shadow: none;
background: #bbb url("/images/stripes-dark.svg");
}
code{
font-family: "Fira Mono", monospace;
font-size: .8rem;
border: 1px solid rgba(255,255,255,.25);
background: #333;
border-radius: .25rem;
white-space: nowrap;
padding: 0 .25rem;
color: #fff;
margin: 0 .2rem;
}
main.front-page > a.button{
align-self: center;
margin-top: 4rem;
white-space: normal;
height: auto;
text-align: center;
}
article.ebook ul,
article.ebook ol{
list-style: none;
margin-left: 0;
}
article.ebook #history li{
display: table-row;
}
article.ebook #history li time,
article.ebook #history li p{
display: table-cell;
width: auto;
}
article.ebook #history li + li > *{
padding-top: 1rem;
}
article.ebook #history li time{
padding-right: 1rem;
white-space: nowrap;
text-align: right;
}
article.ebook section aside p::before{
content: "(";
}
article.ebook section aside p::after{
content: ")";
}
article.ebook section aside{
margin-top: 1rem;
color: var(--sub-text);
text-align: right;
font-style: italic;
font-size: .9rem;
}
article.ebook > aside{
width: 100%;
max-width: 100%;
}
article.ebook > header{
width: 100%;
max-width: 100%;
margin: auto;
position: relative;
overflow: hidden;
min-height: 20rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-top: none;
border-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;
box-sizing: border-box;
}
article.ebook > header > hgroup{
position: relative;
z-index: 1;
max-width: 75%;
box-sizing: border-box;
background: rgba(0, 0, 0, .75);
padding: 2rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
margin: 2rem; /* for responsive */
border-radius: .25rem;
}
article.ebook > header > hgroup > *{
color: #fff;
}
article.ebook > header > hgroup > h2{
font-size: 1.4rem;
font-family: "League Spartan", Arial, sans-serif;
line-height: 1;
margin-top: 1rem;
margin-left: 0;
}
article.ebook > header > hgroup a,
article.ebook > header > hgroup a:link,
article.ebook > header > hgroup a:visited{
color: inherit;
text-decoration: none;
}
article.ebook > header img{
top: 0;
left: 0;
position: absolute;
z-index: 0;
height: 100%;
width: auto;
object-fit: cover;
max-width: 100%;
}
article.ebook section#details ul{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
article.ebook section#details ul li{
margin: 0;
}
article.ebook section#download ul{
margin-top: 0;
}
article.ebook section#download li{
display: table-row;
}
article.ebook section#download li p > span{
display: table-cell;
vertical-align: top;
padding-top: 2rem;
}
article.ebook section#download li:first-child span{
padding-top: 1rem;
}
article.ebook section#download li span:first-child{
white-space: nowrap;
}
article.ebook section#download li span:nth-child(2){
padding-right: .5rem;
padding-left: .5rem;
}
article.ebook section ul li a[class]{
display: inline-flex;
text-align: left;
align-items: center;
}
article.ebook section#details ul li a[class]{
display: inline-flex;
align-items: flex-start;
}
article.ebook section#read-online a::before,
article.ebook section#download ul li a[class]::before,
article.ebook section#details ul li a[class]::before{
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
content: "";
margin-right: .5rem;
height: 1.5rem;
width: 1.5rem;
min-width: 1.5rem;
transition: transform .2s ease;
}
article.ebook section#read-online a:hover::before,
article.ebook section#download ul li a[class]:hover::before,
article.ebook section#details ul li a[class]:hover::before{
transform: scale(1.1);
}
article.ebook #more-ebooks{
border-top: 3px double var(--sub-text);
margin-top: 4rem;
}
article.ebook #more-ebooks h2{
text-align: center;
font-style: normal;
color: var(--body-text);
margin: 0;
margin-top: 2rem;
}
article.ebook #more-ebooks ul{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
margin-top: 2rem;
margin-left: -1rem;
}
article.ebook #more-ebooks ul li{
margin: 0;
font-size: 0;
margin-left: 1rem;
}
article.ebook #more-ebooks img{
height: 200px;
border-radius: .25rem;
border: 1px solid var(--border);
transition: transform .2s ease;
box-sizing: border-box;
width: auto;
}
article.ebook #more-ebooks img:hover{
transform: scale(1.05);
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}
article.ebook #more-ebooks a:active img{
transform: scale(1.025);
transition: none;
box-shadow: none;
}
article.ebook #more-ebooks li:nth-child(1) img,
article.ebook #more-ebooks li:nth-child(5) img{
height: 160px;
}
article.ebook #more-ebooks li:nth-child(2) img,
article.ebook #more-ebooks li:nth-child(4) img{
height: 180px;
}
article.ebook #more-ebooks li:nth-child(3) img{
}
time{
color: var(--sub-text);
margin-right: 15px;
width: 6em;
display: inline-block;
}
.globe::before{
background-image: url("/images/globe.svg");
}
.project-gutenberg::before{
background-image: url("/images/project-gutenberg.svg");
}
.wikisource::before{
background-image: url("/images/wikisource.svg");
}
.hathitrust::before{
background-image: url("/images/hathitrust.svg");
}
.wikipedia::before{
background-image: url("/images/wikipedia.svg");
}
.internet-archive::before{
background-image: url("/images/internet-archive.svg");
}
.github::before{
background-image: url("/images/github.svg");
}
.epub::before{
background-image: url("/images/epub.svg");
}
.amazon::before{
background-image: url("/images/amazon.svg");
}
.kobo::before{
background-image: url("/images/kobo.svg");
}
.google::before{
background-image: url("/images/google.svg");
}
.distributed-proofreaders::before{
background-image: url("/images/distributed-proofreaders.svg");
}
.list::before{
background-image: url("/images/list.svg");
}
.page::before{
background-image: url("/images/page.svg");
}
article.ebook h1{
border: none;
margin: 0;
padding: 0;
}
article.ebook hgroup h2{
text-align: center;
}
aside#reading-ease,
section#description{
margin-top: 2rem;
}
section#description h2{
display: none;
}
section#description p:first-of-type{
margin-top: 0;
}
article.ebook aside#reading-ease{
border-top: 3px double var(--sub-text);
border-bottom: 3px double var(--sub-text);
padding: 1rem 0;
font-style: italic;
text-align: center;
}
h2,
.masthead h3{
font-size: 1.2rem;
font-family: "League Spartan", Arial, sans-serif;
margin-top: 4rem;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
}
h3,
h4,
h5,
h6{
font-size: 1rem;
font-family: "League Spartan", Arial, sans-serif;
margin-top: 3rem;
line-height: 1.2;
}
body > footer{
width: 100%;
max-width: 60rem;
border-top: 3px double var(--sub-text);
margin-top: 2rem;
text-align: center;
padding: 2rem 0;
}
footer p:last-child a{
font-size: 0;
display: inline-block;
margin: auto;
margin-top: 2rem;
}
footer p:last-child a::before{
content: "";
background: url("/images/logo-small.svg");
background-size: contain;
background-repeat: no-repeat;
display: block;
height: 2.5rem;
width: calc(4rem - 1px);
margin: auto;
}
footer ul{
font-size: 0;
margin-bottom: 1rem;
}
footer ul li{
display: inline-block;
list-style: none;
text-transform: lowercase;
font-size: 0;
}
footer ul li a,
footer ul li::after{
font-size: .9rem;
}
footer ul li::after{
content: "\b7";
margin: 0 10px;
}
footer ul li:last-child::after{
content: "";
display: none;
}
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;
}
footer > a{
display: block;
margin-top: 2rem;
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{
font-size: 2rem;
font-family: "League Spartan", Arial, sans-serif;
line-height: 1.2;
border-bottom: 3px double var(--sub-text);
margin-top: 2rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
text-align: center;
}
main.ebooks > aside.alert + ol{
margin-top: 2rem;
}
main.ebooks > ol{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 4rem;
margin: 0;
margin-bottom: 4rem;
list-style: none;
}
main.ebooks > ol.list{
display: flex;
flex-direction: column;
gap: 0;
margin: auto;
margin-bottom: 4rem;
width: 100%;
max-width: 30rem;
}
main.ebooks > ol > li{
margin: 0;
text-align: center;
}
main.ebooks > ol.list > li{
display: grid;
grid-template-columns: 6rem 1fr;
grid-column-gap: 1rem;
grid-template-rows: auto auto 1fr;
}
main.ebooks > ol.list > li + li {
margin-top: 2rem;
}
main.ebooks > ol.list > li > a{
grid-row: 1 / span 3;
}
main.ebooks > ol.list ul.tags{
display: flex;
justify-content: flex-start;
margin-left: 0;
}
main.ebooks > ol.list > li p{
text-align: left;
}
main.ebooks > ol a[tabindex]{
display: inline-block;
transition: all .2s ease;
position: relative;
font-size: 0;
}
main.ebooks > ol a[tabindex][data-ordinal]::before{
display: block;
content: "№ "attr(data-ordinal);
position: absolute;
background: rgba(0, 0, 0, .75);
padding: .5rem;
border-radius: .25rem;
line-height: 1;
font-variant-numeric: normal;
left: calc(.25rem + 3px); /* align with title box in picture */
top: calc(.25rem + 3px);
font-size: .75rem;
font-weight: bold;
font-family: "League Spartan", Arial, sans-serif;
color: var(--dark-body-text);
}
main.ebooks > ol a[tabindex]:hover{
transform: scale(1.05);
color: unset;
}
main.ebooks > ol a[tabindex]:hover img{
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}
main.ebooks > ol > li a[tabindex]:active{
transform: scale(1.025);
transition: none;
box-shadow: none;
}
main.ebooks > ol > li p{
margin: 0;
text-align: center;
-webkit-hyphens: none;
hyphens: none;
}
main.ebooks > ol > li img{
box-sizing: border-box;
max-width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: .25rem;
}
main.ebooks > ol > li > p:nth-of-type(1) > a{
font-weight: bold;
text-decoration: none;
display: flex;
justify-content: center;
}
main.ebooks > ol.list > li p.author a,
main.ebooks > ol.list > li > p:nth-of-type(1) > a{
display: inline;
}
main.ebooks > ol > li > a:first-child{
font-size: 0; /* for correct focus outline */
}
main.ebooks > ol > li p.author a{
font-style: italic;
text-decoration: none;
display: flex;
justify-content: center;
}
article nav ol,
main.ebooks nav ol{
list-style: none;
display: flex;
margin: 0 .5rem;
}
aside.warning,
aside.alert{
font-style: italic;
margin-top: 2rem;
background: url("/images/stripes.svg") #FFFF99;
color: var(--light-body-text);
border-radius: .25rem;
padding: 2rem;
border: 2px solid #FFCC00;
box-sizing: border-box;
}
aside.warning{
font-style: normal;
hyphens: none;
}
aside.warning a:hover,
aside.alert a:hover{
color: var(--light-highlight);
}
aside.warning a:focus
aside.alert a:focus{
outline: 1px dashed var(--light-highlight);
}
nav + aside.alert{
margin-top: 2rem;
}
aside.alert + p{
margin-top: 2rem;
}
h1 + aside.alert{
margin-top: 0;
}
section#history ol > li:before{
display: none;
}
figure img{
width: 50%;
}
figure{
margin-top: 1rem;
}
ul.tags{
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: .5rem;
}
ul.tags li{
margin: .5rem;
}
ul.tags li:first-child{
margin: .5rem;
}
ul.tags li a{
border: 1px solid var(--body-text);
border-radius: 5px;
padding: .25rem .5rem;
font-style: normal;
background: rgba(0, 0, 0, .1);
text-decoration: none;
display: block;
line-height: 1;
white-space: nowrap;
text-transform: lowercase;
box-shadow: 1px 1px 0px rgba(255, 255, 255, .5) inset;
}
ul.tags li a:hover{
color: #fff;
background: var(--button-highlight);
}
figure img{
border-radius: .25rem;
border: 1px solid var(--border);
display: block;
margin: auto;
}
figure p{
margin: 0;
}
figure p + p{
margin-top: 15px;
}
main.ebooks nav{
display: flex;
justify-content: center;
align-items: center;
max-width: none;
}
article nav ol li,
main.ebooks nav ol li{
margin: 0;
white-space: nowrap;
}
article nav ol li a,
main.ebooks nav ol li a{
font-size: 1rem;
line-height: 1.4;
padding: 1rem;
margin: 0 .5rem;
border-radius: .25rem;
font-variant-numeric: normal;
height: calc(1.4rem + 2rem + 2px);
display: inline-block;
box-sizing: border-box;
}
article nav ol li.highlighted a,
main.ebooks nav ol li.highlighted a{
background: var(--button);
border: 1px solid rgba(0, 0, 0, .5);
}
article nav ol li.highlighted a,
main.ebooks nav ol li.highlighted a,
article nav ol li a:hover,
main.ebooks nav ol li a:hover{
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}
p.no-results{
margin-top: 4rem;
margin-bottom: 2rem;
font-style: italic;
text-align: center;
}
.us-pd-warning{
font-style: italic;
margin-top: 1rem;
}
/* remove some styles from Chromium / Webkit */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
}
input::placeholder{
font-style: italic;
color: rgba(0, 0, 0, .75);
}
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, .05);
border-radius: 5px;
border: 1px solid var(--input-border);
display: flex;
align-items: center;
padding: 1rem;
color: inherit;
font-size: .88rem;
font-family: "Crimson Pro";
color: var(--body-text);
line-height: 1.4;
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
}
label[class]:not(.text) 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{
display: block;
}
label.select > span + span{
display: inline-block;
}
label.select > span + span::after{
display: block;
position: absolute;
top: calc((2rem + 1.4rem + 2px) / 2 - 10px);
right: calc(1rem - 12px / 2);
content: "\f107";
font-family: "ForkAwesome";
font-size: 1rem;
line-height: 1;
color: var(--sub-text);
margin-top: -3px; /* Adjust for Crimson Pro line-height */
text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
transition: color .5s;
}
label.search:focus-within::before,
label.search:hover::before,
label.select:hover > span + span::after{
color: var(--input-outline);
transition: none;
}
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 + .7rem);
left: 1rem;
font-family: "ForkAwesome";
font-size: 1rem;
line-height: 1;
margin-right: 1rem;
color: var(--sub-text);
margin-top: -3px; /* Adjust for Crimson Pro line-height */
text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
width: 1rem;
transition: color .5s;
cursor: text;
}
label.search::before{
content: "\f002";
}
label.email::before{
content: "\f0e0";
}
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;
}
a.button:hover,
nav li.highlighted a:hover,
nav a[rel]:hover,
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, .1);
transition: none;
}
input[type="text"]:user-invalid,
input[type="email"]:user-invalid,
input[type="search"]:user-invalid{
border-color: #ff0000;
box-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000;
}
input[type="text"]:-moz-ui-invalid,
input[type="email"]:-moz-ui-invalid,
input[type="search"]:-moz-ui-invalid{
border-color: #ff0000;
box-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000;
}
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;
}
form[action="/ebooks"] label{
max-width: 100%;
}
form[action="/ebooks"] select[multiple] option[value="all"]{
border-bottom: 1px dashed var(--sub-text);
}
form[action="/ebooks"]{
display: grid;
grid-gap: 1rem;
grid-template-columns: 10rem auto auto auto 1fr;
margin: 0 1rem;
margin-bottom: 4rem;
max-width: calc(100% - 2rem);
}
form[action="/ebooks"] label.tags{
grid-column: 1;
grid-row: 1 / span 2;
white-space: nowrap;
}
form[action="/ebooks"] label.tags select{
width: 100%;
height: calc(100% - 1.4rem);
}
form[action="/ebooks"] label.search{
grid-column: 2 / span 4;
}
form[action="/ebooks"] label.sort{
grid-column: 2;
}
form[action="/ebooks"] label.sort select{
max-width: 100%;
}
form[action="/ebooks"] label.view{
grid-column: 3;
}
form[action="/ebooks"] label.per-page{
grid-column: 4;
}
form[action="/ebooks"] button{
justify-self: end;
margin-top: 1.4rem;
}
article nav ol li:not(:first-child):not(:last-child):not(.highlighted),
main.ebooks nav ol li:not(:first-child):not(:last-child):not(.highlighted){
display: none;
}
article nav ol li.highlighted::before,
main.ebooks nav ol li.highlighted::before{
content: "⋯";
padding-right: 1rem;
}
article nav ol li.highlighted::after,
main.ebooks nav ol li.highlighted::after{
content: "⋯";
padding-left: 1rem;
}
article nav ol li.highlighted:first-child::before,
article nav ol li.highlighted:last-child::after,
article nav ol li.highlighted:nth-child(2)::before,
article nav ol li.highlighted:nth-last-child(2)::after,
main.ebooks nav ol li.highlighted:first-child::before,
main.ebooks nav ol li.highlighted:last-child::after,
main.ebooks nav ol li.highlighted:nth-child(2)::before,
main.ebooks nav ol li.highlighted:nth-last-child(2)::after{
display: none;
}
.has-hero hgroup{
padding: 2rem;
padding-bottom: 1.75rem;
display: flex;
align-items: center;
flex-direction: column;
max-width: none;
}
.has-hero picture{
max-width: none;
text-align: center;
margin-bottom: 2rem;
}
.has-hero picture + p{
margin-top: 0;
}
.has-hero img{
border: 1px solid var(--border);
border-radius: .25rem;
max-width: 100%;
}
.has-hero hgroup h1,
.has-hero > h1,
.has-hero hgroup h2,
.has-hero > h2{
border: none;
padding: 0;
margin: 0;
}
.has-hero hgroup h1,
.has-hero > h1{
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.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;
font-size: 2rem;
text-align: center;
text-transform: none;
letter-spacing: 0;
}
.button-row{
display: grid;
margin: 2rem 0;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
justify-items: center;
}
.button-row.center{
grid-template-columns: 1fr;
}
.masthead h2 + section > h3{
margin-top: 0;
}
.masthead h2{
text-transform: none;
margin-top: 4rem;
}
.masthead ol{
list-style: none;
display: grid;
grid-gap: 1rem;
}
.masthead ol.editors{
grid-template-columns: repeat(auto-fill, minmax(max-content, 15rem));
}
.masthead ol.editors p{
line-height: 1;
}
.masthead ol.donors{
grid-template-columns: repeat(auto-fill, minmax(10rem, max-content));
}
.masthead ol.donors.patrons{
font-style: italic;
}
.masthead ol.donors.patrons li:last-child{
font-variant-numeric: normal;
}
.masthead ol.corporate img{
max-height: 100px;
max-width: 100%;
}
.masthead ol.donors.corporate,
.masthead ol.donors.corporate p{
text-align: center;
}
.masthead ol li{
margin: 0;
}
.masthead ol.editors li{
display: flex;
justify-content: flex-start;
align-items: center;
}
.masthead img{
border: 1px solid var(--border);
border-radius: .25rem;
margin-right: .5rem;
box-sizing: border-box;
}
.masthead img[src*="portrait.svg"]{
padding: .5rem;
}
.masthead ol li img.contact{
border: none;
border-radius: 0;
width: auto;
margin-top: .5rem;
margin-right: 0;
display: block;
height: auto;
}
.masthead ol.editors img{
height: 102px;
width: 102px;
}
.masthead ol li p{
margin-top: 0;
text-align: left;
}
.masthead hgroup * + *{
font-family: "Crimson Text", serif;
font-size: .88rem;
margin-top: 1rem;
font-style: italic;
font-weight: normal;
}
.donate aside{
border-top: 1px dashed var(--sub-text);
margin-top: 1rem;
padding-top: 1rem;
font-style: italic;
}
.donate table{
margin: 1rem auto 0 auto;
}
.donate table td{
padding: 1rem;
}
.donate table td:first-child{
padding-left: 0;
vertical-align: middle;
}
.donate table p{
margin: 0;
text-align: right;
}
.donate a.button{
display: block;
height: auto;
text-align: center;
}
aside.donation,
article.ebook section aside.donation{
position: relative;
border: 1px dashed var(--body-text);
color: var(--body-text);
text-align: center;
padding: 2rem;
font-size: .88rem;
margin-top: 0;
border-radius: .25rem;
margin-bottom: 2rem;
background-color: rgba(255, 255, 255, .5);
font-style: italic;
hyphens: none;
}
aside.donation::before{
content: "";
display: block;
position: absolute;
height: calc(1rem + 2px);
width: calc(1rem + 2px);
top: 0;
left: 0;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(90deg);
border-radius: 0 0 0 .25rem;
background: rgba(0, 0, 0, .4);
}
aside.donation::after{
content: "";
display: block;
position: absolute;
height: 1rem;
width: 1rem;
top: 0;
left: 0;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(90deg);
border-radius: 0 0 0 .25rem;
background: #dda82a;
}
article.ebook section aside.donation p::before,
article.ebook section aside.donation p::after{
display: none;
}
.acroynm{
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;
grid-column: 1 / span 2;
}
fieldset{
padding: 0;
border: none;
}
fieldset p{
border-bottom: 1px dashed var(--input-border);
}
label.checkbox{
display: inline-flex;
align-items: center;
text-align: left;
line-height: 1;
}
label.checkbox input{
margin-right: .25rem;
}
article.step-by-step-guide ol ol{
margin-left: 1.2rem;
list-style: decimal;
}
.step-by-step-guide ol ol li p{
margin-left: 0;
}
.full-width img{
width: 100%;
}
abbr.acronym{
font-variant: all-small-caps;
}
@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]{
height: calc(1rem + 1.4rem + 1rem + 2px) !important;
}
select[multiple] option[value="all"]{
/* Hide the "all" button, because touchscreen devices
have clearer ways to deselect options */
display: none;
}
form[action="/ebooks"]{
grid-template-columns: auto auto auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
}
form[action="/ebooks"] label.search{
grid-column: 2 / span 3;
}
form[action="/ebooks"] label.sort{
grid-column: 1;
grid-row: 2;
}
form[action="/ebooks"] label.view{
grid-column: 2;
grid-row: 2;
}
form[action="/ebooks"] label.per-page{
grid-column: 3;
grid-row: 2;
}
form[action="/ebooks"] button{
grid-column: 4;
grid-row: 2;
}
}
@media(max-width: 1100px){
form[action="/ebooks"]{
grid-template-columns: auto auto auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
grid-column: 1;
}
form[action="/ebooks"] label.tags select{
height: calc(1rem + 1.4rem + 1rem + 2px); /* Size equal to a select boxes */
}
form[action="/ebooks"] label.search{
grid-row: 1;
grid-column: 2 / span 3;
}
form[action="/ebooks"] label.sort{
grid-row: 2;
grid-column: 1;
}
form[action="/ebooks"] label.view{
grid-row: 2;
grid-column: 2;
}
form[action="/ebooks"] label.per-page{
grid-row: 2;
grid-column: 3;
}
form[action="/ebooks"] button{
grid-row: 2;
grid-column: 4;
}
}
@media(max-width: 1000px){
body > header{
flex-direction: column;
align-items: center;
}
body > header li{
margin-top: 2rem;
}
main.front-page h1{
padding: 2rem;
}
main.front-page > section > section > div{
flex-direction: column;
}
main.front-page > section > section > div figure{
order: 1;
margin: 0;
margin-bottom: 2rem;
}
main.front-page > section > section > div div{
order: 2;
width: 100%;
}
main.front-page > section > section p{
width: 100%;
}
article.ebook #more-ebooks ul{
flex-wrap: wrap;
}
article.ebook #more-ebooks ul li{
width: calc(25% - 1rem);
}
article.ebook #more-ebooks li img{
width: 100%;
height: auto !important;
}
#more-ebooks ul li:last-child{
display: none;
}
footer ul li{
display: inline;
}
footer ul li:nth-child(4)::after{
content: "\A"; /* This is a line break */
white-space: pre;
margin: 0;
}
article.ebook section#download li span:nth-child(2){
display: none;
}
article.ebook section#download li span:nth-child(3){
display: block;
margin-left: 2rem;
padding-top: 0;
}
}
@media(max-width: 900px){
main.ebooks > ol{
grid-template-columns: repeat(3, 1fr);
}
.button-row{
grid-template-columns: 1fr;
}
.donate a.button{
white-space: normal;
}
.donate table td{
display: block;
}
.donate table td:first-child{
vertical-align: top;
}
.donate table td + td{
padding-top: 0;
}
.donate table tr + tr td:first-child{
padding-top: 2rem;
}
.donate table td p{
text-align: center;
}
}
@media(max-width: 870px){
form[action="/ebooks"] button{
grid-row: 3;
grid-column: 1 / span 4;
margin-top: 0;
}
}
@media(max-width: 860px){
article nav a[rel]{
font-size: 0;
}
article nav a[rel]::before,
article nav a[rel]::after{
font-size: 1rem;
margin: 0;
}
}
@media(max-width: 730px){
form[action="/ebooks"]{
grid-template-columns: auto auto 1fr 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
grid-column: 1 / span 2;
}
form[action="/ebooks"] label.search{
grid-row: 1;
grid-column: 3 / span 2;
}
form[action="/ebooks"] label.sort{
grid-row: 2;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.view{
grid-row: 3;
grid-column: 1;
}
form[action="/ebooks"] label.per-page{
grid-row: 3;
grid-column: 2;
}
form[action="/ebooks"] button{
grid-row: 3;
grid-column: 4;
margin-top: 1.4rem;
}
article nav ol li:not(.highlighted),
main.ebooks nav ol li:not(.highlighted){
display: none;
}
}
@media(max-width: 700px){
main.ebooks > ol{
grid-template-columns: repeat(2, 1fr);
}
footer ul li:nth-child(2)::after{
content: "\A"; /* This is a line break */
white-space: pre;
margin: 0;
}
footer ul li:nth-child(4)::after{
content: "\b7";
white-space: normal;
margin: 0 10px;
}
footer ul li:nth-child(5)::after{
content: "\A"; /* This is a line break */
white-space: pre;
margin: 0;
}
}
@media(max-width: 680px){
main.front-page h1{
font-size: 2.4rem;
}
article.ebook section#details ul{
grid-template-columns: 1fr;
}
article nav ol li.highlighted::before,
article nav ol li.highlighted::after,
main.ebooks nav ol li.highlighted::before,
main.ebooks nav ol li.highlighted::after{
display: none;
}
aside.donation,
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){
form[action="/ebooks"]{
grid-template-columns: auto auto 1fr;
}
form[action="/ebooks"] label.tags{
grid-row: 1;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.search{
grid-row: 2;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.sort{
grid-row: 3;
grid-column: 1 / span 3;
}
form[action="/ebooks"] label.view{
grid-row: 4;
grid-column: 1;
}
form[action="/ebooks"] label.per-page{
grid-row: 4;
grid-column: 2;
}
form[action="/ebooks"] button{
grid-row: 5;
grid-column: 1 / span 3;
margin-top: 0;
}
form[action*="list-manage.com"] label.text,
form[action*="list-manage.com"] fieldset{
grid-column: 1 / span 2;
}
}
@media(max-width: 500px){
main > article > form{
margin-bottom: .5rem;
}
main.ebooks nav{
margin-top: .5rem;
}
article.ebook #more-ebooks ul{
margin-top: 1rem;
}
article.ebook #more-ebooks ul li{
width: calc(50% - 1rem);
margin-top: 1rem;
}
article.ebook #history li time,
article.ebook #history li p{
display: block;
}
article.ebook #history li p{
margin: 0;
padding: 0;
}
main.front-page > section > section figure.stacked img.bottom,
main.front-page > section > section figure.stacked img.top{
width: 75%;
}
main.front-page > section > section figure.oss img{
max-width: calc(50% - 2rem);
}
code{
word-break: break-all;
word-wrap: break-word;
}
article nav a[rel],
main.ebooks nav > a{
margin-bottom: 0;
font-size: 0;
}
main.ebooks nav > a::before,
main.ebooks nav > a::after {
font-size: 1rem;
margin: 0 !important;
}
article nav a[rel]::before,
main.ebooks nav a[rel]::before,
article nav a[rel]::after,
main.ebooks nav a[rel]::after{
font-size: 1rem;
margin: 0;
}
article.ebook > header > hgroup{
margin: 1rem;
padding: 1rem;
max-width: 85%;
}
article.ebook h1{
font-size: 1.5rem;
}
article.ebook > header > hgroup > h2{
font-size: 1.2rem;
}
article.ebook #history li time{
text-align: left;
}
form[action="/settings"] button{
display: block;
margin-top: 1rem;
margin-left: 0;
}
form[action="/settings"] button,
form[action="/settings"] span,
form[action="/settings"] select{
width: 100%;
}
}
@media(max-width: 470px){
main.ebooks > ol{
grid-gap: 2rem;
}
}
@media(max-width: 420px){
.masthead ol li img.contact{
height: .75rem;
}
body > footer{
padding-top: 1rem;
}
body > footer > p:first-child{
line-height: 1.4;
}
footer ul li{
display: block;
margin: 1rem 0;
}
footer ul li::after{
display: none;
}
}
@media(max-width: 380px){
main.front-page h1{
font-size: 2rem;
}
h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
hyphens: auto;
}
main.ebooks > ol{
grid-template-columns: 1fr;
}
form[action="/ebooks"]{
grid-template-columns: 100%;
}
form[action="/ebooks"] label.search,
form[action="/ebooks"] label.tags,
form[action="/ebooks"] label.sort,
form[action="/ebooks"] label.view,
form[action="/ebooks"] label.per-page,
form[action="/ebooks"] button{
grid-column: 1;
}
form[action="/ebooks"] label.per-page{
grid-row: 5;
}
form[action="/ebooks"] button{
grid-row: 6;
}
body > header ul{
flex-direction: column;
}
body > header ul li::before{
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;
}
body > header ul li,
body > header ul li:nth-child(2n){
height: 1rem;
text-align: center;
display: block;
}
article nav a[rel],
main.ebooks nav > a{
padding: 1rem;
}
}
@supports not(hyphens: auto){
main,
main.front-page > section > section p{
text-align: left;
}
}
@media(prefers-reduced-motion: reduce){
body > header > a,
header nav li a,
header nav li a:hover,
header nav li a.highlighted:hover,
a.button.next::after,
.ebooks nav > a:last-child::after,
a[href].button.next:hover::after,
.ebooks nav > a:last-child[href]:hover::after,
.ebooks nav > a:first-child:before,
.ebooks nav > a:first-child[href]:hover::before,
a.button.next:hover::after,
.ebooks nav > a:last-child[href]:hover::after,
article.ebook section#read-online a::before,
article.ebook section#download ul li a[class]::before,
article.ebook section#details ul li a[class]::before,
article.ebook #more-ebooks img,
article.ebook #more-ebooks a:active img,
main.ebooks > ol a[tabindex],
main.ebooks > ol > li a[tabindex]:active,
label.select > span + span::after,
label.search:focus-within::before,
label.search:hover::before,
label.select:hover > span + span::after,
label.email::before,
label.search::before,
nav li.highlighted a,
nav a[rel],
a.button,
button,
input[type="text"],
input[type="email"],
input[type="search"],
select,
a.button:hover,
nav li.highlighted a:hover,
nav a[rel]:hover,
button:hover,
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{
transition: none;
}
}