web/www/css/core.css

3575 lines
63 KiB
CSS

@font-face{
font-family: "Fork Awesome";
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;
}
: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-table-border: #bbb;
--light-input-hover: #000;
--light-input-border: #777;
--light-input-outline: #000;
--light-table-row-hover: #dddbd5;
--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;
--dark-table-row-hover: #373b3f;
--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);
--table-border: var(--light-table-border);
--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);
--table-row-hover: var(--light-table-row-hover);
}
/* 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 > section.narrow > *{
margin-left: auto;
margin-right: auto;
}
main > section.narrow > h1,
main > section.narrow > hgroup,
main > section.narrow.has-hero > picture{
box-sizing: border-box;
max-width: none;
}
main > section.narrow.has-hero > picture{
position: relative;
width: auto;
}
picture[data-caption]:hover::before{
opacity: 1;
transition: none;
}
picture[data-caption]::before{
transition: all .25s;
opacity: 0;
position: absolute;
right: .25rem;
bottom: .25rem;
content: attr(data-caption);
display: block;
background: rgba(0, 0, 0, .5);
color: #fff;
text-shadow: 1px 1px 0 solid #222;
font-size: .6rem;
padding: .25rem .5rem;
font-style: italic;
border-radius: .25rem;
}
main > section.narrow > *,
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: 5px solid rgba(0, 0, 0 , .25);
padding: 1.5rem 0;
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;
padding-top: 5px; /* Match the bottom border of the child element so that the navbar is vertically centered */
}
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%;
height: auto;
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;
hyphens: none;
line-height: 1.2;
}
form button{
line-height: 1;
margin-left: 1rem;
}
input[type="radio"]:focus,
input[type="checkbox"]:focus{
outline: none;
}
h1 + .message{
margin-top: 0;
}
.message{
border: 2px solid rgba(0, 0, 0, .25);
border-radius: .25rem;
padding: 1rem;
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, .75);
box-sizing: border-box;
}
.message.error{
background: #c45d5d;
}
.message.success{
background: #5dc47c;
}
.message *:focus{
outline: 1px dashed #fff;
}
ul.message.error li{
margin-left: 1rem;
}
ul.message.error li:only-child{
list-style: none;
margin-left: 0;
}
.bulk-downloads > p,
.bulk-downloads h2{
width: 100%;
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.bulk-downloads h2{
text-align: center;
}
.download-list{
margin: auto;
}
.download-list caption{
font-style: italic;
text-align: right;
display: none;
}
.download-list .mid-header{
font-style: italic;
}
.download-list thead tr.mid-header:first-child > *{
padding-top: 2rem;
}
.download-list th.row-header,
.download-list .mid-header th:first-child,
.download-list .mid-header th:last-child{
text-align: left;
}
.download-list td,
.download-list th{
padding: .25rem .5rem;
hyphens: none;
white-space: nowrap;
}
.download-list th{
font-weight: normal;
text-align: right;
}
.download-list .number{
text-align: right;
}
.download-list td.download{
padding-right: 0;
color: var(--body-text);
}
.download-list td.download + td{
padding-left: .25rem;
font-size: .75em;
color: var(--sub-text);
}
.download-list tbody .row-header{
font-weight: bold;
text-align: left;
white-space: normal;
}
.download-list tbody tr td,
.download-list tbody tr th{
border-top: 1px dashed var(--table-border);
}
.download-list tbody tr:first-child > *,
.download-list tbody tr.year-header > *,
.download-list tbody tr.year-header + tr > *,
.download-list tbody tr.mid-header tr > *,
.download-list tbody tr.mid-header + tr td,
.download-list tbody tr.mid-header + tr th{
border: none;
}
.download-list tbody tr:not([class]):hover > *{
background: var(--table-row-hover);
}
.download-list tbody tr:only-child:not([class]):hover > *{
background: unset; /* Don't highlight on hover if there's only one row */
}
h2 + .download-list tr.year-header:first-child th{
padding-top: 2rem;
}
.download-list .year-header th{
padding-top: 4rem;
font-size: 1.4rem;
font-family: "League Spartan", Arial, sans-serif;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--header);
text-align: center;
}
.ebooks nav li.highlighted a:focus,
a.button:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="month"]: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: "Fork Awesome";
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: "Fork Awesome";
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");
}
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,
article.ebook section#sources ul{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}
article.ebook section#details ul li,
article.ebook section#sources 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],
article.ebook section#sources 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,
article.ebook section#sources 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,
article.ebook section#sources 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{
overflow-wrap: anywhere;
border: none;
margin: 0;
padding: 0;
}
article.ebook hgroup h2{
overflow-wrap: anywhere;
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.4rem;
font-family: "League Spartan", Arial, sans-serif;
margin-top: 4rem;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
}
h3{
font-size: 1rem;
font-family: "League Spartan", Arial, sans-serif;
margin-top: 3rem;
line-height: 1.2;
}
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;
white-space: nowrap;
}
footer ul li:not(:last-child)::after{
content: "\b7";
margin: 0 10px;
}
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{
font-size: .9rem;
}
footer > p:first-child::before{
font-family: "Fork Awesome";
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;
}
.opds ol.ebooks-list.list{
margin-top: 4rem;
}
.opds .download{
font-weight: bold;
margin-top: 1rem;
}
.opds .download + ul,
.opds .download + ul > li{
margin-top: 0;
}
ol.ebooks-list.grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 4rem;
margin: 0;
margin-bottom: 4rem;
list-style: none;
}
ol.ebooks-list.list{
display: flex;
flex-direction: column;
gap: 0;
margin: auto;
margin-bottom: 4rem;
width: 100%;
max-width: 30rem;
}
ol.ebooks-list > li{
margin: 0;
text-align: center;
}
ol.ebooks-list.list > li{
display: grid;
grid-template-columns: 6rem 1fr;
grid-column-gap: 1rem;
grid-template-rows: auto auto 1fr;
}
ol.ebooks-list.list > li + li {
margin-top: 2rem;
}
ol.ebooks-list.list > li .thumbnail-container{
grid-row: 1 / span 3;
}
ol.ebooks-list.list.rss > li .thumbnail-container{
grid-row: 1 / span 5;
}
.opds ol.ebooks-list.list > li .thumbnail-container{
grid-row: 1 / span 6;
}
ol.ebooks-list.list ul.tags{
display: flex;
justify-content: flex-start;
margin-left: -.25rem;
margin-top: .25rem;
}
ol.ebooks-list.list ul.tags li{
margin-left: .25rem;
margin-top: .25rem;
}
ol.ebooks-list.list > li p{
text-align: left;
}
ol.ebooks-list a[tabindex]{
display: inline-block;
transition: all .2s ease;
position: relative;
font-size: 0;
}
ol.ebooks-list 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);
}
ol.ebooks-list > li p{
margin: 0;
text-align: center;
-webkit-hyphens: none;
hyphens: none;
}
ol.ebooks-list > li img{
box-sizing: border-box;
max-width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: .25rem;
}
ol.ebooks-list > li > p:nth-of-type(1) > a{
font-weight: bold;
text-decoration: none;
display: flex;
justify-content: center;
}
ol.ebooks-list.list > li p.author a,
ol.ebooks-list.list > li > p:nth-of-type(1) > a{
display: inline;
}
ol.ebooks-list > li .thumbnail-container > a:first-child{
font-size: 0; /* for correct focus outline */
}
ol.ebooks-list > li p.author{
font-style: italic;
}
ol.ebooks-list > li p.author a{
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;
gap: 1rem;
margin-top: 1rem;
}
.opds ul.tags{
justify-content: flex-start;
margin: .5rem auto;
}
ul.tags li{
margin: 0;
}
ul.tags li a,
.opds ul.tags li p{
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);
}
.message a:hover{
color: #fff;
}
p.no-results{
margin-top: 4rem;
margin-bottom: 2rem;
font-style: italic;
text-align: center;
}
.s-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.automation-test{
display: none;
}
label.email,
label.search{
display: block;
}
select,
input[type="text"],
input[type="month"],
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;
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.email input,
label.search input{
padding-left: 2.5rem;
}
select{
font-family: "Fork Awesome", "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: "Fork Awesome";
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: "Fork Awesome";
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="month"],
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="month"]:focus,
input[type="month"]: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="month"]: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="month"]:-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: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;
}
form.single-row{
display: flex;
flex-direction: column;
}
form.single-row label{
width: 100%;
}
form.single-row button{
align-self: flex-end;
margin-top: 1rem;
}
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 0 1.75rem 0;
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;
}
h1 + ul.message,
.has-hero picture + ul.message{
margin-top: 0;
margin-bottom: 1rem;
}
.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;
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: 1.75rem;
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;
}
.button-row.narrow{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.button-row:last-child{
margin-bottom: 0;
}
.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.patrons{
font-style: italic;
display: block;
columns: 3;
margin-left: -.25rem;
}
.masthead ol.donors.patrons li{
padding: .25rem;
}
.masthead ol.donors.patrons li:last-child{
font-variant-numeric: normal;
}
.masthead ol.corporate img{
max-height: 100px;
max-width: 100%;
margin-right: 0;
box-sizing: content-box;
}
.masthead ol.corporate a:focus{
outline: none;
}
.masthead ol.corporate a:focus p{
outline: 1px dashed var(--input-outline);
}
.masthead ol.donors.corporate{
display: flex;
justify-content: center;
}
.masthead ol.donors.corporate li + li{
margin-left: 2rem;
}
.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;
display: inline-block; /* Prevent a p from breaking across column division */
}
.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;
box-sizing: border-box;
}
aside.donation::before{
content: "";
display: block;
position: absolute;
height: calc(1rem + 2px);
width: calc(1rem + 2px);
top: 0;
left: 0;
-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
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;
-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(90deg);
border-radius: 0 0 0 .25rem;
background: #dda82a;
}
aside.donation.closable::before,
aside.donation.closable::after{
display: none;
}
article.ebook section aside.donation p::before,
article.ebook section aside.donation p::after{
display: none;
}
article.ebook h2 + section > h3:first-of-type{
margin-top: 1rem;
}
.acroynm{
font-variant: all-small-caps;
}
.anti-spam{
position: absolute;
left: -5000px;
}
.message + form,
p + form{
margin-top: 1rem;
}
form[action*="/polls/"],
form[action="/newsletter/subscriptions"]{
display: grid;
grid-gap: 2rem;
grid-template-columns: 1fr 1fr;
margin-bottom: 0;
}
form[action*="/polls/"] label.email,
form[action="/newsletter/subscriptions"] label.email,
form[action="/newsletter/subscriptions"] label.captcha{
grid-column: 1 / span 2;
}
form[action="/newsletter/subscriptions"] label.captcha div{
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
}
form[action="/newsletter/subscriptions"] label.captcha div input{
align-self: center;
}
form fieldset ul{
list-style: none;
}
form[action*="/polls/"] button,
form[action="/newsletter/subscriptions"] button{
grid-column: 2;
justify-self: end;
margin-left: 0;
}
form[action*="/polls/"] fieldset,
form[action="/newsletter/subscriptions"] fieldset{
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: flex-start;
text-align: left;
line-height: 1;
cursor: pointer;
}
label.checkbox input{
margin-right: .25rem;
}
label.checkbox span{
display: block;
}
label.checkbox span > span{
line-height: 1.6;
margin-top: .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%;
}
h1.is-collection{
margin-bottom: 1rem;
}
.ebooks-toolbar{
display: flex;
justify-content: flex-end;
margin-bottom: 4rem;
border-bottom: 1px dashed var(--sub-text);
padding-bottom: 1rem;
font-style: italic;
gap: 1rem;
}
.ebooks-toolbar a{
padding: .5rem 1rem;
padding-left: .75rem;
text-decoration: none;
}
.ebooks-toolbar a.button{
/*font-family: "Crimson Pro", Georgia, serif;*/
font-size: .75rem;
display: inline-flex;
gap: .75rem;
align-items: center;
font-weight: bold;
}
.ebooks-toolbar a.button::before{
font-family: "Fork Awesome";
display: inline-block;
font-size: 1rem;
}
.ebooks-toolbar a.button[href*="/downloads"]::before{
content: "\f019";
}
.ebooks-toolbar a.button[href*="/feeds"]::before{
content: "\f143";
}
abbr.acronym{
font-variant: all-small-caps;
}
aside header{
font-family: "League Spartan", Arial, sans-serif;
font-style: normal;
text-transform: uppercase;
margin-bottom: 2rem;
font-size: 1.5rem;
}
.meter,
.progress{
position: relative;
font-size: 0;
}
.donation a.button{
display: inline-block;
white-space: normal;
text-align: center;
}
.donation > p{
font-style: normal;
}
.donation.counter > p:not(.donate-button){
text-align: justify;
max-width: 80ch;
margin: 1rem auto;
hyphens: auto;
}
.flipboard{
font-style: normal;
font-size: 2rem;
margin: 2rem auto;
line-height: 1;
font-family: "League Spartan";
text-transform: uppercase;
}
.flipboard span{
background: #222;
border: 1px solid #222;
box-shadow: 1px 1px 0px rgba(255,255,255,.5) inset;
border-radius: 5px;
color: #fff;
padding: .25rem 1rem 0 1rem;
line-height: 1;
position: relative;
text-shadow: 2px 2px 0px #000;
width: 1em;
padding: .5em .25em;
display: inline-block;
}
.flipboard span + span{
margin-left: .1em;
}
.flipboard span::before{
position: absolute;
content: "";
top: calc(50% - 5px);
left: 0;
height: 10px;
width: calc(100% - 4px);
border-left: 2px solid #aaa;
border-right: 2px solid #aaa;
}
.flipboard span::after{
position: absolute;
content: "";
top: 50%;
left: 0;
height: 50%;
background: linear-gradient(180deg, rgb(255, 255, 255, .3) 0%, rgba(0,0,0,0) 75%);
width: 100%;
border-top: 1px solid #000;
}
.progress + p{
margin-top: 2rem;
hyphens: auto;
}
.meter p,
.progress p{
font-size: 1rem;
font-family: "League Spartan", Arial, sans-serif;
left: 0;
background: rgba(0, 0, 0, .1);
font-style: normal;
border-radius: .25rem;
padding: .25rem .5rem;
color: #fff;
display: block;
align-self: center;
justify-self: center;
justify-content: center;
text-shadow: 1px 1px 0px rgba(0, 0, 0, .5);
border: 1px solid var(--border);
margin-top: 0;
}
.progress p.start{
margin-right: auto;
margin-left: 1rem;
border: none;
background: transparent;
padding: 0;
font-size: .75rem;
}
.progress p.target{
margin-left: auto;
margin-right: 1rem;
border: none;
background: transparent;
padding: 0;
font-size: .75rem;
}
.meter > div,
.progress > div{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/* Animate the div instead of the bar itself, because animating the bar triggers an
FF bug that causes infinite requsts to stripes.svg */
background: url("/images/stripes.svg") transparent;
background-position: 0 0;
animation: progress 4s linear infinite;
z-index: 3;
}
meter,
progress{
-webkit-appearance: none;
appearance: none;
height: 3rem;
border: 1px solid var(--input-border);
border-radius: .25rem;
width: 100%;
background: var(--body-bg);
overflow: hidden;
}
progress::-webkit-progress-bar{
background: var(--body-bg);
}
progress::-webkit-progress-value{
background: var(--button);
box-shadow: 1px 0 1px rgba(0, 0, 0, .25);
}
meter::-moz-meter-bar,
progress::-moz-progress-bar{
background: var(--button);
box-shadow: 1px 0 1px rgba(0, 0, 0, .25);
}
p.stretch-base{
position: absolute;
border: none;
background: none;
padding: 0;
left: 70.5%;
font-size: .75rem;
}
progress.stretch{
--starting-pos: 71.5%;
position: absolute;
left: var(--starting-pos);
top: 0;
width: calc(100% - var(--starting-pos) + 1px);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
overflow: auto; /* enable drop shadow glow */
border-left: none;
}
progress.stretch::-webkit-progress-value{
background: #f2d745;
box-shadow: none;
filter: drop-shadow(0 0 10px #f2d745);
border-right: 1px solid #E9C91F;
border-left: 5px solid #E9C91F;
}
progress.stretch::-moz-progress-bar{
background: #f2d745;
box-shadow: none;
filter: drop-shadow(0 0 10px #f2d745);
border-right: 1px solid #E9C91F;
border-left: 5px solid #E9C91F;
}
aside button.close{
display: block;
font-size: 0;
border: none;
box-shadow: none;
padding: 0;
position: absolute;
top: 0;
right: 0;
background: url("/images/close.svg") transparent;
background-size: 1rem 1rem;
background-position: center;
background-repeat: no-repeat;
height: 3rem;
width: 3rem;
padding: 1rem;
opacity: .75;
margin: 0;
}
aside button.close:hover{
opacity: 1;
}
aside button.close:active{
left: auto;
top: 1px;
right: -1px;
}
.feeds-alert{
border-top: 1px dashed var(--sub-text);
padding-top: 2rem;
font-style: italic;
text-align: center;
margin-top: 2rem;
}
@keyframes progress{
0%{
background-position: -60px 0px;
}
100%{
background-position: 0 0;
}
}
.downloads-container{
display: flex;
}
.downloads-container figure + div{
padding-left: 1rem;
}
.ebook figure.small{
--size: 1rem;
}
.ebook figure,
.ebook figure.medium{
--size: 1.5rem;
}
.ebook figure.large{
--size: 2rem;
margin-top: 2rem;
}
.ebook figure.xlarge{
--size: 2.5rem;
margin-top: 2rem;
}
.ebook figure.xxlarge{
--size: 3rem;
margin-top: 2rem;
}
.ebook figure{
transform: skewY(-10deg) scale(.75);
font-size: 0;
width: 242px;
box-sizing: border-box;
margin-left: -2rem;
align-self: flex-start;
}
.ebook figure img{ /* cover */
/* override previous cascade */
width: auto;
background: #222;
border-radius: 0 5px 5px 0;
border: 2px solid #222;
border-left: none;
transition: transform .5s, filter .5s;
}
.ebook figure::after{ /* spine */
content: "";
position: absolute;
width: calc(var(--size) + 2px);
height: 100%;
left: calc(-1 * var(--size));
background: no-repeat center center url("/images/logo-spine.svg") #222;
background-size: calc(var(--size) - .5rem) calc(var(--size) - .5rem);
transform-origin: right;
transform: skewY(45deg);
z-index: -1;
transition: transform .5s;
top: 2px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.ebook figure picture::before{ /* pages */
content: "";
position: absolute;
width: var(--size);
height: 235px;
background: url("/images/pages-texture.svg") #fff;
background-size: .5rem; /* needed to prevent visual glitch in FF */
top: calc(-1 * (234px + (var(--size) / 2)) + 5px);
left: calc(-1 * var(--size));
transform: rotate(90deg) skewy(-45deg);
transform-origin: bottom;
border-left: 1px solid #222;
transition: transform .5s;
z-index: -1;
}
.ebook figure picture::after{ /* back board */
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #222;
top: 0;
left: calc(-1 * var(--size));
transform: translateY(calc(-1 * var(--size)));
z-index: -2;
border-top-right-radius: 5px;
transition: transform .5s;
}
.ebook figure::before{ /* shadow */
content: "";
background: rgba(0, 0, 0, .5);
position: absolute;
top: calc(353px - var(--size));
left: calc(-1 * var(--size));
height: calc(1.25rem + var(--size));
width: calc(100% + var(--size) + .25rem);
transform: skewX(45deg);
filter: blur(10px);
z-index: -1;
border-radius: 2rem;
transition: transform .5s;
}
ul.feed p{
margin: 0;
}
.url{
font-family: "Fira Mono", monospace;
font-size: .8rem;
hyphens: none;
word-break: break-word;
}
.center-notice{
text-align: center;
font-style: italic;
}
.votes{
margin-top: 2rem;
}
.votes td:first-child{
font-weight: bold;
}
.votes td{
width: 50%;
padding: 1rem;
text-align: left;
}
.votes tr:first-child td{
padding-top: 0;
}
.votes tr:last-child td{
padding-bottom: 0;
}
@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: 1200px){
.download-list{
overflow-x: scroll;
display: block; /* needed to make overflow work */
width: 100%;
}
.download-list .year-header th{
text-align: left;
}
.download-list thead tr.mid-header:first-child th,
.download-list tr.year-header:first-child th{
padding-top: 0;
}
.download-list caption{
display: block;
padding-top: 2rem;
}
}
@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;
padding-bottom: .5rem;
}
header nav li{
margin-top: 1rem;
padding-top: 0;
}
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;
}
.ebook figure{
transform: skewY(-10deg) scale(.5);
margin-top: -1rem;
}
.ebook figure.large,
.ebook figure.xlarge,
.ebook figure.xxlarge{
margin-top: 0;
}
.downloads-container figure + div{
padding-left: 0;
}
}
@media(max-width: 900px){
ol.ebooks-list.grid{
grid-template-columns: repeat(3, minmax(0, 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){
ol.ebooks-list.grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
footer ul li:nth-child(2)::after,
footer ul li:nth-child(5)::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;
}
.ebooks-toolbar a.button{
font-size: 0;
gap: 0;
padding: .5rem .75rem;
}
}
@media(max-width: 680px){
main.front-page h1{
font-size: 2.4rem;
}
article.ebook section#details ul,
article.ebook section#sources 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;
}
aside.donation .flipboard{
text-align: center;
}
aside.donation .flipboard span{
margin-bottom: 1rem;
}
aside.donation p:last-child,
article.ebook section aside.donation p:last-child,
aside.donation header p{
text-align: center;
}
body > header{
padding-top: 1rem;
}
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: 580px){
.ebook figure{
display: none;
}
}
@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="/newsletter/subscriptions"] label.text,
form[action="/newsletter/subscriptions"] label.captcha,
form[action="/newsletter/subscriptions"] fieldset{
grid-column: 1 / span 2;
}
.masthead ol.donors.patrons{
columns: 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:not(.close){
display: block;
margin-top: 1rem;
margin-left: 0;
}
form[action="/settings"] button:not(.close),
form[action="/settings"] span,
form[action="/settings"] select{
width: 100%;
}
.votes tr,
.votes tr td{
display: block;
width: 100%;
padding: 0;
}
.votes tr + tr{
margin-top: 2rem;
}
footer ul li:nth-child(2)::after,
footer ul li:nth-child(4)::after,
footer ul li:nth-child(6)::after{
content: "\A"; /* This is a line break */
white-space: pre;
margin: 0;
}
footer ul li:nth-child(1)::after,
footer ul li:nth-child(3)::after,
footer ul li:nth-child(5)::after{
content: "\b7";
white-space: normal;
margin: 0 10px;
}
}
@media(max-width: 470px){
ol.ebooks-list.grid{
grid-gap: 2rem;
}
aside.donation .flipboard{
font-size: 1rem;
}
}
@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;
}
.progress p.start,
.progress p.target,
.progress p.stretch-base{
display: none;
}
.progress p{
border: none;
background: transparent;
}
}
@media(max-width: 380px){
main.front-page h1{
font-size: 2rem;
}
h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
hyphens: auto;
}
ol.ebooks-list.grid{
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;
padding-top: 0;
}
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;
}
ol.ebooks-list.list > li{
grid-template-columns: 1fr;
}
ol.ebooks-list.list > li img{
max-width: 50%;
margin-bottom: 1rem;
}
.masthead ol.donors.patrons{
columns: 1;
}
footer ul li:nth-child(7)::after{
content: "\A"; /* This is a line break */
white-space: pre;
margin: 0;
}
}
@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 section#sources ul li a[class]::before,
article.ebook #more-ebooks img,
article.ebook #more-ebooks a:active img,
ol.ebooks-list > 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="month"],
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="month"]:focus,
input[type="month"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="search"]:focus,
input[type="search"]:hover,
select:focus,
select:hover{
transition: none;
}
}
/* Animate some items if the user doesn't mind animation */
@media(prefers-reduced-motion: no-preference){
ol.ebooks-list a[tabindex]:hover{
transform: scale(1.05);
color: unset;
}
ol.ebooks-list a[tabindex]:hover img{
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
}
ol.ebooks-list > li a[tabindex]:active{
transform: scale(1.025);
transition: none;
box-shadow: none;
}
.ebook .downloads-container:hover figure img{ /* cover */
filter: brightness(1.15);
transform: translateY(-.5rem);
}
.ebook .downloads-container:hover figure picture::after{ /* back board */
transform: translateY(calc(-1 * (var(--size) + .5rem)));
}
.ebook .downloads-container:hover picture::before{ /* pages */
transform: rotate(90deg) skewy(-45deg) translateX(-.5rem) translateY(-.5rem);
}
.ebook .downloads-container:hover figure::after{ /* spine */
transform: skewY(45deg) translateY(-.5rem);
}
.ebook .downloads-container:hover figure::before{ /* shadow */
transform: skewX(45deg) scale(1.05);
}
}