@font-face{ font-family: "FontAwesome"; src: local("FontAwesome"), url("/fonts/font-awesome.woff2") format("woff2"); 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"); 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"); 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"); 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"); 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"); font-weight: bold; font-style: italic; } @font-face{ font-family: "Fira Mono"; src: local("Fira Mono"), url("/fonts/fira-mono.woff2") format("woff2"); font-weight: normal; font-style: normal; } @font-face{ font-family: "Fira Mono"; src: local("Fira Mono"), url("/fonts/fira-mono-bold.woff2") format("woff2"); 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; --light-input-hover: #000; --light-input-border: #777; --light-input-outline: #000; --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; --dark-input-border: #aaa; --dark-input-hover: #118460; --dark-input-outline: #fff; --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); --input-hover: var(--light-input-hover); --input-border: var(--light-input-border); --input-outline: var(--light-input-outline); } @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); --input-hover: var(--dark-input-hover); --input-border: var(--dark-input-border); --input-outline: var(--dark-input-outline); } } 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); } 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; } 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 > article{ display: flex; flex-direction: column; align-items: center; } main > article > *{ width: 100%; max-width: 40rem; } main ol ol{ list-style-type: lower-latin; } main p, main ul, main ol, main li, main blockquote{ margin-top: 1rem; } main p:first-child, main ul:first-child, main ol:first-child, main ul li:first-child, main ol li:first-child, main blockquote:first-child{ margin-top: 0; } blockquote{ margin: 1rem; background: rgba(0, 0, 0, .25); padding: 1rem; border-radius: .25rem; border: 1px solid rgba(255,255,255,.25); } ol > li > ul{ list-style: disc; /* dark discs when nested in ol */ } ol ol, ol ul, ul ul, ul ol{ margin-left: 1.2rem; } h1,h2,h3,h4,h5,h6,.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-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 var(--input-outline); } 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: #29292b url("/images/book.jpg") center / cover; background-image: image-set("/images/book.avif" type("image/avif"), "/images/book.jpg" type("image/jpeg")); border-bottom: 1px solid var(--border); box-shadow: 0 0 10px rgba(0, 0, 0, .75); width: calc(100% + 4rem); margin: 0; padding: 6rem; box-sizing: border-box; -webkit-hyphens: none; hyphens: none; line-height: 1.2; letter-spacing: 1px; color: #fff; font-size: 2.8rem; font-family: "League Spartan"; text-shadow: 2px 2px 0 rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, 1); } main.front-page > section > section{ max-width: 100%; } main.front-page > section > section > div{ display: flex; margin-top: 2rem; max-width: 100%; } main.front-page > section > section > div > div{ max-width: 100%; } main.front-page > section > section figure{ margin-top: 0; margin-left: 2rem; width: 400px; max-width: 100%; position: relative; align-self: center; } main.front-page > section > section figure.stacked{ height: 229px; } main.front-page > section > section figure.stacked img.bottom, main.front-page > section > section figure.stacked img.top{ width: 316px; position: absolute; } main.front-page > section > section figure.stacked img.bottom{ left: 0; } main.front-page > section > section figure.stacked img.top{ top: 72px; left: 72px; } main.front-page > section > section figure.stacked img.arrow{ border: none; box-shadow: none; position: absolute; right: 1rem; top: 1rem; width: 2.5rem; } main.front-page > section > section figure.oss{ display: flex; flex-wrap: wrap; justify-content: center; } main.front-page > section > section figure.oss img{ border: none; box-shadow: none; width: 150px; display: inline; filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, .25)); margin: 1rem; } main.front-page > section > section figure img{ width: auto; max-width: 100%; box-sizing: border-box; border-radius: 5px; border: 1px solid var(--border); box-shadow: 3px 3px 1px rgba(0, 0, 0, .25); } main.front-page > section > section p{ width: 475px; max-width: 100%; text-align: justify; } main.front-page > section > section:first-of-type{ margin-top: 4rem; } main.front-page > section > section + section{ margin-top: 6rem; } main.front-page > img{ width: 700px; max-width: 100%; margin: auto; margin-top: 4rem; } main.front-page > img + p{ margin-top: 4rem; } main.front-page > section{ max-width: 100%; } main.front-page > section > h2{ font-family: "Crimson Pro", Georgia, serif; font-style: italic; font-size: 2.2rem; text-align: center; text-transform: none; font-weight: normal; max-width: 100%; border-top: 3px double var(--sub-text); border-bottom: 3px double var(--sub-text); padding: 2rem 4rem; } 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, form 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; white-space: nowrap; font-size: 1rem; } .ebooks nav li.highlighted a:focus, a.button:focus, input[type="search"]:focus, 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: "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; } 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{ /* 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"); } code{ font-family: "Fira Mono", monospace; font-size: .8rem; border: 1px solid rgba(255,255,255,.25); background: #333; border-radius: .25rem; white-space: nowrap; padding: 0 .25rem; color: #fff; margin: 0 .2rem; } main.front-page > a.button{ align-self: center; margin-top: 4rem; } 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{ 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 > hgroup > h2{ font-size: 1.4rem; font-family: "League Spartan", sans-serif; line-height: 1; margin-top: 1rem; margin-left: 0; } article.ebook > header > hgroup a, article.ebook > header > hgroup a:link, article.ebook > header > hgroup a:visited{ color: inherit; text-decoration: none; } article.ebook > header img{ top: 0; left: 0; position: absolute; z-index: 0; height: 100%; width: auto; object-fit: cover; max-width: 100%; } article.ebook section#details ul{ display: 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: 0; } 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{ 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#read-online a::before, article.ebook section#download ul li a[class]::before, article.ebook section#details ul li a[class]::before{ display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center; content: ""; margin-right: .5rem; height: 1.5rem; width: 1.5rem; min-width: 1.5rem; transition: transform .2s ease; } article.ebook section#read-online a:hover::before, article.ebook section#download ul li a[class]:hover::before, article.ebook section#details ul li a[class]:hover::before{ transform: scale(1.1); } article.ebook #more-ebooks{ border-top: 3px double var(--sub-text); margin-top: 4rem; } article.ebook #more-ebooks h2{ text-align: center; font-style: normal; color: var(--body-text); margin: 0; margin-top: 2rem; } article.ebook #more-ebooks ul{ display: flex; justify-content: center; align-items: center; align-content: center; margin-top: 2rem; margin-left: -1rem; } article.ebook #more-ebooks ul li{ margin: 0; font-size: 0; margin-left: 1rem; } article.ebook #more-ebooks img{ height: 200px; border-radius: .25rem; border: 1px solid var(--border); transition: 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"); } .list::before{ background-image: url("/images/list.svg"); } .page::before{ background-image: url("/images/page.svg"); } article.ebook h1{ border: none; margin: 0; padding: 0; text-align: center; } article.ebook hgroup h2{ text-align: center; } aside#reading-ease, section#description{ margin-top: 2rem; } section#description h2{ display: none; } section#description p:first-of-type{ margin-top: 0; } article.ebook aside#reading-ease{ border-top: 3px double var(--sub-text); border-bottom: 3px double var(--sub-text); padding: 1rem 0; font-style: italic; text-align: center; } h2{ font-size: 1.2rem; font-family: "League Spartan", sans-serif; margin-top: 4rem; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; } h3, h4, h5, h6{ font-size: 1rem; font-family: "League Spartan", 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: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 4rem; margin: 0; margin-bottom: 4rem; list-style: none; } main.ebooks > ol.list{ display: flex; flex-direction: column; gap: 0; margin: auto; margin-bottom: 4rem; } main.ebooks > ol > li{ margin: 0; text-align: center; } main.ebooks > ol.list > li{ display: grid; grid-template-columns: 6rem 1fr; grid-column-gap: 1rem; grid-template-rows: auto auto 1fr; } main.ebooks > ol.list > li + li { margin-top: 2rem; } main.ebooks > ol.list > li > a{ grid-row: 1 / span 3; } main.ebooks > ol.list ul.tags{ display: flex; justify-content: flex-start; margin-left: 0; } main.ebooks > ol.list > li p{ text-align: left; } main.ebooks > ol 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; max-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; } main.ebooks > ol.list > li p.author a, main.ebooks > ol.list > li > p:nth-of-type(1) > a{ display: inline; } main.ebooks > ol > li > a:first-child{ font-size: 0; /* for correct focus outline */ } main.ebooks > ol > li p.author a{ font-style: italic; text-decoration: none; display: flex; justify-content: center; } article nav ol, main.ebooks nav ol{ list-style: none; display: flex; margin: 0 .5rem; } aside.warning, aside.alert{ font-style: italic; margin-top: 2rem; background: url("/images/stripes.svg") #FFFF99; color: var(--light-body-text); border-radius: .25rem; padding: 2rem; border: 2px solid #FFCC00; box-sizing: border-box; } aside.warning{ font-style: normal; hyphens: none; } aside.warning a:hover, aside.alert a:hover{ color: var(--light-highlight); } aside.warning a:focus aside.alert a:focus{ outline: 1px dashed var(--light-highlight); } nav + aside.alert{ margin-top: 2rem; } aside.alert + p{ margin-top: 2rem; } h1 + aside.alert{ margin-top: 0; } section#history ol > li:before{ display: none; } figure img{ width: 50%; } figure{ margin-top: 1rem; } ul.tags{ list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } ul.tags li{ margin: 0; } ul.tags li + li{ margin-left: .5rem; } ul.tags li a{ border: 1px solid var(--body-text); border-radius: 5px; padding: .25rem .5rem; font-style: normal; background: rgba(0, 0, 0, .1); text-decoration: none; display: block; line-height: 1; white-space: nowrap; text-transform: lowercase; box-shadow: 1px 1px 0px rgba(255, 255, 255, .5) inset; } ul.tags li a:hover{ color: #fff; /* fallback for ie */ background: #288da4; 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; 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; } /* 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); } select{ -webkit-appearance: none; appearance: none; font-size: 1rem; font-family: "FontAwesome", "Crimson Pro"; color: var(--body-text); background: rgba(0, 0, 0, .1); border-radius: 5px; border: 1px solid var(--input-border); padding: 1rem; padding-right: 2rem; line-height: 1.4rem; display: block; } input[type="search"]{ box-sizing: border-box; width: 100%; background: rgba(0, 0, 0, .1); border-radius: 5px; border: 1px solid var(--input-border); display: flex; align-items: center; padding: 1rem; padding-left: 2.5rem; color: inherit; font-size: 1rem; font-family: "Crimson Pro"; color: var(--body-text); line-height: 1.4; } select, input[type="search"]{ box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset; } 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 - 6px); right: calc(1rem - 12px / 2); content: "\f107"; font-family: "FontAwesome"; 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(0, 0, 0, .5); } label.select:hover > span + span::after{ color: var(--input-outline); } label.select > span + span, label.search{ position: relative; max-width: 100%; } label.search::before{ display: block; position: absolute; top: calc(2rem + 4px + .7rem); left: 1rem; 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); width: 1rem; } nav li.highlighted a, nav a[rel], a.button, button, 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="search"]:focus, input[type="search"]:hover, select:focus, select:hover{ border-color: var(--input-outline); background: rgba(0, 0, 0, .15); transition: none; } select[multiple] option:last-child{ margin-bottom: 1rem; /* needed for firefox */ } 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: 25% 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 span{ font-style: italic; opacity: .5; } 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{ height: calc(1.4rem + 2rem + 2px); justify-self: end; margin-top: 1.4rem; } article nav ol li:not(:first-child):not(:last-child):not(.highlighted), main.ebooks nav ol li:not(:first-child):not(:last-child):not(.highlighted){ display: none; } article nav ol li.highlighted::before, main.ebooks nav ol li.highlighted::before{ content: "⋯"; padding-right: 1rem; } article nav ol li.highlighted::after, main.ebooks nav ol li.highlighted::after{ content: "⋯"; padding-left: 1rem; } article nav ol li.highlighted:first-child::before, article nav ol li.highlighted:last-child::after, article nav ol li.highlighted:nth-child(2)::before, article nav ol li.highlighted:nth-last-child(2)::after, main.ebooks nav ol li.highlighted:first-child::before, main.ebooks nav ol li.highlighted:last-child::after, main.ebooks nav ol li.highlighted:nth-child(2)::before, main.ebooks nav ol li.highlighted:nth-last-child(2)::after{ display: none; } @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; } label.tags > span, 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: 1300px){ form[action="/ebooks"]{ /* We create 5 columns so that the last one can be 1fr wide, pushing the rest into their smallest necessary size */ grid-template-columns: 13rem auto auto 1fr; } form[action="/ebooks"] label.tags{ grid-row: 1 / span 3; } form[action="/ebooks"] label.search{ grid-column: 2 / span 3; } form[action="/ebooks"] label.view{ grid-row: 2; grid-column: 3; } form[action="/ebooks"] label.per-page{ grid-row: 3; grid-column: 2; } form[action="/ebooks"] button{ grid-row: 3; grid-column: 3 / span 2; margin-top: 0; align-self: end; } } @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 (hover: none) and (pointer: coarse) and (max-width: 1100px){ /* target ipads and smartphones without a mouse */ 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: 1000px){ 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(3)::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; } form[action="/ebooks"]{ grid-template-columns: auto 1fr; } form[action="/ebooks"] label.tags{ grid-row: 1; grid-column: 1 / span 2; } form[action="/ebooks"] label.tags select{ height: calc((1rem + 1.4rem + 1rem + 2px) * 2); /* Size equal to two regular select boxes */ } form[action="/ebooks"] label.search{ grid-row: 2; grid-column: 1 / span 2; } form[action="/ebooks"] label.sort{ grid-row: 3; grid-column: 1; } form[action="/ebooks"] label.view{ grid-row: 3; grid-column: 2; } form[action="/ebooks"] button, form[action="/ebooks"] label.per-page{ grid-row: 4; grid-column: 1 / span 2; } } @media(max-width: 900px){ main.ebooks > ol{ grid-template-columns: repeat(3, 1fr); } } @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 (hover: none) and (pointer: coarse) and (max-width: 768px){ /* target ipads and smartphones without a mouse */ form[action="/ebooks"]{ grid-template-columns: auto auto 1fr; } form[action="/ebooks"] label.search{ grid-column: 2 / span 2; grid-row: 1; } form[action="/ebooks"] label.tags{ grid-column: 1; grid-row: 1; } form[action="/ebooks"] label.sort{ grid-column: 1 / span 2; grid-row: 2; } form[action="/ebooks"] label.view{ grid-column: 3; grid-row: 2; } form[action="/ebooks"] label.per-page{ grid-column: 1; grid-row: 3; } form[action="/ebooks"] button{ grid-row: 3; grid-column: 2 / span 2; } } @media(max-width: 700px){ main.ebooks > ol{ grid-template-columns: repeat(2, 1fr); } } @media (hover: none) and (pointer: coarse) and (max-width: 700px){ /* target ipads and smartphones without a mouse */ form[action="/ebooks"]{ grid-template-columns: auto 1fr; } form[action="/ebooks"] label.search{ grid-column: 1 / span 2; grid-row: 1; } form[action="/ebooks"] label.tags{ grid-column: 1 / span 2; grid-row: 2; } form[action="/ebooks"] label.sort{ grid-column: 1 / span 2; grid-row: 3; } form[action="/ebooks"] label.view{ grid-column: 1; grid-row: 4; } form[action="/ebooks"] label.per-page{ grid-column: 2; grid-row: 4; } form[action="/ebooks"] button{ grid-row: 5; grid-column: 1 / span 2; } } @media(max-width: 680px){ body > header{ flex-direction: column; align-items: center; } body > header li{ margin-top: 2rem; } main.front-page h1{ padding: 3rem; font-size: 2.4rem; } 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; } form[action="/ebooks"] label.sort{ grid-column: 1 / span 2; } 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 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; } 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{ 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; } footer ul li:nth-child(5)::after{ content: "\A"; /* This is a line break */ white-space: pre; margin: 0; } } @media(max-width: 470px){ main.ebooks > ol{ grid-gap: 2rem; } } @media(max-width: 400px){ form[action="/ebooks"] button{ grid-row: 5; } form[action="/ebooks"] label.tags span{ display: none; } } @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; } main.ebooks > ol{ grid-template-columns: 1fr; } form[action="/ebooks"]{ grid-template-columns: 100%; } form[action="/ebooks"] label.search, form[action="/ebooks"] label.tags, form[action="/ebooks"] label.sort, form[action="/ebooks"] label.view, form[action="/ebooks"] label.per-page, form[action="/ebooks"] button{ grid-column: 1; } form[action="/ebooks"] label.per-page{ grid-row: 5; } form[action="/ebooks"] button{ grid-row: 6; } } @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); } body > header > a:focus{ /* Since we use invert() to change the color of the SE logo, we must specify the light outline (which is dark) so that it inverts to white */ outline: 1px dashed var(--light-input-outline); } 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, 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 */ } select, input[type="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; } }