mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2025-08-31 00:57:33 -05:00
BBaoVanC
267652a7e4
Just in case I ever want to use the footer tag anywhere else on the page. I'm not sure if I'm reading this right, but it sounds like it would make sense to put all the buttons at the bottom of the content pages as a footer as well. I will have to reconsider this again in the future.
995 lines
19 KiB
CSS
995 lines
19 KiB
CSS
/* 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;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Common distances/sizes {{{ */
|
|
|
|
:root {
|
|
--page-margin: 16px;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
|
|
/* Common elements {{{ */
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
|
|
figure > .figure-media {
|
|
padding: 5px;
|
|
}
|
|
|
|
figure > .figure-media.border {
|
|
border: 2px solid var(--figure-border);
|
|
}
|
|
|
|
.post-media > figure > .figure-media {
|
|
border: 7px solid var(--figure-border);
|
|
}
|
|
|
|
figure {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
table.simple {
|
|
border-collapse: collapse;
|
|
border: 2px solid var(--text-1);
|
|
}
|
|
|
|
table.simple thead {
|
|
background-color: var(--background-2);
|
|
color: var(--text-2);
|
|
border-bottom: 2px solid var(--text-1);
|
|
}
|
|
|
|
table.simple th,
|
|
table.simple td {
|
|
padding: 8px;
|
|
}
|
|
|
|
table.simple :is(th, td) + :is(th, td) {
|
|
border-left: 2px solid var(--text-1);
|
|
}
|
|
|
|
table.simple tbody tr:nth-child(odd) {
|
|
background-color: var(--background-0);
|
|
color: var(--text-0);
|
|
}
|
|
table.simple 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: 1em;
|
|
height: 1em;
|
|
color: var(--text-1);
|
|
text-align: center;
|
|
display: inline;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
/* workarounds for some icons from jam-icons being non-square aspect ratio */
|
|
.icon-code {
|
|
width: 1.25em;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
|
|
/* Baseof formatting {{{ */
|
|
|
|
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: var(--page-margin) auto;
|
|
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
|
|
padding: 0 var(--page-margin);
|
|
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
|
|
}
|
|
|
|
.site-footer {
|
|
margin: var(--page-margin) 0;
|
|
text-align: center;
|
|
font-size: smaller;
|
|
}
|
|
|
|
.site-footer p {
|
|
margin: 0;
|
|
}
|
|
|
|
#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 */
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Top bar formatting {{{ */
|
|
|
|
.top {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
background-color: var(--background-1);
|
|
/* padding can't be here because then the first navbar element will be shifted too far over,
|
|
* or it will need its hover background to be chopped off on the left */
|
|
}
|
|
|
|
.brand {
|
|
flex-grow: 1;
|
|
margin: 8px var(--page-margin);
|
|
font-size: 1.25em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand a {
|
|
color: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.navbar-item {
|
|
padding: 12px var(--page-margin);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.navbar-item:hover {
|
|
background-color: var(--background-2);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar-item.active {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Breadcrumb navigation {{{ */
|
|
|
|
.breadcrumb {
|
|
margin: var(--page-margin) 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 a {
|
|
color: inherit;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
:is(
|
|
.page-metadata-section:is(.categories, .tags, .series),
|
|
.page-metadata-item.authors
|
|
) > a:not(:last-child):after {
|
|
color: var(--text-0);
|
|
content: ",";
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
|
|
/* Components exclusive to content/single pages {{{ */
|
|
|
|
.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;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.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 {
|
|
display: block;
|
|
}
|
|
|
|
/* https://stackoverflow.com/a/72073682/19003757 */
|
|
/*
|
|
.telegram-share > svg {
|
|
transform: scale(1.5);
|
|
margin: 9px -9px -9px 9px;
|
|
}
|
|
*/
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* Related posts section {{{ */
|
|
|
|
/* set the margins on the contents instead of the parent .related-posts
|
|
* so that the posts in the list clip off the edge of the screen,
|
|
* which makes a more obvious indicator that it's scrollable
|
|
*/
|
|
|
|
.related-posts > hr,
|
|
.related-posts > h1 {
|
|
margin: var(--page-margin);
|
|
}
|
|
|
|
.related-posts .page {
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
|
|
}
|
|
|
|
.related-posts .page:first-child {
|
|
margin-left: var(--page-margin);
|
|
}
|
|
.related-posts .page:last-child {
|
|
margin-right: var(--page-margin);
|
|
}
|
|
|
|
.related-posts .page-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
overflow-x: auto;
|
|
margin-bottom: var(--page-margin);
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* }}} */
|
|
|
|
/* Content components (can appear both in single and list pages) {{{ */
|
|
|
|
/* 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;
|
|
height: 2em;
|
|
}
|
|
.code-block > .code-header > * {
|
|
margin: auto 0;
|
|
}
|
|
.code-block > .code-header > .code-type {
|
|
border-top-left-radius: 8px;
|
|
}
|
|
/* 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);
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
|
|
|
|
/* @media specializations {{{ */
|
|
|
|
/* Light mode */
|
|
@media print,
|
|
(prefers-color-scheme: light) {
|
|
li.disabled {
|
|
opacity: .25;
|
|
}
|
|
}
|
|
|
|
/* Print compatibility {{{ */
|
|
@media print {
|
|
.top > .navbar,
|
|
.content-heading-link,
|
|
.post-meta-edit-history,
|
|
.post-meta-view-markdown,
|
|
.code-copy-button,
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* }}} */
|
|
|
|
/* }}} */
|