/* bobatheme is available under the MIT license at * https://github.com/BBaoVanC/bobatheme. */ /* color notes: * accent is 15 chroma, 270 hue * * lightness (dark): * background-0: 5 * background-1: 12.5 * background-2: 20 * background-highlight: 27.5 * text-0: 92.5 * text-1: 85 */ :root { --background-0: #111111; --background-1: #212121; --background-2: #303030; --background-highlight: #414141; --background-accent: #101c30; /* lch(10, 15, 270) */ --text-0: #e9e9e9; --text-1: #d4d4d4; --link-color: #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; --background-1: #dbdbdb; --background-2: #c6c6c6; --background-highlight: #c6c6c6; --background-accent: #d7e3ff; --text-0: #171717; --text-1: #262626; --link-color: #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 ul, .series-taxonomy ul { display: flex; flex-direction: column; list-style: none; padding: 0; gap: 40px; } .series-taxonomy ul { gap: 80px; } .page-list li, .series-taxonomy li { padding-top: 8px; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; border-radius: 12px; background-color: var(--background-1); } .post-series-position { position: relative; float: right; opacity: .75; } .post-title, .author-name { margin-bottom: 10px; } .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: 15px; } .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 ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .taxonomy-list li { background-color: var(--background-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 li { flex-direction: column; gap: 4px; } .taxonomy-list-left { flex-direction: row; justify-content: space-between; } } /* Series list format */ .series-pages ul { display: flex; gap: 10px; flex-flow: row wrap; list-style: none; background-color: var(--background-0); padding: 8px; border-radius: 16px; } .series-pages li { flex: 1; min-width: 49%; } /* Subsection formatting */ .sections { display: flex; flex-direction: column; gap: 40px; } .section { background-color: var(--background-1); border-radius: 12px; padding: 1px 25px; } .section:hover { background-color: var(--background-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 a, .section-header a { color: inherit; } .section-header-link svg { width: 15px; height: 15px; } /* Content formatting */ .series-box { background-color: var(--background-1); padding: 8px 16px; border-radius: 8px; margin: 15px 0; } .table-of-contents { background-color: var(--background-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 li { min-width: 300px; max-width: 300px; } .full-width-page-list li:first-child { margin-left: 20px; } .full-width-page-list li: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 ul { display: flex; flex-direction: row; gap: 20px; overflow-x: scroll; } /* Social media share buttons */ .share-buttons { background: var(--background-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); 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); 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); border-radius: 100%; padding: 12px; display: none; } /* Navbar formatting */ .topbar { display: flex; flex-wrap: nowrap; flex-direction: row; background-color: var(--background-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-highlight); text-decoration: none; } .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); 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-1); 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; } aside { background-color: var(--background-1); padding: 12px 16px; margin: 16px 0; border-radius: 8px; } a { color: var(--link-color); 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-highlight); } table.markdown { border-collapse: collapse; border: 2px solid var(--text-1); } .markdown thead { background-color: var(--background-2); } .markdown th, .markdown td { padding: 8px; } .markdown tbody tr:nth-child(odd) { background-color: var(--background-0); } .markdown tbody tr:nth-child(even) { background-color: var(--background-1); } * { box-sizing: border-box; } /* Code blocks */ .highlight { margin: 16px 0; } .highlight > pre { padding: 12px 8px; overflow: auto; } :not(pre) > code { background-color: var(--background-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 */ /* 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); } .page-link:hover { text-decoration: none; } :not(li.disabled) > .page-link:hover { background-color: var(--background-highlight); } li.disabled { opacity: .5; } li.disabled > .page-link:hover { cursor: not-allowed; } /* Breadcrumb navigation */ .breadcrumb { 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); padding: 8px 16px; } .prevnext > a:hover { background-color: var(--background-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) { /* Basic elements */ .section:hover { color: inherit; } 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; } }