@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, sub, sup, 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%; } 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, 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; } /* ................................................................ */ main { /* prose mixin */ line-height: 1.6; color: #303633; font-family: Lora, serif; } @media (max-width: 599px) { main { font-size: 19px; } } main h2, main h3, main h4, main h5 { font-weight: bold; } main h1 { font-size: 200%; } main h2 { font-size: 150%; } main h3 { font-size: 120%; } main p, main h1, main h2, main h3, main h4, main h5, main ul { margin: 1em 0; } 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 dd { margin-left: 2em; } main ul { list-style: square; margin-left: 1.5em; } main ol { list-style: decimal; margin-left: 1.5em; } main pre { font-size: 90%; font-family: Inconsolata, monospace; } main code { font-family: Inconsolata, monospace; } main span.credit { color: #808080; font-size: 80%; } main hr { border: none; display: block; background-color: #070D4A; height: 3px; border-right: 3px solid #ef5ba1; content: ""; margin: 10px 15px; } main blockquote { /* margin-left: 3em; */ border-left: 2px solid #0f1872; padding-left: 1em; font-style: italic; margin-left: 2em; } main .show-code summary { color: #A9A7A7; font-weight: bold; font-family: Open Sans, sans-serif; font-size: 80%; } main .show-code pre { background-color: #F7F8FE; } main .row { display: grid; column-gap: 2em; } main h1 { font-size: 300%; } main h2 { font-size: 200%; } main .lede { display: grid; column-gap: 2em; grid-template-columns: 1fr 8em; column-gap: 8em; } @media (max-width: 599px) { main .lede { grid-template-columns: auto; } } main .lede .main { font-size: 120%; } main .lede .author { margin-top: 2em; font-family: Open Sans, sans-serif; font-weight: bold; } main .lede .explain { font-style: italic; font-size: 80%; } main .synopsis p { width: 45em; max-width: 100%; } main hr.sep { display: block; background-color: #070D4A; height: 10px; border-right: 10px solid #ef5ba1; content: ""; margin: 10em 15em 5em 15em; } @media (max-width: 599px) { main hr.sep { margin: 5em; } } main .author a { border: none; padding-bottom: 0; } main .author a:hover { text-decoration: underline; } main .author img { display: none; } main .card-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); column-gap: 2em; row-gap: 3em; margin-top: 3em; } main .def { color: #ef5ba1; display: grid; grid-template-columns: 20em 1fr; column-gap: 2em; max-width: 50em; } @media (max-width: 599px) { main .def { display: block; } } main .def i { font-weight: bold; } main .def .left { padding-top: 0.5em; font-size: 200%; margin-top: 1em; text-align: right; } @media (max-width: 599px) { main .def .left { text-align: left; } } main .def .right { font-size: 150%; list-style: none; margin: 1em; } main .contrasts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2em; row-gap: 3em; } @media (max-width: 599px) { main .contrasts { display: block; } } main .fluency> div { display: grid; margin: 5em; column-gap: 4em; grid-template-columns: 2fr 1fr; grid-template-areas: "im ab" "im mt"; } @media (max-width: 599px) { main .fluency> div { display: block; margin-left: 0; margin-right: 0; } } main .fluency> div h3 { display: none; } main .fluency> div .abstract { grid-area: ab; } main .fluency> div .meta { grid-area: mt; } main .fluency> div .card-image { grid-area: im; } @media (min-width: 600px) { main .fluency> div:before { display: none; } } main .self-test img { padding: 0 6em; } main .article-card.refact h2 { display: none; } main .attribution { font-size: 80%; opacity: 0.8; } main .picture-credit { font-size: 80%; } main .tag-list { color: #808c85; }