:root { --background-color: #fff; --foreground-color: #333; --link-color-hue: 151; --link-color: hsl(var(--link-color-hue), 44.7%, 50%); --link-color-hover: hsl(var(--link-color-hue), 44.7%, 45%); --signature-color: #666; --date-color: #aaa; --header-background-color: #111; --header-foreground-color: #eee; --header-link-color: #ddd; --code-background-color: #f6f6f6; --code-foreground-color: #444; } html { height: 100%; } body { min-height: 100%; font-family: 'Merriweather Sans', sans-serif; background-color: var(--background-color); color: var(--foreground-color); } a, a:focus { transition: color .3s ease-in-out; color: var(--link-color); } a:hover, a:active { color: var(--link-color-hover); } ul, ol { padding-left: 25px; } code { color: var(--code-foreground-color); background-color: var(--code-background-color); } pre code { overflow-x: auto; overflow-wrap: normal; white-space: pre; } blockquote { font-size: 14px; } header { background-color: var(--header-background-color); color: var(--header-foreground-color); padding: 40px; h1 { text-transform: uppercase; font-size: 50px; letter-spacing: 15px; margin: 0; padding-left: 4px; } } #index header { display: inline-flex; flex-direction: column; ul { display: flex; justify-content: space-between; flex-grow: 1; padding: 0 15px 0 0; li { list-style: none; } } } @media (max-width: 767px) { header { padding: 30px; display: block; h1 { letter-spacing: 5px; font-size: 40px; } } #index header ul { display: block; li { display: list-item; } } } header h1 a, header h1 a:focus { color: #eee; } header h1 a:hover { text-decoration: none; } header ul { margin: 25px 0 0; } header ul li { padding-bottom: 20px; } header ul a { color: var(--header-link-color); font-weight: 700; } header ul a:hover, header ul a:active { color: var(--link-color); text-decoration: none; } .content { padding: 40px; max-width: 1000px; line-height: 24px; } @media (max-width: 767px) { .content { padding: 30px; } } .content h2 { margin-top: 0; } .content h3 { margin-top: 25px; margin-bottom: 15px; } .content h4 { margin-top: 25px; margin-bottom: 15px; } .content p { margin-bottom: 15px; } .content p:last-child { margin-bottom: 0; } .content ul { margin-bottom: 15px; } .content li { margin-bottom: 15px; } .content img { max-width: 100%; } .content .footnotes { margin-top: 60px; font-size: 12px; } .content .footnotes:before { content: "Footnotes:"; margin-bottom: 10px; display: block; font-style: italic; } /* Not the foot note items themselves, but any list items contained inside. */ .content .footnotes ol li li { margin-bottom: 10px; } .content h1 > a.anchor, .content h2 > a.anchor, .content h3 > a.anchor, .content h4 > a.anchor, .content h5 > a.anchor, .content h6 > a.anchor { visibility: hidden; padding-left: 0.375em; font-style: italic; } .content h1 > a.anchor:before, .content h2 > a.anchor:before, .content h3 > a.anchor:before, .content h4 > a.anchor:before, .content h5 > a.anchor:before, .content h6 > a.anchor:before { content: '#'; } .content h1:hover > a.anchor, .content h2:hover > a.anchor, .content h3:hover > a.anchor, .content h4:hover > a.anchor, .content h5:hover > a.anchor, .content h6:hover > a.anchor { visibility: visible; } p.date { color: var(--date-color); } p.date a, p.date a:visited { color: var(--date-color) !important; text-decoration: underline; } p.date a:hover, p.date a:active { color: var(--link-color) !important; } p.signature { margin-top: 60px; color: var(--signature-color); } .post h2 { margin-bottom: 20px; } .date-header { font-weight: bold; font-family: monospace; } .presentation-list .date { font-family: monospace; padding-right: 10px; } .presentation-list small { padding-left: 5px; } @media (max-width: 767px) { .presentation-list .date { display: block; } .presentation-list small { display: block; padding-left: 0; } } .presentation section { margin-top: 20px; margin-botom: 20px; } .presentation .description { margin-bottom: 50px; } .presentation .youtube, .presentation .vimeo { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .presentation .youtube iframe, .presentation .vimeo iframe, .presentation .youtube object, .presentation .vimeo object, .presentation .youtube embed, .presentation .vimeo embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } img.float-right { margin: 0 1em .5em 1em; float: right; } @media (max-width: 500px) { img.float-right { float: none; display: block; margin: 1em auto; } } dt { margin-bottom: 5px; } dd { margin: 0 0 10px 10px; } table { margin-bottom: 15px; } td, th { padding: 2px 8px; }