@import url('https://fonts.googleapis.com/css?family=Oswald|Raleway'); @font-face { font-family: 'JetBrains Mono'; src: url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'), url('https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } :root { --heading-fonts: Oswald, "Segoe UI", Ubuntu, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; --body-fonts: Raleway, "Segoe UI", Ubuntu, Tahoma, "DejaVu Sans", "Liberation Sans", Arial, sans-serif; --code-fonts: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --accent-color: navy; --app-color: maroon; --edge-color: lightgray; --bkg-color: #fffafa; } html { background-color: lightgray; scroll-behavior: smooth; } body, .entry-meta { font-family: var(--body-fonts); } body { margin: 0; background-color: #FFFAFA; } a { color: navy; text-decoration: none; } a:hover { border-bottom: dotted 1px var(--accent-color); } a img { border:0; } acronym { border-bottom:dotted 1px black; text-decoration: none; } .site-header, h1, h2, h3, .site-footer a, .home-lead a, .highlight { font-family: var(--heading-fonts); } h1 { text-align: center; margin: 1.4rem 0; font-size: 2rem; } h2 { margin: 1.2rem 0; } h3 { margin: 1rem 0; } h2, h3 { border-bottom: solid 2px var(--accent-color); width: 95%; } @media all and (min-width: 40rem) { h2, h3 { width: 80%; } } p { margin: 1rem 0; } code, pre { font-family: var(--code-fonts); font-size: 80%; } code { background-color: rgba(0, 0, 0, .1); padding: 0 .25rem; white-space: pre; } pre { background-color: rgba(0, 0, 0, .9); color: rgba(255, 255, 255, .9); padding: .5rem; border-radius: .5rem; overflow: auto; } pre > code { background-color: unset; } div[style="color:#DADADA;background-color:#1E1E1E;"] { background-color: unset !important; } .content { font-size: 1.1rem; } .auto { margin: 0 auto; } @media all and (min-width: 68rem) { .content { width: 66rem; } } .hdr { font-size: 14pt; font-weight: bold; } .site-header { height: 100px; display: flex; flex-direction: row; justify-content: space-between; background-image: -webkit-gradient(linear, left top, left bottom, from(var(--edge-color)), to(var(--bkg-color))); background-image: -webkit-linear-gradient(top, var(--edge-color), var(--bkg-color)); background-image: -moz-linear-gradient(top, var(--edge-color), var(--bkg-color)); background-image: linear-gradient(to bottom, var(--edge-color), var(--bkg-color)); } .site-header a:link, .site-header a:visited { color: black; } .site-header a:hover { border-bottom:none; } .header-title { font-size: 3rem; font-weight: bold; line-height: 100px; text-align: center; } .header-spacer { flex-grow: 3; } .header-social { padding: 25px .8rem 0 0; } .header-social img { width: 50px; height: 50px; } @media all and (max-width: 40rem) { .site-header { height: auto; flex-direction: column; align-items: center; } .header-title { line-height: 3rem; } .header-spacer { display: none; } .header-social { padding-right: 0; } } .content-item { padding-left: 5px; padding-right: 5px; font-size: 1rem; } article.page .metadata { display: none; } .strike { text-decoration: line-through; } .site-footer { padding: 20px 15px 10px 15px; display: flex; flex-direction: row; justify-content: space-between; font-size: 1rem; color: black; clear: both; background-image: -webkit-gradient(linear, left top, left bottom, from(var(--bkg-color)), to(var(--edge-color))); background-image: -webkit-linear-gradient(top, var(--bkg-color), var(--edge-color)); background-image: -moz-linear-gradient(top, var(--bkg-color), var(--edge-color)); background-image: linear-gradient(to bottom, var(--bkg-color), var(--edge-color)); } .site-footer a:link, .site-footer a:visited { color: black; } .alignleft { float:left; padding-right: 5px; } ul { padding-left: 1.5rem; } li { list-style-type: disc; } .content-wrapper { padding: 0 .5rem; } @media all and (min-width: 80rem) { .content-wrapper { margin: 0; display: flex; flex-flow: row; align-items: flex-start; justify-content: space-around; } .content { margin-right: 1rem; } } .load-overlay { position: fixed; display: block; width: 90%; height: 0; z-index: 2000; background-color: rgba(0, 0, 0, .5); border-radius: 1rem; animation: fadeOut .25s ease-in-out; overflow: hidden; } .load-overlay h1 { color: white; background-color: rgba(0, 0, 0, .75); margin-left: auto; margin-right: auto; border-radius: 1rem; width: 50%; padding: 1rem; } .load-overlay.htmx-request { display: block; height: 80vh; animation: fadeIn .25s ease-in-out; } @keyframes fadeIn { 0% { opacity: 0; height: 80vh; } 100% { opacity: 1; height: 80vh; } } @keyframes fadeOut { 0% { opacity: 1; height: 80vh; } 99% { opacity: 0; height: 80vh; } 100% { opacity: 0; height: 0; } } @media all and (min-width: 68rem) { .content { width: 66rem; } .load-overlay { width: 60rem; left: 2rem; } } .home-title { text-align: left; line-height: 2rem; } .home-lead { font-family: var(--body-fonts); font-size: 1.2rem; } .home-break { width: 80%; border: dotted 1px var(--edge-color); border-bottom: 0; } .blog-sidebar { border-top: dotted 1px var(--edge-color); padding-top: 1rem; font-size: 1rem; display: flex; flex-flow: row wrap; justify-content: space-around; } .blog-sidebar ul { padding-left: 0; } .blog-sidebar > ul { padding: 0; margin: 0; } .blog-sidebar li { list-style: none; } .blog-sidebar li:before { content: 'ยป '; } @media all and (min-width: 68rem) { .blog-sidebar { width: 66rem; margin: auto; } } @media all and (min-width: 80rem) { .blog-sidebar { min-width: 12rem; max-width: 14rem; border-top: none; border-left: dotted 1px var(--edge-color); padding-top: 0; padding-left: 1rem; margin: 0 0 0 1rem; flex-direction: column; } } .blog-sidebar a { font-size: 10pt; font-family: sans-serif; } .sidebar-head { text-align: center; font-family: var(--heading-fonts); font-weight: bold; color: var(--app-color); margin-bottom: .8rem; padding: 3px 12px; border-bottom: solid 2px var(--edge-color); font-size: 1rem; } .app-sidebar-name, .app-sidebar-description { margin: 0; padding: 0; } .app-sidebar-description { font-style: italic; color: #555555; padding-bottom: .6rem; } .content { font-size: 1.1rem; } .auto { margin: 0 auto; } .auto > div { max-width: 66rem; } .entry-title { line-height: 1; } .entry-header { text-align: center; font-weight: bold; font-size: 1rem; } .entry-content { margin-top: 1.5rem; } .entry-footer { font-size: 85%; border-top: solid 1px rgba(0, 0, 0, .2); } .entry-header p, .entry-footer p { margin: .5rem 0; } .cat-list-count { font-size: .8rem; } .cat-list-count:before { content: '('; } .cat-list-count:after { content: ')'; } .bottom-nav { display: flex; flex-flow: row wrap; justify-content: space-between; padding-top: 1.5rem; } .no-wrap { white-space: nowrap; } figure.highlight { background-color: #F8F8F8; } figure.highlight table { background-color: #002b36; width: 100%; } figure.highlight td.gutter, figure.highlight td.code, figure.highlight pre { padding: 0; border: 0; background-color: #002b36; color: #839496; } figure.highlight td.gutter { text-align:right; padding-right: .4rem; } figure.highlight td.gutter div.line:after { content: ':'; color: #586e75; } figure.highlight td.code pre div.line:after { content: '.'; visibility: hidden; } figure.highlight pre div.line, figure.highlight pre div.line > * { font-family: var(--code-fonts); } figure.highlight { display: block; overflow-x: auto; padding: 0.5em; color: #839496; border:1px dashed #ddd; } figure.highlight .comment, figure.highlight .quote { color: #586e75; } /* Solarized Green */ figure.highlight .keyword, figure.highlight .selector-tag, figure.highlight .addition { color: #859900; } /* Solarized Cyan */ figure.highlight .number, figure.highlight .string, figure.highlight .meta .meta-string, figure.highlight .literal, figure.highlight .doctag, figure.highlight .regexp { color: #2aa198; } /* Solarized Blue */ figure.highlight .title, figure.highlight .section, figure.highlight .name, figure.highlight .selector-id, figure.highlight .selector-class { color: #268bd2; } /* Solarized Yellow */ figure.highlight .attribute, figure.highlight .attr, figure.highlight .variable, figure.highlight .template-variable, figure.highlight .class .title, figure.highlight .type { color: #b58900; } /* Solarized Orange */ figure.highlight .symbol, figure.highlight .bullet, figure.highlight .subst, figure.highlight .meta, figure.highlight .meta .keyword, figure.highlight .selector-attr, figure.highlight .selector-pseudo, figure.highlight .link { color: #cb4b16; } /* Solarized Red */ figure.highlight .built_in, figure.highlight .deletion { color: #dc322f; } figure.highlight .formula { background: #eee8d5; } figure.highlight .emphasis { font-style: italic; } figure.highlight .strong { font-weight: bold; }