/* bobatheme is available under the MIT license at * https://github.com/BBaoVanC/bobatheme. */ :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) */ --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) */ --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; } } /* Post layout (in list pages) */ .list-page-content { display: flex; flex-direction: column; gap: 40px; } .page-list, .series-taxonomy-list { display: flex; flex-direction: column; list-style: none; padding: 0; gap: 40px; } .series-taxonomy-list { gap: 80px; } .page-list .post, .series-taxonomy-list .series-taxonomy, .series-taxonomy .post { padding-top: 8px; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; border-radius: 12px; background-color: var(--background-1); color: var(--text-1); } .post-series-position { position: relative; float: right; opacity: .75; } .post-title, .author-name { margin-bottom: 10px; } .post-title h1, .author-name h1 { margin: 0; } .post-title a, .author-name a { color: inherit; text-decoration: inherit; } .post-meta-item, .author-meta-item { margin-right: 10px; display: inline-block; } .post-metadata, .author-metadata { margin-bottom: 24px; } .categories, .tags, .series { margin-top: 10px; } .post-media { margin-top: 15px; } .post-description, .author-description { margin-top: 10px; } .readmore { margin-top: 5px; } /* Taxonomy list format */ .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 format */ .series-page-list { display: flex; gap: 10px; flex-flow: row wrap; list-style: none; background-color: var(--background-0); color: var(--text-0); padding: 8px; border-radius: 16px; } .series-page-list .post { flex: 1; min-width: 49%; } /* Subsection formatting */ .sections { display: flex; flex-direction: column; gap: 40px; } .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; } /* Header formatting (website title and article section headers) */ .header { margin: 16px 0; } .header h1 { font-size: 1.5em; font-weight: bold; } .header a, .section-header a { color: inherit; } .section-header-link svg { width: 15px; height: 15px; } /* Content 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; } /* Related posts */ .full-width-page-list { /* make left/right 0 margin so it takes up full width */ margin: 25px 0; } .full-width-page-list > hr, .full-width-page-list > h1 { margin-left: 20px; margin-right: 20px; } .full-width-page-list .post { min-width: 300px; max-width: 300px; } .full-width-page-list .post:first-child { margin-left: 20px; } .full-width-page-list .post:last-child { margin-right: 20px; } @media (max-width: 720px) { /* when the screen is smaller than max size, make sure that the .related div * still reaches the screen edge. then if the posts overflow and require * scrolling, you can see it cut off on the side of your phone screen */ .full-width-page-list { margin-left: -20px; margin-right: -20px; } } @media (min-width: 720px) { .full-width-page-list { /* this makes it full width -- 720px max-width on body it is exactly 720px * so .related takes up full width */ margin-left: calc(-100vw / 2 + 720px / 2); margin-right: calc(-100vw / 2 + 720px / 2); } } .full-width-page-list .page-list { display: flex; flex-direction: row; gap: 20px; overflow-x: scroll; } /* 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 button, .share-buttons a { background-color: var(--background-2); color: var(--text-2); padding: 4px; border-radius: 8px; } .share-buttons button { border: none; } .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; } /* Back to top */ #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; } /* Navbar formatting */ .topbar { display: flex; flex-wrap: nowrap; flex-direction: row; background-color: var(--background-1); color: var(--text-1); border-radius: 8px; margin-top: 5px; padding: 4px; align-items: flex-start; } .navbar { display: flex; flex-grow: 1; overflow: auto; } .navbar a { padding: 8px 12px; border-radius: 12px; white-space: nowrap; } .navbar-item:hover, .langpicker summary:hover, .langpicker[open] summary { background-color: var(--background-3); text-decoration: none; } .langpicker summary:hover, .langpicker[open] summary { color: var(--text-3); } .topbar .active { font-weight: bold; } .langpicker { position: relative; white-space: nowrap; } .langpicker summary { cursor: pointer; margin-left: 24px; padding: 8px 12px; border-radius: 12px; } .langpicker .languages { position: absolute; margin-top: 8px; right: 0; background-color: var(--background-1); color: var(--text-1); border: 2px solid var(--background-2); padding: 8px 12px; border-radius: 8px; list-style: none; } .langpicker .unavailable { color: inherit; } .langpicker .unavailable:hover { cursor: not-allowed; text-decoration: none; } /* 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); font-family: "Open Sans", "Noto Sans", sans-serif; margin: 20px; max-width: 720px; overflow-wrap: break-word; } @media (min-width: 760px) { body { margin: 20px auto; } } footer { text-align: center; } 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; } 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); } .markdown thead { background-color: var(--background-2); color: var(--text-2); } .markdown th, .markdown td { padding: 8px; } .markdown tbody tr:nth-child(odd) { background-color: var(--background-0); color: var(--text-0); } .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; } /* Code blocks */ .highlight > .chroma { margin: 16px 0; overflow: auto; } .chroma { background-color: var(--background-1) !important; } .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 { 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); } /* 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; } /* Pagination */ .pagination { list-style: none; text-align: center; padding: 0; } .page-item { display: inline; } .page-link { padding: 8px 16px; border-radius: 5px; color: var(--text-1); } .page-item.active .page-link { background-color: var(--pagination-active-background); color: inherit; } .page-item.active .page-link:hover { background-color: var(--pagination-active-hover-background); color: var(--pagination-active-hover-text); cursor: default; } .page-link:hover { text-decoration: none; } :not(li.disabled) > .page-link:hover { background-color: var(--background-3); } li.disabled { opacity: .5; } li.disabled > .page-link:hover { cursor: not-allowed; } /* Breadcrumb navigation */ .breadcrumb ul { margin: 30px 0 20px; } .breadcrumb ul { padding: 0; list-style: none; } .breadcrumb li { display: inline; } .breadcrumb li+li:before { content: "ยป" } /* Previous and next page */ .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; } /* Light mode */ @media print, (prefers-color-scheme: light) { li.disabled { opacity: .25; } } /* Print compatibility */ @media print { .top, .section-header-link, .post-meta-edit-history, .prevnext, .share-buttons, .related-posts, .latest-posts { display: none; } * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; } body { max-width: 100%; } pre { white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; } .table-of-contents { display: none; } .table-of-contents.print { display: block; } #back-to-top { display: none !important; } }