Something went wrong. Try again.
engineering blog at https://blog.tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475:root { --cyan: #509c93; --light: #fff9eb; --light-gray: #fceccc; --medium-gray: #e6dcd1; --mediumer-gray: #d8cbbe; --gray: #776e63; --dark: #4a443d; --darker: #2a261f; --bg: oklch(0.968 0.007 247.896); --fg: oklch(0.21 0.034 264.665); --selection: oklch(85.2% 0.199 91.936 / 30%);
--font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;}
@media (prefers-color-scheme: dark) { :root { --cyan: #509c93; --light: #2a261f; --light-gray: #4a443d; --medium-gray: #6b635a; --gray: #d3cec1; --fg: #fff6e3; --dark: #e6dcd1; --darker: #fff9eb; --bg: #100f0f; --selection: rgba(80, 156, 147, 0.2); }
html { background: var(--bg); color: var(--fg); }
main a { color: var(--gray); border-bottom: 1.5px solid var(--medium-gray); }
hr { background: var(--light); }
blockquote p { border-left: 1.5px solid var(--gray); }
}
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: none;}
::selection { background: var(--selection); color: var(--darker);}
del { text-decoration: line-through !important;}
* { box-sizing: border-box; padding: 0; margin: 0;}
main,footer { font-family: var(--font-content); font-size: 1.05rem; padding: 0; line-height: 160%; font-weight: 400;}
main article,table { min-width: 0;}
h2,h3 { font-weight: 400 !important;}
strong { font-weight: 500;}
main h1 { font-size: calc(1.35em + 0.35vw); padding: 30px 0 30px 0; font-weight: 500; line-height: 1.2;}
main h2 { color: var(--dark); font-size: calc(1.20em + 0.25vw);}
main h2,h3 { margin: 40px 0 20px 0;}
.logo { svg { max-height: 2.5rem; max-width: 2.5rem; transform: translateY(-10%); fill: var(--fg);
}
flex-grow: 1; margin-right: 1rem; text-decoration: none; border-bottom: unset; background: unset !important;}
.footimgs a { all: unset !important;}
.footimgs img { max-height: 2.5rem; max-width: 2.5rem; display: inline-block; vertical-align: middle; image-orientation: from-image; padding: 0 0 5px 5px; cursor: pointer;}
a { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; word-wrap: break-word;}
main a { color: var(--darker); border-bottom: 1.5px solid var(--medium-gray);}
a:hover { border-bottom: 1.5px solid var(--gray);}
body { max-width: 655px; padding: 2rem 1rem 20rem; margin: 1rem auto;}
main article img { max-width: 100%; width: 100%; display: block; margin: 10px auto 4px auto; border-radius: 6px;}
main ul,main ol { margin: 10px 30px 10px 30px;}
.row { display: flex; flex-wrap: wrap; align-items: center; padding: 1rem 0.5rem 0.5rem 1rem;
img { object-fit: cover; };}
.image-grid { column-count: 2;}
.image-grid img { all: unset; object-fit: cover; position: relative; width: 100%; margin-bottom: 12px;}
.image-grid a { border-bottom: unset;}
.subtitle { padding: 2px 0 20px 0; margin-top: 3px !important; margin-bottom: 5px; color: var(--gray); line-height: 1.5;}
.title { padding: 30px 0 10px 0;}
.muted { color: var(--gray);}.muted a { color: var(--cyan); border-bottom: 1.5px solid var(--cyan);}
article p { padding: 7px 0 7px 0;}
article a { color: var(--dark);}
.tagline { padding: 50px 0 20px 0;}
.book-posts { padding-top: 2rem; a { text-decoration: none; } ul { list-style-type: none; padding: 0; margin: 0; } ul > li { display: flex; align-items: baseline; } li > .post { flex-grow: 1; }
.author { flex-shrink: 1; white-space: nowrap; vertical-align: baseline; color: var(--gray); }
.status { flex-shrink: 1; white-space: nowrap; vertical-align: baseline; }}
.posts { padding-top: 2rem; h2 { margin: 0rem 0 2rem 0; }
ul { list-style-type: none; padding: 0; margin: 0; } ul > li { display: flex; align-items: baseline; } li > .post { flex-grow: 1; }
li > .index-date { flex-shrink: 1; white-space: nowrap; vertical-align: baseline; color: var(--gray); text-transform: lowercase; padding-left: 0.8rem; float: right; }}
pre { overflow-x: auto; overflow-y: hidden; padding: 10px; min-width: 0; background-color: var(--light) !important; margin-bottom: 10px;}
code { font-size: 0.9rem; background-color: var(--light);}
.post-date { padding-top: 20px; color: var(--gray); text-transform: lowercase;}
.header { padding-bottom: 20px;}
table { table-layout: fixed; width: 100%;}
table a { text-decoration: none;}
hr { max-width: 100%; border: 0; height: 1px; margin: 1.5rem 0; background: var(--light-gray);}
footer { padding-top: 30px;}
blockquote { margin: 7px 0 7px 0;}
blockquote p { font-style: italic; color: var(--darker); padding-left: 20px; border-left: 1.5px solid var(--medium-gray);}
li::marker { color: var(--mediumer-gray);}
nav { display: flex; align-items: center;}
nav ul { flex-shrink: 1; padding: 0; margin: 0; list-style: none; padding-bottom: 20px;}
nav ul li { padding-right: 10px; display: inline-block;}
ol { counter-reset: counter;}ol li { counter-increment: counter;}
ol li:not(.footnotes)::marker { color: var(--gray);}
.footnotes > ol li { display: flex; align-items: center; gap: 0.8rem;}
.footnotes > ol li::before { content: counter(counter); border-radius: 50%; text-align: center; line-height: 160%; color: var(--light); background: var(--cyan); width: 18px; height: 18px; font-size: 11px; display: inline-block; flex-shrink: 0;}
.footnote-ref a { text-decoration: none; color: var(--light); border-radius: 50%; text-align: center; line-height: 0.8rem; background: var(--cyan); width: 0.8rem; height: 0.8rem; font-size: 0.6rem; display: inline-block; border-bottom: unset;}
.footnotes > ol li p { margin: 0; line-height: 160%;}
.footnote-return { border-bottom: unset; color: var(--cyan); margin-left: auto;}
.footnote-return:hover { border-bottom: unset; color: var(--cyan); margin-left: auto;}
.footnotes ol li:not(:last-child) { padding-bottom: 2rem;}
.draft { color: red; font-size: 1rem;}
@media (max-width: 400px) { .image-grid { column-count: 1; }
body { padding: 2rem 1rem 10rem; }
table, thead, tbody, th, td, tr { display: block; } td { padding: 0; text-align: left; } tr { padding: 10px 0 10px 0; }}