From ea54421b15c9705f86a8d25a6caaa40791d66e18 Mon Sep 17 00:00:00 2001 From: Thedro Neely Date: Tue, 19 Jul 2022 11:59:45 -0400 Subject: app: Refactor and CSS rewrite --- public/css/bulma-timeline.css | 754 ---------- public/css/syntax-highlight.css | 6 +- public/css/tdro-dark.css | 353 +++-- public/css/tdro.css | 3136 ++++++++++++++++++--------------------- public/js/app.js | 88 +- 5 files changed, 1632 insertions(+), 2705 deletions(-) delete mode 100644 public/css/bulma-timeline.css (limited to 'public') diff --git a/public/css/bulma-timeline.css b/public/css/bulma-timeline.css deleted file mode 100644 index b1476be..0000000 --- a/public/css/bulma-timeline.css +++ /dev/null @@ -1,754 +0,0 @@ -@-webkit-keyframes spinAround { - from { - -webkit-transform: rotate(0); - transform: rotate(0) - } - - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg) - } - -} - -@keyframes spinAround { - from { - -webkit-transform: rotate(0); - transform: rotate(0) - } - - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg) - } - -} - -.timeline { - display: flex; - flex-direction: column -} - -.timeline .timeline-header { - width: 4em; - min-width: 4em; - max-width: 8em; - word-wrap: normal; - text-align: center; - display: flex; - justify-content: center -} - -.timeline .timeline-item { - display: flex; - display: -webkit-flex; - position: relative; - margin-left: 0.35em; - padding-bottom: 2em -} - -.timeline .timeline-item::before { - content: ""; - background-color: #dbdbdb; - display: block; - width: 1px; - height: 100%; - position: absolute; - left: 0; - top: 0 -} - -.timeline .timeline-item .timeline-marker { - position: absolute; - background: #b3cfe6; - border: 3px solid #fff; - border-radius: 100%; - content: ""; - display: block; - height: .8em; - left: -.35em; - top: 1.2rem; - width: .8em -} - -.timeline .timeline-item .timeline-marker.is-image { - background: #dbdbdb; - border: .1em solid #dbdbdb; - border-radius: 100%; - display: block; - overflow: hidden -} - -.timeline .timeline-item .timeline-marker.is-image.is-16x16 { - height: 16px; - width: 16px; - left: -8px -} - -.timeline .timeline-item .timeline-marker.is-image.is-24x24 { - height: 24px; - width: 24px; - left: -12px -} - -.timeline .timeline-item .timeline-marker.is-image.is-32x32 { - height: 32px; - width: 32px; - left: -16px -} - -.timeline .timeline-item .timeline-marker.is-image.is-48x48 { - height: 48px; - width: 48px; - left: -24px -} - -.timeline .timeline-item .timeline-marker.is-image.is-64x64 { - height: 64px; - width: 64px; - left: -32px -} - -.timeline .timeline-item .timeline-marker.is-image.is-96x96 { - height: 96px; - width: 96px; - left: -48px -} - -.timeline .timeline-item .timeline-marker.is-image.is-128x128 { - height: 128px; - width: 128px; - left: -64px -} - -.timeline .timeline-item .timeline-marker.is-icon { - display: flex; - align-items: center; - justify-content: center; - height: 1.5em; - width: 1.5em; - left: -.7em; - line-height: .75rem; - padding: .25rem; - background: #dbdbdb; - border: .1em solid #dbdbdb; - border-radius: 100% -} - -.timeline .timeline-item .timeline-marker.is-icon>i { - color: #fff; - font-size: .75rem !important -} - -.timeline .timeline-item .timeline-marker.is-outlined .image { - background: #fff -} - -.timeline .timeline-item .timeline-marker.is-outlined.is-icon { - background: #fff -} - -.timeline .timeline-item .timeline-marker.is-outlined.is-icon>i { - color: #dbdbdb -} - -.timeline .timeline-item .timeline-marker.is-white { - background-color: #fff !important; - border-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white .image { - border-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-icon { - background-color: #fff !important; - border-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-icon>i { - color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-outlined { - background-color: #fff !important; - border-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-black { - background-color: #0a0a0a !important; - border-color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-black .image { - border-color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-icon { - background-color: #0a0a0a !important; - border-color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-outlined { - background-color: #fff !important; - border-color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon>i { - color: #0a0a0a !important -} - -.timeline .timeline-item .timeline-marker.is-light { - background-color: #f5f5f5 !important; - border-color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-light .image { - border-color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-icon { - background-color: #f5f5f5 !important; - border-color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-icon>i { - color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-outlined { - background-color: #fff !important; - border-color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon>i { - color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-dark { - background-color: #363636 !important; - border-color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-dark .image { - border-color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-icon { - background-color: #363636 !important; - border-color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-icon>i { - color: #f5f5f5 !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-outlined { - background-color: #fff !important; - border-color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon>i { - color: #363636 !important -} - -.timeline .timeline-item .timeline-marker.is-primary { - background-color: #00d1b2 !important; - border-color: #00d1b2 !important -} - -.timeline .timeline-item .timeline-marker.is-primary .image { - border-color: #00d1b2 !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-icon { - background-color: #00d1b2 !important; - border-color: #00d1b2 !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-outlined { - background-color: #fff !important; - border-color: #00d1b2 !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon>i { - color: #00d1b2 !important -} - -.timeline .timeline-item .timeline-marker.is-link { - background-color: #3273dc !important; - border-color: #3273dc !important -} - -.timeline .timeline-item .timeline-marker.is-link .image { - border-color: #3273dc !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-icon { - background-color: #3273dc !important; - border-color: #3273dc !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-outlined { - background-color: #fff !important; - border-color: #3273dc !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon>i { - color: #3273dc !important -} - -.timeline .timeline-item .timeline-marker.is-info { - background-color: #209cee !important; - border-color: #209cee !important -} - -.timeline .timeline-item .timeline-marker.is-info .image { - border-color: #209cee !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-icon { - background-color: #209cee !important; - border-color: #209cee !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-outlined { - background-color: #fff !important; - border-color: #209cee !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon>i { - color: #209cee !important -} - -.timeline .timeline-item .timeline-marker.is-success { - background-color: #23d160 !important; - border-color: #23d160 !important -} - -.timeline .timeline-item .timeline-marker.is-success .image { - border-color: #23d160 !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-icon { - background-color: #23d160 !important; - border-color: #23d160 !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-outlined { - background-color: #fff !important; - border-color: #23d160 !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon>i { - color: #23d160 !important -} - -.timeline .timeline-item .timeline-marker.is-warning { - background-color: #ffdd57 !important; - border-color: #ffdd57 !important -} - -.timeline .timeline-item .timeline-marker.is-warning .image { - border-color: #ffdd57 !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-icon { - background-color: #ffdd57 !important; - border-color: #ffdd57 !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-icon>i { - color: rgba(0, 0, 0, .7) !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-outlined { - background-color: #fff !important; - border-color: #ffdd57 !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon>i { - color: #ffdd57 !important -} - -.timeline .timeline-item .timeline-marker.is-danger { - background-color: #ff3860 !important; - border-color: #ff3860 !important -} - -.timeline .timeline-item .timeline-marker.is-danger .image { - border-color: #ff3860 !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-icon { - background-color: #ff3860 !important; - border-color: #ff3860 !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-icon>i { - color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-outlined { - background-color: #fff !important; - border-color: #ff3860 !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-outlined .image { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon { - background-color: #fff !important -} - -.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon>i { - color: #ff3860 !important -} - -.timeline .timeline-item .timeline-content { - padding: 1em 0 0 .5em; - padding: 1em 0 0 2em -} - -.timeline .timeline-item .timeline-content .heading { - font-weight: 600 -} - -.timeline .timeline-item.is-white::before { - background-color: #fff -} - -.timeline .timeline-item.is-black::before { - background-color: #0a0a0a -} - -.timeline .timeline-item.is-light::before { - background-color: #f5f5f5 -} - -.timeline .timeline-item.is-dark::before { - background-color: #363636 -} - -.timeline .timeline-item.is-primary::before { - background-color: #00d1b2 -} - -.timeline .timeline-item.is-link::before { - background-color: #3273dc -} - -.timeline .timeline-item.is-info::before { - background-color: #209cee -} - -.timeline .timeline-item.is-success::before { - background-color: #23d160 -} - -.timeline .timeline-item.is-warning::before { - background-color: #ffdd57 -} - -.timeline .timeline-item.is-danger::before { - background-color: #ff3860 -} - -.timeline.is-centered .timeline-header { - display: flex; - width: 100%; - align-self: center -} - -.timeline.is-centered .timeline-item { - width: 50%; - align-self: flex-end -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) { - align-self: flex-start; - margin-left: 0; - margin-right: 2em -} - -.timeline.is-centered .timeline-item:nth-of-type(2n)::before { - right: -.1em; - left: auto -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker { - left: auto; - right: -.45em -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-16x16 { - left: auto; - right: -8px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-24x24 { - left: auto; - right: -12px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-32x32 { - left: auto; - right: -16px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-48x48 { - left: auto; - right: -24px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-64x64 { - left: auto; - right: -32px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-96x96 { - left: auto; - right: -48px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-128x128 { - left: auto; - right: -64px -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-icon { - left: auto; - right: -.8em -} - -.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-content { - padding: 1em 2em 0 0; - text-align: right; - display: flex; - flex-direction: column; - align-items: flex-end; - flex-basis: 100% -} - -.timeline.is-centered .timeline-item:nth-of-type(2n+1)::before { - content: ""; - background-color: #dbdbdb; - display: block; - width: .1em; - height: 100%; - position: absolute; - top: 0 -} - -.timeline.is-centered .timeline-item.is-white::before { - background-color: #fff -} - -.timeline.is-centered .timeline-item.is-black::before { - background-color: #0a0a0a -} - -.timeline.is-centered .timeline-item.is-light::before { - background-color: #f5f5f5 -} - -.timeline.is-centered .timeline-item.is-dark::before { - background-color: #363636 -} - -.timeline.is-centered .timeline-item.is-primary::before { - background-color: #00d1b2 -} - -.timeline.is-centered .timeline-item.is-link::before { - background-color: #3273dc -} - -.timeline.is-centered .timeline-item.is-info::before { - background-color: #209cee -} - -.timeline.is-centered .timeline-item.is-success::before { - background-color: #23d160 -} - -.timeline.is-centered .timeline-item.is-warning::before { - background-color: #ffdd57 -} - -.timeline.is-centered .timeline-item.is-danger::before { - background-color: #ff3860 -} - -.timeline.is-rtl { - justify-content: flex-end; - align-items: flex-end -} - -.timeline.is-rtl .timeline-item { - justify-content: flex-end; - border-left: none; - margin-left: 0; - margin-right: 2em -} - -.timeline.is-rtl .timeline-item::before { - right: 0; - left: auto -} - -.timeline.is-rtl .timeline-item .timeline-marker { - left: auto; - right: -.35em -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-16x16 { - left: auto; - right: -8px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-24x24 { - left: auto; - right: -12px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-32x32 { - left: auto; - right: -16px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-48x48 { - left: auto; - right: -24px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-64x64 { - left: auto; - right: -32px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-96x96 { - left: auto; - right: -48px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-128x128 { - left: auto; - right: -64px -} - -.timeline.is-rtl .timeline-item .timeline-marker.is-icon { - left: auto; - right: -.7em -} - -.timeline.is-rtl .timeline-item .timeline-content { - padding: 1em 2em 0 0; - text-align: right -} - -.timeline.no-headers .timeline-item.is-first::before { - height: calc(100% - 1.2rem); - top: 1.2rem -} - -.timeline.no-headers .timeline-item.is-last::before { - height: 1.2rem -} diff --git a/public/css/syntax-highlight.css b/public/css/syntax-highlight.css index bc2fc10..40be532 100644 --- a/public/css/syntax-highlight.css +++ b/public/css/syntax-highlight.css @@ -1,3 +1,8 @@ +/* ----- Colors ----- */ + +code-block language-label { background-color: #0079ad; } +code-block language-label a { color: #fff; } + /* Background */ .chroma { color: #f8f8f2; background-color: #002e42; } /* Error */ .chroma .err { color: #960050; background-color: #1e0010; } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } @@ -5,7 +10,6 @@ /* LineHighlight */ .chroma .hl { display: block; background-color: #004766; padding: 0 1.25rem; margin: 0 -1.25rem; } /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } -/* LanguageLabel */ .chroma code:before { color: #e6e6e6; background-color: #006894; } /* Keyword */ .chroma .k { color: #93ddfd } /* KeywordConstant */ .chroma .kc { color: #66d9ef } diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css index 556183f..6da0590 100644 --- a/public/css/tdro-dark.css +++ b/public/css/tdro-dark.css @@ -1,11 +1,24 @@ -html { - background-color: #001f2c; -} +/* Dark Semantic CSS */ + +::selection { + color: #000; + background-color: #999; +} + +::-webkit-selection { + color: #000; + background-color: #999; +} + +::-moz-selection { + color: #000; + background-color: #999; +} + a { color: #75b2f0; } -a:focus, -a:focus span { +a:focus { color: #fff; background-color: #005d85; } @@ -16,197 +29,239 @@ a:hover img { a:focus img { outline: 9px dashed #75b2f0; } -a.navbar-item:hover { - color: #fff !important; -} + img { box-shadow: none; filter: brightness(75%); } + +html { + background-color: #001f2c; +} + body, -.document h1 a, -.document h2 a, -.document h3 a, -nav#TableOfContents a { +resume-page article > section h1 { color: #cad6e2; } -.document a { - color: #eee; -} -.article__list li:hover, -nav#TableOfContents li:hover { - background-color: #002e42; -} -.leftnote, -.rightnote, -mark { - color: #a9bdd0; -} -.medium-zoom-overlay { + +body .medium-zoom-overlay { background-color: #001f2c; background-color: rgba(0, 31, 44, 0.9); } -.navbar-item, -.subtitle, -.has-text-grey-dark { - color: #fff !important; + +video { + color: transparent; } -.dropdown-content { + +body > nav { background-color: #002e42; - border: 1px solid #00405c; -} -.dropdown-content a.navbar-item:hover, -.dropdown-content .theme-toggle-button:hover { - color: #fff; - background-color: #005d85; -} -.dropdown-content .navbar__active { - background-color: #004766; -} -.has-text-danger { - color: #ff8f93 !important; -} -.has-text-primary { - color: #a6c9e8 !important; -} -.footer a { - color: #bbb; + box-shadow: 0 0px 10px 0 #000; } -.footer { - padding: 1.5rem; -} -.navbar { - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5); -} -.navbar, -.navbar-menu { + +input, +textarea { background-color: #002e42; - background-color: rgba(0, 46, 66, 0.95); -} -a.navbar-item:focus, -a.navbar-item:hover, -.navbar-item:hover label { + border-color: transparent; color: #fff; } -.navbar__icon:hover svg, -.navbar__icon:hover svg, -.navbar__icon:hover label svg { - fill: #af0c00; -} -.title, -.content h1, -.content h2, -.content h3 { - color: #ddd; -} -.button.is-link.is-outlined, -.button.is-success.is-outlined { - border-color: #cad6e2; - color: #cad6e2; - border-width: 1px; -} -.input, -.textarea { - background-color: #002e42; - border-color: transparent; - color: white; + +article a, +body > footer a, +article-subsection a { + color: #eee; } -.item__box { + +button, +button-anchor a, +pagination-controller a, +input[type="submit"], +input[type="button"] { color: #fff; background-color: #004766; + box-shadow: none; } -.item__box:hover, -.item__box:hover svg, -.item__box:focus svg { + +button:hover, +button-anchor a:hover, +pagination-controller a, +input[type="submit"]:hover, +input[type="button"]:hover { + background-color: #005980; +} + +button:hover svg, +button-anchor:hover svg { color: #fff; + fill: #0961aa; +} + +nav column-middle > a, +nav column-middle > a[data-active], +nav column-middle context-menu a, +nav column-middle context-menu a[data-active], +nav column-middle context-menu button, +nav column-middle more-button { + color: #f1f1f1; +} + +nav column-middle > a[data-active] svg { + fill: #0961aa; +} + +a, +home-page article a, +recent-articles h2 a { + color: #75b2f0; } -.message__success { - background-color: #55a1ec; - border: 1px solid #1259a1; - color: black; + +article > mark, +margin-note-aside:hover label span, +margin-note-aside:hover margin-note a, +margin-note-aside:hover margin-note mark, +side-note-aside:hover label span, +side-note-aside:hover side-note a, +side-note-aside:hover side-note mark { + background-color: #042f52; + color: #fff; } -.pagination-link.is-current { - background-color: #004766; - border-color: #00608a; - color: #fff !important; + +input, +button, +textarea, +input[type="submit"], +input[type="button"], +button-anchor a, +home-page label, +home-page article > h1, +pagination-controller a { + color: #fff; } -.pagination-previous, -.pagination-next, -.pagination-link { - border-color: #002e42; - color: #cad6e2; - min-width: 2.25em; + +footer, +footer a, +body > footer, +figcaption, +figcaption code, +article-archive-list time, +article-meta-bottom a, +article-meta-bottom, +article-meta-top a, +article-meta-top, +article-more-content time, +article-on-web time, +article-summary-meta, +blockquote-footer, +home-page article > h2, +margin-note[left], +margin-note[right], +side-note[left], +side-note[right], +table-contents a, +table-contents h2, +taxonomy-archive-list time, +taxonomy-list time, +video-container footer a { + color: #bfbfbf; +} + +nav column-middle > a:hover, +nav column-middle more-button:hover { + color: #fff; } -.pagination-previous:hover, -.pagination-next:hover, -.pagination-link:hover, -.pagination-previous.disabled, -.pagination-next.disabled { - color: #cad6e2; + +nav column-middle a:hover svg, +nav column-middle more-button:hover svg { + fill: #dd4b50; } -.pagination-previous.disabled, -.pagination-next.disabled { + +context-menu-content { background-color: #002e42; - border-color: #002e42; - color: #fff; + border-color: #00405c; } -.navbar__active { - color: #fff !important; + +nav column-middle context-menu a[data-active] { + background-color: #004766; } -.navbar__active svg { - fill: #0073ca; + +nav column-middle context-menu a:hover, +nav column-middle context-menu button:hover { + color: #fff; + background-color: #005d85; } -@media screen and (max-width: 1087px) { - .theme-toggle-button { - color: #cad6e2; - } + +article-archive-list li:hover, +taxonomy-list > section ul li:hover, +taxonomy-archive-list > section ul li:hover { + background-color: #002e42; } -#isso-thread > h4 { - color: #b7c7d7; + +resume-page timeline-item aside { + border: 3px solid #001f2c; } -#isso-thread .textarea.placeholder { - color: #cad6e2; + +home-page article > h1 em { + color: #f48a8e; } -.isso-postbox > .form-wrapper > .auth-section .input-wrapper input { - background-color: #002e42; - color: white; + +[data-danger] { + color: #ff8585; } -.isso-postbox > .form-wrapper .textarea, -.isso-postbox > .form-wrapper .preview { + +contact-page aside { background-color: #002e42; + border-color: #008fcc; } -.isso-comment > div.text-wrapper > .isso-comment-header .author { - color: #fff; -} -.isso-comment-footer .upvote svg, -.isso-comment-footer .downvote svg { - fill: white; -} + +/* ---------------------------------------------------------- */ + input::placeholder, textarea::placeholder { color: #cad6e2; } + input::-moz-placeholder, textarea::-moz-placeholder { color: #cad6e2; } + input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cad6e2; } + input:-moz-placeholder, textarea:-moz-placeholder { color: #cad6e2; } + input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cad6e2; } -.isso-postbox > .form-wrapper > .auth-section .post-action > input { - border: 1px solid #557181; - background-color: transparent; + +#isso-thread > h4 { + color: #b7c7d7; +} + +#isso-thread .textarea.placeholder { + color: #cad6e2; +} + +.isso-postbox > .form-wrapper > .auth-section .input-wrapper input { + background-color: #002e42; color: white; } + +.isso-comment .textarea, +.isso-postbox > .form-wrapper .textarea, +.isso-postbox > .form-wrapper .preview { + background-color: #002e42; +} + +.isso-comment > div.text-wrapper > .isso-comment-header .author { + color: #ccc; +} + .isso-postbox > .form-wrapper .preview { background-color: #001f2c; background: repeating-linear-gradient( @@ -217,29 +272,11 @@ textarea:-ms-input-placeholder { #002e42 20px ); } + .isso-comment > div.text-wrapper > .isso-comment-header .permalink { color: #ccc; } + .isso-comment > div.text-wrapper > .text a { color: #cad6e2; } -.is-success:focus, -.is-link:focus { - background-color: #75b2f0 !important; - color: #121212 !important; - border-color: #75b2f0 !important; -} -.timeline .timeline-item .timeline-marker { - border: 3px solid #001f2c !important; -} -article > mark, -.sidenote-container:hover .sidenote-mark span, -.sidenote-container:hover .sidenote mark, -.marginnote-container:hover .marginnote-mark span, -.marginnote-container:hover .marginnote mark, -.sidenote-container:hover .sidenote a, -.marginnote-container:hover .marginnote a { - color: #fcfcfc; - background-color: #005d85; - border-color: #af0c00; -} diff --git a/public/css/tdro.css b/public/css/tdro.css index 1ac9e18..fd845d0 100644 --- a/public/css/tdro.css +++ b/public/css/tdro.css @@ -1,94 +1,85 @@ -/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */ +/* ----- Semantic Pact CSS ----- */ -.button, -.pagination-previous, -.pagination-next, -.pagination-link, -.pagination-ellipsis { - user-select: none; +*, +*::before, +*::after { + box-sizing: inherit; } -.box:not(:last-child), -.content:not(:last-child), -.table:not(:last-child), -.title:not(:last-child), -.subtitle:not(:last-child), -.block:not(:last-child), -.highlight:not(:last-child), -.level:not(:last-child), -.list:not(:last-child), -article > mark:not(:last-child), -.message:not(:last-child) { - margin-bottom: 1.5rem; +:focus { + outline: none; } -.button, -.input, -.textarea, -.pagination-previous, -.pagination-next, -.pagination-link, -.pagination-ellipsis { - appearance: none; - align-items: center; - border: 1px solid transparent; - border-radius: 4px; - box-shadow: none; - display: inline-flex; - font-size: 1rem; - height: 2.5em; - justify-content: flex-start; - line-height: 1.5; - padding-bottom: calc(0.5em - 1px); - padding-left: calc(0.75em - 1px); - padding-right: calc(0.75em - 1px); - padding-top: calc(0.5em - 1px); - position: relative; - vertical-align: top; +:target::before { + content: ""; + display: block; + height: 5rem; + margin-top: -5rem; + visibility: hidden; } -.button:focus, -.input:focus, -.textarea:focus, -.pagination-previous:focus, -.pagination-next:focus, -.pagination-link:focus, -.pagination-ellipsis:focus, -.button:active, -.input:active, -.textarea:active, -.pagination-previous:active, -.pagination-next:active, -.pagination-link:active, -.pagination-ellipsis:active { - outline: none; +::selection { + text-shadow: 0 0 currentColor; } -.button[disabled], -.input[disabled], -.textarea[disabled], -.pagination-previous[disabled], -.pagination-next[disabled], -.pagination-link[disabled], -.pagination-previous.disabled, -.pagination-next.disabled, -.pagination-ellipsis[disabled] { - cursor: not-allowed; +::-webkit-selection { + text-shadow: 0 0 currentColor; +} + +::-moz-selection { + text-shadow: 0 0 currentColor; +} + +img::selection { + background-color: transparent; +} + +img::-webkit-selection { + background-color: transparent; +} + +img::-moz-selection { + background-color: transparent; +} + +h1:target, +h2:target, +h3:target { + text-decoration: underline; + text-decoration-style: double; +} + +a:hover { + border-bottom: 2px solid; + text-shadow: 0 0 currentColor; +} + +a:focus { + border-bottom: 3px solid; +} + +a:hover img { + box-shadow: 0 8px 32px; +} + +a:focus img, +:focus:not(article-thumbnail a):not(abstract-thumbnail a):not(figure + > a):not(nav column-middle a):not(tile-item a), +:focus-visible:not(article-thumbnail a):not(abstract-thumbnail a):not(figure + > a):not(nav column-middle a):not(tile-item a) { + border-radius: 0.25rem; + box-shadow: 0 0 0 0.125rem #4992d0; + outline: none; } -/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, body, p, ol, ul, li, -dl, -dt, -dd, blockquote, figure, -fieldset, legend, textarea, pre, @@ -97,23 +88,11 @@ hr, h1, h2, h3, -h4, -h5, -h6 { +h4 { margin: 0; padding: 0; } -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: 100%; - font-weight: normal; -} - button, input, select, @@ -121,31 +100,6 @@ textarea { margin: 0; } -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -img, -video { - max-width: 100%; -} - -html { - background-color: #fcfcfc; - font-size: 16px; - min-width: 300px; - overflow-x: hidden; - overflow-y: scroll; - text-rendering: optimizeLegibility; - text-size-adjust: 100%; -} - article, aside, figure, @@ -156,11 +110,18 @@ section { display: block; } -body { - color: #222; - font-size: 1rem; - font-weight: 400; - line-height: 1.8; +html { + box-sizing: border-box; + font-size: 16px; + overflow-y: scroll; + padding-top: 4rem; + text-rendering: optimizeLegibility; + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +figure > a:focus { + background-color: transparent; } code { @@ -173,8 +134,6 @@ code { } hr { - background-color: #ddd; - border: none; display: block; height: 1px; margin: 1.5rem 0; @@ -184,12 +143,7 @@ img { height: auto; max-width: 100%; border-radius: 0.1em; - box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1); -} - -input[type="checkbox"], -input[type="radio"] { - vertical-align: baseline; + box-shadow: 0 4px 12px 0; } span { @@ -202,10 +156,10 @@ strong * { } pre { - border-radius: 3px; - font-size: 0.875em; + border-radius: 0.25rem; + font-size: 0.875rem; max-width: 100%; - overflow-x: scroll; + overflow-x: auto; padding: 1.25em 1.5em; white-space: pre; word-wrap: normal; @@ -215,1774 +169,1247 @@ pre code { background-color: transparent; color: currentColor; display: inline-block; - font-size: 1em; + font-size: 0.875rem; min-width: 100%; - padding: 0.75em 0 0 0; position: relative; } -pre code:before { - border-radius: 0 0 0.25em 0.25em; - content: attr(data-lang); - font-size: 0.9em; - letter-spacing: 0.01rem; - line-height: 1; - padding: 0.25em 0.5em; - position: absolute; - left: 0; - text-transform: uppercase; - top: -1.4em; +button:hover svg, +button-anchor:hover svg { + stroke-width: 2px; } -.is-pulled-right { - float: right !important; +a, +home-page article a, +recent-articles h2 a { + border-bottom: 1px solid; + overflow-wrap: break-word; + text-decoration: none; } -.is-size-3 { - font-size: 2rem !important; +video { + display: inline-block; + box-shadow: 0 0.25rem 1rem; + max-width: 100%; } -.is-size-4 { - font-size: 1.5rem !important; +video-container { + display: block; + text-align: center; } -.is-size-5 { - font-size: 1.25rem !important; +figure { + text-align: center; } -.is-size-6 { - font-size: 1rem !important; +ul { + list-style: none; + margin-top: 1rem; } -.is-size-7 { - font-size: 0.75rem !important; +h1, +h2, +h3, +h4 { + font-size: 100%; + font-weight: 400; } -.has-text-centered { - text-align: center !important; +footer, +figcaption, +figcaption code { + font-size: 95%; + margin-bottom: 1rem; + margin-top: 0.5rem; + text-align: center; } -.has-text-left { - text-align: left !important; +ul + ul, +li + li { + margin-top: 0.25rem; } -.has-text-right { - text-align: right !important; +input[type="text"], +input[type="email"] { + height: 2.5rem; + max-width: 100%; + width: 100%; } -.is-uppercase { - text-transform: uppercase !important; +textarea { + height: 2.5rem; + max-width: 100%; + min-width: 100%; + min-height: 8rem; + resize: vertical; } -.has-text-white { - color: white !important; +button, +textarea, +input[type="text"], +input[type="email"], +input[type="submit"], +input[type="button"] { + -webkit-appearance: none; + appearance: none; } -.has-text-primary { - color: #245a8a !important; +input, +button, +textarea, +button-anchor a, +pagination-controller a { + border-radius: 0.25rem; + border: 1px solid; + font-size: 1rem; + padding: 0.5rem; } -.has-text-danger { - color: #f05a60 !important; +button, +input[type="submit"], +input[type="button"], +button-anchor a, +pagination-controller a { + align-items: center; + border: 0 solid transparent; + cursor: pointer; + display: flex; + height: 2rem; + justify-content: center; + padding: 0.25rem 1rem; } -a.has-text-danger:hover, -a.has-text-danger:focus { - color: #ff0537 !important; +button svg, +button-anchor a svg { + stroke-width: 1.5px; + width: 20px; + height: 20px; } -.has-text-grey-dark { - color: #4a4a4a !important; +button span, +button-anchor a span { + padding-left: 0.5rem; } -.has-text-grey { - color: #7a7a7a !important; +ol { + counter-reset: ol; } -.has-text-weight-normal { - font-weight: 400 !important; +ol { + margin-left: 4rem; + margin-top: 1.5rem; } -.has-text-weight-semibold { - font-weight: 600 !important; +ol li { + -ms-hyphens: auto; + -ms-word-break: normal; + overflow-wrap: break-word; + word-break: break-word; + font-size: 1.25rem; + list-style: none; } -.has-text-weight-bold { - font-weight: 700 !important; +ol li + li { + margin-top: 1rem; } -.is-block { - display: block !important; +ol li:before { + border-radius: 100%; + border: 1px solid; + content: counter(ol); + counter-increment: ol; + font-size: 1rem; + font-weight: 700; + margin-left: -2.75rem; + margin-top: 0.25rem; + padding: 0 0.5rem; + position: absolute; } -.is-flex { - display: flex !important; +ol:not(:last-child) { + margin-bottom: 1.5rem; } -.is-inline { - display: inline !important; +body { + font-size: 1rem; + font-weight: 400; + line-height: 1.8; + margin: 0 auto; + max-width: 1152px; } -.is-inline-block { - display: inline-block !important; +main { + min-height: 450px; } -.is-inline-flex { - display: inline-flex !important; +main article { + min-height: 450px; } -.is-hidden { - display: none !important; +article > mark:not(:last-child) { + margin-bottom: 1.5rem; } -.button { - background-color: transparent; - border-color: #dbdbdb; - border-width: 1px; - color: #363636; - cursor: pointer; - justify-content: center; - padding-bottom: calc(0.375em - 1px); - padding-left: 0.75em; - padding-right: 0.75em; - padding-top: calc(0.375em - 1px); +body > footer { + font-size: 75%; text-align: center; - white-space: nowrap; + margin: 0; } -.button strong { - color: inherit; +article p { + font-size: 1.25rem; + margin-bottom: 1.5rem; } -.button.is-text { - background-color: transparent; - border-color: transparent; -} +/* ----- Tables ----- */ -.button[disabled] { - background-color: white; - border-color: #dbdbdb; - box-shadow: none; - opacity: 0.5; +table { + border-collapse: collapse; + border-spacing: 0; + margin-bottom: 1.5rem; + width: 100%; } -.container { - flex-grow: 1; - margin: 0 auto; - position: relative; - width: auto; +table, +table code { + font-size: 1.15rem; } -@media screen and (min-width: 1088px) { - .container { - max-width: 960px; - } +table th { + font-weight: 700; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: 0.05rem; + padding: 0.4rem; } -@media screen and (min-width: 1280px) { - .container { - max-width: 1152px; - } +table td, +table th { + vertical-align: top; + padding: 0; + padding: 0.4rem; + min-width: 8rem; } -.content li + li { - margin-top: 0.5em; +table td:not([align]), +table th:not([align]) { + text-align: left; } -.content p:not(:last-child), -.content dl:not(:last-child), -.content ol:not(:last-child), -.content ul:not(:last-child), -.content blockquote:not(:last-child), -.content pre:not(:last-child), -.content table:not(:last-child) { - margin-bottom: 1.5rem; +@media (max-width: 550px) { + table { + table-layout: fixed; + } } -.content h1 { - font-size: 2em; - margin-bottom: 0.5em; -} +/* ----- Fonts ----- */ -.content h1:not(:first-child) { - margin-top: 1em; +ol li, +article p, +article h1, +article h2, +article h3, +article-on-web h3, +side-note-aside label, +margin-note-aside label, +article-more-content h3 { + font-family: Charter, Georgia, "Book Antiqua", serif; } -.content h2 { - font-size: 1.75em; - margin-bottom: 0.5714em; +body, +input, +button, +select, +textarea, +side-note-aside, +margin-note-aside, +blockquote-footer, +table-contents h2, +home-page article p, +home-page article h1, +home-page article h2, +resume-page article p, +resume-page article h1, +contact-page article p, +contact-page article h1, +home-page margin-note-aside label { + font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; } -.content h2:not(:first-child) { - margin-top: 1.1428em; +pre, +code, +blockquote p { + font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace; } -.content h3 { - font-size: 1.5em; - margin-bottom: 0.6666em; +h1 { + margin-bottom: 1.5rem; + font-size: 2.5rem; + line-height: 1.25; +} + +h2 { + font-size: 1.75rem; + margin-bottom: 0.75rem; + margin-top: 1.15rem; + line-height: 1.5; } -.content h3:not(:first-child) { - margin-top: 1.3333em; +h3 { + font-size: 1.5rem; + line-height: 1.5; } -.content blockquote { +blockquote { padding: 0 1.5em; margin-left: 5%; - margin-bottom: 1.3em !important; + margin-bottom: 1.5rem; } -.content ul, -ul { - list-style: none; - margin-top: 1em; +blockquote-footer { + font-size: 85%; + text-align: right; + display: block; + margin-top: 1rem; } -.content ul ul { - list-style-type: circle; - margin-top: 0.5em; +home-page-intro { + padding: 1rem; + display: block; + margin-bottom: 1rem; } -.content ul ul ul { - list-style-type: square; +home-page label { + display: inline-block !important; + line-height: 1.125; + margin-bottom: 1.5rem; + font-size: 1.5rem; } -.content dd { - margin-left: 2em; +home-page article > h1 { + font-size: 2rem; + line-height: 1.125; + margin-bottom: 0; } -.content figure { - margin-bottom: 1em; - text-align: center; +home-page article > h1 em { + font-style: normal; } -.content sup, -.content sub { - font-size: 75%; +home-page article > h2 { + font-size: 1.25rem; + margin-bottom: 1.5rem; + margin-top: 0.5rem; } -.title, -.subtitle { - word-break: break-word; +home-page article p, +contact-page article p { + font-size: 100%; } -.title em, -.title span, -.subtitle em, -.subtitle span { - font-weight: inherit; +home-page-posts > a, +home-page-projects > a { + text-decoration: none; + text-align: center; + display: block; + text-transform: uppercase; } -.title sub, -.subtitle sub { - font-size: 0.75em; +home-page-posts > a svg, +home-page-projects > a svg { + display: inline-block; + vertical-align: middle; } -.title sup, -.subtitle sup { - font-size: 0.75em; +home-page recent-projects article-thumbnail { + flex: 2; } -.title .tag, -.subtitle .tag { - vertical-align: middle; +recent-projects article-thumbnail { + flex: none; } -.title { - color: #363636; - font-size: 2rem; - font-weight: 600; - line-height: 1.125; +upload-page h1 { + text-align: center; } -.title strong { - color: inherit; - font-weight: inherit; +article-subsection h1, +contact-page article h1, +abstracts-page article-list h1 { + font-size: 2rem; } -.title + .highlight { - margin-top: -0.75rem; +fortune-quote b { + display: block; + margin-bottom: 0.25rem; } -.title:not(.is-spaced) + .subtitle { - margin-top: -1.25rem; +contact-page form label { + letter-spacing: 0.05rem; + text-transform: uppercase; + margin: 0.5rem 0; + display: block; } -.title.is-1 { - font-size: 3rem; +contact-page form textarea { + margin-bottom: 1rem; } -.title.is-2 { - font-size: 2.5rem; +contact-page field-set { + display: flex; + margin: 0; + padding: 0; } -.title.is-3 { - font-size: 2rem; +contact-page form field-set section { + flex: 1; } -.title.is-4 { - font-size: 1.5rem; +contact-page form field-set section + section { + margin-left: 0.75rem; } -.title.is-5 { - font-size: 1.125rem; +contact-page input[name="agree"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 0; + width: 0; + z-index: -1; } -.title.is-6 { - font-size: 1rem; +contact-page aside { + border-radius: 0.5rem; + border: 1px solid; + margin-bottom: 1rem; + padding: 1rem; } -.title.is-7 { - font-size: 0.75rem; +contact-page aside p { + margin: 0; } -.subtitle { - color: #4a4a4a; - font-size: 1.25rem; - font-weight: 400; - line-height: 1.8; +article, +body > footer, +article-list, +taxonomy-list, +article-on-web, +article-comments, +article-subsection, +article-meta-bottom, +article-archive-list, +taxonomy-archive-list, +article-more-content { + max-width: 62%; + padding: 1.5rem; + display: block; + margin: 0 auto; + transform: translateY(0); } -.subtitle strong { - color: #363636; - font-weight: 600; +@media screen and (max-width: 768px) { + article, + body > footer, + article-list, + taxonomy-list, + article-on-web, + article-comments, + article-subsection, + article-meta-bottom, + article-archive-list, + taxonomy-archive-list, + article-more-content { + max-width: 100%; + } } -.subtitle:not(.is-spaced) + .title { - margin-top: -1.25rem; +taxonomy-list h2, +article-on-web h2, +article-comments h2, +article-more-content h2, +taxonomy-archive-list h2 { + font-size: 1.25rem; + text-transform: uppercase; + margin-bottom: 1.5rem; + letter-spacing: 0.1rem; } -.subtitle.is-6 { - font-size: 1rem; +article-list { + margin-top: 1rem; } -.heading { - display: block; - font-size: 11px; - letter-spacing: 1px; - margin-bottom: 5px; - text-transform: uppercase; +article-list recent-abstracts { + display: flex; + margin: 0 -0.75rem; } -.highlight { - font-weight: 400; - max-width: 100%; - overflow: hidden; - padding: 0; +abstracts-page article-list { + margin-top: 0; } -.highlight:focus-within { - outline: 0.25rem solid #ff8383; +article-more-content li { + display: flex; + align-items: baseline; } -.input, -.textarea, -.select select { - background-color: #f9f9f9; - border-color: #ccc; - color: #363636; - max-width: 100%; - width: 100%; - font-weight: 400; - border-radius: 3px; +article-more-content li h3 { + flex: 1; + padding-right: 1rem; } -.input:focus, -.textarea:focus, -.is-focused.input, -.is-focused.textarea, -.input:active, -.textarea:active, -.is-active.input, -.is-active.textarea { - border-color: #4992d0; - box-shadow: 0 0 0 0.125em rgba(73, 146, 208, 0.5); +article-more-content ul + ul { + margin-top: 1.5rem; } -.input[disabled], -.textarea[disabled] { - background-color: whitesmoke; - border-color: whitesmoke; - box-shadow: none; - color: #7a7a7a; +article-meta-top { + margin-bottom: 1.5rem; } -.is-danger.input, -.is-danger.textarea { - border-color: #ff3860; +article-summary-meta { + margin-bottom: 0.75rem; } -.textarea { - display: block; - max-width: 100%; - min-width: 100%; - padding: 0.625em; - resize: vertical; +article-meta-top, +article-summary-meta { + display: flex; + align-items: center; + flex-wrap: wrap; } -.textarea:not([rows]) { - min-height: 120px; +article-meta-top a { + text-decoration: underline; } -.textarea[rows] { - height: initial; +article-meta-top aside { + display: flex; + align-items: center; + width: 100%; + flex-wrap: wrap; } -.checkbox, -.radio { - cursor: pointer; +abstract-summary-meta svg, +article-summary-meta svg, +article-meta-top svg { + height: 1rem; + margin-right: 0.35rem; + width: 1rem; display: inline-block; - line-height: 1.25; - position: relative; + vertical-align: middle; } -.checkbox input, -.radio input { - cursor: pointer; +article-summary-meta *:not(svg), +article-meta-top aside *:not(svg) { + margin-right: 0.5rem; } -.checkbox:hover, -.radio:hover { - color: #363636; +abstract-summary-meta footer { + text-align: inherit; } -.checkbox[disabled], -.radio[disabled] { - color: #7a7a7a; - cursor: not-allowed; +taxonomy-list > h1 { + font-size: 2rem; + font-variant: small-caps; + letter-spacing: 0.05rem; + text-transform: lowercase; + margin: 0; } -.radio + .radio { - margin-left: 0.5em; +taxonomy-list hr { + margin: 1rem 0; } -.field:not(:last-child) { - margin-bottom: 0.75rem; +taxonomy-list li, +taxonomy-archive-list li, +article-archive-list li { + line-height: 2.5; } -.field.has-addons { - display: flex; - justify-content: flex-start; +article-archive-list ul, +taxonomy-list > section ul, +taxonomy-archive-list > section ul { + margin-bottom: 1rem; + margin-left: -0.5rem; } -.field.has-addons .control:not(:last-child) { - margin-right: -1px; +taxonomy-archive-list h1, +article-archive-list h1 { + font-size: 1.5rem; + line-height: 1.125; + margin-bottom: 1rem; } -.field.has-addons .control:not(:first-child):not(:last-child) .button, -.field.has-addons .control:not(:first-child):not(:last-child) .input, -.field.has-addons .control:not(:first-child):not(:last-child) .select select { - border-radius: 0; +taxonomy-list time, +taxonomy-archive-list time, +article-archive-list time { + padding-right: 1rem; + text-transform: uppercase; + flex: initial; } -.field.has-addons .control:first-child:not(:only-child) .button, -.field.has-addons .control:first-child:not(:only-child) .input, -.field.has-addons .control:first-child:not(:only-child) .select select { - border-bottom-right-radius: 0; - border-top-right-radius: 0; +taxonomy-list ul a, +taxonomy-archive-list ul a, +article-archive-list ul a { + display: flex; + padding: 0 0.5rem; + align-items: baseline; } -.field.has-addons .control:last-child:not(:only-child) .button, -.field.has-addons .control:last-child:not(:only-child) .input, -.field.has-addons .control:last-child:not(:only-child) .select select { - border-bottom-left-radius: 0; - border-top-left-radius: 0; +taxonomy-archive-list span, +article-archive-list span { + flex: 3; + line-height: 1.5; } -.field.has-addons .control .button:not([disabled]):hover, -.field.has-addons .control .button:not([disabled]).is-hovered, -.field.has-addons .control .input:not([disabled]):hover, -.field.has-addons .control .input:not([disabled]).is-hovered, -.field.has-addons .control .select select:not([disabled]):hover, -.field.has-addons .control .select select:not([disabled]).is-hovered { - z-index: 2; +article-archive-link a { + text-decoration: none; + text-align: center; + display: block; + text-transform: uppercase; } -.field.has-addons .control .button:not([disabled]):focus, -.field.has-addons .control .button:not([disabled]).is-focused, -.field.has-addons .control .button:not([disabled]):active, -.field.has-addons .control .button:not([disabled]).is-active, -.field.has-addons .control .input:not([disabled]):focus, -.field.has-addons .control .input:not([disabled]).is-focused, -.field.has-addons .control .input:not([disabled]):active, -.field.has-addons .control .input:not([disabled]).is-active, -.field.has-addons .control .select select:not([disabled]):focus, -.field.has-addons .control .select select:not([disabled]).is-focused, -.field.has-addons .control .select select:not([disabled]):active, -.field.has-addons .control .select select:not([disabled]).is-active { - z-index: 3; +article-archive-link a svg { + vertical-align: bottom; } -.field.has-addons .control .button:not([disabled]):focus:hover, -.field.has-addons .control .button:not([disabled]).is-focused:hover, -.field.has-addons .control .button:not([disabled]):active:hover, -.field.has-addons .control .button:not([disabled]).is-active:hover, -.field.has-addons .control .input:not([disabled]):focus:hover, -.field.has-addons .control .input:not([disabled]).is-focused:hover, -.field.has-addons .control .input:not([disabled]):active:hover, -.field.has-addons .control .input:not([disabled]).is-active:hover, -.field.has-addons .control .select select:not([disabled]):focus:hover, -.field.has-addons .control .select select:not([disabled]).is-focused:hover, -.field.has-addons .control .select select:not([disabled]):active:hover, -.field.has-addons .control .select select:not([disabled]).is-active:hover { - z-index: 4; +article-meta-bottom, +article-more-content, +article-on-web { + padding: 2.5rem 1.5rem; } -.field.has-addons .control.is-expanded { - flex-grow: 1; - flex-shrink: 1; +article-on-web button-anchor { + float: right; } -@media screen and (min-width: 769px), print { - .field.is-horizontal { - display: flex; - } +article-on-web li + li { + margin-top: 1.5rem; } -.field-body .field .field { - margin-bottom: 0; +article-meta-bottom { + text-align: right; } -@media screen and (min-width: 400px), print { - .field-body { - display: flex; - flex-basis: 0; - flex-grow: 5; - flex-shrink: 1; - } - .field-body .field { - margin-bottom: 0; - } - .field-body > .field { - flex-shrink: 1; - } - .field-body > .field:not(.is-narrow) { - flex-grow: 1; - } - .field-body > .field:not(:last-child) { - margin-right: 0.75rem; - } +article-card { + align-items: center; + display: flex; + margin-bottom: 3rem; } -.control { - box-sizing: border-box; - clear: both; - font-size: 1rem; - position: relative; - text-align: left; +article-card h2 { + font-size: 1.125rem; + margin: 0; } -.dropdown { - display: inline-flex; - position: relative; - vertical-align: top; +article-thumbnail { + display: block; + flex: 2; + margin-right: 2rem; + text-align: center; } -.dropdown.is-right .dropdown-menu { - left: auto; - right: 0; +article-summary { + flex: 3; } -.dropdown.is-menu .dropdown-menu { - top: 0.5rem; - right: 0.5rem; +article-summary p { + margin-bottom: 0.75rem; } -.dropdown-menu { - display: none; - left: 0; - min-width: 6.25rem; - padding-top: 4px; - position: absolute; - top: 100%; - z-index: 20; +article-summary h2 { + font-weight: 700; + margin-bottom: 0.125rem; } -.dropdown-content { - background-color: #fafafa; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), - 0 0px 0 1px rgba(10, 10, 10, 0.02); - padding-bottom: 0.5rem; - padding-top: 0.5rem; +abstract-card { + flex: 1; + margin: 0.75rem; + text-align: center; } -.navbar { - background-color: white; - min-height: 3.25rem; - position: relative; - z-index: 30; +abstract-card h2 { + font-weight: 700; + font-size: 100%; } -.navbar > .container { - align-items: stretch; +pagination-controller nav { display: flex; - min-height: 3.25rem; - width: 100%; + margin-bottom: 1.5rem; } -.navbar.is-fixed-bottom, -.navbar.is-fixed-top { - left: 0; - position: fixed; - right: 0; - z-index: 30; +pagination-controller ul { + display: flex; + justify-content: center; + margin: 0; + flex-grow: 1; } -.navbar.is-fixed-top { - top: 0; +pagination-controller li { + margin: 0; +} + +pagination-controller [data-pagination-current] { + font-weight: 700; } -html.has-navbar-fixed-top, -body.has-navbar-fixed-top { - padding-top: 3.25rem; +pagination-ellipsis { + padding: 0 0.5rem; } -.navbar-menu { - display: none; +pagination-ellipsis, +pagination-controller a { + align-items: center; + display: inline-flex; + font-size: 1rem; + height: 2.5rem; + justify-content: center; + margin: 0.25rem; } -.navbar-item .icon:only-child, -.navbar-link .icon:only-child { - margin-left: -0.25rem; - margin-right: -0.25rem; +table-contents { + clear: right; + float: right; + font-size: 1rem; + letter-spacing: 0.01rem; + margin-bottom: 1rem; + margin-right: -22vw; + max-width: 22em; + overflow-wrap: break-word; + padding-right: 1.125rem; + user-select: none; + width: 18vw; + word-break: break-word; } -a.navbar-item, -.navbar-link { - cursor: pointer; +table-contents h2 { + font-size: 1rem; + font-weight: 700; + letter-spacing: 0.1rem; + margin-bottom: 0.25rem; + text-transform: uppercase; + line-height: 1.5; } -.navbar-item { +table-contents a { display: block; - flex-grow: 0; - flex-shrink: 0; + font-size: 0.8125rem; + padding: 0.125rem 0 0.125rem 0.5rem; } -@media screen and (max-width: 1087px) { - .navbar > .container { - display: block; - } - .navbar-menu { - background-color: white; - box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); - padding: 0.5rem 0; - } - .navbar.is-fixed-top .navbar-menu, - .navbar.is-fixed-top-touch .navbar-menu { - -webkit-overflow-scrolling: touch; - max-height: calc(100vh - 3.25rem); - overflow: auto; - } +table-contents ul { + margin-left: -0.5rem; } -@media screen and (min-width: 1088px) { - .navbar, - .navbar-menu, - .navbar-start, - .navbar-end { - align-items: stretch; - display: flex; - } - .navbar { - min-height: 4rem; - } - .navbar-item, - .navbar-link { - align-items: center; - display: flex; - } - .navbar-item { - display: flex; - } - .navbar-menu { - flex-grow: 1; - flex-shrink: 0; - } - .navbar > .container .navbar-menu, - .container > .navbar .navbar-menu { - margin-right: -0.75rem; - } +table-contents li + li { + margin-top: 0.25rem; } -.pagination { - font-size: 1rem; - margin: -0.25rem; +code-block { + display: block; + margin-bottom: 1.5rem; } -.pagination, -.pagination-list { - align-items: center; +code-block header { + margin: -1rem 2rem 0 2rem; + text-align: right; display: flex; - justify-content: center; - text-align: center; - margin: 0; + justify-content: flex-end; } -.pagination-previous, -.pagination-next, -.pagination-link, -.pagination-ellipsis { - font-size: 1em; - justify-content: center; - margin: 0.25rem; - padding-left: 0.5em; - padding-right: 0.5em; - text-align: center; +code-block div:focus-within { + outline: 0.25rem solid #ff8383; + outline-offset: -0.15rem; } -.pagination-previous, -.pagination-next, -.pagination-link { - border-color: #dbdbdb; - color: #363636; - min-width: 2.5em; +code-block language-label { + line-height: 1.25; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + text-transform: uppercase; } -.pagination-previous:hover, -.pagination-next:hover, -.pagination-link:hover { - border-color: #b5b5b5; - color: #363636; - border-width: 1px; +code-block language-label code { + font-size: 85%; + padding: 0 0.5rem; } -.pagination-previous:focus, -.pagination-next:focus, -.pagination-link:focus { - border-color: #3273dc; +tile-set { + align-items: stretch; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + margin-bottom: -0.75rem; + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; + min-height: min-content; } -.pagination-previous:active, -.pagination-next:active, -.pagination-link:active { - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); +tile-item { + align-items: stretch; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; + padding: 0.75rem; + display: flex; } -.pagination-previous[disabled], -.pagination-next[disabled], -.pagination-link[disabled], -.pagination-previous.disabled, -.pagination-next.disabled { - background-color: #dbdbdb; - border-color: #dbdbdb; - box-shadow: none; - color: #7a7a7a; - opacity: 0.5; +small-caps { + font-variant: small-caps; + letter-spacing: 0.05rem; + line-height: 0; + text-transform: lowercase; } -.pagination-previous, -.pagination-next { - padding-left: 0.75em; - padding-right: 0.75em; - white-space: nowrap; +small-caps[intro] { + font-size: 2rem !important; + text-transform: none; } -.pagination-link.is-current { - background-color: #3273dc; - border-color: #3273dc; - color: #fff; - font-weight: bold; +resume-page { + display: flex; + min-height: 100vh; + margin-top: -4rem; } -.pagination-ellipsis { - color: #b5b5b5; - pointer-events: none; +resume-page column-left { + background-image: url("/images/shells.jpg"); + background-position: center; + background-size: cover; + display: block; + flex: none; + min-height: 50vh; + padding: 0.75rem; + width: 33%; } -.pagination-list { - flex-wrap: wrap; +resume-page column-left p a { + font-size: 0.75rem; + border-bottom: none; + padding: 10px; + border-radius: 3px; + margin-bottom: 1.5rem; } -@media screen and (max-width: 768px) { - .pagination { - flex-wrap: wrap; - } - .pagination-previous, - .pagination-next { - flex-grow: 1; - flex-shrink: 1; - } - .pagination-list li { - flex-grow: 1; - flex-shrink: 1; - } +resume-page column-left h1 { + font-size: 2rem; + display: inline-block; + border-bottom: 1px solid transparent; + margin-bottom: 1rem; } -@media screen and (min-width: 769px), print { - .pagination-list { - flex-grow: 1; - flex-shrink: 1; - justify-content: flex-start; - order: 1; - } - .pagination-previous { - order: 2; - } - .pagination-next { - order: 3; - } - .pagination { - justify-content: space-between; - } +resume-page column-left h1 a { + display: inline-block; } -.column { - display: block; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; - padding: 0.75rem; +resume-page column-left section { + text-align: center; + padding: 2rem 0; } -.columns.is-mobile > .column.is-5 { - flex: none; - width: 41.66667%; +resume-page column-right { + display: block; + max-height: 100vh; + overflow: auto; + width: 100%; } -.columns.is-mobile > .column.is-7 { - flex: none; - width: 58.33333%; +resume-page column-right main { + max-width: 1152px; + padding: 0 3rem 0 3rem; } -@media screen and (min-width: 769px), print { - .column.is-4, - .column.is-4-tablet { - flex: none; - width: 33.33333%; - } - .column.is-5, - .column.is-5-tablet { - flex: none; - width: 41.66667%; - } - .column.is-6, - .column.is-6-tablet { - flex: none; - width: 50%; - } - .column.is-7, - .column.is-7-tablet { - flex: none; - width: 58.33333%; - } +resume-page column-right h1 { + font-size: 70%; + font-weight: 700; + letter-spacing: 0.05rem; + margin-bottom: 0.25rem; + text-transform: uppercase; + line-height: 1.75; } -.columns { +resume-page column-section { + display: flex; + margin-bottom: -0.75rem; margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } -.columns.is-gapless { - margin: 0; +resume-page column-stack, +resume-page column-questions { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: 0.75rem; } -.columns:last-child { - margin-bottom: -0.75rem; +resume-page article { + display: block; + margin: 2.5rem 0 0 0; + max-width: 100%; + padding: 0; } -.columns:not(:last-child) { - margin-bottom: calc(1.5rem - 0.75rem); +resume-page article p { + margin: 0; + font-size: 0.75rem; } -.columns.is-centered { - justify-content: center; +resume-page article > section h1 { + font-size: 1.5rem; + font-weight: 400; + letter-spacing: normal; + margin-bottom: 0.75rem; + text-transform: none; } -.columns.is-mobile { +resume-page timeline-item { display: flex; + position: relative; + margin-left: 0.35rem; + padding-bottom: 2rem; } -@media screen and (min-width: 769px), print { - .columns:not(.is-desktop) { - display: flex; - } -} - -@media screen and (min-width: 1088px) { - .columns.is-desktop { - display: flex; - } +resume-page timeline-item aside { + position: absolute; + background: #b3cfe6; + border: 3px solid #fff; + border-radius: 100%; + content: ""; + display: block; + height: 0.8rem; + left: -0.35rem; + top: 1.2rem; + width: 0.8rem; } -.tile { - align-items: stretch; +resume-page timeline-item:before { + content: ""; display: block; - flex-basis: 0; - -ms-flex-preferred-size: auto; - flex-grow: 1; - flex-shrink: 1; - min-height: min-content; + width: 1px; + height: 100%; + position: absolute; + left: 0; + top: 0; } -.tile.is-ancestor { - margin-left: -0.75rem; - margin-right: -0.75rem; - margin-top: -0.75rem; +resume-page timeline-content { + padding: 1rem 0 0 2rem; } -.tile.is-ancestor:last-child { - margin-bottom: -0.75rem; -} +/* ----- Attributes ----- */ -.tile.is-ancestor:not(:last-child) { - margin-bottom: 0.75rem; +[hidden] { + display: none; } -.tile.is-child { - margin: 0 !important; +[data-disabled] { + opacity: 0.5; + cursor: not-allowed; } -.tile.is-parent { - padding: 0.75rem; +[data-resume] { + margin: 0; + max-width: 100%; } -@media screen and (min-width: 769px), print { - .tile:not(.is-child) { - display: flex; - } -} +/* ----- Context Menu ----- */ -.section { - padding: 2rem 0; +input[type="checkbox"]:checked ~ context-menu { + display: block; } -.section-vertical { - padding: 1.5rem 0; +context-menu[right] { + left: auto; + right: 0; } -@media screen and (max-width: 1087px) { - .section { - padding: 1.5rem; - } +context-menu[list] { + top: 0.5rem; + right: 0.5rem; } -.footer { - padding: 1.5rem; +context-menu { + display: none; + left: 0; + min-width: 6.25rem; + position: absolute; + top: 100%; + z-index: 20; } -/* - * Custom Resets - */ - -article.content { - min-height: 452px; +context-menu-content { + border-radius: 0.25rem; + border: 1px solid; + display: block; } -video { - display: inline-block; - box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.3); +nav.hide { + top: -5rem !important; } -a { - border-bottom: 1px solid #999; - color: #014cc6; - cursor: pointer; - text-decoration: none; - overflow-wrap: break-word; -} -a:hover { - border-bottom: 2px solid #999; - text-shadow: 0 0 currentColor; +body > nav { + margin: 0 auto; + left: 0; + min-height: 4rem; + position: fixed; + right: 0; + top: 0; + z-index: 30; + -webkit-transition: top 0.15s; + -o-transition: top 0.15s; + transition: top 0.15s; } -a:focus { - border-bottom: 3px solid #999; +body > nav section { + align-items: center; + display: flex; + justify-content: center; + margin: 0 auto; + max-width: 1152px; } -h1:target, -h2:target, -h3:target { - text-decoration: underline; - text-decoration-style: double; +nav column-left, +nav column-right, +nav column-middle { + display: inline-flex; + align-items: center; } -:target::before { - content: ""; - display: block; - height: 5rem; - margin-top: -5rem; - visibility: hidden; +nav column-middle { + flex: 3; + justify-content: center; + width: 100%; } -ol { - counter-reset: ol; +nav column-left { + justify-content: flex-end; } -ol, -.document > ul { - margin-left: 4rem; - margin-top: 1.5rem; +nav column-right { + justify-content: flex-start; } -ol li, -.document > ul li { - -ms-hyphens: auto; - -ms-word-break: normal; - overflow-wrap: break-word; - word-break: break-word; - font-size: 1.25rem; - list-style: none; +nav column-left, +nav column-right { + flex: 1; + margin: 0 1rem; } -ol li + li { - margin-top: 1rem !important; +nav column-left button-repo { + margin-right: 0.75rem; } -ol li:before { - border-radius: 100%; - border: 1px solid; - content: counter(ol); - counter-increment: ol; - font-size: 1rem; - font-weight: 700; - margin-left: -2.75rem; - margin-top: 0.25rem; - padding: 0 0.5rem; - position: absolute; +nav column-middle context-menu a { + padding: 0.65rem 1rem; + display: block; + width: 100%; + line-height: 1.25; } -figure > a, -.navbar-item, -.webring a, -.article__more__content a, -.front__more, -.is-mobile .has-text-centered > a, -.article__list li a, -.tableofcontents li a, -.resume__label, -.resume__container a, -.isso-comment-footer a, -.abstract.tile > a { - border-bottom: none !important; -} -.abstract.tile.is-ancestor { - margin-top: 2rem; -} - -.article__more__content time { - margin-right: 1rem; - font-size: 1.125rem; - letter-spacing: 0.05rem; - font-variant: all-small-caps; +nav column-middle context-menu svg { + display: none; } -.article__more__content li { - display: flex; +nav column-middle > a { align-items: center; + display: flex; + flex-direction: column; + font-size: 0.75rem; + height: 4rem; + justify-content: center; + line-height: 1.5; + padding: 0 1.5rem; + text-align: center; } -.article__more__content li p { - flex: 1; - white-space: nowrap; +nav column-middle span:before { + content: attr(title); + display: block; + font-weight: 700; + height: 0; overflow: hidden; - padding-right: 1rem; - text-overflow: ellipsis; + visibility: hidden; } -@media screen and (max-width: 968px) { - .article__more__content li { - display: block; - } - .article__more__content li p { - white-space: normal; - } +nav column-middle context-menu button { + height: auto; + display: inline; + background: transparent; + padding: 0.65rem 1rem; + width: 100%; + text-align: left; + line-height: 1.25; } -.image__thumbnail { - max-height: 222px; -} -.medium-zoom-overlay { - background-color: #fff; - background-color: rgba(255, 255, 255, 0.9); +nav column-middle context-menu button span { + padding: 0; } -/* - * Fonts - */ +nav column-middle > a[data-active], +nav column-middle context-menu a[data-active] { + font-weight: 700; +} -body, -button, -input, -select, -textarea, -.sans-serif { - font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", - "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; -} - -.serif, -article > mark, -.document ol li, -.document > ul li { - font-family: Charter, Georgia, "Book Antiqua", serif; -} - -pre, -code, -svg text, -.monospace, -blockquote > p.serif { - font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace; -} - -.document a { - color: #000; -} - -article > mark, -.is-size-serif { - font-size: 1.25rem !important; -} - -.content h1, -.content h2, -.content h3, -.document h1 a, -.document h2 a, -.document h3 a { - color: #111; - font-weight: 400; - line-height: 1.4; -} - -blockquote .blockquote-footer { - margin-top: 1.3rem; -} -blockquote > p.serif { - font-size: 1.2rem !important; -} - -.smallcaps { - font-variant: small-caps; - letter-spacing: 0.05rem; - line-height: 0; - text-transform: lowercase; -} -.smallcapsintro { - font-size: 2rem !important; - text-transform: none; -} - -/* - * Text selection - */ - -::selection { - color: #fff; - background-color: #000; - text-shadow: 0 0 currentColor; -} -::-webkit-selection { - color: #fff; - background-color: #000; - text-shadow: 0 0 currentColor; -} -::-moz-selection { - color: #fff; - background-color: #000; - text-shadow: 0 0 currentColor; -} - -/* - * Front page - */ - -.introduction { - padding: 1em; - margin-top: 0.75em; +nav column-middle more-button { + -webkit-tap-highlight-color: transparent; + align-items: center; + display: flex; + height: 4rem; + justify-content: center; + position: relative; } -.front__more { - text-transform: uppercase; -} -.front__more svg { - vertical-align: bottom; +nav column-middle more-button label { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; + padding: 0 1.5rem; + line-height: 1.5; } -.recent__article p, -.article__summary { - margin-bottom: 0.75rem !important; +nav column-middle > a span, +nav column-middle more-button label span { + margin-top: 0.15rem; + font-size: 0.75rem; } -/* - * Navigation Bar Reset - */ - -a.navbar-item:focus, -a.navbar-item:hover, -.navbar-item:hover label { - color: #000000; -} -.navbar__icon:hover svg, -.navbar__icon:hover label svg { +nav column-middle a:hover svg, +nav column-middle more-button:hover svg { fill: #ffc966; } -.navbar-item { - display: block; - line-height: 1.25; - padding: 0.5rem 0.75rem; - position: relative; -} +/* ----- Responsive ----- */ -.navbar { - -webkit-transition: top 0.15s; - -o-transition: top 0.15s; - transition: top 0.15s; -} -.headroom { - top: -5em !important; -} -.navbar-item { - color: #555; -} -.navbar { - box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); - background-color: #fcfcfc; - background-color: rgba(252, 252, 252, 0.97); - min-height: 4rem; -} -.navbar, -.navbar-menu { - background-color: #fcfcfc; - background-color: rgba(252, 252, 252, 0.97); -} -.navbar-menu { - display: flex; - overflow: visible !important; - box-shadow: none; -} -.navbar-menu .columns { - margin: 0 auto; - display: flex; -} -.navbar-menu .column { - padding: 0; -} -html.has-navbar-fixed-top, -body.has-navbar-fixed-top, -html.has-navbar-fixed-bottom, -body.has-navbar-fixed-bottom { - padding-top: 4rem; -} -.navbar .container, -.navbar__left, -.navbar__middle, -.navbar__right { - min-height: 4rem; - align-items: center; -} -.navbar__tablet__compact .navbar__active { - border-bottom: 2px solid #75b2f0; +@media screen and (max-width: 1152px) { + column-left button-repo { + display: none; + } } -@media screen and (max-width: 1087px) { - .navbar-menu .columns { - margin: 0 1em; - width: 100%; +@media screen and (max-width: 824px) { + nav column-left, + nav column-right { + display: none; } - .navbar-menu { - padding: 0 !important; + nav column-middle > a, + nav column-middle context-menu-container { + width: 20%; } } -@media screen and (min-width: 1088px) { - .navbar-menu, - .navbar-item { - display: inline-block; +@media screen and (max-width: 768px) { + table-contents { + display: none; } -} -@media screen and (max-width: 400px) { - .is-mobile { - display: block !important; + home-page article-card { + clear: both; } - .is-mobile .column { - width: 100% !important; + home-page margin-note { + margin: 0 0 1.5rem 0 !important; } -} - -.navbar__left { - display: inline-flex; - justify-content: flex-end; -} -.navbar__right { - display: inline-flex; - justify-content: flex-start; -} -.navbar__middle { - display: inline-flex; - justify-content: center; -} - -@media screen and (max-width: 900px) { - .navbar__left, - .navbar__right { - display: none; + recent-posts article-card { + display: block; + } + recent-posts article-thumbnail { + margin: 0 0 1.5rem 0; + } + resume-page { + display: block; + } + resume-page column-left { + width: 100%; + } + resume-page column-right { + overflow: visible; } -} - -.navbar__icon { - display: flex; - align-items: center; - justify-content: center; - padding: 0 1.5rem; - height: 4rem; -} -.navbar__icon__label { - font-size: 0.75rem; -} -.navbar__icon__label:after { - display: block; - content: attr(title); - font-weight: 700; - height: 0; - overflow: hidden; - visibility: hidden; } @media screen and (max-width: 624px) { - .navbar-menu .columns { - margin: 0; - } - .navbar__icon { - padding: 0; - width: 20%; + article-more-content li { + display: block; } - .navbar__icon__hidden { + pagination-controller ul li:not(:first-child):not(:last-child) { display: none; } -} -.navbar__active { - color: #014cc6 !important; -} -.navbar__active svg { - fill: #d1ebff; -} -.navbar__active .navbar__icon__label { - font-weight: 700; -} -.navbar__icon__menu { - margin: 0; - justify-content: center; - height: 100%; -} -.navbar__middle .dropdown { - padding: 0; -} - -.dropdown label { - cursor: pointer; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - padding: 0 1.5rem; -} -.dropdown-content .navbar-item { - margin: 0; - padding: 0.65rem 1rem; - width: 100%; -} -.dropdown-content .navbar__active { - font-weight: 700; - background-color: #ebf2ff; -} -.dropdown-content a.navbar-item:hover, -.dropdown-content .theme-toggle-button:hover { - background-color: #ffeac2; - color: black; -} -.dropdown-input[type="checkbox"]:checked ~ .dropdown-menu { - display: block; -} - -.error__headerSize { - font-size: 8rem; -} - -nav .item__box { - margin: 0 0 0 0.7rem; -} -.item__box span { - padding-left: 10px; -} -.item__box svg { - stroke-width: 1.5px; - width: 20px; - height: 20px; -} -.item__box:hover, -.item__box:hover svg, -.item__box:focus svg { - fill: currentColor; - color: #000; -} -.item__no__hover:hover svg, -.item__no__hover:focus svg { - fill: transparent !important; -} -.item__box { - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - font-weight: 400; - padding: 0.25rem 1rem; - background-color: #f2f2f2; - border: 0 solid transparent !important; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -} - -/* - * Contact Form - */ - -.alert { - color: #f00; -} -.agree { - opacity: 0; - position: absolute; - top: 0; - left: 0; - height: 0; - width: 0; - z-index: -1; -} -.message__success { - background-color: #effaef; - padding: 1em; - border: 1px solid #28d263; - margin-bottom: 1em; -} - -/* - * Footer - */ - -.footer__section { - line-height: 2.2; -} -.hero-foot > .footer > .columns { - margin: 0; -} -.footer a { - color: #333; -} - -/* - * Posts and Projects - */ - -.article__title a { - line-height: 1.8; -} -.article__date { - margin-bottom: 0.75rem; -} -.article__divider { - background-color: transparent; -} -.article__updated { - padding: 0.5em; -} -ul.article__list { - line-height: 2.5; -} -.article__list li:hover { - background-color: #f1f1f1; -} -.article__list a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.article__list__date { - padding-right: 1rem; - text-transform: uppercase; -} -.article__list a, -h1.article__list { - padding: 0 0.5rem; -} -h1.article__list:not(:first-child) { - margin-top: 1.5rem; -} -.article__heading__anchor { - border-bottom: none; -} - -.webring li { - padding-top: 1em; -} -.webring ul { - margin-top: 0; -} -.webring .articles h2 { - margin-bottom: 0.1em; -} - -/* - * Resume Page - */ - -.max__height { - min-height: 100vh; -} - -.resume__container { - padding: 0 3em 0 3em; - max-width: 1152px; -} -.resume__section { - padding: 0 1.5em; -} -.resume__break { - padding: 0.75em 1.5em; -} -.resume__column { - padding: 0; -} -.resume__label { - padding: 10px; - color: #fff !important; - border-radius: 3px; -} -.resume__label:hover { - background-color: #fcfcfc; - color: #333 !important; -} - -.inline__padding { - display: inline-block; - margin: 0.5em; - border-bottom: 1px solid transparent !important; -} - -@media screen and (min-width: 769px) { - .column__right { - max-height: 100vh; - overflow: auto; + article-list recent-abstracts { + display: block; + } + article-list recent-abstracts abstract-card { + display: block; + margin: 0 0 2rem 0; + } + resume-page column-section { + display: block; } } -.column__background { - background-color: #4587c1; - background-image: url("/images/shells.jpg"); - background-position: center; - background-size: cover; - min-height: 50vh; -} - -.text__frame { - border-radius: 2px; - display: inline-block; - padding: 10px; -} - -/* - * Focus Links - */ - -a:focus, -a:focus span { - background-color: #ffeac2; - color: #000; - outline: none; -} -a:focus img { - outline: 2px solid; -} -a:hover img { - box-shadow: 0 8px 32px #999; -} -figure > a:focus { - background-color: transparent; -} -.is-success:focus, -.is-link:focus { - background-color: #ebebeb !important; -} - -/* - * Figures - */ - -figure div { - height: 0; -} - -figcaption, -figcaption code { - font-size: 0.95em; - margin-bottom: 1em; - margin-top: 1.5em; - text-align: center; -} - -video-container { - display: block; - text-align: center; -} - -/* - * Theme toggle - */ - -.theme-toggle-button { - border-radius: 0; - height: auto; - border: none; - justify-content: start; - font-weight: 400; -} - -/* - * Custom Helpers - */ - -.has-padding-none { - padding: 0 !important; -} -.has-padding-left-md { - padding-left: 0.5em !important; -} -.has-margin-none { - margin: 0 !important; -} -.has-margin-left-none { - margin-left: 0 !important; -} -.has-margin-right-none { - margin-right: 0 !important; -} -.has-margin-bottom-none { - margin-bottom: 0 !important; -} -.has-margin-bottom-sm { - margin-bottom: 0.25em !important; -} -.has-margin-bottom-md { - margin-bottom: 0.5em !important; -} -.has-margin-bottom-lg { - margin-bottom: 1em !important; -} -.has-spacing-widest { - letter-spacing: 0.1em; -} -.has-tap-transparent { - -webkit-tap-highlight-color: transparent; -} - -/* - * Table of Contents - */ - -details summary { - cursor: pointer; -} - -nav#TableOfContents li:hover { - background-color: #f1f1f1; -} -nav#TableOfContents ul { - margin-left: -0.5em; -} -nav#TableOfContents a { - display: block; - color: #444; - padding: 0.125rem 0 0.125rem 0.5rem; -} -nav#TableOfContents a { - display: block; - font-size: 0.8125rem; -} - -/* - * Tables - */ - -td, -th { - padding: 0; -} -table td, -table th { - vertical-align: top; -} -td:not([align]), -th:not([align]) { - text-align: left; -} -table td { - padding: 0.4rem; - min-width: 8rem; -} -table td:not([align]), -table th:not([align]) { - text-align: left; -} -table { - width: 100%; - border-collapse: collapse; - border-spacing: 0; -} -table th { - font-weight: 700; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: 0.05rem; - padding: 0.4rem; -} -table, -table code { - font-size: 1.15rem; +@media screen and (max-width: 524px) { + nav column-middle > a[data-hidden] { + display: none; + } + contact-page field-set { + display: block; + } + contact-page form field-set section + section { + margin-left: 0; + } } -@media (max-width: 550px) { - table { - table-layout: fixed; + +@media screen and (max-width: 424px) { + recent-projects article-card { + display: block; + } + recent-projects article-thumbnail { + margin: 0 0 1.5rem 0; } } -/* - * Tufte CSS: https://edwardtufte.github.io/tufte-css/ - */ +/* ----- Tufte CSS: https://edwardtufte.github.io/tufte-css/ ----- */ + +body { + counter-reset: sidenote-counter; +} -.leftnote { +side-note[left], +margin-note[left] { float: left; clear: left; margin-left: -40%; margin-left: -22vw; } -.rightnote { +side-note[right], +margin-note[right] { float: right; clear: right; margin-right: -40%; margin-right: -22vw; } -.leftnote, -.rightnote { +side-note[left], +side-note[right], +margin-note[left], +margin-note[right] { width: 32%; width: 18vw; - margin-top: 0; - margin-bottom: 1em; + margin-bottom: 1rem; font-size: 1rem; vertical-align: baseline; position: relative; - color: #444; } -.sidenote, -.marginnote { +side-note, +margin-note { -ms-hyphens: auto; -ms-word-break: normal; overflow-wrap: break-word; @@ -1993,95 +1420,94 @@ table code { letter-spacing: 0.01rem; } -.sidenote:hover, -.marginnote:hover { +side-note:hover, +margin-note:hover { -webkit-user-select: inherit; -ms-user-select: inherit; user-select: inherit; } @media (min-width: 769px) { - .rightnote { + side-note[right], + margin-note[right] { padding-right: 1.125em; } - .leftnote { + side-note[left], + margin-note[left] { text-align: right; padding-left: 1.125em; } - .leftnote, - .rightnote { + side-note[left], + side-note[right], + margin-note[left], + margin-note[right] { max-width: 22em; } } @media (min-width: 2000px) { - .leftnote { + side-note[left], + margin-note[left] { margin-left: -28em; } - .rightnote { + side-note[right], + margin-note[right] { margin-right: -28em; } } -body { - counter-reset: sidenote-counter; -} - -label.sidenote-mark { +side-note-aside label { display: inline; } -input.sidenote-toggle, -input.marginnote-toggle { + +side-note-aside input[name="toggle"], +margin-note-aside input[name="toggle"] { display: none; } -.sidenote-mark { +side-note-aside label { counter-increment: sidenote-counter; } -.sidenote:before { + +side-note:before { content: counter(sidenote-counter) " "; } -.sidenote-mark:after { + +side-note-aside label:after { content: counter(sidenote-counter); left: 0.1rem; } -.sidenote-mark:after, -.sidenote:before, -.marginnote-mark:after { +side-note-aside label:after, +side-note:before, +margin-note-aside label:after { position: relative; vertical-align: baseline; font-size: 0.7rem; top: -0.5rem; } -.sidenote-container mark { +side-note-aside mark, +margin-note-aside mark { background-color: transparent; color: unset; } -article > mark, -.sidenote-container:hover .sidenote-mark span, -.sidenote-container:hover .sidenote mark, -.marginnote-container:hover .marginnote-mark span, -.marginnote-container:hover .marginnote mark, -.sidenote-container:hover .sidenote a, -.marginnote-container:hover .marginnote a { - background-color: #ffeac2; - color: #000; -} -.sidenote-container:hover .sidenote a, -.marginnote-container:hover .marginnote a { - border-color: dodgerblue; +side-note[image], +margin-note[image] { + text-align: center; } -.sideimage > a, -.sideimage a:focus { + +side-note[image] > a, +side-note[image] a:focus, +margin-note[image] > a, +margin-note[image] a:focus { border-bottom: 1px solid transparent !important; background-color: transparent !important; } @media (max-width: 768px) { - .sidenote-toggle:checked + .sidenote, - .marginnote-toggle:checked + .marginnote { + side-note-aside input[name="toggle"]:checked + side-note, + margin-note-aside input[name="toggle"]:checked + margin-note { display: block; float: left; left: 1rem; @@ -2091,67 +1517,50 @@ article > mark, vertical-align: baseline; position: relative; } - label { - cursor: pointer; + side-note-aside input[name="toggle"]:checked + side-note[image] a, + margin-note-aside input[name="toggle"]:checked + margin-note[image] a { + display: block; } - label.marginnote-toggle:not(.sidenote-number) { - display: inline; + side-note label, + margin-note label { + cursor: pointer; } - .sidenote, - .marginnote { + side-note, + margin-note { display: none; } - .tableofcontents { - display: none !important; - } - .sidenote-mark, - .marginnote-mark { + side-note-aside label, + margin-note-aside label { border-bottom: 1px dashed #999; } - .marginnote-mark:after { + margin-note-aside label:after { content: "\0002B"; - font-weight: bold; + font-weight: 700; } - .sideimage { - margin: 0 !important; + side-note[image], + margin-note[image] { left: 0 !important; + margin: 1rem 0 !important; width: 100% !important; } - .sidenote mark { + side-note mark { background-color: transparent !important; color: unset !important; } } -.document .subtitle { - margin-top: 0 !important; - margin-bottom: 1.5em !important; -} -.recent__article .marginnote, -.recent__article .sidenote { - margin-top: 0 !important; -} +/* ----- Side Notes Float Clear ----- */ @media (max-width: 768px) { - .recent__article .columns, - .content blockquote, - .highlight { + code-block { clear: both; } } -/* IE quote height fix */ - -@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - .quote { - height: 0; - } -} - -/* Embed friendly */ +/* ----- Embed Friendly ----- */ @media (max-height: 16rem) { - html.has-navbar-fixed-top { + html { padding: 0; } nav { @@ -2159,55 +1568,44 @@ article > mark, } } -/* - * Isso comments - */ +/* ----- Isso Comments ----- */ -#isso-thread * { - box-sizing: border-box; - word-wrap: break-word; +#isso-thread { + padding: 0; + margin: 0; } #isso-thread .isso-comment-header a { text-decoration: none; } -#isso-thread { - padding: 0; - margin: 0; +#isso-thread div.text p:not(:last-child) { + margin-bottom: 1.5rem; +} + +.isso-comment > div.text-wrapper > .text a { + color: #000; } -#isso-thread > h4 { +#isso-thread h4 { color: #555; - margin-bottom: 1em; + margin-bottom: 1rem; } -#isso-thread > .isso-feedlink { +#isso-thread .isso-feedlink { float: right; - padding-left: 1em; + padding-left: 1rem; } -#isso-thread > .isso-feedlink > a { - font-size: 0.8em; +#isso-thread .isso-feedlink a { + font-size: 0.8rem; vertical-align: bottom; } -#isso-thread .textarea { - height: auto !important; - line-height: 1.8; - outline: 0; - overflow: auto; - resize: auto; -} - -#isso-thread .textarea.placeholder { - color: #545454; -} - #isso-root .isso-comment { - max-width: 68em; - padding-top: 0.95em; - margin: 0.95em auto; + max-width: 68rem; + padding-top: 0.95rem; + margin: 0.95rem auto; } #isso-root .preview .isso-comment { @@ -2215,7 +1613,7 @@ article > mark, margin: 0; } -.isso-comment > div.avatar { +.isso-comment div.avatar { float: left; width: 16px; height: 16px; @@ -2234,7 +1632,7 @@ article > mark, padding-left: 0.5rem; } -.isso-comment > div.avatar > svg { +.isso-comment div.avatar svg { max-width: 48px; max-height: 48px; border: 1px solid rgba(0, 0, 0, 0.2); @@ -2242,7 +1640,7 @@ article > mark, box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } -.isso-comment > div.text-wrapper { +.isso-comment div.text-wrapper { display: block; } @@ -2250,115 +1648,95 @@ article > mark, padding-left: 2rem; } -.isso-comment > div.text-wrapper > .isso-comment-header, -.isso-comment > div.text-wrapper > .isso-comment-footer { - font-size: 0.95em; -} - -.isso-comment > div.text-wrapper > .text a { - color: black; +.isso-comment .isso-comment-header, +.isso-comment .isso-comment-footer { + font-size: 0.95rem; } -.isso-comment > div.text-wrapper > .isso-comment-header .permalink { +.isso-comment .isso-comment-header .permalink { color: #555; } -.isso-comment > div.text-wrapper > .isso-comment-header .spacer { +.isso-comment .isso-comment-header .spacer { padding: 0 6px; color: #999; } -.isso-comment > div.text-wrapper > .isso-comment-header .note { +.isso-comment .isso-comment-header .note { float: right; } -.isso-comment > div.text-wrapper > .isso-comment-header .author { - font-weight: bold; +.isso-comment .isso-comment-header .author { + font-weight: 700; color: #555; } -.isso-comment > div.text-wrapper > .textarea-wrapper .textarea, -.isso-comment > div.text-wrapper > .textarea-wrapper .preview { - margin: 0.25rem 0; -} - .isso-comment > div.text-wrapper > div.text p:last-child { - margin-bottom: 0.25rem; + margin-bottom: 0.5rem; } -.isso-comment > div.text-wrapper > div.text h1, -.isso-comment > div.text-wrapper > div.text h2, -.isso-comment > div.text-wrapper > div.text h3, -.isso-comment > div.text-wrapper > div.text h4, -.isso-comment > div.text-wrapper > div.text h5, -.isso-comment > div.text-wrapper > div.text h6 { +.isso-comment h1, +.isso-comment h2, +.isso-comment h3, +.isso-comment h4, +.isso-comment h5, +.isso-comment h6 { font-size: 130%; - font-weight: bold; + font-weight: 700; } -.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea, -.isso-comment > div.text-wrapper > div.textarea-wrapper .preview { +.isso-comment div.textarea-wrapper .textarea, +.isso-comment div.textarea-wrapper .preview { width: 100%; - border: 1px solid #f0f0f0; - border-radius: 2px; - box-shadow: 0 0 2px #888; + margin: 0.5rem 0 0.75rem 0; } -.isso-comment > div.text-wrapper > .isso-comment-footer { - font-size: 0.8em; - color: gray; +.isso-comment .isso-comment-footer { + font-size: 85%; + color: #555; clear: left; } -.isso-feedlink, -.isso-comment > div.text-wrapper > .isso-comment-footer a { - font-weight: bold; +.isso-feedlink { + font-weight: 700; text-decoration: none; } +.isso-comment .isso-comment-footer a { + border: none; + font-weight: 700; + padding: 0.25rem 0.5rem; +} + .isso-feedlink:hover, -.isso-comment > div.text-wrapper > .isso-comment-footer a:hover svg, -.isso-comment > div.text-wrapper > .isso-comment-footer .reply:hover, -.isso-comment > div.text-wrapper > .isso-comment-footer .edit:hover, -.isso-comment > div.text-wrapper > .isso-comment-footer .cancel:hover, -.isso-comment > div.text-wrapper > .isso-comment-footer .delete:hover { +.isso-comment .isso-comment-footer a:hover svg, +.isso-comment .isso-comment-footer .edit:hover, +.isso-comment .isso-comment-footer .cancel:hover, +.isso-comment .isso-comment-footer .reply:hover, +.isso-comment .isso-comment-footer .delete:hover { color: #111111; text-shadow: #aaaaaa 0 0 1px !important; background-color: #ccc; fill: #111111; + border-radius: 0.25rem; } -.isso-comment > div.text-wrapper > .isso-comment-footer > a { - position: relative; - top: 0.2em; - padding: 0.3em; - border-radius: 0.1em; -} - -.isso-comment > div.text-wrapper > .isso-comment-footer .votes { - background-color: #014cc6; - border-radius: 3px; - padding: 2px 6px; - font-weight: bold; - color: white; - margin-right: 0.5rem; -} - -.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg, -.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg { - position: relative; - top: 0.2em; +.isso-comment .isso-comment-footer .votes, +.isso-comment .isso-comment-footer .spacer, +.isso-comment .isso-comment-footer .upvote, +.isso-comment .isso-comment-footer .downvote { + display: none; } .isso-comment .isso-postbox { - margin-top: 0.8em; + margin-top: 0.8rem; } -.isso-comment-footer > .delete { +.isso-comment-footer .delete { margin: 0.2rem 0 0 0.4rem; } -.isso-comment-footer > .cancel { +.isso-comment-footer .cancel { margin-left: 0.3rem; } @@ -2367,100 +1745,74 @@ article > mark, } .isso-postbox { - max-width: 68em; - margin: 0 auto 2em; + max-width: 68rem; + margin: 0 auto 2rem; clear: right; } -.isso-postbox > .form-wrapper { +.isso-postbox .form-wrapper { display: block; padding: 0; } -.isso-postbox > .form-wrapper > .auth-section, -.isso-postbox > .form-wrapper > .auth-section .post-action { +.isso-postbox .auth-section, +.isso-postbox .auth-section .post-action { display: block; } -.isso-postbox > .form-wrapper .textarea, -.isso-postbox > .form-wrapper .preview { - margin: 0 0 0.6em; - padding: 0.4em 0.8em; +.isso-comment .textarea, +.isso-postbox .form-wrapper .textarea, +.isso-postbox .form-wrapper .preview { + margin: 0 0 0.6rem; + padding: 0.4em 0.8rem; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.2); background-color: #fafafa; min-height: 150px; } -#isso-thread .textarea:focus, -#isso-thread input:focus { - border-color: rgb(73, 146, 208); -} - -.isso-postbox > .form-wrapper > .auth-section .input-wrapper { +.isso-postbox .auth-section .input-wrapper { display: inline-block; position: relative; - padding-bottom: 0.6em; + padding-bottom: 0.6rem; width: 33.33%; } -.isso-postbox > .form-wrapper > .auth-section .input-wrapper:nth-child(-n + 2) { - padding-right: 0.6em; +.isso-postbox .auth-section .input-wrapper:nth-child(-n + 2) { + padding-right: 0.6rem; } -.isso-postbox > .form-wrapper > .auth-section .post-action { - padding-left: 0.6em; +.isso-postbox .auth-section .post-action { + padding-left: 0.6rem; margin-bottom: 0 !important; } -.isso-postbox > .form-wrapper > .auth-section .input-wrapper input { - padding: 0.6em 10px; - font-size: 0.8em; - width: 100%; - border-radius: 2px; - background-color: #fafafa; - line-height: 1.4em; - border: 1px solid rgba(0, 0, 0, 0.2); -} - -.isso-postbox > .form-wrapper > .auth-section .post-action { +.isso-postbox .auth-section .post-action { display: inline-block; float: right; } -.isso-postbox > .form-wrapper > .auth-section .post-action > input { - padding: 0.4em; - font-size: 0.8em; - border-radius: 2px; - border: 1px solid #3273dc; - cursor: pointer; - outline: 0; - line-height: 1.7em; - width: 6em; - background-color: white; - color: #1e55ae; -} - -.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover { - font-weight: bold; +.isso-postbox input[name="preview"], +.isso-postbox input[name="edit"] { + width: 6rem; } -.isso-postbox > .form-wrapper .preview, -.isso-postbox > .form-wrapper input[name="edit"], -.isso-postbox.preview-mode > .form-wrapper input[name="preview"], -.isso-postbox.preview-mode > .form-wrapper .textarea { +.isso-postbox .form-wrapper .preview, +.isso-postbox .form-wrapper input[name="edit"], +.isso-postbox.preview-mode .form-wrapper input[name="preview"], +.isso-postbox.preview-mode .form-wrapper .textarea { display: none; } -.isso-postbox.preview-mode > .form-wrapper .preview { +.isso-postbox.preview-mode .form-wrapper .preview { display: block; } -.isso-postbox.preview-mode > .form-wrapper input[name="edit"] { +.isso-postbox.preview-mode .form-wrapper input[name="edit"] { display: inline; } -.isso-postbox > .form-wrapper .preview { +.isso-postbox .preview { background-color: #f8f8f8; background: repeating-linear-gradient( -45deg, @@ -2471,32 +1823,27 @@ article > mark, ); } -.isso-postbox > .form-wrapper > .notification-section { +.isso-postbox .notification-section { display: none; padding-bottom: 10px; } -.isso-postbox - > .form-wrapper - > .notification-section - input[name="notification"] { +.isso-postbox input[name="notification"] { margin-right: 0.5rem; } @media screen and (max-width: 600px) { - .isso-postbox > .form-wrapper > .auth-section .input-wrapper { + .isso-postbox .input-wrapper { display: inline-block; max-width: 100%; - margin: 0 0 0.3em; + margin: 0 0 0.3rem; } - .isso-postbox > .form-wrapper > .auth-section .input-wrapper input { + .isso-postbox .input-wrapper input { width: 100%; } } -/* - * Uppy CSS - */ +/* ----- Uppy CSS ----- */ .uppy-Dashboard-inner { background-color: #fff !important; @@ -2510,3 +1857,326 @@ article > mark, .uppy-size--md .uppy-Dashboard-inner { margin: 0 auto; } + +/* ----- Colors ----- */ + +::selection { + color: #fff; + background-color: #000; +} + +::-webkit-selection { + color: #fff; + background-color: #000; +} + +::-moz-selection { + color: #fff; + background-color: #000; +} + +a:hover { + border-color: #999; +} + +a:focus { + background-color: #ffeac2; + border-color: #999; + color: #000; +} + +a:hover img { + color: #999; +} + +html { + background-color: #fcfcfc; +} + +body { + color: #222; +} + +body > footer a { + color: #111; +} + +body .medium-zoom-overlay { + background-color: #fff; + background-color: rgba(255, 255, 255, 0.9); +} + +img { + color: #ccc; +} + +hr { + background-color: #ddd; +} + +video { + color: #999; +} + +input, +textarea { + background-color: #f9f9f9; + border-color: #ccc; +} + +button, +button-anchor a, +pagination-controller a, +input[type="submit"], +input[type="button"] { + background-color: #f2f2f2; + box-shadow: 0 1px 1px #aaa; +} + +button:hover, +button-anchor a:hover, +input[type="submit"]:hover, +input[type="button"]:hover { + background-color: #eee; +} + +button:hover svg, +button-anchor:hover svg { + color: #014cc6; + fill: #d1ebff; +} + +a, +home-page article a, +recent-articles h2 a { + border-color: #999; + color: #014cc6; +} + +article a, +article-subsection a { + color: #000; +} + +home-page article > h1 em { + color: #f05a60; +} + +contact-page aside { + background-color: #effaef; + border-color: #28d263; +} + +article-archive-list li:hover, +taxonomy-list > section ul li:hover, +taxonomy-archive-list > section ul li:hover { + background-color: #f1f1f1; +} + +pagination-controller [data-pagination-current] { + background-color: #3273dc; + border-color: #3273dc; + color: #fff; +} + +pagination-ellipsis { + color: #b5b5b5; +} + +pagination-controller a { + border-color: #dbdbdb !important; +} + +pagination-controller a:hover { + border-color: #b5b5b5; +} + +table-contents li:hover { + background-color: #f1f1f1; +} + +resume-page column-left { + background-color: #4587c1; +} + +resume-page column-left h1, +resume-page column-left p a, +resume-page column-left h1 a { + color: #fff; +} + +resume-page article > section h1 { + color: #245a8a; +} + +resume-page timeline-item:before { + background-color: #dbdbdb; +} + +context-menu-content { + background-color: #fafafa; + border-color: #ddd; + box-shadow: 0 0.5rem 1rem -0.125rem #0a0a0a1a, 0 0px 0 1px #0a0a0a05; +} + +body > nav { + background-color: #fcfcfc; + box-shadow: 0 4px 12px 0 #0000000d; +} + +nav column-middle > a, +nav column-middle more-button, +nav column-middle context-menu a, +nav column-middle context-menu button { + color: #555; +} + +nav column-middle > a:hover, +nav column-middle more-button:hover { + color: #000; +} + +nav column-middle context-menu a:hover, +nav column-middle context-menu button:hover { + background-color: #ffeac2; + color: #000; +} + +nav column-middle > a[data-active] svg { + fill: #d1ebff; +} + +nav column-middle > a[data-active], +nav column-middle context-menu a[data-active] { + color: #014cc6; +} + +input, +button, +textarea, +input[type="submit"], +input[type="button"], +button-anchor a, +home-page label, +home-page article > h1, +pagination-controller a { + color: #363636; +} + +footer, +footer a, +body > footer, +figcaption, +figcaption code, +article-archive-list time, +article-meta-bottom a, +article-meta-bottom, +article-meta-top a, +article-meta-top, +article-more-content time, +article-on-web time, +article-summary-meta, +blockquote-footer, +home-page article > h2, +margin-note[left], +margin-note[right], +side-note[left], +side-note[right], +table-contents a, +table-contents h2, +taxonomy-archive-list time, +taxonomy-list time, +video-container footer a { + color: #4a4a4a; +} + +article > mark, +margin-note-aside:hover label span, +margin-note-aside:hover margin-note a, +margin-note-aside:hover margin-note mark, +side-note-aside:hover label span, +side-note-aside:hover side-note a, +side-note-aside:hover side-note mark { + background-color: #ffeac2; + color: #000; +} + +side-note-aside:hover side-note a, +margin-note-aside:hover margin-note a { + border-color: #1e90ff; +} + +[data-danger] { + color: #b30000; +} + +[data-contact-required] { + border-color: #b30000; +} + +/* ----- Excludes ----- */ + +hr, +h1 a, +h2 a, +h3 a, +figure > a, +main a:focus, +footer a:focus, +figure > a:focus, +figure > a:hover, +abstract-thumbnail a, +abstract-thumbnail a:hover, +article-archive-link a, +article-archive-link a:hover, +article-archive-list ul a, +article-archive-list ul a:hover, +article-card article-thumbnail a, +article-card article-thumbnail a:hover, +article-meta-top a, +article-meta-top a:hover, +article-on-web a, +button-anchor a:focus, +button-anchor a:hover, +code-block language-label a, +code-block language-label a:hover, +contact-page field-set, +home-page home-page-posts > a, +home-page home-page-posts > a:hover, +home-page home-page-projects > a, +home-page home-page-projects > a:hover, +nav column-middle > a, +nav column-middle > a:focus, +nav column-middle > a:hover, +nav column-middle context-menu a, +nav column-middle context-menu a:focus, +nav column-middle context-menu a:hover, +pagination-controller a, +pagination-controller a:focus, +pagination-controller a:hover, +resume-page a, +resume-page a:focus, +resume-page a:hover, +table-contents a, +table-contents a:hover, +taxonomy-archive-list section ul a, +taxonomy-archive-list section ul a:hover, +taxonomy-list section ul a, +taxonomy-list section ul a:hover, +article-more-content a { + border: none; +} + +side-note[image] > a:focus, +side-note[image] > a:focus-visible, +margin-note[image] > a:focus, +margin-note[image] > a:focus-visible, +nav column-middle > a:focus, +nav column-middle > a:focus-visible, +nav column-middle context-menu a:focus, +nav column-middle context-menu a:focus-visible, +nav column-middle context-menu button, +nav column-middle context-menu button:focus, +nav column-middle context-menu button:focus-visible { + box-shadow: none; +} diff --git a/public/js/app.js b/public/js/app.js index e8d8934..cb3dfa0 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -10,6 +10,24 @@ function addClass (el, cl) { if (el) { var a = el.className.split(' '); if (!afi function remClass (el, cl) { if (el) { var a = el.className.split(' '); arem(a, cl); el.className = a.join(' '); } } function runOnce(action) { runOnce = function(){}; action(); } +/* + * Context Menu functions + */ +function contextMenuHide(element, event) { + /* Hide contextMenu elements */ + for (var i = 0; i < element.length; i++) { + element[i].checked = false; + } +} + +function contextMenuClickHide(element, event) { + /* Hide contextMenu when clicked outside of region */ + for (var i = 0; i < element.length; i++) { + let notClicked = !element[i].contains(event.target); + if (notClicked && contextMenuInputs[i].checked === true) { contextMenuHide(contextMenuInputs); } + } +} + /** * Remove url query string */ @@ -22,7 +40,7 @@ window.history.replaceState(null, '', url); url = window.location.href.split('#')[0]; /** - * Settings array + * Load events */ var settings = { pager: {} }; @@ -40,65 +58,18 @@ window.addEventListener('DOMContentLoaded', function(event) { localStorage['settings'] = JSON.stringify(settings); }); -/* - * Dropdown functions - */ -function dropdownHide(element, event) { - /* Hide dropdown elements */ - for (var i = 0; i < element.length; i++) { - element[i].checked = false; - } -} - -function dropdownClickHide(element, event) { - /* Hide dropdown when clicked outside of region */ - for (var i = 0; i < element.length; i++) { - let click = element[i].contains(event.target); - if (!click && dropdownInputList[i].checked === true) { dropdownHide(dropdownInputList); } - } -} - -/* - * Hide dropdown when the mouse is far away - */ -document.addEventListener('mousemove', function(event) { - let mouseX = event.pageX; - let mouseY = event.pageY; - - function magnitude(x, y) { - return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); - } - - function distance(mouseX, mouseY, element) { - let position = element.getBoundingClientRect(); - let elementX = position.right - (element.offsetWidth / 2 ) + window.pageXOffset; - let elementY = position.bottom - (element.offsetHeight / 2 ) + window.pageYOffset; - return Math.abs(magnitude(mouseX, mouseY) - magnitude(elementX, elementY)); - } - - function hide(element, threshold, event) { - for (var i = 0; i < element.length; i++) { - let proximity = distance(mouseX, mouseY, element[i]); - if (proximity > threshold && dropdownInputList[i].checked === true) { - dropdownHide(dropdownInputList, event); - } - } - } - hide(dropdownContentList, 300, event); -}); - /* * Click events */ document.addEventListener('click', function(event) { - dropdownClickHide(dropdownMenuList, event); + contextMenuClickHide(contextMenus, event); }); /* * Touch start events */ document.addEventListener('touchstart', function(event) { - dropdownClickHide(dropdownMenuList, event); + contextMenuClickHide(contextMenus, event); }); /** @@ -109,13 +80,12 @@ var navbar = document.getElementById("navbar"); var navbarHeight = navbar.offsetHeight; var scrolls = 0; -var dropdownInputList = byClass(document, 'dropdown-input'); -var dropdownContentList = byClass(document, 'dropdown-content'); -var dropdownMenuList = byClass(document, 'dropdown'); +var contextMenus = document.getElementsByTagName('context-menu-container'); +var contextMenuInputs = document.querySelectorAll('context-menu-container input'); window.addEventListener('scroll', function(event) { - dropdownHide(dropdownInputList); + contextMenuHide(contextMenuInputs); var currentPosition = window.pageYOffset; var velocity = previousPosition - currentPosition; @@ -125,11 +95,11 @@ window.addEventListener('scroll', function(event) { if (scrolls > 3) { if (velocity > 75 || currentPosition < navbarHeight) { - remClass(navbar, 'headroom'); + remClass(navbar, 'hide'); } else if (velocity < -25) { - addClass(navbar, 'headroom'); + addClass(navbar, 'hide'); } else if (currentPosition > navbarHeight) { - runOnce(function () { addClass(navbar, 'headroom'); }); + runOnce(function () { addClass(navbar, 'hide'); }); } } @@ -631,8 +601,8 @@ window.addEventListener('scroll', function(event) { * Activate Medium Zoom */ var imageZoom = mediumZoom('[data-image-zoom]'); -imageZoom.on('open', function(event) { addClass(navbar, 'headroom'); }); -imageZoom.on('close', function(event) { remClass(navbar, 'headroom'); }); +imageZoom.on('open', function(event) { addClass(navbar, 'hide'); }); +imageZoom.on('close', function(event) { remClass(navbar, 'hide'); }); /** -- cgit v1.2.3