@charset "UTF-8"; /* ================ reset.scss ================================================================ */ /* derived from */ /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400,600,700,800); @import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700); @import url(https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } div.clear { clear: both; } /* ................ */ /* tw-grey is hsl(145, 5%, 52%) */ @font-face { font-family: 'Marydale'; src: url("/fonts/marydale/marydale-webfont.eot"); src: url("/fonts/marydale/marydale-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/marydale/marydale-webfont.woff") format("woff"), url("/fonts/marydale/marydale-webfont.ttf") format("truetype"), url("/fonts/marydale/marydale-webfont.svg#marydaleregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "remixicon"; src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815"); /* IE9*/ src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff2?t=1590207869815") format("woff2"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff?t=1590207869815") format("woff"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.ttf?t=1590207869815") format("truetype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.svg?t=1590207869815#remixicon") format("svg"); /* iOS 4.1- */ font-display: swap; } .icon-twitter:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-rss:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-bars:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-close:before, .navmenu .close:before { content: "⨉"; } .icon-tag:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon svg { height: 1em; width: 1em; fill: white; } table.dark-head { font-family: Open Sans, sans-serif; border: solid thin #070D4A; } table.dark-head tbody { font-size: 80%; } table.dark-head td { vertical-align: middle; padding: 5px 2em; } table.dark-head th, table.dark-head caption { background-color: #070D4A; color: white; font-weight: bold; padding: 0.5em 0; } table.dark-head th { padding: 0.5em 1.6em; text-align: left; } table.dark-head tr:nth-child(even) { background-color: #F7F8FE; } table.dark-head caption { text-align: center; border: none; } table.borders { background-color: #F7F8FE; font-family: Open Sans, sans-serif; font-size: 90%; padding: 0.5em 1em; border: 2px solid #0f1872; } table.borders th, table.borders td { padding: 0.5em; border: thin solid #cad0f8; } table.borders th { border-bottom: 2px solid #0f1872; } table.borders caption { border: none; } main .photo, main .photo-right, main div.fullPhoto, main .figure { max-width: 100%; margin: 1em auto; } main .photo .credit, main .photo-right .credit, main div.fullPhoto .credit, main .figure .credit { color: #808080; font-size: 80%; text-align: right; } main .photo .photoCaption, main .photo-right .photoCaption, main div.fullPhoto .photoCaption, main .figure .photoCaption { font-size: 80%; font-style: italic; min-height: 1em; } main div.fullPhoto, main .figure { float: none; margin: 1em 0; } main .photo-right { float: right; margin: 1em -250px 1em 1em; } main img { max-width: 100%; } main .article-card { font-size: 80%; } @media (max-width: 599px) { main .article-card { font-size: 19px; } } main .article-card h3 { font-size: 130%; font-weight: bold; } main .article-card h3 a { border: none; padding-bottom: 0; } main .article-card h3 a:hover { text-decoration: underline; } main .article-card summary h3 { display: inline; } main .article-card:before { display: block; background-color: #070D4A; height: 3px; border-right: 3px solid #ef5ba1; content: ""; } main .article-card .meta { font-family: Open Sans, sans-serif; display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "cr tp" "cr ln" "cr dt" "mo mo" "tg tg"; } main .article-card .meta p { margin: 0; } main .article-card .credits { grid-area: cr; font-weight: bold; } main .article-card .date { grid-area: dt; font-weight: 600; color: #A9A7A7; font-family: Open Sans, sans-serif; } main .article-card .type { grid-area: tp; font-weight: 600; color: #A9A7A7; font-family: Open Sans, sans-serif; text-transform: uppercase; } main .article-card .length { grid-area: ln; font-weight: 600; color: #A9A7A7; font-family: Open Sans, sans-serif; } main .article-card a.more { font-family: Open Sans, sans-serif; font-weight: bold; color: #ef5ba1; border: none; padding-bottom: 0; } main .article-card a.more:hover { text-decoration: underline; } main .article-card p.more { margin: 1em 0; grid-area: mo; font-family: Open Sans, sans-serif; font-weight: bold; color: #ef5ba1; } main .article-card p.more a { border: none; padding-bottom: 0; } main .article-card p.more a:hover { text-decoration: underline; } main .article-card p.more a:hover { color: #ef5ba1; } main .article-card .tags { grid-area: tg; } main .article-card .tags a { border: none; padding-bottom: 0; } main .article-card .tags a:hover { text-decoration: underline; } main .article-card .picture p { font-style: italic; } main .article-card .book-cover { max-height: 250px; } /* ==== global ================================ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-size: 16px; } main { line-height: 1.5; font-family: Open Sans, sans-serif; } .error { background-color: rgba(253, 147, 151, 0.34); } .todo { background-color: rgba(255, 255, 0, 0.3); } .draft-notice { border: thin solid red; font-family: sans-serif; margin: 1em 10%; padding: 0.5em; text-align: center; } .draft-notice h1 { font-size: 120%; color: black; } .draft-notice p { color: red; } .clickable, main .filter-panel .books-radio .explain-button, a.permalink, a:hover { text-decoration: underline; cursor: pointer; } a { color: inherit; text-decoration: none; } a:hover { color: #3546E5; } a.button { color: white; background: #9ca9f3; font-family: Open Sans, sans-serif; font-style: normal; font-weight: bold; font-size: 14px; padding: 5px; border-radius: 5px; margin: 2px; white-space: nowrap; cursor: pointer; border: none; vertical-align: middle; } a.button:hover { background: #6f81ed; } a.permalink { color: #3546E5; border: none !important; text-decoration: none !important; } a.permalink:before { content: "#"; } .tag-link { color: #3546E5; text-transform: uppercase; } .tag-link:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ................................................................ */ @font-face { font-family: "remixicon"; src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815"); /* IE9*/ src: url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.eot?t=1590207869815#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff2?t=1590207869815") format("woff2"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.woff?t=1590207869815") format("woff"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.ttf?t=1590207869815") format("truetype"), url("https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.svg?t=1590207869815#remixicon") format("svg"); /* iOS 4.1- */ font-display: swap; } .icon-twitter:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-rss:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-bars:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-close:before, .navmenu .close:before { content: "⨉"; } .icon-tag:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon svg { height: 1em; width: 1em; fill: white; } /* ==== banner ================ */ #banner { border-right: 30px solid #ef5ba1; display: grid; background-color: #070D4A; background-position: left 60px top; height: 100px; font-family: Open Sans, sans-serif; color: white; grid-template-columns: 2fr 2fr 60px; grid-template-areas: "lg sh nb" "tm tm ."; grid-template-rows: 1fr 1.5em; } #banner .search { grid-area: sh; text-align: right; padding-top: 10px; padding-right: 30px; } #banner .search .button { cursor: pointer; background-color: transparent; color: white; width: 24px; font-size: 100%; border: none; } #banner .search .button:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #banner .search input.field { width: 15em; } #banner .name-logo { grid-area: lg; padding-left: 10px; } #banner .navmenu-button { grid-area: nb; font-size: 36px; padding-right: 5px; } #banner .icon:hover { text-decoration: none; } #banner a:hover { color: #ef5ba1; } #banner .top-menu { font-family: Lora, serif; grid-area: tm; text-align: right; font-size: 16px; } #banner .top-menu ul { float: right; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; } #banner .top-menu ul li { float: left; padding-right: 18px; } @media screen and (max-width: 600px) { #banner { grid-template-columns: 1fr 60px; grid-template-areas: "lg nb"; } #banner .search, #banner .top-menu { display: none; } } /* ................................................................ */ /* ==== footer ================ */ #page-footer { font-family: Open Sans, sans-serif; border-right: 30px solid #ef5ba1; position: relative; background-color: #070D4A; color: white; min-height: 80px; } #page-footer a { color: white; text-decoration: none; } #page-footer div.copyright { display: block; font-size: 80%; position: absolute; bottom: 5px; left: 5px; } #page-footer div.copyright a:hover { padding-top: 5px; color: #ef5ba1; text-decoration: underline; } @media screen and (min-width: 600px) { #page-footer { min-height: 60px; } #page-footer div.copyright { left: auto; right: 60px; } } #page-footer .tw-logo { position: absolute; left: 5px; top: 15px; } #page-footer .tw-logo img { width: 200px; } #page-footer .menu-button { position: absolute; right: 30px; top: 5px; font-size: 200%; } /* ................................................................ */ .navmenu { border-right: 30px solid #ef5ba1; padding: 5px; color: white; background-color: #070D4A; font-size: 16px; font-family: Open Sans, sans-serif; line-height: 36px; } .navmenu .nav-head { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-areas: ". sh cl"; } .navmenu .nav-body { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr; grid-template-areas: "tp ab ct fd tw"; } .navmenu h2 { column-span: all; font-weight: 600; text-transform: uppercase; font-size: 14px; } .navmenu .search { grid-area: sh; } .navmenu .closediv { grid-area: cl; text-align: right; } .navmenu .topics { grid-area: tp; column-count: 2; } .navmenu .about { grid-area: ab; } .navmenu .content { grid-area: ct; } .navmenu .tw { grid-area: tw; } .navmenu .feeds { grid-area: fd; } .navmenu a:hover { color: #ef5ba1; } .navmenu .search { display: block; } .navmenu .search .button { cursor: pointer; background-color: transparent; color: white; width: 24px; font-size: 100%; border: none; } .navmenu .search .button:before { content: ""; font-family: 'remixicon'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .navmenu .search input.field { width: 10em; } .navmenu .close { color: white; cursor: pointer; padding-right: 0.5em; } .navmenu .close:hover { color: #ef5ba1; } .navmenu .icon-close, .navmenu .close { font-size: 200%; } @media screen and (min-width: 600px) { .navmenu .search { display: none; } } @media screen and (max-width: 800px) { .navmenu .nav-head { grid-template-areas: "sh sh cl"; } .navmenu .nav-body { grid-template-columns: 1fr 1fr; grid-template-areas: "sh cl" "tp tp" "ab ct" "fd tw"; } } /* ==== framing ================ */ main, #banner, #page-footer, .navmenu { margin-left: 5px; margin-right: 5px; max-width: 960px; } @media screen and (min-width: 750px) { main, #banner, #page-footer, .navmenu { margin-left: 20px; } } main { background-color: white; min-height: 500px; margin-bottom: 1em; } main::after { clear: both; content: ""; display: block; } @media (min-width: 1400px) { body { display: flex; flex-direction: column; align-items: center; } main, #banner, #page-footer, .navmenu { width: 960px; } } #top-navmenu { display: none; } #bottom-navmenu { display: block; } .navmenu-button { cursor: pointer; } /* ................................................................ */ .short-front { font-family: Open Sans, sans-serif; width: 650px; float: left; margin-bottom: 3em; } .short-front .author { display: grid; grid-template-areas: "photo name" "photo bio"; grid-column-gap: 10px; grid-template-columns: 60px 1fr; } .short-front .author .photo, .short-front .author main div.fullPhoto, main .short-front .author div.fullPhoto, .short-front .author main .figure, main .short-front .author .figure, .short-front .author main .photo-right, main .short-front .author .photo-right { grid-area: photo; margin: 0; } .short-front .author .photo img, .short-front .author main div.fullPhoto img, main .short-front .author div.fullPhoto img, .short-front .author main .figure img, main .short-front .author .figure img, .short-front .author main .photo-right img, main .short-front .author .photo-right img { width: 60px; } .short-front .author .name { grid-area: name; margin: 0; } .short-front .author .bio { grid-area: bio; } .short-front p.date { font-weight: bold; } .filter-panel { padding: 1em; float: left; width: 200px; font-size: 80%; background-color: #eceeed; margin-right: 30px; } .filter-panel h2 { font-size: 100%; } main, #banner, #footer { width: 960px; } #footer { clear: both; } main .short-front { float: right; width: auto; margin: 0 6em 2em 1em; } main .entry-list { font-size: 14px; width: 700px; float: left; } main .entry-list .hidden { display: none; } main .entry-list .left { float: left; width: 340px; } main .entry-list .right { float: left; width: 340px; margin-left: 20px; } main .entry-list .entry-top { min-height: 140px; clear: both; } main .entry-list .entry-end { margin-bottom: 2em; } main .entry-list .name { font-size: 120%; } main .entry-list .top-text { float: left; min-height: 120px; } main .entry-list .top-text, main .entry-list .top-text h2 { width: 150px; margin-top: 0; } main .entry-list .box { float: left; margin-left: 10px; } main .entry-list .box img { height: 120px; max-width: 175px; } main .entry-list .link-button img { height: 25px; border-radius: 10px; margin-right: 10px; } main .entry-list .entry-body { clear: both; display: none; } main .entry-list .extension-name { font-style: italic; } main .paperBody { width: 40em; } main .paperBody .section-body { display: none; } main .paperBody h2 { margin: 1em 0 0 0; font-size: 120%; cursor: pointer; } main .expand-button { display: inline-block; -moz-transition-duration: 400ms; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; cursor: pointer; } main .expand-button.expanded { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } main .expand-button-box { margin-bottom: 0; } main .expand-marker { display: inline-block; -moz-transition-duration: 400ms; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } main .expand-marker.expanded { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } @font-face { font-family: 'et-book'; src: url("/fonts/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot"), url("/fonts/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.svg") format("svg"), url("/fonts/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf") format("truetype"), url("/fonts/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff") format("woff"); font-weight: normal; font-style: normal; } div#banner { border-right-color: #ee312d; background-color: black; grid-template-columns: 230px 1fr 1fr 60px; grid-template-areas: "lg ph sh nb" "tm ph mf mf"; background-image: url("/photo.png"); background-repeat: no-repeat; background-position: 250px; } div#banner a:hover { color: #ee312d; } div#banner .banner-logo { grid-area: lg; } div#banner .photo, div#banner main div.fullPhoto, main div#banner div.fullPhoto, div#banner main .figure, main div#banner .figure, div#banner main .photo-right, main div#banner .photo-right { grid-area: ph; } div#banner .banner-logo { vertical-align: top; margin: 5px 0 0 5px; } div#banner .mfcom-navigation { text-align: right; font-size: 16px; grid-area: mf; } div#banner .mfcom-navigation ul { float: right; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; } div#banner .mfcom-navigation ul li { float: left; padding-right: 18px; } div#banner .main-navigation { grid-area: tm; padding-left: 5px; } @media screen and (max-width: 850px) { div#banner .mfcom-navigation { display: none; } } .navmenu, #footer, #page-footer { border-right-color: #ee312d; background-color: black; } .navmenu a:hover, #footer a:hover, #page-footer a:hover { color: #ee312d; } main { font-family: Open Sans, sans-serif; } main p, main h1, main h2, main h3, main h4, main h5 ul ol { margin: 1em 0; } main h1 { font-size: 200%; } main h2 { font-size: 150%; } main h3 { font-size: 120%; } main pre { font-size: 90%; font-family: Inconsolata, monospace; } main ul { list-style: square; margin-left: 1.5em; } main ol { list-style: decimal; margin-left: 1.5em; } main a { border-bottom: thin solid; padding-bottom: 1px; } main a:hover { text-decoration: none; } main .img-link a, main a.img-link, main a.img { border-bottom: none; padding-bottom: 0; } main h1, main h2, main h3 { color: black; font-family: et-book; } main h1 { font-size: 300%; } main h2 { font-size: 130%; } main a { border: none; } main a:link, main a:hover, main a:visited { color: #a7110e; } main .web-ed img { width: 300px; display: block; } main .web-ed p { margin-top: 5px; font-size: 90%; font-style: italic; } #banner .main-navigation .catalog { color: #ee312d; } main h2 { font-family: Open Sans, sans-serif; } main .entry-list { margin-bottom: 50px; } main .entry-list a, main .entry-list a:hover, main .entry-list h1, main .entry-list h2 { text-decoration: none; color: #303633; } main .entry-list .entry { margin: 0.5em 0; } main .entry-list .entry-top { padding: 5px; min-height: 50px; width: 343px; background-color: #eceeed; } main .entry-list .entry-top:hover { background-color: #d1d6d3; } main .entry-list .name { font-size: 120%; margin: 0; } main .entry-list p { margin: 5px 0 0 0; } main .filter-panel { margin-bottom: 3em; margin-top: 0.5em; } main .filter-panel h2 { margin-top: 0; } main .filter-panel .books-radio label { margin-right: 5px; } main .filter-panel .books-radio .explain-button { margin-left: 10px; color: #94388e; } main .filter-panel .books-radio .explain-body { display: none; } main .filter-panel .permalink { margin-bottom: 0; float: right; } main .filter-panel .more-books { margin: 2em 0; font-weight: bold; }