/* bobatheme is available under the MIT license at * https://github.com/BBaoVanC/bobatheme. * * vim: foldmethod=marker */ /* Color palette {{{ */ :root { --background-0: #111111; /* lch(5, 0, X) */ --background-1: #212121; /* lch(12.5, 0, X) */ --background-2: #303030; /* lch(20, 0, X) */ --background-3: #414141; /* lch(27.5, 0, X) */ --background-pink-1: #331821; /* lch(12.5, 15, 0) */ --background-red-1: #331917; /* lch(12.5, 15, 30) */ --background-orange-1: #2e1c0e; /* lch(12.5, 15, 60) */ --background-yellow-1: #262008; /* lch(12.5, 15, 90) */ --background-lime-1: #1b230c; /* lch(12.5, 15, 120) */ --background-green-1: #0e2516; /* lch(12.5, 15, 150) */ --background-turquoise-1: #012620; /* lch(12.5, 15, 180) */ --background-teal-1: #00262b; /* lch(12.5, 15, 210) -- out of sRGB */ --background-cerulean-1: #032432; /* lch(12.5, 15, 240) */ --background-blue-1: #152135; /* lch(12.5, 15, 270) */ --background-purple-1: #241d33; /* lch(12.5, 15, 300) */ --background-magenta-1: #2e1a2b; /* lch(12.5, 15, 330) */ --background-pink-2: #4b2431; /* lch(20, 20, 0) */ --background-red-2: #4a2623; /* lch(20, 20, 30) */ --background-orange-2: #432a17; /* lch(20, 20, 60) */ --background-yellow-2: #373012; /* lch(20, 20, 90) */ --background-lime-2: #283416; /* lch(20, 20, 120) */ --background-green-2: #163721; /* lch(20, 20, 150) */ --background-turquoise-2: #003830; /* lch(20, 20, 180) -- out of sRGB */ --background-teal-2: #00373e; /* lch(20, 20, 210) -- out of sRGB */ --background-cerulean-2: #013549; /* lch(20, 20, 240) */ --background-blue-2: #1f314e; /* lch(20, 20, 270) */ --background-purple-2: #352c4a; /* lch(20, 20, 300) */ --background-magenta-2: #43263f; /* lch(20, 20, 330) */ --background-accent-1: var(--background-blue-1); --background-accent-2: var(--background-blue-2); --text-0: #d4d4d4; /* lch(85, 0, X) */ --text-1: #d4d4d4; /* lch(85, 0, X) */ --text-2: #d4d4d4; /* lch(85, 0, X) */ --text-3: #e9e9e9; /* lch(92.5, 0, X) */ --text-gray-0: #ababab; /* lch(70, 0, X) */ --text-gray-1: #919191; /* lch(60, 0, X) */ --link-0: #3a94fb; /* lch(60, 60, 270) */ --link-1: #4ea1ff; /* lch(65, 60, 270) -- out of sRGB */ --figure-border: #1f5593; /* lch(35, 40, 270) */ --pagination-active-hover-text: black; --pagination-active-background: #1a3d69; /* lch(25, 30, 270) */ --pagination-active-hover-background: #2061a8; /* lch(40, 45, 270) */ } @media print, (prefers-color-scheme: light) { :root { --background-0: #f1f1f1; /* lch(95, 0, X) */ --background-1: #dbdbdb; /* lch(87.5, 0, X) */ --background-2: #c6c6c6; /* lch(80, 0, X) */ --background-3: #b2b2b2; /* lch(72.5, 0, X) */ --background-pink-1: #f7d1dc; /* lch(87.5, 15, 0) */ --background-red-1: #f8d2ce; /* lch(87.5, 15, 30) */ --background-orange-1: #f1d6c3; /* lch(87.5, 15, 60) */ --background-yellow-1: #e4dbbf; /* lch(87.5, 15, 90) */ --background-lime-1: #d5dfc2; /* lch(87.5, 15, 120) */ --background-green-1: #c6e3cc; /* lch(87.5, 15, 150) */ --background-turquoise-1: #bce4db; /* lch(87.5, 15, 180) */ --background-teal-1: #bae3e9; /* lch(87.5, 15, 210) */ --background-cerulean-1: #c2e0f4; /* lch(87.5, 15, 240) */ --background-blue-1: #d0dcf8; /* lch(87.5, 15, 270) */ --background-purple-1: #e1d7f4; /* lch(87.5, 15, 300) */ --background-magenta-1: #efd3ea; /* lch(87.5, 15, 330) */ --background-pink-2: #fbb1c8; /* lch(80, 30, 0) */ --background-red-2: #fbb4ac; /* lch(80, 30, 30) */ --background-orange-2: #eebc97; /* lch(80, 30, 60) */ --background-yellow-2: #d6c58e; /* lch(80, 30, 90) */ --background-lime-2: #b8ce95; /* lch(80, 30, 120) */ --background-green-2: #9ad4a9; /* lch(80, 30, 150) */ --background-turquoise-2: #81d6c5; /* lch(80, 30, 180) */ --background-teal-2: #7ad5e1; /* lch(80, 30, 210) */ --background-cerulean-2: #8cd0f6; /* lch(80, 30, 240) */ --background-blue-2: #adc8fe; /* lch(80, 30, 270) */ --background-purple-2: #d0bef7; /* lch(80, 30, 300) */ --background-magenta-2: #ecb5e3; /* lch(80, 30, 330) */ --background-accent-1: var(--background-blue-1); --background-accent-2: var(--background-blue-2); --text-0: #262626; /* lch(15, 0, X) */ --text-1: #262626; /* lch(15, 0, X) */ --text-2: #262626; /* lch(15, 0, X) */ --text-3: #171717; /* lch(72.5, 0, X) */ --text-gray-0: #474747; /* lch(30, 0, X) */ --text-gray-1: #5e5e5e; /* lch(40, 0, X) */ --link-0: #2061a8; /* lch(40, 45, 270) */ --link-1: #044e8e; /* lch(32, 42, 270 */ --figure-border: #367acd; /* lch(50, 50, 270) */ --pagination-active-hover-text: white; --pagination-active-background: #9fbaf0; /* lch(75, 30, 270) */ --pagination-active-hover-background: #6193e0; /* lch(60, 45, 270) */ } } @media print { :root { --background-0: #fff; --text-0: #000; } } /* }}} */ /* Fonts {{{ */ @font-face { font-family: "Open Sans"; font-display: swap; font-style: normal; src: url("../font/opensans/OpenSans-VariableFont_wdth,wght-9f637b868d10819aa0085e6cf7f70953411c8905c4055c069adbe8acc708feef.woff2") format("woff2"); } @font-face { font-family: JetBrainsMono; font-display: swap; src: url("../font/jetbrainsmono/JetBrainsMono_wght-e190ee6595a3b9bd25278613a6f5d3766ee1a708f300ed44fa63dbe84051498f.woff2") format("woff2"); } :root { --font-sans: "Open Sans", "Noto Sans", sans-serif; --font-mono: JetBrainsMono, monospace; } html { font-family: var(--font-sans); /* otherwise code block lines have random text sizes on mobile safari */ -webkit-text-size-adjust: none; } pre, code, kbd, samp, textarea { font-family: var(--font-mono); font-size: 0.75em; } pre > code { /* otherwise it ends up being 0.75^2 em */ font-size: unset; } /* }}} */ /* Basic elements {{{ */ html { scroll-behavior: smooth; } @media screen and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--background-0); color: var(--text-0); overflow-wrap: break-word; margin: 0; } .main-container { margin: 20px auto; padding: 0 20px; max-width: 760px; /* 720px + 20px for left & right padding */ } footer { margin: 20px 0; text-align: center; font-size: smaller; } footer p { margin: 0; } img, video { max-width: 100%; } .post-media > figure.border img, .post-media > figure.border video { padding: 5px; border: 7px solid var(--figure-border); } figure.border img, figure.border video { padding: 5px; border: 2px solid var(--figure-border); } figure { margin: auto; display: inline-block; } figcaption { font-style: italic; font-size: small; text-align: center; } a { color: var(--link-0); text-decoration: inherit; } a:hover { text-decoration: underline; } blockquote { border-left: 5px solid var(--background-2); padding-left: 15px; margin-left: 0; } hr { border: 1px solid var(--background-3); } @media (min-width: 720px) { .full-width-hr { /* see also: the related-posts section too */ margin-left: calc(-100vw / 2 + 760px / 2); margin-right: calc(-100vw / 2 + 760px / 2); } } table.markdown { border-collapse: collapse; border: 2px solid var(--text-1); } table.markdown thead { background-color: var(--background-2); color: var(--text-2); border-bottom: 2px solid var(--text-1); } table.markdown th, table.markdown td { padding: 8px; } table.markdown :is(th, td) + :is(th, td) { border-left: 2px solid var(--text-1); } table.markdown tbody tr:nth-child(odd) { background-color: var(--background-0); color: var(--text-0); } table.markdown tbody tr:nth-child(even) { background-color: var(--background-1); color: var(--text-1); } :target { animation: target-fade 10s ease-out; } @keyframes target-fade { 0% { background-color: var(--background-yellow-2); } } * { box-sizing: border-box; } /* Icons */ .icon { width: 20px; height: 20px; color: var(--text-1); text-align: center; display: inline; vertical-align: middle; } h1 svg.icon { width: 30px; height: 30px; } /* }}} */ /* Heading formatting (article section titles) {{{ */ /* this is also used i.e. in page-title */ .heading-link { color: inherit; font-weight: bold; } .heading-link svg { width: 15px; height: 15px; } /* }}} */ /* Top bar formatting {{{ */ .top { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; background-color: var(--background-1); } .header { flex-grow: 1; margin: 8px 16px; font-size: 1.25em; display: flex; align-items: center; } .navbar { display: flex; flex-wrap: wrap; } .navbar-item { padding: 12px 16px; white-space: nowrap; } .navbar-item:hover { background-color: var(--background-2); text-decoration: none; } .navbar-item.active { font-weight: bold; } /* }}} */ /* Back to top {{{ */ #top { font-size: 0; } #back-to-top { position: fixed; float: right; bottom: 25px; right: 25px; background-color: var(--background-1); color: var(--text-1); border-radius: 100%; padding: 12px; display: none; } /* }}} */ /* Skip to main content {{{ */ #skip-to-main { position: absolute; padding: 8px; background-color: var(--text-0); color: var(--background-0); transform: translateY(-100%); } #skip-to-main:focus { transform: translateY(0%); } #main-content:target { animation: none; /* prevent it from turning yellow */ } /* }}} */ /* Breadcrumb navigation {{{ */ .breadcrumb { margin: 20px 0; } .breadcrumb ul { margin: 0; padding: 0; list-style: none; } .breadcrumb li { display: inline; } .breadcrumb li+li:before { content: "ยป" } /* }}} */ /* Pagination {{{ */ .pagination { list-style: none; text-align: center; padding: 0; } .pagination .page-item { display: inline; } .pagination .page-link { padding: 8px 16px; border-radius: 5px; color: var(--text-1); } .pagination .page-item.active .page-link { background-color: var(--pagination-active-background); color: inherit; } .pagination .page-item.active .page-link:hover { background-color: var(--pagination-active-hover-background); color: var(--pagination-active-hover-text); cursor: default; } .pagination .page-link:hover { text-decoration: none; } .pagination :not(li.disabled) > .page-link:hover { background-color: var(--background-3); } .pagination li.disabled { opacity: .5; } .pagination li.disabled > .page-link:hover { cursor: not-allowed; } /* }}} */ /* List layout {{{ */ /* flexbox container for sections and main page list */ .list-page-container { display: flex; flex-direction: column; gap: 40px; } .page-list { display: flex; flex-direction: column; list-style: none; padding: 0; gap: 40px; margin-top: 16px; } .page-list > .page { padding: 24px; border-radius: 12px; background-color: var(--background-1); color: var(--text-1); } .page > .page-title { margin-top: 0; } /* hugo just can't handle this feature .post-series-position { position: relative; float: right; opacity: .75; } */ .page-title { margin-bottom: 10px; } .page-title h1 { margin: 0; } .page-metadata { margin-bottom: 24px; } .page-metadata-item { margin-right: 10px; display: inline-block; } .page-metadata-section { margin-top: 10px; } .post-media { margin-top: 15px; } .page-description { margin-top: 10px; } .readmore { margin-top: 5px; } /* }}} */ /* Taxonomy list layout {{{ */ .taxonomy-list a, .taxonomy-list .taxonomy-metadata { white-space: nowrap; } .taxonomy-list p { margin: 0; } .taxonomy-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .taxonomy-list .taxonomy-term { background-color: var(--background-1); color: var(--text-1); padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: row; gap: 20px; } .taxonomy-list-left { display: flex; flex-direction: column; } @media (max-width: 480px) { .taxonomy-list .taxonomy-term { flex-direction: column; gap: 4px; } .taxonomy-list-left { flex-direction: row; justify-content: space-between; } } /* }}} */ /* Series list layout {{{ */ .page-list.series { display: flex; gap: 80px; flex-flow: row wrap; list-style: none; color: var(--text-0); padding: 8px; border-radius: 16px; } .page-list.series-inner { gap: 10px; flex-direction: row; flex-flow: row wrap; background-color: var(--background-0); /*color: var(--text-0);*/ padding: 8px; border-radius: 16px; } .page-list.series-inner > .page { flex: 1; min-width: 49%; } /* }}} */ /* Subsections on list pages {{{ */ .sections { display: flex; flex-direction: column; gap: 10px; } .section { background-color: var(--background-1); color: var(--text-1); border-radius: 12px; padding: 1px 25px; } .section:hover { background-color: var(--background-2); color: var(--text-2); } .section-title { margin: 10px 0; } .section-anchor { color: inherit; } .section-anchor:hover { text-decoration: none; } .section-description { margin-bottom: 5px; } .view-section { margin-top: 5px; } /* }}} */ /* Content (single) formatting {{{ */ .series-box { background-color: var(--background-1); color: var(--text-1); padding: 8px 16px; border-radius: 8px; margin: 15px 0; } .table-of-contents { background-color: var(--background-1); color: var(--text-1); padding: 8px 20px; border-radius: 8px; margin: 10px 0; } .table-of-contents summary { cursor: pointer; } .table-of-contents.print { display: none; padding: 8px 15px; } /* Social media share buttons */ .share-buttons { background: var(--background-1); color: var(--text-1); margin: 25px 0; padding: 8px 0; border-radius: 8px; display: flex; gap: 8px; justify-content: center; } .share-buttons a { background-color: var(--background-2); color: var(--text-2); padding: 4px; border-radius: 8px; } .share-buttons a:hover { background-color: var(--background-3); color: var(--text-3); } .share-buttons svg { width: 32px; height: 32px; } /* https://stackoverflow.com/a/72073682/19003757 */ /* .telegram-share > svg { transform: scale(1.5); margin: 9px -9px -9px 9px; } */ /* See also formating */ .see-also { background-color: var(--background-1); color: var(--text-1); padding: 8px 12px; border-radius: 8px; margin: 10px 0; } .see-also p { margin: 0; } /* Previous and next page buttons {{{ */ .prevnext { display: flex; margin: 20px 0; } .prevnext > * { flex: 1; white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; color: inherit; background-color: var(--background-1); color: var(--text-1); padding: 8px 16px; } .prevnext > a:hover { background-color: var(--background-2); color: var(--text-2); text-decoration: none; } .prevnext > .prev { text-align: left; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .prevnext > .next { text-align: right; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .prevnext .prev-caption, .prevnext .next-caption { opacity: 65%; } .prevnext .prev-post, .prevnext .next-post { overflow: hidden; text-overflow: ellipsis; } /* }}} */ /* Code & code blocks {{{ */ .code-block { display: flex; flex-direction: column; margin: 16px 0; background-color: var(--background-1); border-radius: 8px; } .code-block > .code-header { display: flex; flex-direction: row; justify-content: space-between; background-color: var(--background-2); padding: 4px 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .code-block > .code-header > .code-type { border-top-left-radius: 8px; margin: auto 0; } /* TODO: make the code copy button prettier */ .code-block > .code-header > .code-copy-button { color: var(--link-1); } .code-block > .code-header > .code-copy-button:hover { cursor: pointer; } .code-block > .highlight { margin: 8px 4px; } .highlight > .chroma { overflow: auto; } .chroma { /* the syntax highlight CSS adds a border */ background-color: transparent !important; margin: 0; } .chroma .gp { /* Generic Prompt symbol */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } :not(pre) > code { background-color: var(--background-2); /* Disable this because it overrides inline code blocks that are * also links color: var(--text-2); */ padding: 2px 4px; overflow-wrap: break-word; } .code-block > .code-header > .code-type, code { border-radius: 5px; } .chroma .lnt { display: block; } /* fixes line numbers on firefox when there's only one line */ /* }}} */ /* Asides {{{ */ aside { padding: 8px 16px; margin: 16px 0; border-radius: 8px; color: var(--text-1); } .aside-title { margin-bottom: 8px; padding-bottom: 4px; font-weight: bold; } .aside-content > :first-child { margin-top: 0; } .aside-content > :last-child { margin-bottom: 0; } aside.note { background-color: var(--background-blue-1); } aside.info { background-color: var(--background-green-1); } aside.tip { background-color: var(--background-teal-1); } aside.warning { background-color: var(--background-yellow-1); } aside.example { background-color: var(--background-purple-1); } aside.quote { background-color: var(--background-1); } /* }}} */ /* }}} */ /* Related posts section {{{ */ .full-width-page-list { /* make left/right 0 margin so it takes up full width */ margin: 25px 0; } .related-posts > hr, .related-posts > h1 { margin-left: 20px; margin-right: 20px; } .related-posts .page { min-width: 300px; max-width: 300px; } .related-posts .page:first-child { margin-left: 20px; } .related-posts .page:last-child { margin-right: 20px; } .related-posts .page-list { display: flex; flex-direction: row; gap: 20px; overflow-x: scroll; } /* }}} */ /* @media specializations {{{ */ /* Light mode */ @media print, (prefers-color-scheme: light) { li.disabled { opacity: .25; } } /* Print compatibility {{{ */ @media print { .top > .navbar, .section-header-link, .post-meta-edit-history, .prevnext, .share-buttons, .related-posts { display: none; } * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; } .top { background-color: unset; } .top > .header { margin-left: 0; margin-right: 0; } .main-container { max-width: 100%; margin: 8px 0; padding: 0; } .breadcrumb { margin: 8px 0; } table, aside, .code-block { break-inside: avoid; } .table-of-contents { display: none; } .table-of-contents.print { display: block; } #back-to-top { display: none !important; } } /* }}} */ /* }}} */