mirror of
https://github.com/standardebooks/web.git
synced 2025-07-15 10:56:46 -04:00
b1b2dc4e14
The main reason to do this is to fix https://github.com/standardebooks/manual/issues/9, but the font is also about 20% smaller which is a nice benefit. Fira Mono is also licensed under OFL so no change there. I have no stylistic preference either way, but they’re broadly similar in look. Fira Mono has no italic faces, but we have no italic display of source code so no loss there.
1625 lines
29 KiB
CSS
1625 lines
29 KiB
CSS
@import url("reset.css");
|
|
|
|
@font-face{
|
|
font-family: 'FontAwesome';
|
|
src: local('FontAwesome'), url('/fonts/font-awesome.woff2') format('woff2'), url('/fonts/font-awesome.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@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'), url('/fonts/league-spartan-bold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face{
|
|
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
|
|
font-family: "Crimson Pro";
|
|
src: url('/fonts/crimson-pro.woff2') format('woff2'), url('/fonts/crimson-pro.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face{
|
|
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
|
|
font-family: "Crimson Pro";
|
|
src: url('/fonts/crimson-pro-bold.woff2') format('woff2'), url('/fonts/crimson-pro-bold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face{
|
|
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
|
|
font-family: "Crimson Pro";
|
|
src: url('/fonts/crimson-pro-italic.woff2') format('woff2'), url('/fonts/crimson-pro-italic.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face{
|
|
/* Note: Don't use local() as a source, because our version fixes the font's strange default line-height */
|
|
font-family: "Crimson Pro";
|
|
src: url('/fonts/crimson-pro-bold-italic.woff2') format('woff2'), url('/fonts/crimson-pro-bold-italic.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: "Fira Mono";
|
|
src: local('Fira Mono'), url('/fonts/firamono-regular.woff2') format('woff2'), url('/fonts/firamono-regular.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face{
|
|
font-family: "Fira Mono";
|
|
src: local('Fira Mono'), url('/fonts/firamono-bold.woff2') format('woff2'), url('/fonts/firamono-bold.woff') format('woff');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root{
|
|
--light-body-text: #222;
|
|
--light-highlight: #1d6878;
|
|
--light-button: #1d6878;
|
|
--light-button-highlight: #3da5bb;
|
|
--light-border: #222;
|
|
--light-sub-text: #777;
|
|
--light-body-bg: #e9e7e0;
|
|
--dark-body-text: #fff;
|
|
--dark-highlight: #3da5bb;
|
|
--dark-button: #118460;
|
|
--dark-button-highlight: #4ab089;
|
|
--dark-border: #000;
|
|
--dark-sub-text: #aaa;
|
|
--dark-body-bg: #293542;
|
|
|
|
--body-text: var(--light-body-text);
|
|
--highlight: var(--light-highlight);
|
|
--button: var(--light-button);
|
|
--button-highlight: var(--light-button-highlight);
|
|
--border: var(--light-border);
|
|
--sub-text: var(--light-sub-text);
|
|
--body-bg: var(--light-body-bg);
|
|
}
|
|
|
|
@media(prefers-color-scheme: dark){
|
|
:root{
|
|
--body-text: var(--dark-body-text);
|
|
--highlight: var(--dark-highlight);
|
|
--button: var(--dark-button);
|
|
--button-highlight: var(--dark-button-highlight);
|
|
--border: var(--dark-border);
|
|
--sub-text: var(--dark-sub-text);
|
|
--body-bg: var(--dark-body-bg);
|
|
}
|
|
}
|
|
|
|
html{
|
|
color: #222; /* fallback for IE */
|
|
color: var(--body-text);
|
|
font-family: "Crimson Pro", Georgia, serif;
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto;
|
|
font-size: 22px;
|
|
line-height: 1.4;
|
|
/* fallback for ie */
|
|
background: #e9e7e0;
|
|
background: var(--body-bg);
|
|
}
|
|
|
|
a,
|
|
a:link,
|
|
a:visited{
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover{
|
|
color: var(--button-highlight);
|
|
}
|
|
|
|
label.search:focus-within,
|
|
a:focus{
|
|
outline: 1px dashed var(--button-highlight);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 > img{
|
|
width: 40rem;
|
|
max-width: 100%; /* for responsive */
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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,.ebook h1 + p{
|
|
-webkit-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
body{
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
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-white-full.svg');
|
|
-webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .75));
|
|
filter: 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: lowercase;
|
|
align-self: center;
|
|
text-align: right;
|
|
font-size: 0;
|
|
}
|
|
|
|
header nav li{
|
|
color: rgba(255, 255, 255, .75);
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
header nav li + li:before{
|
|
content: '•';
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
header nav li a{
|
|
text-decoration: none;
|
|
font-size: 20px;
|
|
transition: border 200ms ease, color 200ms ease;
|
|
}
|
|
|
|
header nav li a:link,
|
|
header nav li a:visited{
|
|
color: rgba(255, 255, 255, .75);
|
|
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 rgb(241, 168, 73);
|
|
transition: none;
|
|
}
|
|
|
|
header nav li a.highlighted{
|
|
color: #fff;
|
|
border-bottom: 2px solid rgb(241, 168, 73);
|
|
}
|
|
|
|
article > h1{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
main.front-page h1{
|
|
text-align: center;
|
|
background: url('/images/book.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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: 2rem;
|
|
}
|
|
|
|
h1 + section > h2:first-child{
|
|
margin-top: 0rem;
|
|
}
|
|
|
|
a.button,
|
|
.ebooks nav > a,
|
|
aside.sort button{
|
|
font-style: normal;
|
|
box-sizing: border-box;
|
|
background-color: #1d6878; /* fallback for IE */
|
|
background-color: var(--button);
|
|
border-width: 0;
|
|
border-radius: 5px;
|
|
padding: 1rem 2rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-family: 'League spartan', sans-serif;
|
|
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
|
|
box-shadow: 2px 2px 0 #194149;
|
|
position: relative;
|
|
text-transform: lowercase;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.button:focus,
|
|
.ebooks nav li.highlighted a:focus,
|
|
button:focus,
|
|
select:focus,
|
|
nav a[rel]:focus{
|
|
outline: 1px dashed #fff;
|
|
}
|
|
|
|
select:-moz-focusring,
|
|
select::-moz-focus-inner{
|
|
color: transparent !important;
|
|
text-shadow: 0 0 0 var(--body-text) !important;
|
|
}
|
|
|
|
a.button:active,
|
|
.ebooks nav > a[href]:active,
|
|
aside.sort button:active{
|
|
top: 2px;
|
|
left: 2px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
a.button.next::after,
|
|
.ebooks nav > a:last-child::after{
|
|
font-family: "FontAwesome";
|
|
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: "FontAwesome";
|
|
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;
|
|
}
|
|
|
|
aside.sort select{
|
|
margin-left: .5rem;
|
|
padding: 1rem;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
border: 1px solid #777;
|
|
border-radius: 5px;
|
|
color: var(--body-text);
|
|
font-size: 1rem;
|
|
text-transform: lowercase;
|
|
font-family: 'Crimson Pro', serif;
|
|
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
|
|
cursor: pointer;
|
|
}
|
|
|
|
aside.sort button{
|
|
margin-left: .5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
|
|
article nav ol li a:hover,
|
|
main.ebooks nav ol li a:hover,
|
|
main.ebooks nav ol li.highlighted a:hover,
|
|
a.button:hover,
|
|
.ebooks nav > a:hover,
|
|
aside.sort button:hover{
|
|
/* fallback for ie */
|
|
background-color: #288da4;
|
|
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;
|
|
}
|
|
|
|
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 > div{
|
|
color: #fff;
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 75%;
|
|
box-sizing: border-box;
|
|
background: rgba(0, 0, 0, .75);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin: 2rem; /* for responsive */
|
|
}
|
|
|
|
article.ebook > header > div > p{
|
|
font-size: 1.4rem;
|
|
font-family: 'League Spartan', sans-serif;
|
|
line-height: 1;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
article.ebook > header > div a,
|
|
article.ebook > header > div a:link,
|
|
article.ebook > header > div a:visited{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
article.ebook > header > img{
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
z-index: 0;
|
|
height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
article.ebook section#details ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 0;
|
|
margin-left: -2rem;
|
|
}
|
|
|
|
article.ebook section#details ul li{
|
|
width: calc(50% - 2rem);
|
|
margin-top: 1rem;
|
|
margin-left: 2rem;
|
|
}
|
|
|
|
article.ebook section#download ul{
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
article.ebook section#download li{
|
|
display: table-row;
|
|
}
|
|
|
|
article.ebook section#download li span{
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
article.ebook section#download li span:first-child{
|
|
padding-top: 1.8rem;
|
|
}
|
|
|
|
article.ebook section#download li span:nth-child(2){
|
|
padding-right: .5rem;
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
article.ebook section ul li a[class]{
|
|
display: flex;
|
|
text-align: left;
|
|
align-items: center;
|
|
}
|
|
|
|
article.ebook section#download li a[class]{
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
article.ebook section#download ul li a[class]::before,
|
|
article.ebook section#details ul li a[class]::before{
|
|
display: inline-block;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
content: '';
|
|
margin-right: .5rem;
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
min-width: 1.25rem;
|
|
transition: transform .2s ease;
|
|
}
|
|
|
|
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: all .2s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
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');
|
|
}
|
|
|
|
article.ebook h1{
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
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;
|
|
}
|
|
|
|
aside.sort{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
aside.sort a.button{
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
form[action="/ebooks"]{
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
h2{
|
|
font-size: 1.2rem;
|
|
font-family: 'League Spartan', sans-serif;
|
|
margin-top: 4rem;
|
|
line-height: 1.2;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6{
|
|
font-size: 1rem;
|
|
font-family: 'League Spartan', 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{
|
|
font-size: .6rem;
|
|
}
|
|
|
|
footer > a{
|
|
display: block;
|
|
margin-top: 2rem;
|
|
font-size: 0;
|
|
}
|
|
|
|
/* ebook list */
|
|
h1{
|
|
font-size: 2rem;
|
|
font-family: 'League Spartan', sans-serif;
|
|
line-height: 1.2;
|
|
border-bottom: 3px double var(--sub-text);
|
|
margin-top: 2rem;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
main.ebooks > aside.alert + ol{
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
main.ebooks > ol{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: none;
|
|
list-style: none;
|
|
margin-top: 0;
|
|
}
|
|
|
|
main.ebooks > ol > li{
|
|
width: calc(25% - 4rem);
|
|
margin: 2rem;
|
|
}
|
|
|
|
main.ebooks > ol img:hover{
|
|
transform: scale(1.05);
|
|
box-shadow: 3px 3px 1px rgba(0, 0, 0, .25);
|
|
}
|
|
|
|
main.ebooks > ol > li a:active img{
|
|
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;
|
|
width: 100%;
|
|
border: 1px solid var(--border);
|
|
border-radius: .25rem;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
main.ebooks > ol > li p:nth-of-type(1) a{
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
line-height: 1.2;
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
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;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
ul.tags li{
|
|
margin: 0;
|
|
}
|
|
|
|
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;
|
|
/* fallback for ie */
|
|
background: #288da4;
|
|
background: var(--button-highlight);
|
|
}
|
|
|
|
ul.tags li + li{
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
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;
|
|
padding: 1rem;
|
|
margin: 0 .5rem;
|
|
border-radius: .25rem;
|
|
font-variant-numeric: normal;
|
|
}
|
|
|
|
article nav ol li.highlighted a,
|
|
main.ebooks nav ol li.highlighted a{
|
|
background-color: #1d6878; /* fallback for IE */
|
|
background: var(--button);
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
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;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
input[type="search"]{
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
font-family: 'Crimson Pro';
|
|
color: var(--body-text);
|
|
}
|
|
|
|
/* remove some styles from Chromium / Webkit */
|
|
input[type="search"],
|
|
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);
|
|
}
|
|
|
|
main > article > form{
|
|
max-width: calc(100% - 2rem);
|
|
}
|
|
|
|
label.search{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, .1);
|
|
box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--sub-text);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
font-size: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
input[type="search"]:focus{
|
|
outline: none;
|
|
}
|
|
|
|
label.search::before{
|
|
display: block;
|
|
content: '\f002';
|
|
font-family: 'FontAwesome';
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
margin-right: 1rem;
|
|
color: var(--body-text);
|
|
margin-top: -3px; /* Adjust for Crimson Pro line-height */
|
|
text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@media(max-width: 1100px){
|
|
article.ebook header{
|
|
width: calc(100% + 4rem);
|
|
max-width: none;
|
|
margin-left: -2rem;
|
|
border-radius: 0;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
main.front-page > section > section > div{
|
|
flex-direction: column-reverse;
|
|
align-items: center;
|
|
}
|
|
|
|
main.front-page > section > section figure{
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
main.front-page > section > section > div > div,
|
|
main.front-page > section > section > div > p{
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
|
|
@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: 760px){
|
|
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;
|
|
}
|
|
|
|
main.ebooks > ol > li{
|
|
width: calc(33% - 4rem);
|
|
}
|
|
|
|
aside.sort{
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
aside.sort p{
|
|
width: 100%;
|
|
margin: auto;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
footer ul li{
|
|
display: inline;
|
|
}
|
|
|
|
footer ul li:nth-child(3)::after{
|
|
content: "\A"; /* This is a line break */
|
|
white-space: pre;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 680px){
|
|
body > header{
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
body > header li{
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
main.ebooks > ol > li{
|
|
width: calc(50% - 4rem);
|
|
}
|
|
|
|
main.front-page h1{
|
|
padding: 3rem;
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
aside.sort{
|
|
flex-direction: column;
|
|
}
|
|
|
|
article.ebook section#details ul{
|
|
flex-direction: column;
|
|
}
|
|
|
|
article.ebook section#details ul li:first-child{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
article.ebook section#details ul li{
|
|
width: 100%;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
@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.ebooks > ol{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
main.ebooks > ol > li{
|
|
width: calc(50% - 2rem);
|
|
margin: 1rem;
|
|
}
|
|
|
|
article nav ol li:not(.highlighted),
|
|
main.ebooks nav ol li:not(.highlighted){
|
|
display: none;
|
|
}
|
|
|
|
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[rel]{
|
|
margin-bottom: 0;
|
|
font-size: 0;
|
|
}
|
|
|
|
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 > div{
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
max-width: 85%;
|
|
}
|
|
|
|
article.ebook h1{
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
article.ebook > header > div > p{
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
article.ebook #history li time{
|
|
text-align: left;
|
|
}
|
|
|
|
footer ul li:nth-child(5)::after{
|
|
content: "\A"; /* This is a line break */
|
|
white-space: pre;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 380px){
|
|
body > header{
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
body > header > a{
|
|
width: calc(100% - 2rem);
|
|
}
|
|
|
|
body > header ul{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
body > header ul li{
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
body > header ul li::before{
|
|
display: none;
|
|
}
|
|
|
|
main.front-page h1{
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6,code,.ebook h1 + p{
|
|
hyphens: auto;
|
|
}
|
|
|
|
body > footer{
|
|
padding-top: 0;
|
|
}
|
|
|
|
footer ul li{
|
|
display: block;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
footer ul li::after{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@supports not(hyphens: auto){
|
|
main,
|
|
main.front-page > section > section p{
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@media(prefers-color-scheme: dark){
|
|
main.front-page > section > section figure img{
|
|
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
article.ebook section#download ul li a[class]::before,
|
|
article.ebook section#details ul li a[class]::before,
|
|
footer p:last-child a::before,
|
|
main.front-page > section > section figure.oss img + img,
|
|
main.front-page > section > h2::before,
|
|
main.front-page > section > h2::after{
|
|
filter: invert() grayscale(100%) brightness(120%); /* grayscale and brightness makes it hit about #eeeeee */
|
|
}
|
|
|
|
label.search{
|
|
box-shadow: 1px 1px 0 rgba(0, 0, 0, .5) inset;
|
|
}
|
|
|
|
input::placeholder{
|
|
color: rgba(255, 255, 255, .75);
|
|
}
|
|
|
|
main.ebooks > ol img:hover{
|
|
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
article.ebook #more-ebooks img:hover{
|
|
box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
label.search::before{
|
|
text-shadow: 1px 1px 0 #000;
|
|
}
|
|
}
|