/** * https://coolors.co/403f4c-2c2b3c-1b2432-121420-b76d68 **/ @font-face { font-display: swap; font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; src: url("/fonts/LibreBaskerville.woff2"); } @font-face { font-display: swap; font-family: "Source Code Pro"; font-style: normal; font-weight: 400; src: url("/fonts/SourceCodePro.woff2"); } body { font-family: "Helvetica", sans-serif; line-height: 1.8em; font-size: 16px; max-width: 800px; margin: 0 auto; } img { max-width: 100%; max-height: 50vh; height: auto; display: block; margin: 0 auto; background-color: white; } code { font-family: "Source Code Pro", monospace; } pre { padding: 0.7em 1.5em; border-radius: 2px; overflow: auto; } pre > code { background-color: transparent; } blockquote { margin: 0 0 1rem 0; padding: 0 1.5rem; } .header h2, .header h3 { margin: 12px 0; } .content h1, .content h2, .content h3 { font-family: "Libre Baskerville", serif; } .header { display: flex; align-items: baseline; gap: 1rem; line-height: 1.5; } .code { font-style: normal; } .d-inline-block { display: inline-block; } code { color: #282C34; } .code-parameter, .code-operator { color: #A1000C; } .code-punctuation, .code-comment { color: #576066; } .code-keyword { color: #840F91; } .code-string { color: #1D4D00; } .code-function { color: #61AFEF; } .code-type { color: #003396; } .code-field { color: #003396; } .code-variable { color: #840F91; } .code-boolean { color: #E5C07B; } .code-number { color: #E5C07B; } .code-builtin { color: #1D4D00; } .name { margin-bottom: 0; } .article-list { padding: 0; } .article-link { list-style: none; } .mr-2 { margin-right: 2rem; } /* light mode */ body { background-color: #E9E9EC; color: #282C34; } /* TODO: doesn't seem amazing to decrease contrast */ /* should be improved with syntax highlighting? */ pre { border: 1px solid #282C34; } a:any-link { color: #2b55cc; } a.nav-link:any-link { color: #282C34; } table { border-collapse: collapse; } th, td { padding: 0.4em 1em; border: 1px solid #282C34; } th { background-color: #282C34; color: #E9E9EC; } /* dark mode */ blockquote { border-left: 3px solid #1b2432; } @media (prefers-color-scheme: dark) { body { background-color: #1b2432; color: #F0F1FF; } hr { color: #F0F1FF; } code { background-color: #001220; color: #F0F1FF; } pre { background-color: #001220; border: none; } blockquote { border-left: 4px solid #E9E9EC; } .code-parameter, .code-operator { color: #E06C75; } .code-punctuation, .code-comment { color: #9CA7B4; } .code-keyword { color: #D880E0; } .code-string { color: #85B861; } .code-function { color: #61AFEF; } .code-type { color: #66A8BD; } .code-field { color: #66A8BD; } .code-variable { color: #D880E0; } .code-boolean { color: #E5C07B; } .code-number { color: #E5C07B; } .code-builtin { color: #85B861; } a.nav-link:any-link { color: #e9e9ec; } a:any-link { color: #7bbcff; } th, td { border-color: #e9e9ec; } th { background-color: #001220; color: #F0F1FF; } }