@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: #29292b url('/images/book.jpg') center / cover; 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'); } 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: -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; 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: 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; } 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; } 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: 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; } 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; } article.ebook section#download li span:nth-child(2){ display: none; } article.ebook section#download li span:nth-child(3){ display: block; margin-left: 1.75rem; padding-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: 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 > 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: 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; } }