/* Variables
/* ---------------------------------------------------------- */
/* Colours */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-spacing: 0; border-collapse: collapse; }
img { max-width: 100%; /* needed since the markdown render hook emits width/height attributes: without this the declared height survives the max-width clamp and the image is squashed instead of scaled */ height: auto; }
html { box-sizing: border-box; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }
a { background-color: transparent; }
b, strong { font-weight: bold; }
i, em, dfn { font-style: italic; }
h1 { margin: 0.67em 0; font-size: 2em; }
small { font-size: 80%; }
sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
mark { background-color: #fdffb6; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { margin: 0; /* 3 */ color: inherit; /* 1 */ font: inherit; /* 2 */ }
button { overflow: visible; border: none; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* 3 */ -webkit-appearance: button; /* 2 */ }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }
input { line-height: normal; }
input:focus { outline: 2px solid #1c71d8; outline-offset: 1px; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { box-sizing: content-box; /* 2 */ -webkit-appearance: textfield; /* 1 */ }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
legend { padding: 0; /* 2 */ border: 0; /* 1 */ }
textarea { overflow: auto; }
table { border-spacing: 0; border-collapse: collapse; }
td, th { padding: 0; }
html { overflow-x: hidden; overflow-y: scroll; font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { overflow-x: hidden; color: #2b2b2d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.6rem; line-height: 1.6em; font-weight: 400; font-style: normal; letter-spacing: 0; text-rendering: optimizeLegibility; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
hr { position: relative; display: block; width: 100%; margin: 2.5em 0 3.5em; padding: 0; height: 1px; border: 0; border-top: 1px solid #cbd7dd; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { margin: 0; padding: 0; border: 0; }
textarea { resize: vertical; }
p, ul, ol, dl, blockquote { margin: 0 0 1.5em 0; }
ol, ul { padding-left: 1.3em; padding-right: 1.5em; }
ol ol, ul ul, ul ol, ol ul { margin: 0.5em 0 1em; }
ul { list-style: disc; }
ol { list-style: decimal; }
ul, ol { max-width: 100%; }
li { margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em; }
dt { float: left; margin: 0 20px 0 0; width: 120px; color: #15171A; font-weight: 500; text-align: right; }
dd { margin: 0 0 5px 0; text-align: left; }
blockquote { margin: 1.5em 0; padding: 0 1.6em 0 1.6em; border-left: #e5eff5 0.5em solid; }
blockquote p { margin: 0.8em 0; font-size: 1.2em; font-weight: 300; }
blockquote small { display: inline-block; margin: 0.8em 0 0.8em 1.5em; font-size: 0.9em; opacity: 0.8; }
/* Quotation marks */
blockquote small:before { content: "\2014 \00A0"; }
blockquote cite { font-weight: bold; }
blockquote cite a { font-weight: normal; }
a { color: #1b6bcd; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.15; font-weight: 600; text-rendering: optimizeLegibility; }
h1 { margin: 0 0 0.5em 0; font-size: 5.5rem; font-weight: 600; }
@media (max-width: 500px) { h1 { font-size: 2.2rem; } }
h2 { margin: 1.5em 0 0.5em 0; font-size: 2.2rem; }
@media (max-width: 500px) { h2 { font-size: 1.8rem; } }
h3 { margin: 1.5em 0 0.5em 0; font-size: 1.8rem; font-weight: 500; }
@media (max-width: 500px) { h3 { font-size: 1.7rem; } }
h4 { margin: 1.5em 0 0.5em 0; font-size: 1.6rem; font-weight: 500; }
h5 { margin: 1.5em 0 0.5em 0; font-size: 1.4rem; font-weight: 500; }
h6 { margin: 1.5em 0 0.5em 0; font-size: 1.4rem; font-weight: 500; }
.tify-header-title { font-size: 1em !important; }
body { background: #f4f8fb; }
.img { display: block; width: 100%; height: 100%; background-position: center center; background-size: cover; border-radius: 100%; }
.hidden { visibility: hidden; position: absolute; text-indent: -9999px; }
.copyright img { height: 20px; }
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { z-index: 100; flex-grow: 1; }
/* Full width page blocks */
.outer { position: relative; padding: 0 4vw; }
/* Centered content container blocks */
.inner { margin: 0 auto; max-width: 1040px; width: 100%; }
@media (min-width: 900px) { .home-template .post-feed, .tag-template .post-feed, .author-template .post-feed { margin-top: -70px; padding-top: 0; } .home-template .site-nav { position: relative; top: -70px; } }
.site-header { position: relative; padding-top: 12px; padding-bottom: 12px; color: #fff; background: #141619 no-repeat center center; background-size: cover; }
.site-header:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: block; background: rgba(0, 0, 0, 0.18); }
.site-header:after { content: ""; position: absolute; top: 0; right: 0; bottom: auto; left: 0; z-index: 10; display: block; height: 80px; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)); }
.site-header.no-cover:before, .site-header.no-cover:after { display: none; }
.site-header-content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10vw 4vw; min-height: 200px; max-height: 450px; text-align: center; }
.site-title { z-index: 10; margin: 0; padding: 0; font-size: 3.8rem; font-weight: 700; }
.site-logo { max-height: 45px; }
.site-description { z-index: 10; margin: 0; padding: 5px 0; font-size: 2.2rem; font-weight: 300; letter-spacing: 0.5px; opacity: 0.8; }
@media (max-width: 500px) { .site-title { font-size: 3rem; } .site-description { font-size: 1.8rem; } }
.site-nav { position: relative; z-index: 300; display: flex; justify-content: space-between; align-items: flex-start; overflow-y: hidden; height: 40px; font-size: 1.2rem; }
.site-nav-left { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-right: 10px; padding-bottom: 80px; letter-spacing: 0.4px; white-space: nowrap; -ms-overflow-scrolling: touch; }
/* Site Nav Hack Explanation (above):
What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.
The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.
*/
.site-nav-logo { flex-shrink: 0; display: block; margin-right: 24px; padding: 11px 0; color: #fff; font-size: 1.7rem; line-height: 1em; font-weight: bold; letter-spacing: -0.5px; }
.site-nav-logo:hover { text-decoration: none; }
.site-nav-logo img { display: block; width: auto; height: 21px; }
.nav { display: flex; margin: 0 0 0 -12px; padding: 0; list-style: none; }
.nav li { display: block; margin: 0; padding: 0; text-transform: uppercase; }
.nav li a { display: block; margin: 0; padding: 10px 12px; color: #fff; opacity: 0.8; }
.nav li a:hover { text-decoration: none; opacity: 1; }
.site-nav-right { flex-shrink: 0; display: flex; align-items: center; height: 40px; }
.social-links { flex-shrink: 0; display: flex; align-items: center; }
.social-links a:last-of-type { padding-right: 20px; }
.social-link { display: flex; justify-content: center; align-items: center; margin: 0; padding: 10px; color: #fff; opacity: 0.8; }
.social-link:hover { opacity: 1; }
.social-link svg { height: 1.8rem; fill: #fff; }
.social-link-fb svg { height: 1.5rem; }
.social-link-wb svg { height: 1.6rem; }
.social-link-wb svg path { stroke: #fff; }
.social-link-rss svg { height: 1.9rem; }
.subscribe-button { display: block; padding: 4px 10px; border: #fff 1px solid; color: #fff; font-size: 1.2rem; line-height: 1em; border-radius: 10px; opacity: 0.8; }
.subscribe-button:hover { text-decoration: none; opacity: 1; }
.rss-button { opacity: 0.8; }
.rss-button:hover { opacity: 1; }
.rss-button svg { margin-bottom: 1px; height: 2.1rem; fill: #fff; }
@media (max-width: 700px) { .site-header { padding-right: 0; padding-left: 0; } .site-nav-left { margin-right: 0; padding-left: 4vw; } .site-nav-right { display: none; } }
.post-feed { position: relative; display: flex; flex-wrap: wrap; margin: 0 -20px; padding: 40px 0 0 0; }
.post-card, .site-authors .author-card { flex: 1 1 300px; display: flex; flex-direction: column; overflow: hidden; margin: 0 20px 40px; min-height: 300px; background: #fff center center; background-size: cover; border-radius: 5px; box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; transition: transform 0.5s ease; }
.post-card:hover, .site-authors .author-card:hover { box-shadow: 0 0 1px rgba(39, 44, 49, 0.1), 0 3px 16px rgba(39, 44, 49, 0.07); transition: box-shadow 0.3s ease, transform 0.3s ease; transform: translate3D(0, -1px, 0); }
.post-card-image-link { position: relative; display: block; overflow: hidden; border-radius: 5px 5px 0 0; }
.post-card-image { width: auto; height: 200px; background: #c5d2d9 no-repeat center center; background-size: cover; }
.post-card-content-link { position: relative; display: block; padding: 25px 25px 0; color: #15171A; }
.post-card-content-link:hover { text-decoration: none; }
.post-card-tags { display: block; margin-bottom: 4px; color: #77767b; font-size: 1.2rem; line-height: 1.15em; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.post-card-title { margin-top: 0; }
.post-card-content, .site-authors .author-card .author-card-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.post-card-excerpt { font-family: Georgia, serif; }
.post-card-meta { padding: 0 25px 25px; }
.author-profile-image { margin-right: 5px; width: 25px; height: 25px; border-radius: 100%; object-fit: cover; }
.post-card-author { font-size: 1.3rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }
.reading-time { font-size: 1.2rem; font-weight: 500; line-height: 33px; flex-shrink: 0; margin-left: 20px; letter-spacing: .5px; text-transform: uppercase; float: right; margin-top: -4px; color: #77767b; }
/* Special Styling for home page grid (below): The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices. */
@media (min-width: 795px) { .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image), .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image), .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) { flex: 1 1 100%; flex-direction: row; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .post-card-image-link, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .post-card-image-link { position: relative; flex: 1 1 auto; border-radius: 5px 0 0 5px; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .post-card-image, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .post-card-image { position: absolute; width: 100%; height: 100%; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content, .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .site-authors .author-card .author-card-content, .site-authors .author-card .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .author-card-content, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .post-card-content, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .author-card-content, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .post-card-content, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .author-card-content { flex: 0 1 357px; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) h2, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) h2 { font-size: 2.6rem; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) p, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) p { font-size: 1.8rem; line-height: 1.55em; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .post-card-content-link, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .post-card-content-link { padding: 30px 40px 0; } .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta, .home-template .post-feed .site-authors .author-card:nth-child(6n+1):not(.no-image) .post-card-meta, .site-authors .home-template .post-feed .author-card:nth-child(6n+1):not(.no-image) .post-card-meta { padding: 0 40px 30px; } }
.home-template .site-header:after { display: none; }
/* Adjust some margins for smaller screens */
@media (max-width: 650px) { .post-feed { padding-top: 5vw; } .post-card, .site-authors .author-card { margin: 0 20px 5vw; } }
@use 'sass:color';
.post-full-footer { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 3vw 0 6vw 0; max-width: 840px; }
.doi-card-doi-link .dor-card-doi-logo { height: 1.6rem; filter: grayscale(100%); }
.doi-card-doi-link:hover img { filter: grayscale(0); }
.author-card, .doi-card { display: flex; align-items: center; }
.author-card .author-profile-image, .doi-card .author-profile-image { margin-right: 15px; width: 60px; height: 60px; }
.author-card .author-card-content p, .author-card .doi-card-content p, .doi-card .author-card-content p, .doi-card .doi-card-content p { margin: 0; color: #77767b; line-height: 1.3em; }
.author-card-name { margin: 0 0 2px 0; padding: 0; font-size: 2rem; }
.author-card-name a { color: #15171A; font-weight: 700; }
.author-card-name a:hover { text-decoration: none; }
.post-full-footer-right { flex-shrink: 0; margin-left: 20px; }
.author-card-button { display: block; padding: 9px 16px; border: #929196 1px solid; color: #77767b; font-size: 1.2rem; line-height: 1; font-weight: 500; border-radius: 20px; transition: background-color 0.2s ease, color 0.2s ease; }
.author-card-button:hover { border-color: #1c71d8; color: #1c71d8; text-decoration: none; }
.post-full-comments { margin: 0 auto; max-width: 840px; }
.read-next-feed { display: flex; flex-wrap: wrap; margin: 0 -20px; padding: 40px 0 0 0; }
.read-next-card { position: relative; flex: 1 1 300px; display: flex; flex-direction: column; overflow: hidden; margin: 0 20px 40px; padding: 25px; color: #fff; background: #15171A center center; background-size: cover; border-radius: 5px; box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px; }
.read-next-card:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background: linear-gradient(135deg, rgba(0, 40, 60, 0.8) 0%, rgba(0, 20, 40, 0.7) 100%); border-radius: 5px; backdrop-filter: blur(2px); }
.read-next-card-header { position: relative; z-index: 50; padding-top: 20px; text-align: center; }
.read-next-card-header-sitetitle { display: block; font-size: 1.3rem; line-height: 1.3em; opacity: 0.8; }
.read-next-card-header-title { margin: 0; padding: 0 20px; color: #fff; font-size: 3rem; line-height: 1.2em; letter-spacing: 1px; }
.read-next-card-header-title a { color: #fff; font-weight: 300; text-decoration: none; }
.read-next-card-header-title a:hover { text-decoration: none; }
.read-next-divider { position: relative; display: flex; justify-content: center; height: 80px; }
.read-next-divider svg { width: 40px; fill: transparent; stroke: #fff; stroke-width: 0.5px; stroke-opacity: 0.65; }
.read-next-card-content { position: relative; z-index: 50; flex-grow: 1; display: flex; font-size: 1.7rem; }
.read-next-card-content ul { display: flex; flex-direction: column; margin: 0 auto; padding: 0; text-align: center; list-style: none; }
.read-next-card-content li { margin: 0; padding: 0; font-size: 1.6rem; line-height: 1.25em; font-weight: 200; letter-spacing: -0.5px; }
.read-next-card-content li a { display: block; padding: 20px 0; border-bottom: rgba(255, 255, 255, 0.3) 1px solid; color: #fff; font-weight: 500; vertical-align: top; transition: opacity 0.3s ease; }
.read-next-card-content li:first-of-type a { padding-top: 10px; }
.read-next-card-content li a:hover { opacity: 1; }
.read-next-card-footer { position: relative; margin: 15px 0 3px 0; text-align: center; }
.read-next-card-footer a { color: #fff; }
.floating-header { visibility: hidden; position: fixed; top: 0; right: 0; left: 0; z-index: 1000; display: flex; align-items: center; height: 60px; border-bottom: rgba(0, 0, 0, 0.06) 1px solid; background: rgba(255, 255, 255, 0.95); transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1), visibility 500ms; transform: translate3d(0, -120%, 0); }
.floating-active { visibility: visible; transition: transform 500ms cubic-bezier(0.22, 1, 0.27, 1), visibility 500ms; transform: translate3d(0, 0, 0); }
.floating-header-logo { overflow: hidden; margin: 0 0 0 20px; font-size: 1.6rem; line-height: 1em; letter-spacing: -1px; text-overflow: ellipsis; white-space: nowrap; }
.floating-header-logo a { display: flex; align-items: center; color: #15171A; line-height: 1.1em; font-weight: 700; }
.floating-header-logo a:hover { text-decoration: none; }
.floating-header-logo img { margin: 0 10px 0 0; max-height: 20px; }
.floating-header-divider { margin: 0 5px; line-height: 1em; }
.floating-header-title { flex: 1; overflow: hidden; margin: 0; color: #2e2e2e; font-size: 1.6rem; line-height: 1.3em; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.floating-header-share { display: flex; justify-content: flex-end; align-items: center; padding-left: 2%; font-size: 1.3rem; line-height: 1; }
.floating-header-share a { display: flex; justify-content: center; align-items: center; }
.floating-header-share svg { width: auto; height: 16px; fill: #fff; }
.floating-header-share-label { flex-shrink: 0; display: flex; align-items: center; margin-right: 10px; color: rgba(0, 0, 0, 0.7); font-weight: 500; }
.floating-header-share-label svg { margin: 0 5px 0 10px; width: 18px; height: 18px; stroke: rgba(0, 0, 0, 0.7); transform: rotate(90deg); }
.floating-header-share-tw, .floating-header-share-fb { display: block; align-items: center; width: 60px; height: 60px; color: #fff; line-height: 48px; text-align: center; transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1), visibility 500ms; }
.floating-header-share-tw { background: #33b1ff; }
.floating-header-share-fb { background: #005e99; }
.progress { position: absolute; right: 0; bottom: -1px; left: 0; width: 100%; height: 2px; border: none; color: #1c71d8; background: transparent; appearance: none; }
.progress::-webkit-progress-bar { background-color: transparent; }
.progress::-webkit-progress-value { background-color: #1c71d8; }
.progress::-moz-progress-bar { background-color: #1c71d8; }
.progress-container { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background-color: transparent; }
.progress-bar { display: block; width: 50%; height: inherit; background-color: #1c71d8; }
@media (max-width: 900px) { .floating-header { height: 40px; } .floating-header-title, .floating-header-logo { font-size: 1.5rem; } .floating-header-share-tw, .floating-header-share-fb { width: 40px; height: 40px; line-height: 38px; } }
@media (max-width: 800px) { .floating-header-logo { margin-left: 10px; } .floating-header-logo a { color: #2e2e2e; } .floating-header-title, .floating-header-divider { visibility: hidden; } }
@media (max-width: 450px) { .floating-header-share-label { display: none; } }
.post-template .site-main, .page-template .site-main { padding-bottom: 4vw; background: #fff; }
.post-full { position: relative; z-index: 50; }
/* ^ Required to make .post-full-content:before/after z-index stacking work */
.post-full-header { margin: 0 auto; padding: 6vw 3vw 3vw; max-width: 1040px; text-align: center; }
@media (max-width: 500px) { .post-full-header { padding: 14vw 3vw 10vw; } }
.post-full-meta { display: flex; justify-content: center; align-items: center; color: #77767b; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; }
.post-full-meta-date { color: #1c71d8; }
.post-full-title { margin: 0; color: #0a0b0c; }
.date-divider { display: inline-block; margin: 0 6px 1px; }
.post-full-image { margin: 0 -10vw -165px; height: 800px; background: #c5d2d9 center center; background-size: cover; border-radius: 5px; }
.post-image-attribution { background: #c5d2d9; margin: 0; padding: 0 .25em; display: inline-block; }
@media (max-width: 1170px) { .post-full-image { margin: 0 -4vw -100px; height: 600px; border-radius: 0; } }
@media (max-width: 800px) { .post-full-image { height: 400px; } }
.post-full-content { position: relative; margin: 0 auto; padding: 70px 100px 0; min-height: 230px; font-family: Georgia, serif; font-size: 2.2rem; line-height: 1.6em; background: #fff; }
@media (max-width: 1170px) { .post-full-content { padding: 5vw 7vw 0; } }
@media (max-width: 800px) { .post-full-content { font-size: 1.9rem; } }
.post-full-content:before { content: ""; position: absolute; top: 15px; left: -5px; z-index: -1; display: block; width: 20px; height: 200px; background: rgba(39, 44, 49, 0.15); filter: blur(5px); transform: rotate(-5deg); }
.post-full-content:after { content: ""; position: absolute; top: 15px; right: -5px; z-index: -1; display: block; width: 20px; height: 200px; background: rgba(39, 44, 49, 0.15); filter: blur(5px); transform: rotate(5deg); }
.no-image .post-full-content { padding-top: 0; }
.no-image .post-full-content:before, .no-image .post-full-content:after { display: none; }
.kg-card-markdown { display: flex; flex-direction: column; align-items: center; max-width: 920px; }
.post-full-content h1, .post-full-content h2, .post-full-content h3, .post-full-content h4, .post-full-content h5, .post-full-content h6, .post-full-content p, .post-full-content ul, .post-full-content ol, .post-full-content dl, .post-full-content pre, .post-full-content blockquote, .post-full-comments, .footnotes { min-width: 100%; }
.post-full-content li { word-break: break-word; }
.post-full-content li p { margin: 0; }
.post-template .kg-card-markdown > p:first-child { font-size: 1.25em; line-height: 1.5em; }
.post-full-content a { color: #000; box-shadow: #1c71d8 0 -1px 0 inset; }
.post-full-content a:hover { color: #1c71d8; text-decoration: none; }
.post-full-content strong, .post-full-content em { color: #141619; }
.post-full-content small { display: inline-block; line-height: 1.6em; }
.post-full-content li:first-child { margin-top: 0; }
.post-full-content img, .post-full-content video { display: block; margin: 1.5em auto; max-width: 1040px; /* keeps the aspect ratio when width: 100% below kicks in */ height: auto; }
@media (max-width: 1040px) { .post-full-content img, .post-full-content video { width: 100%; } }
/* Full bleed images (#full)
Super neat trick courtesy of @JoelDrapper
Usage (In Ghost edtior):
*/
.post-full-content img[src$="#full"] { max-width: none; width: 100vw; }
/* Image captions
Usage (In Ghost editor):
Your image caption
*/
.post-full-content img + br + small { display: block; margin-top: -3em; margin-bottom: 1.5em; }
.post-full-content iframe { margin: 0 auto; }
.post-full-content blockquote { margin: 0 0 1.5em; padding: 0 1.5em; border-left: #3eb0ef 3px solid; }
.post-full-content blockquote p { margin: 0 0 1em 0; color: inherit; font-size: inherit; line-height: inherit; font-style: italic; }
.post-full-content blockquote p:last-child { margin-bottom: 0; }
.post-full-content code { padding: 0 5px 2px; font-size: 0.8em; line-height: 1em; font-weight: 400 !important; background: #e5eff5; border-radius: 3px; }
.post-full-content pre { overflow-x: auto; margin: 1.5em 0 3em; padding: 20px; max-width: 100%; border: #131517 1px solid; color: #e5eff5; font-size: 1.4rem; line-height: 1.5em; background: #141619; border-radius: 5px; }
.post-full-content pre code { padding: 0; font-size: inherit; line-height: inherit; background: transparent; }
.post-full-content pre code * { color: inherit; }
.post-full-content .fluid-width-video-wrapper { margin: 1.5em 0 3em; }
.post-full-content hr { margin: 4vw 0; }
.post-full-content hr:after { content: ""; position: absolute; top: -15px; left: 50%; display: block; margin-left: -10px; width: 1px; height: 30px; background: #cbd7dd; box-shadow: #fff 0 0 0 5px; transform: rotate(45deg); }
.post-full-content h1, .post-full-content h2, .post-full-content h3, .post-full-content h4, .post-full-content h5, .post-full-content h6 { color: #141619; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
.post-full-content h1 { margin: 0.5em 0 0.2em 0; font-size: 4.6rem; font-weight: 700; }
@media (max-width: 500px) { .post-full-content h1 { font-size: 2.8rem; } }
.post-full-content h2 { margin: 0.5em 0 0.2em 0; font-size: 3.6rem; font-weight: 700; }
@media (max-width: 500px) { .post-full-content h2 { font-size: 2.6rem; } }
.post-full-content h3 { margin: 0.5em 0 0.2em 0; font-size: 2.8rem; font-weight: 700; }
@media (max-width: 500px) { .post-full-content h3 { font-size: 2.2rem; } }
.post-full-content h4 { margin: 0.5em 0 0.2em 0; font-size: 2.8rem; font-weight: 700; }
@media (max-width: 500px) { .post-full-content h4 { font-size: 2.2rem; } }
.post-full-content h5 { display: block; margin: 0.5em 0; padding: 1em 0 1.5em; border: 0; color: #1c71d8; font-family: Georgia, serif; font-size: 3.2rem; line-height: 1.35em; text-align: center; }
@media (min-width: 1180px) { .post-full-content h5 { max-width: 1060px; width: 100vw; } }
@media (max-width: 500px) { .post-full-content h5 { padding: 0 0 0.5em; font-size: 2.2rem; } }
.post-full-content h6 { margin: 0.5em 0 0.2em 0; font-size: 2.3rem; font-weight: 700; }
@media (max-width: 500px) { .post-full-content h6 { font-size: 2rem; } }
.footnotes-sep { margin-bottom: 30px; }
.footnotes { font-size: 1.5rem; }
.footnotes p { margin: 0; }
.footnote-backref { color: #1c71d8 !important; font-size: 1.2rem; font-weight: bold; text-decoration: none !important; box-shadow: none !important; }
/* Some grouped styles for smaller viewports */
@media (max-width: 500px) { .post-full-meta { font-size: 1.2rem; line-height: 1.3em; } .post-full-title { font-size: 2.9rem; } .post-full-image { margin-bottom: 4vw; height: 350px; } .post-full-content { padding: 0; } .post-full-content:before, .post-full-content:after { display: none; } }
/* Tables */
.post-full-content table { display: inline-block; overflow-x: auto; margin: 0.5em 0 2.5em; max-width: 100%; width: auto; border-spacing: 0; border-collapse: collapse; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 1.6rem; white-space: nowrap; vertical-align: top; }
.post-full-content table { -webkit-overflow-scrolling: touch; background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background-attachment: scroll, scroll; background-size: 10px 100%, 10px 100%; background-repeat: no-repeat; }
.post-full-content table td:first-child { background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%); background-size: 20px 100%; background-repeat: no-repeat; }
.post-full-content table td:last-child { background-image: linear-gradient(to left, white 50%, rgba(255, 255, 255, 0) 100%); background-position: 100% 0; background-size: 20px 100%; background-repeat: no-repeat; }
.post-full-content table th { color: #15171A; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.2px; text-align: left; text-transform: uppercase; background-color: #e6f0f5; }
.post-full-content table th, .post-full-content table td { padding: 6px 12px; border: #d7f0fe 1px solid; }
.site-header-content .author-profile-image { z-index: 10; flex-shrink: 0; margin: 0 0 20px 0; width: 100px; height: 100px; box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px; }
.site-header-content .author-bio { z-index: 10; flex-shrink: 0; margin: 5px 0 10px 0; max-width: 600px; font-size: 2rem; line-height: 1.3em; font-weight: 300; letter-spacing: 0.5px; opacity: 0.8; }
.site-header-content .author-meta { z-index: 10; flex-shrink: 0; display: flex; justify-content: center; align-items: center; margin: 0 0 10px 0; font-family: Georgia, serif; font-style: italic; }
.site-header-content .author-location svg { height: 1.9rem; stroke: #fff; }
.site-header-content .bull { display: inline-block; margin: 0 12px; opacity: 0.5; }
.site-header-content .social-link:first-of-type { padding-left: 4px; }
@media (max-width: 500px) { .site-header-content .author-bio { font-size: 1.8rem; line-height: 1.15em; letter-spacing: 0; } .author-location, .author-stats { display: none; } }
.site-authors .author-meta ul { list-style: none; margin-left: 0; padding-left: 0; }
.site-authors .author-meta ul .social-link { justify-content: left; }
.site-authors .author-meta ul svg { margin-right: 1em; }
.site-authors .author-card { align-items: flex-start !important; padding: 1em; min-height: 50px; }
.site-authors .author-card .social-link { color: #15171A; }
.site-authors .author-card .social-link svg { fill: #15171A; }
.error-template .site-main { padding: 7vw 4vw; }
.site-nav-center { display: flex; justify-content: center; align-items: center; text-align: center; }
.site-nav-center .site-nav-logo { margin-right: 0; }
.error-message { text-align: center; }
.error-code { margin: 0; font-size: 12vw; line-height: 1em; letter-spacing: -5px; opacity: 0.3; }
.error-description { margin: 0; color: #77767b; font-size: 3rem; line-height: 1.3em; font-weight: 400; }
@media (max-width: 800px) { .error-description { margin: 5px 0 0 0; font-size: 1.8rem; } }
.error-link { display: inline-block; margin-top: 5px; }
.error-template .post-feed { padding-top: 0; }
.subscribe-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9000; display: flex; justify-content: center; align-items: center; background: rgba(0, 25, 40, 0.97); opacity: 0; transition: opacity 200ms ease-in; pointer-events: none; backdrop-filter: blur(3px); }
.subscribe-overlay:target { opacity: 1; pointer-events: auto; }
.subscribe-overlay-content { position: relative; z-index: 9999; margin: 0 0 5vw 0; padding: 4vw; color: #fff; text-align: center; }
.subscribe-overlay-logo { position: fixed; top: 23px; left: 30px; height: 30px; }
.subscribe-overlay-title { display: inline-block; margin: 0 0 10px 0; font-size: 6rem; line-height: 1.15em; }
.subscribe-overlay-description { margin: 0 auto 50px; max-width: 650px; font-family: Georgia, serif; font-size: 3rem; line-height: 1.3em; font-weight: 300; opacity: 0.8; }
.subscribe-overlay form { display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 500px; }
.subscribe-overlay .form-group { flex-grow: 1; }
.subscribe-overlay .subscribe-email { display: block; padding: 14px 20px; width: 100%; border: none; color: #77767b; font-size: 2rem; line-height: 1em; font-weight: normal; letter-spacing: 0.5px; user-select: text; border-radius: 8px; transition: border-color 0.15s linear; -webkit-appearance: none; }
.subscribe-email:focus { outline: 0; border-color: #c0ced6; }
.subscribe-overlay button { display: inline-block; margin: 0 0 0 15px; padding: 0 25px; height: 52px; outline: none; color: #fff; font-size: 1.7rem; line-height: 37px; font-weight: 400; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); background: #036ae8; border-radius: 8px; box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14); -webkit-font-smoothing: subpixel-antialiased; }
.subscribe-overlay button:active, .subscribe-overlay button:focus { background: #036ff1; }
.subscribe-overlay-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.subscribe-overlay-close:before { content: ""; position: absolute; top: 40px; right: 25px; display: block; width: 30px; height: 2px; background: #fff; opacity: 0.8; transform: rotate(45deg); }
.subscribe-overlay-close:after { content: ""; position: absolute; top: 40px; right: 25px; display: block; width: 30px; height: 2px; background: #fff; opacity: 0.8; transform: rotate(-45deg); }
.subscribe-overlay-close:hover { cursor: default; }
.site-footer { position: relative; padding-top: 20px; padding-bottom: 60px; color: #fff; background: #121416; }
.site-footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.7); font-size: 1.3rem; }
.site-footer-content a { color: rgba(255, 255, 255, 0.7); }
.site-footer-content a:hover { color: white; text-decoration: none; }
.site-footer-nav { display: flex; }
.site-footer-nav a { position: relative; margin-left: 20px; }
.site-footer-nav a:before { content: ""; position: absolute; top: 11px; left: -11px; display: block; width: 2px; height: 2px; background: #fff; border-radius: 100%; }
.site-footer-nav a:first-of-type:before { display: none; }
@media (max-width: 650px) { .site-footer-content { flex-direction: column; } .site-footer-nav a:first-child { margin-left: 0; } }
/* The main wrapper for our pagination links */
.pagination { position: relative; width: 80%; max-width: 800px; margin: 4rem auto; font-family: "Open Sans", sans-serif; font-size: 1.3rem; color: #15171A; text-align: center; }
.pagination a { color: #1555a2; transition: color 0.2s ease, background-color 0.2s ease; }
/* Push the previous/next links out to the left/right */
.older-posts, .newer-posts { position: absolute; display: inline-block; padding: 0 15px; border: #bfc8cd 1px solid; text-decoration: none; border-radius: 4px; transition: border 0.3s ease; }
.older-posts { right: 0; }
.page-number { display: inline-block; padding: 2px 0; min-width: 100px; }
.newer-posts { left: 0; }
.older-posts:hover, .newer-posts:hover { color: #1c71d8; border-color: #98a0a4; }
.extra-pagination { display: none; border-bottom: #EBF2F6 1px solid; }
.extra-pagination:after { display: block; content: ""; width: 7px; height: 7px; border: #E7EEF2 1px solid; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; background: #FFF; border-radius: 100%; box-shadow: #FFF 0 0 0 5px; }
.extra-pagination .pagination { width: auto; }
/* On page2+ make all the headers smaller */
.paged .main-header { max-height: 30vh; }
/* On page2+ show extra pagination controls at the top of post list */
.paged .extra-pagination { display: block; }
/* Every post, on every page, gets this style on its tag */
.pagination { padding-top: 4rem; border-top: #bfc8cd 1px solid; word-wrap: break-word; }
/* Add a little circle in the middle of the border-bottom on our .post just for the lolz and stylepoints. */
.pagination:before { display: block; content: ""; width: 7px; height: 7px; border: #bfc8cd 1px solid; position: absolute; top: -5px; left: 50%; margin-left: -5px; background: #f4f8fb; border-radius: 100%; box-shadow: #f4f8fb 0 0 0 5px; }
/* Solarized Dark
For use with Jekyll and Pygments
http://ethanschoonover.com/solarized
SOLARIZED HEX ROLE
--------- -------- ------------------------------------------
base03 #002b36 background
base01 #93a1a1 comments / secondary content (lightened for AA on #002b36)
base1 #93a1a1 body text / default code / primary content
orange #e8915a constants (lightened for AA)
red #f26d4f regex, special keywords (lightened for AA)
blue #6cb6ff reserved keywords (lightened for AA)
cyan #2aa198 strings, numbers
green #859900 operators, other keywords
*/
.highlight { background-color: #002b36; color: #93a1a1; }
figure.highlight, .highlight pre, .highlight code, .highlight table, .highlight tbody, .highlight tr, td.code { border: none; /* the 800px cap was a leftover of the rouge table layout and left code blocks inset from the text column */ min-width: 100%; max-width: 100%; }
.highlight table, .highlight td pre { padding: 0; margin: 0; }
.highlight table td { border: none; margin: 0; padding: 0; }
.highlight table td:first-child, .highlight table td:last-child { background: none; }
.highlight .c { color: #93a1a1; }
/* Comment */
.highlight .err { color: #93a1a1; }
/* Error */
.highlight .g { color: #93a1a1; }
/* Generic */
.highlight .k { color: #859900; }
/* Keyword */
.highlight .l { color: #93a1a1; }
/* Literal */
.highlight .n { color: #93a1a1; }
/* Name */
.highlight .o { color: #859900; }
/* Operator */
.highlight .x { color: #e8915a; }
/* Other */
.highlight .p { color: #93a1a1; }
/* Punctuation */
.highlight .cm { color: #93a1a1; }
/* Comment.Multiline */
.highlight .cp { color: #859900; }
/* Comment.Preproc */
.highlight .c1 { color: #93a1a1; }
/* Comment.Single */
.highlight .cs { color: #859900; }
/* Comment.Special */
.highlight .gd { color: #2aa198; }
/* Generic.Deleted */
.highlight .ge { color: #93a1a1; font-style: italic; }
/* Generic.Emph */
.highlight .gr { color: #f26d4f; }
/* Generic.Error */
.highlight .gh { color: #e8915a; }
/* Generic.Heading */
.highlight .gi { color: #859900; }
/* Generic.Inserted */
.highlight .go { color: #93a1a1; }
/* Generic.Output */
.highlight .gp { color: #93a1a1; }
/* Generic.Prompt */
.highlight .gs { color: #93a1a1; font-weight: bold; }
/* Generic.Strong */
.highlight .gu { color: #e8915a; }
/* Generic.Subheading */
.highlight .gt { color: #93a1a1; }
/* Generic.Traceback */
.highlight .kc { color: #e8915a; }
/* Keyword.Constant */
.highlight .kd { color: #6cb6ff; }
/* Keyword.Declaration */
.highlight .kn { color: #859900; }
/* Keyword.Namespace */
.highlight .kp { color: #859900; }
/* Keyword.Pseudo */
.highlight .kr { color: #6cb6ff; }
/* Keyword.Reserved */
.highlight .kt { color: #f26d4f; }
/* Keyword.Type */
.highlight .ld { color: #93a1a1; }
/* Literal.Date */
.highlight .m { color: #2aa198; }
/* Literal.Number */
.highlight .s { color: #2aa198; }
/* Literal.String */
.highlight .na { color: #93a1a1; }
/* Name.Attribute */
.highlight .nb { color: #B58900; }
/* Name.Builtin */
.highlight .nc { color: #6cb6ff; }
/* Name.Class */
.highlight .no { color: #e8915a; }
/* Name.Constant */
.highlight .nd { color: #6cb6ff; }
/* Name.Decorator */
.highlight .ni { color: #e8915a; }
/* Name.Entity */
.highlight .ne { color: #e8915a; }
/* Name.Exception */
.highlight .nf { color: #6cb6ff; }
/* Name.Function */
.highlight .nl { color: #93a1a1; }
/* Name.Label */
.highlight .nn { color: #93a1a1; }
/* Name.Namespace */
.highlight .nx { color: #93a1a1; }
/* Name.Other */
.highlight .py { color: #93a1a1; }
/* Name.Property */
.highlight .nt { color: #6cb6ff; }
/* Name.Tag */
.highlight .nv { color: #6cb6ff; }
/* Name.Variable */
.highlight .ow { color: #859900; }
/* Operator.Word */
.highlight .w { color: #93a1a1; }
/* Text.Whitespace */
.highlight .mf { color: #2aa198; }
/* Literal.Number.Float */
.highlight .mh { color: #2aa198; }
/* Literal.Number.Hex */
.highlight .mi { color: #2aa198; }
/* Literal.Number.Integer */
.highlight .mo { color: #2aa198; }
/* Literal.Number.Oct */
.highlight .sb { color: #93a1a1; }
/* Literal.String.Backtick */
.highlight .sc { color: #2aa198; }
/* Literal.String.Char */
.highlight .sd { color: #93a1a1; }
/* Literal.String.Doc */
.highlight .s2 { color: #2aa198; }
/* Literal.String.Double */
.highlight .se { color: #e8915a; }
/* Literal.String.Escape */
.highlight .sh { color: #93a1a1; }
/* Literal.String.Heredoc */
.highlight .si { color: #2aa198; }
/* Literal.String.Interpol */
.highlight .sx { color: #2aa198; }
/* Literal.String.Other */
.highlight .sr { color: #f26d4f; }
/* Literal.String.Regex */
.highlight .s1 { color: #2aa198; }
/* Literal.String.Single */
.highlight .ss { color: #2aa198; }
/* Literal.String.Symbol */
.highlight .bp { color: #6cb6ff; }
/* Name.Builtin.Pseudo */
.highlight .vc { color: #6cb6ff; }
/* Name.Variable.Class */
.highlight .vg { color: #6cb6ff; }
/* Name.Variable.Global */
.highlight .vi { color: #6cb6ff; }
/* Name.Variable.Instance */
.highlight .il { color: #2aa198; }
/* Literal.Number.Integer.Long */
@media (prefers-color-scheme: dark) { body { background: #0a0b0c; color: #c4c4c6; } .post-card, .site-authors .author-card { background: #191c1f center center; color: #c4c4c6; } .post-card-content-link, .post-full-content a { color: #c4c4c6; } .post-template .site-main, .page-template .site-main { background: #0a0b0c; color: #c4c4c6; } .post-full-meta { color: #c4c4c6; } .post-full-title { color: #c4c4c6; } .post-full-content { background: #191c1f; } .post-full-content h1, .post-full-content h2, .post-full-content h3, .post-full-content h4, .post-full-content h5, .post-full-content h6 { color: #c4c4c6; } .post-image-attribution { background: #020303; } .post-full-content code { color: #e5eff5; background: #020303; } .post-full-content strong, .post-full-content em { color: #c4c4c6; } .author-card-name a { color: #c4c4c6; } }
/* accessibility: focus visibility, skip link, reduced motion, dark-mode color scheme */
:root { color-scheme: light; }
/* visible focus for keyboard users only, so mouse clicks stay clean */
:focus-visible { outline: 2px solid #1c71d8; outline-offset: 2px; border-radius: 2px; }
/* the floating header is sticky, keep anchored headings out from under it */
h1, h2, h3, h4, h5, h6 { scroll-margin-top: 7rem; }
.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 1000; padding: 1rem 1.6rem; background: #fff; color: #1965c1; font-weight: 600; text-decoration: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
.skip-link:focus { top: 1rem; }
/* icon-only links get a real touch target without changing the icon size */
.social-link { padding: 1rem; margin: -1rem; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .floating-header, .floating-active { transform: none; } }