diff options
Diffstat (limited to 'sysret.org/themes/tabi-lean/sass')
41 files changed, 3259 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/main.scss b/sysret.org/themes/tabi-lean/sass/main.scss new file mode 100644 index 0000000..6433d2c --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/main.scss @@ -0,0 +1,330 @@ +@use 'parts/_admonitions.scss'; +@use 'parts/_archive.scss'; +@use 'parts/_aside.scss'; +@use 'parts/_cards.scss'; +@use 'parts/_code.scss'; +@use 'parts/_comments.scss'; +@use 'parts/_footer.scss'; +@use 'parts/_header-anchor.scss'; +@use 'parts/_header.scss'; +@use 'parts/_home-banner.scss'; +@use 'parts/_iine.scss'; +@use 'parts/_image-hover.scss'; +@use 'parts/_image-toggler.scss'; +@use 'parts/_image.scss'; +@use 'parts/_misc.scss'; +@use 'parts/_multilingual_quote.scss'; +@use 'parts/_pagination.scss'; +@use 'parts/_posts_list.scss'; +@use 'parts/_quick_navigation_buttons.scss'; +@use 'parts/_search.scss'; +@use 'parts/_spoiler.scss'; +@use 'parts/_syntax_theme.scss'; +@use 'parts/_table.scss'; +@use 'parts/_tags.scss'; +@use 'parts/_theme-switch.scss'; +@use 'parts/_webmention.scss'; +@use 'parts/_zola-error.scss'; + +@font-face { + src: local('JetBrainsMono'), + url('fonts/JetBrainsMonoNLNerdFont-Regular.ttf') format("truetype"); + font-family: 'JetBrainsMono'; + font-display: swap; +} + +@mixin theme-variables($theme) { + @if $theme =='light' { + --background-color: white; + --bg-0: #f0f0f0; + --bg-1: #e7e7e7; + --bg-2: #fefefe; + --bg-3: #d8dcdd; + --hover-color: white; + --primary-color: #087E96; + --divider-color: #d7d7d7; + --text-color: #222226; + --text-color-high-contrast: #313333; + --meta-color: #5b5b65; + --codeblock-bg: #26232e; + --codeblock-highlight: #383444; + --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A"); + color-scheme: light; + } + + @else { + --background-color: #1f1f1f; + --bg-0: #2f2f2f; + --bg-1: #3c3c3c; + --bg-2: #171717; + --bg-3: #535555; + --hover-color: black; + --primary-color: #91e0ee; + --divider-color: #4a4a4a; + --text-color: #D4D4D4; + --text-color-high-contrast: #eceeef; + --meta-color: #B0B0B0; + --codeblock-bg: #19181e; + --codeblock-highlight: #282834; + --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E"); + color-scheme: dark; + } +} + +:root { + @include theme-variables('light'); + + --max-layout-width: 1000px; + --normal-layout-width: 600px; + --medium-layout-width: 400px; + --small-layout-width: 200px; + --paragraph-spacing: max(2.3vmin, 24px); + + --sans-serif-font: 'JetBrainsMono', Helvetica, Arial, sans-serif; + --serif-font: 'JetBrainsMono', 'Georgia', serif; + --code-font: 'JetBrainsMono'; + + scrollbar-color: var(--primary-color) transparent; + accent-color: var(--primary-color); + + line-height: 190%; + font-family: var(--sans-serif-font); +} + +[data-theme='dark'] { + @include theme-variables('dark'); + + .invertible-image { + filter: invert(.88); + } + + .dimmable-image { + filter: brightness(.8) contrast(1.2); + } +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + + .invertible-image { + filter: invert(.88); + } + + .dimmable-image { + filter: brightness(.8) contrast(1.2); + } + } +} + +html { + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6em; + text-rendering: optimizeLegibility; +} + +body { + display: flex; + flex-direction: column; + margin-inline: 5vmin; + margin-block: 0; + min-height: 100vh; +} + +.content { + word-wrap: break-word; + margin: 0 auto; + margin-top: 6vmin; + margin-block-end: 4rem; + width: 100%; + max-width: var(--max-layout-width); +} + +.use-sans-serif { + --serif-font: var(--sans-serif-font); +} + +article { + $base-margin: 6rem; + position: relative; + margin: 0 auto; + + max-width: calc(var(--max-layout-width) - 2*$base-margin); + + p, + li, + details, + summary { + font-family: var(--serif-font); + } + + strong { + font-weight: 620; + } + + .full-width { + margin-inline-start: -$base-margin; + margin-inline-end: -$base-margin; + max-width: calc(100% + 2*$base-margin); + } + + li { + p:not(:last-child) { + margin-block-end: 0; + } + + p + :last-child { + margin-block-end: var(--paragraph-spacing); + } + } +} + +.section-title { + display: flex; + margin: 0; + margin-top: -0.15em; + color: var(--text-color-high-contrast); + font-weight: 550; + font-size: 2.2em; + line-height: 1.2em; +} + +.last-updated { + margin-top: -5vmin; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + display: block; + position: relative; + margin: 0; +} + +h1 { + margin-top: 0.67em; + font-weight: 550; + font-size: 1.62rem; +} + +h2 { + margin-top: 0.5em; + font-weight: 550; + font-size: 1.4rem; +} + +h3 { + margin-top: 0.3em; + font-weight: 550; + font-size: 1.2rem; +} + +h4 { + margin-top: 0.83em; + font-weight: 550; + font-size: 1rem; +} + +h5 { + margin-top: 0.83em; + font-weight: normal; + font-size: 1rem; +} + +p { + margin-top: 0.4rem; + margin-block-end: var(--paragraph-spacing); + font-size: 1em; + line-height: 2rem; +} + +strong { + font-weight: 580; +} + +.centered-text { + text-align: center; +} + +video { + max-width: 100%; +} + +.center-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0; + width: 100%; + height: 100vh; + text-align: center; +} + +.subheader { + margin-block-end: 2rem; +} + +.mobile-only { + display: none; +} + +@media only screen and (max-width: 1000px) { + .content { + max-width: var(--normal-layout-width); + } + + body { + margin: 0 32px; + } + + article .full-width { + display: block; + margin-inline-start: 0; + margin-inline-end: 0; + max-width: none; + overflow-x: auto; + } + + .mobile-only { + display: block; + } +} + +@media only screen and (max-width: 600px) { + .content { + margin-top: 0rem; + max-width: var(--medium-layout-width); + } + + article { + margin-top: 1.3rem; + } + + body { + margin-inline: 16px; + margin-block: 0; + } +} + +@media only screen and (max-width: 300px) { + .content { + max-width: var(--small-layout-width); + } +} + +@media all and (min-width: 600px) { + html { + font-size: 16.5px; + } +} + +@media all and (min-width: 960px) { + html { + font-size: 20px; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_admonitions.scss b/sysret.org/themes/tabi-lean/sass/parts/_admonitions.scss new file mode 100644 index 0000000..6feec43 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_admonitions.scss @@ -0,0 +1,159 @@ +@mixin admonition-type($type) { + border-color: var(--admonition-#{$type}-border); + background-color: var(--admonition-#{$type}-bg); + + > .admonition-content > p > code { + background-color: var(--admonition-#{$type}-code); + } + + a { + border-bottom: 1px solid var(--admonition-#{$type}-border); + color: var(--admonition-#{$type}-border); + + &:hover { + background-color: var(--admonition-#{$type}-border); + color: var(--hover-color); + } + } + + .admonition-icon { + background-color: var(--admonition-#{$type}-border); + } +} + +:root { + /* Note */ + --admonition-note-border: #5b6167; + --admonition-note-bg: #f2f4f7; + --admonition-note-code: #e1e3ed; + + /* Tip */ + --admonition-tip-border: #03970f; + --admonition-tip-bg: #f0fdf0; + --admonition-tip-code: #d3edc5; + + /* Info */ + --admonition-info-border: #15a2b2; + --admonition-info-bg: #f5fbff; + --admonition-info-code: #d5e2f2; + + /* Warning */ + --admonition-warning-border: #eea719; + --admonition-warning-bg: #fff8e6; + --admonition-warning-code: #feee96; + + /* Danger */ + --admonition-danger-border: #d8292e; + --admonition-danger-bg: #ffebed; + --admonition-danger-code: #fcc1c5; +} + +@mixin dark-theme-variables { + /* Note */ + --admonition-note-border: #d0d1d4; + --admonition-note-bg: #3d3e40; + --admonition-note-code: #495057; + + /* Tip */ + --admonition-tip-border: #01b010; + --admonition-tip-bg: #013100; + --admonition-tip-code: #005f00; + + /* Info */ + --admonition-info-border: #50a9d5; + --admonition-info-bg: #193C47; + --admonition-info-code: #245e70; + + /* Warning */ + --admonition-warning-border: #e19d0a; + --admonition-warning-bg: #4f3a01; + --admonition-warning-code: #8c6b00; + + /* Danger */ + --admonition-danger-border: #e74f54; + --admonition-danger-bg: #4c1012; + --admonition-danger-code: #8c2e00; +} + +[data-theme='dark'] { + @include dark-theme-variables; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include dark-theme-variables; + } +} + +.admonition { + display: flex; + align-items: flex-start; + margin-block: 1em; + border-radius: 10px; + border-inline-start: 6px solid; + padding: 0.8rem; + color: var(--text-color-high-contrast); + font-family: var(--sans-serif-font); + + p { + margin-inline-start: -1.75rem; + margin-block-end: 0; + font-family: inherit; + } + + a { + code { + color: inherit; + } + } +} + +.admonition-content { + flex: 1; + strong { + font-weight: 580; + } +} + +.admonition-icon { + display: flex; + align-items: center; + margin: 0.3rem; + background-size: contain; + background-repeat: no-repeat; + aspect-ratio: 1/1; + width: 1.5rem; +} + +.admonition-title { + opacity: 0.92; + font-weight: bold; + font-size: 0.82rem; +} + + +.admonition-icon-note { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); +} + +.admonition-icon-tip { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M480-78.258q-33.718 0-56.974-22.166-23.256-22.167-23.59-55.885h161.128q-.334 33.718-23.59 55.885Q513.718-78.258 480-78.258ZM318.257-210.515v-67.588h323.486v67.588H318.257Zm7.846-121.128q-67.692-42.487-106.896-109.134-39.205-66.648-39.205-147.479 0-123.769 88.149-211.884 88.149-88.115 211.967-88.115 123.817 0 211.849 88.115 88.031 88.115 88.031 211.884 0 80.831-38.999 147.479-39 66.647-107.102 109.134H326.103Zm21.927-67.588h264.351q46.311-32 73.17-81.681 26.859-49.68 26.859-107.144 0-96.918-68-164.765-68-67.846-164.564-67.846t-164.41 67.713q-67.846 67.712-67.846 164.725 0 57.52 26.859 107.259t73.581 81.739Zm131.97 0Z'/%3E%3C/svg%3E"); +} + +.admonition-icon-info { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M479.789-288Q495-288 505.5-298.289q10.5-10.29 10.5-25.5Q516-339 505.711-349.5q-10.29-10.5-25.5-10.5Q465-360 454.5-349.711q-10.5 10.29-10.5 25.5Q444-309 454.289-298.5q10.29 10.5 25.5 10.5ZM444-432h72v-240h-72v240Zm36.276 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-168q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z'/%3E%3C/svg%3E"); +} + +.admonition-icon-warning { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm69-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Zm0-100Z'/%3E%3C/svg%3E"); +} + +.admonition-icon-danger { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M239.256-400q0 58.091 27.975 108.995t76.13 81.237q-5.616-8.513-8.487-18.398-2.872-9.885-2.872-19.167 1.333-26.436 12.153-50.307 10.821-23.872 31.41-43.461L480-443.921l105.819 102.82q18.923 19.311 29.885 43.321 10.961 24.011 12.294 50.447 0 9.282-2.872 19.167-2.871 9.885-7.82 18.398 47.488-30.333 75.796-81.237Q721.41-341.909 721.41-400q0-47.622-19.258-93.169-19.259-45.547-53.998-82.549-19.951 13.41-42.202 19.859Q583.7-549.41 561-549.41q-62.448 0-105.108-38.039-42.661-38.038-51.225-98.628v-9.744q-39.385 31.949-69.898 67.68-30.513 35.73-51.987 74.166t-32.5 77.464Q239.256-437.483 239.256-400ZM480-349.539l-57.436 56.436q-12.154 11.821-17.731 26.029-5.577 14.208-5.577 29.074 0 32.769 23.498 55.757 23.497 22.987 57.246 22.987 33.432 0 57.421-22.906 23.989-22.906 23.989-55.561 0-16.162-6.116-30.162-6.116-13.999-17.454-25.154l-57.84-56.5Zm-11.002-469.022V-708q0 38.637 26.832 64.819 26.831 26.183 65.17 26.183 15.609 0 30.818-5.923 15.208-5.923 28.131-17.718l22.615-24.102q67.564 44.128 106.999 114.917 39.435 70.79 39.435 150.156 0 128.206-89.846 218.103Q609.307-91.668 480-91.668q-129.027 0-218.68-89.652-89.652-89.653-89.652-218.68 0-119.178 79.371-232.447t217.959-186.114Z'/%3E%3C/svg%3E"); +} + +.admonition.note { @include admonition-type('note'); } +.admonition.tip { @include admonition-type('tip'); } +.admonition.info { @include admonition-type('info'); } +.admonition.warning { @include admonition-type('warning'); } +.admonition.danger { @include admonition-type('danger'); } diff --git a/sysret.org/themes/tabi-lean/sass/parts/_archive.scss b/sysret.org/themes/tabi-lean/sass/parts/_archive.scss new file mode 100644 index 0000000..6df323b --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_archive.scss @@ -0,0 +1,37 @@ +.archive { + margin-block-start: 4vmin; + + .listing-title { + margin-block-end: 1rem; + font-size: 1.5rem; + } + + .listing-item { + display: flex; + gap: 1rem; + margin-block-end: 0.5rem; + padding-inline: 1rem; + padding-block: 0.2rem; + + .post-time { + padding-inline-start: 1vmin; + min-inline-size: 5rem; + text-align: start; + + .date { + color: var(--meta-color); + white-space: nowrap; + } + } + } + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { + margin-bottom: 1.3rem; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_aside.scss b/sysret.org/themes/tabi-lean/sass/parts/_aside.scss new file mode 100644 index 0000000..4757524 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_aside.scss @@ -0,0 +1,31 @@ +aside { + margin-block-end: var(--paragraph-spacing); + border-radius: 4px; + background: var(--bg-0); + padding-block: 0.8rem; + padding-inline: 1rem; + color: var(--meta-color); + font-size: 0.9rem; + + article & p { + margin: 0; + font-family: var(--sans-serif-font); + } + + @media only screen and (min-width: 1300px) { + position: absolute; + inset-inline-start: -14rem; + margin-block: 0; + border-radius: 0; + background: none; + padding: 0; + width: 12rem; + text-align: end; + + &[data-position="right"] { + inset-inline-start: auto; + inset-inline-end: -14rem; + text-align: start; + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_cards.scss b/sysret.org/themes/tabi-lean/sass/parts/_cards.scss new file mode 100644 index 0000000..0b6c560 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_cards.scss @@ -0,0 +1,105 @@ +.filter-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 12px; + margin-top: 1.2rem; + margin-bottom: -1rem; + padding: 0; + list-style: none; + + #all-projects-filter { + display: none; + } + + .taxonomy-item { + margin: 0; + + a { + display: inline-block; + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; + border-radius: 1rem; + background: var(--bg-2); + padding: 0 16px; + color: var(--text-color); + font-size: 0.8rem; + text-decoration: none; + + &:hover { + background: var(--primary-color); + color: var(--hover-color); + } + + &.active { + background: var(--primary-color); + color: var(--hover-color); + } + } + } +} + +.cards { + display: grid; + grid-template-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 24px; + margin-top: 4vmin; + padding-block: 12px; + + .card { + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + border-radius: 1rem; + background: var(--bg-2); + min-height: 100px; + overflow: hidden; + + &:hover { + background-color: var(--primary-color); + } + + &:hover .card-description { + color: var(--hover-color); + } + + .card-info { + padding-inline: 24px; + padding-block-start: 0; + padding-block-end: 24px; + text-align: center; + } + .card-image { + $margin: 1.6rem; + margin: $margin; + margin-bottom: $margin / 1.5; + width: calc(100% - $margin * 2); + height: auto; + } + + .card-image-placeholder { + width: 100%; + height: 12px; + } + + .card-description { + margin-top: 0.5em; + overflow: hidden; + color: var(--text-color); + } + } +} + +@media all and (max-width: 720px) { + .cards { + gap: 18px; + } + + .filter-controls { + gap: 8px; + margin: 18px 0; + + .taxonomy-item a { + padding: 4px 12px; + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_code.scss b/sysret.org/themes/tabi-lean/sass/parts/_code.scss new file mode 100644 index 0000000..2623f50 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_code.scss @@ -0,0 +1,152 @@ +code { + -webkit-text-size-adjust: 100%; + border-radius: 5px; + background-color: var(--bg-1); + padding-inline: 0.2em; + padding-block: 0.1em; + font-size: 0.9rem; + font-family: var(--code-font); + + mark { + display: block; + filter: brightness(110%); + background-color: var(--codeblock-highlight); + color: inherit; + } + + table { + margin: 0rem; + border-collapse: collapse; + border-spacing: 0rem; + width: 100%; + text-align: start; + + td, + th, + tr { + border: none; + padding: 0rem; + } + + // Line number col. + tbody td:first-child { + opacity: 50%; + padding-inline-end: 0.8rem; + width: 1px; // Without this, iOS Safari centres short lines. + user-select: none; + text-align: end; + } + + tbody tr:nth-child(even) { + background-color: inherit; + } + } +} + +a:hover code { + background-color: inherit; + padding-block: 0; +} + +pre { + display: block; + position: relative; + border-radius: 5px; + padding-inline: 1rem; + padding-block-start: 2.4rem; + padding-block-end: 1rem; + overflow: hidden; + overflow-x: auto; + line-height: 1.4; + + code, + code td { + font-size: 0.8rem; // Fits ~77 characters. + } + + // Supports both native Zola way of adding src, and old shortcode-based logic. + // See: https://github.com/welpo/tabi/pull/489 + &::after, + code .source-path { + display: block; + position: absolute; + top: 0; + inset-inline-end: 1.3rem; + padding-top: 0.3rem; + padding-inline-end: 1.3rem; + max-width: calc(100% - 14em); + height: 0.9rem; + overflow: hidden; + content: attr(data-name); + color: var(--hover-color); + font-size: 0.65rem; + text-align: end; + text-overflow: ellipsis; + white-space: nowrap; + } + + code { + display: block; + border: 0rem; + border-radius: 5px; + background-color: transparent; + padding: 0rem; + overflow-x: auto; + color: inherit; + white-space: pre; + + &::before { + display: block; + position: absolute; + top: 0; + inset-inline-start: 0; + background-color: var(--primary-color); + padding: 0.3rem; + padding-inline-start: 1rem; + width: calc(100% - 1.3rem); + height: 0.9rem; + content: attr(data-lang); + color: var(--hover-color); + font-size: 0.65rem; + text-align: start; + text-transform: uppercase; + } + } +} + +// Default to LTR codeblocks. +code, pre { + direction: ltr; +} + +// Allows RTL codeblocks if `force_codeblock_ltr` is set to false. +html[data-code-direction="inherit"] { + code, pre { + direction: inherit; + } +} + +.copy-code { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M217.002-67.694q-37.732 0-64.02-26.288-26.287-26.287-26.287-64.019V-707.69h77.999v549.689q0 4.615 3.846 8.462 3.846 3.846 8.462 3.846h451.689v77.999H217.002Zm175.999-175.999q-37.733 0-64.02-26.287T302.694-334v-463.383q0-37.732 26.287-64.02 26.287-26.287 64.02-26.287h365.383q37.732 0 64.019 26.287 26.288 26.288 26.288 64.02V-334q0 37.733-26.288 64.02-26.287 26.287-64.019 26.287H393.001Zm0-77.998h365.383q4.615 0 8.462-3.847 3.846-3.846 3.846-8.462v-463.383q0-4.616-3.846-8.462-3.847-3.846-8.462-3.846H393.001q-4.616 0-8.462 3.846-3.847 3.846-3.847 8.462V-334q0 4.616 3.847 8.462 3.846 3.847 8.462 3.847Zm-12.309 0v-488V-321.691Z'/%3E%3C/svg%3E"); + position: absolute; + top: 0.3rem; + align-self: center; + z-index: 1; + cursor: pointer; + inset-inline-end: 0.7rem; + background: var(--hover-color); + background-size: contain; + width: 0.9rem; + height: 0.9rem; + color: white; +} + +.copy-code.checked { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M395-253 194-455l83-83 118 117 288-287 83 84-371 371Z'/%3E%3C/svg%3E"); + width: 1rem; + height: 1rem; +} + +.copy-code.error { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M479.386-248Q509-248 529-267.386q20-19.386 20-49T529.614-366.5q-19.386-20.5-49-20.5T431-366.886q-20 20.114-20 49.728t19.386 49.386q19.386 19.772 49 19.772ZM416-431h128v-265H416v265Zm64.276 381q-88.916 0-167.743-33.104-78.828-33.103-137.577-91.852-58.749-58.749-91.852-137.535Q50-391.277 50-480.458q0-89.438 33.162-167.491 33.163-78.053 92.175-136.942 59.011-58.889 137.533-91.999Q391.393-910 480.458-910q89.428 0 167.518 33.093T784.94-784.94q58.874 58.874 91.967 137.215Q910-569.385 910-480.192q0 89.192-33.11 167.518-33.11 78.326-91.999 137.337-58.889 59.012-137.167 92.174Q569.447-50 480.276-50Z'/%3E%3C/svg%3E"); +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_comments.scss b/sysret.org/themes/tabi-lean/sass/parts/_comments.scss new file mode 100644 index 0000000..aab54d9 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_comments.scss @@ -0,0 +1,33 @@ +.utterances-frame { + width: 100%; +} + +.comments { + margin-top: 2rem; + border-top: var(--divider-color) solid 0.5px; + border-bottom: var(--divider-color) solid 0.5px; + padding-top: 2rem; + padding-bottom: 2rem; + + iframe { + margin: 0; + border: none; + aspect-ratio: inherit; + width: 100%; + max-width: 100%; + } + + .load-comments-button { + display: block; + cursor: pointer; + margin: 0.5em auto; + border: none; + background: none; + padding-block: 0.5em; + padding-inline: 1em; + color: inherit; + font-size: 0.95rem; + font-family: var(--sans-serif-font); + text-decoration: none; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_footer.scss b/sysret.org/themes/tabi-lean/sass/parts/_footer.scss new file mode 100644 index 0000000..2b49c3d --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_footer.scss @@ -0,0 +1,91 @@ +footer { + margin-top: auto; + margin-block-end: 1.4rem; + color: var(--meta-color); + font-size: 0.88rem; + font-family: var(--post-font-family); + text-align: center; + + .nav-links { + color: var(--primary-color); + } + + p { + margin: 0; + } +} + +footer section { + display: flex; + flex-direction: column; + align-items: center; + gap: 0rem; +} + +footer nav { + display: flex; + margin: 0 0rem; +} + +.socials { + display: flex; + flex-grow: 0; + flex-wrap: wrap; + justify-content: center; + align-items: flex-end; + + svg { + max-height: 15px; + } + + ul { + gap: 5px; + } +} + +.social { + display: flex; + justify-content: center; + align-items: center; + background-image: unset; + padding: 0.5vmin; +} + +.social > img { + aspect-ratio: 1/1; + width: 1.5rem; + height: auto; + color: #000000; +} + +.social { + &:hover { + & > img { + filter: invert(1); + } + } +} + +@mixin dark-theme-social { + .social { + &:hover { + & > img { + filter: invert(0); + } + } + + & > img { + filter: invert(1); + } + } +} + +[data-theme="dark"] { + @include dark-theme-social; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + @include dark-theme-social; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss b/sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss new file mode 100644 index 0000000..8a06200 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_header-anchor.scss @@ -0,0 +1,35 @@ +.header-anchor { + display: inline-flex; + position: absolute; + justify-content: center; + align-items: center; + opacity: 0; + margin-inline-start: -2rem; + padding-inline-end: 0.3rem; + width: 1.9rem; + height: 100%; + user-select: none; + + @media (max-width: 500px) { + display: none; + } +} + +.link-icon { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E"); + align-self: center; + cursor: pointer; + background: var(--text-color); + width: 1rem; + height: 1rem; +} + +h1, h2, h3, h4, h5, h6 { + &:hover .header-anchor { + opacity: 1; + } + + .header-anchor:hover { + background-color: transparent; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_header.scss b/sysret.org/themes/tabi-lean/sass/parts/_header.scss new file mode 100644 index 0000000..4640d1b --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_header.scss @@ -0,0 +1,197 @@ +header { + width: 100%; + font-family: 'JetBrainsMono', var(--sans-serif-font); +} + +.page-header { + margin-block: 4rem 1rem; + font-size: 3em; + line-height: 100%; + font-family: var(--header-font); +} + +.navbar { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding-block: 1em; + max-width: var(--max-layout-width); +} + +.nav-navs { + display: flex; + flex-wrap: wrap; + align-items: center; + + ul { + display: flex; + flex-wrap: inherit; + justify-content: inherit; + align-items: inherit; + gap: 1px; + margin: 0; + padding: 0; + list-style: none; + } +} + +.menu-icons-container { + display: flex; + align-items: center; + margin-left: auto; +} + +.menu-icons-group { + gap: 1px; + margin: 0; + padding: 0; +} + +.nav-links { + justify-content: right; + padding: 0.66rem; + color: var(--text-color); + font-weight: 340; + font-size: 1em; + line-height: 2.5; + text-decoration: none; +} + +.home-title { + margin-inline-start: -0.12rem; + border: none; + padding: 0.12rem; + color: var(--primary-color); + font-weight: 450; + font-size: 1.7em; + text-decoration: none; +} + +.meta { + padding: 0; + padding-top: 0.7vmin; + padding-bottom: 3vmin; + color: var(--meta-color); + font-weight: 300; + font-size: 0.8rem; + line-height: 1.4rem; + letter-spacing: -0.4px; + + a { + color: var(--meta-color); + font-weight: inherit; + text-decoration: none; + text-decoration-color: none; + } + + ul, + li { + display: inline-block; + margin-inline-end: 0.2rem; + font-family: var(--sans-serif-font); + list-style-type: none; + } + + .tag { + margin-inline-end: 0; + } +} + +.separator { + margin-inline-end: 0.2rem; + user-select: none; +} + +.language-switcher { + display: flex; + justify-content: center; + align-items: center; + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; + + .language-switcher-icon { + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='M1 12a11 11 90 0 0 22 0 11 11 90 0 0-22 0m1-4h20M2 16h20M11 1a21 21 90 0 0 0 22m2-22a21 21 90 0 1 0 22'/%3E%3C/svg%3E%0A"); + position: relative; + align-self: center; + cursor: pointer; + background: var(--text-color); + width: 1rem; + height: 1rem; + + &:hover { + background: var(--meta-color); + } + } +} + +.dropdown { + display: inline-block; + position: relative; + z-index: 1; + font-size: 0.8rem; + + &:hover .dropdown-content, + &:focus-within .dropdown-content { + display: block; + } + + summary { + list-style: none; + + &::-webkit-details-marker { + display: none; + } + } + + .dropdown-content { + display: none; + position: absolute; + left: 50%; + transform: translateX(-50%); + z-index: 1; + background: var(--background-color); + padding-inline-start: 0.5rem; + padding-inline-end: 0.5rem; + text-align: center; + white-space: nowrap; + + a { + display: block; + } + } +} + +@media only screen and (max-width: 1000px) { + .navbar { + max-width: var(--normal-layout-width); + } + + .nav-navs { + display: flex; + justify-content: center; + } + + .menu-icons-container { + margin-left: 0; + } +} + +@media only screen and (max-width: 600px) { + .nav-navs { + margin-top: 0.8rem; + } + + .navbar { + flex-direction: column; + align-items: center; + } +} + +@media only screen and (max-width: 300px) { + .navbar { + max-width: var(--small-layout-width); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss b/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss new file mode 100644 index 0000000..ce6b9c1 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss @@ -0,0 +1,82 @@ +#banner-container-home { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin: 0.2rem auto; + width: 100%; + + @media only screen and (max-width: 600px) { + display: block; + margin-block-end: 2rem; + } + + #home-banner-text { + flex: 1; + margin-block-end: 1.5rem; + color: var(--primary-color); + font-size: 1.875rem; + line-height: 3rem; + + li { + font-size: 1rem; + } + + #home-banner-header { + margin: 0; + margin-block-end: 1rem; + font-weight: 550; + font-size: 2.8rem; + + @media only screen and (max-width: 600px) { + margin-block-end: 0; + font-size: 2.2rem; + } + } + + #banner-home-subtitle { + color: var(--text-color); + font-weight: 250; + line-height: 1.75rem; + + p { + font-size: 1rem; + } + + a { + font-weight: 400; + } + } + + @media only screen and (max-width: 600px) { + width: 100%; + } + } + + #image-container-home { + position: relative; + margin: auto 0; + padding-inline-start: 2rem; + max-width: 11rem; + overflow: hidden; + text-align: center; + + #banner-home-img { + border: none; + aspect-ratio: 1 / 1; + width: 100%; + height: 100%; + object-fit: cover; + + @media only screen and (max-width: 600px) { + max-width: 12rem; + max-height: 12rem; + } + } + + @media only screen and (max-width: 600px) { + padding-inline-start: 0; + width: 100%; + max-width: none; + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_iine.scss b/sysret.org/themes/tabi-lean/sass/parts/_iine.scss new file mode 100644 index 0000000..9ac95c4 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_iine.scss @@ -0,0 +1,37 @@ +.iine-button { + display: inline-flex; + align-items: center; + gap: 5px; + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + cursor: pointer; + border: none; + background: transparent; + color: inherit; + font-family: var(--sans-serif-font); + -webkit-tap-highlight-color: transparent; + appearance: none; + margin: 0; + padding: 0; + font-size: inherit; + line-height: inherit; + + .icon { + display: inline-flex; + align-items: center; + } + + .counter { + margin-left: .2rem; + font-size: 0.8rem; + } + + svg { + width: 1em; + height: 1em; + } +} + +.iine-auto-buttons { + margin-top: 2rem; + padding: 1rem 0; +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_image-hover.scss b/sysret.org/themes/tabi-lean/sass/parts/_image-hover.scss new file mode 100644 index 0000000..9f36f23 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_image-hover.scss @@ -0,0 +1,22 @@ +.image-hover-container { + position: relative; + width: 100%; + + .image-default { + display: inline; + } + + .image-hovered { + display: none; + } + + &:hover { + .image-default { + display: none; + } + + .image-hovered { + display: inline; + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_image-toggler.scss b/sysret.org/themes/tabi-lean/sass/parts/_image-toggler.scss new file mode 100644 index 0000000..e2f420e --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_image-toggler.scss @@ -0,0 +1,24 @@ +.image-label { + cursor: pointer; +} + +.image-toggled { + position: absolute; + top: 0; + left: 0; + visibility: hidden; +} + +.image-toggler-toggle { + display: none; +} + +.image-toggler-toggle:checked ~ .image-label .image-toggled { + position: static; + visibility: visible; +} + +.image-toggler-toggle:checked ~ .image-label .image-default { + position: absolute; + visibility: hidden; +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_image.scss b/sysret.org/themes/tabi-lean/sass/parts/_image.scss new file mode 100644 index 0000000..e8bae01 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_image.scss @@ -0,0 +1,60 @@ +figure { + display: inline-block; + box-sizing: border-box; + margin: 0; + max-width: 100%; + height: auto; +} + +figcaption { + color: var(--meta-color); + font-size: 0.72rem; + font-family: var(--serif-font); + text-align: center; +} + +img { + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; +} + +img.inline { + display: inline; + vertical-align: middle; +} + +figure h4 { + margin: 0; + margin-block-end: 1em; + font-size: 1rem; +} + +figure h4::before { + content: "↳ "; +} + +.img-dark { + display: none; + &.inline{ + display: none; + } +} + +.img-light.inline { + display: inline; +} + +[data-theme="dark"] { + .img-dark { + display: block; + &.inline { + display: inline; + } + } + + .img-light { + display: none; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_misc.scss b/sysret.org/themes/tabi-lean/sass/parts/_misc.scss new file mode 100644 index 0000000..d798ddd --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_misc.scss @@ -0,0 +1,330 @@ +kbd { + border: 1px solid var(--divider-color); + border-radius: 5px; + background-color: var(--bg-0); + padding: 0.1rem 0.3rem; + font-size: 0.8rem; +} + +.draft-label { + margin-inline-end: 0.3rem; + background-color: var(--primary-color); + padding-inline: 4px; + padding-block: 2px; + color: var(--hover-color); +} + +.article-title { + display: block; + margin: 0; + color: var(--text-color-high-contrast); + font-weight: 550; + font-size: 2rem; + line-height: 3rem; +} + +iframe { + display: block; + margin-inline-start: 15%; + margin-inline-end: 15%; + margin-block-end: 3vmin; + border: none; + aspect-ratio: 16/9; + width: 100vmin; + max-width: 70%; +} + +ul { + margin-top: 0; +} + +.toc-container { + margin-block-end: 4vmin; +} + +.padding-top { + padding-top: 4vmin; +} + +.title-container { + padding-bottom: 8px; + .social { + margin-inline-start: 0.5rem; + } +} + +.bottom-divider { + border-bottom: var(--divider-color) solid 0.5px; +} + +::-moz-selection { + background: var(--primary-color); + color: var(--hover-color); + text-shadow: none; +} + +::selection { + background: var(--primary-color); + color: var(--hover-color); +} + +.nav.tags { + display: inline-block; +} + +blockquote { + margin: 0; + border-inline-start: 0.3rem solid var(--primary-color); + padding-inline-start: 1em; +} + +a { + position: relative; + color: var(--primary-color); + font-weight: inherit; + text-decoration: inherit; +} + +// External link styles with `external_links_class = "external"`. +main { + --external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M11 5h-6v14h14v-6'/%3E%3Cpath d='M13 11l7 -7'/%3E%3Cpath d='M21 3h-6M21 3v6'/%3E%3C/g%3E%3C/svg%3E"); + + a.external:not(:has(img, svg, video, picture, figure))::after { + display: inline-block; + vertical-align: -0.05em; + margin-inline-start: 0.1em; + background-color: currentColor; + width: 0.8em; + height: 0.8em; + content: ''; + -webkit-mask-image: var(--external-link-icon); + -webkit-mask-size: 100% 100%; + } + + &:dir(rtl) a.external:not(:has(img, svg, video, picture, figure))::after { + transform: rotate(-90deg); + } + + .meta a.external:not(:has(img, svg, video, picture, figure))::after { + background-color: var(--meta-color); + } + + a.external:not(:has(img, svg, video, picture, figure)):hover::after { + background-color: var(--hover-color); + } +} + +a:hover { + background-color: var(--primary-color); + color: var(--hover-color); +} + +a:hover rt { + color: var(--text-color); +} + +a:not(.no-hover-padding):hover::before { + display: inline-block; + position: absolute; + z-index: -1; + inset-block-end: 0; + inset-block-start: 0; + inset-inline-end: -0.15em; + inset-inline-start: -0.15em; + background-color: var(--primary-color); + max-inline-size: 105%; + content: ""; +} + +@media screen and (max-width: 600px) { + .list > ul { + margin: 0; + padding: 0; + } +} + +hr { + margin: 3.5rem 0 1rem; + border: none; + background-color: var(--divider-color); + height: 1px; +} + +.footnotes-list, +.footnotes { + text-align: start; +} + +.footnote-reference { + font-size: 0.7rem; + font-family: var(--serif-font); +} + +.footnote-definition { + margin-block-end: 0.6rem; + + sup { + margin-inline-end: 0.15rem; + font-size: 0.75rem; + font-family: var(--serif-font); + } + + p { + display: inline; + } +} + +.footnote-backlink { + margin-inline-start: 0.2rem; + font-size: 0.8rem; +} + +.footnotes-list a[href^="#fr-"], +.footnotes a[href^="#fr-"] { + font-size: 0.8rem; +} + +.footnotes code { + font-size: 0.8rem; +} + +.references p { + margin-inline-start: 2.4rem; + text-indent: -2.4rem; +} + +.info-box { + margin-top: 1rem; + margin-block-end: 1rem; + border: 1px solid var(--primary-color); + border-radius: 10px; + border-inline-start-width: 0.3rem; + padding: 1rem; + text-align: center; +} + +#page-content { + margin-top: 4vmin; +} + +.hidden { + display: none; + visibility: hidden; +} + +.visually-hidden { + clip: rect(0 0 0 0); + position: absolute; + margin: -1px; + border: 0; + padding: 0; + width: 1px; + height: 1px; + overflow: hidden; + white-space: nowrap; +} + +details summary { + cursor: pointer; +} + +.interactive-icon { + cursor: pointer; + + path { + fill: var(--text-color); + } + + :hover path { + fill: var(--meta-color); + } +} + +.article-navigation { + display: flex; + margin-block-start: 2rem; + border-block-start: var(--divider-color) solid 0.5px; + padding-block-start: 2rem; + + div:first-child { + flex: 1; + text-align: start; + } + + div:last-child { + flex: 1; + text-align: end; + } + + div p { + color: var(--meta-color); + font-weight: 300; + line-height: 1.2rem; + font-family: var(--sans-serif-font); + letter-spacing: -0.4px; + } + + @media (max-width: 600px) { + flex-direction: column; + + div { + text-align: center !important; + } + } +} + +:dir(rtl) .arrow { + display: inline-block; + transform: scaleX(-1); +} + +// This for the arrows that point to a corner, (e.g. '↗', '↘', '↙', '↖') +:dir(rtl) .arrow-corner { + display: inline-block; + transform: rotate(-90deg); +} + +.mermaid p { + font-family: var(--sans-serif-font) !important; +} + +.mermaid .node .label { + max-width: none !important; +} + +// For the `force_text_direction` shortcode. +[data-force-text-direction="ltr"] { + direction: ltr; + unicode-bidi: bidi-override; +} + +[data-force-text-direction="rtl"] { + direction: rtl; + unicode-bidi: bidi-override; +} + +[data-force-text-direction="ltr"] *, +[data-force-text-direction="rtl"] * { + direction: inherit; +} + +.title-with-jump { + display: flex; + justify-content: space-between; + align-items: center; +} + +.title-with-jump h1 { + flex: 1; +} + +.jump-link { + flex-shrink: 0; + font-size: 0.9rem; +} + +@media (max-width: 500px) { + .title-with-jump { + flex-direction: column; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_multilingual_quote.scss b/sysret.org/themes/tabi-lean/sass/parts/_multilingual_quote.scss new file mode 100644 index 0000000..ecd5f1c --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_multilingual_quote.scss @@ -0,0 +1,35 @@ +.quote-container { + border: none; +} + +.quote-toggle { + display: none; +} + +.quote-label { + display: none; + cursor: pointer; + border-radius: 5px; + color: var(--meta-color); + font-size: 0.75rem; + font-family: var(--sans-serif-font); + text-align: center; + text-decoration: none; +} + +.quote-toggle:not(:checked) ~ .quote .translated .quote-label-original, +.quote-toggle:checked ~ .quote .original .quote-label-translate { + display: inline; +} + +.original { + display: none; +} + +.quote-toggle:checked ~ .quote .original { + display: block; +} + +.quote-toggle:checked ~ .quote .translated { + display: none; +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_pagination.scss b/sysret.org/themes/tabi-lean/sass/parts/_pagination.scss new file mode 100644 index 0000000..5361b1e --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_pagination.scss @@ -0,0 +1,19 @@ +.pagination { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + padding: 0; + font-size: 1em; + list-style: none; + + .page-item .disabled { + opacity: 0.5; + pointer-events: none; + } + + .page-numbers { + color: var(--meta-color); + font-size: 0.9rem; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_posts_list.scss b/sysret.org/themes/tabi-lean/sass/parts/_posts_list.scss new file mode 100644 index 0000000..e74f89c --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_posts_list.scss @@ -0,0 +1,172 @@ +.bloglist-container { + display: grid; + grid-template-columns: 1fr 8fr; +} + + +$padding: 2.5rem; + +.bloglist-meta { + display: flex; + align-items: flex-start; + background-color: var(--navbar-color); + padding-block: $padding; + min-width: 13.5rem; + + .thumbnail-image { + margin: 0; + margin-inline: auto; // Centred by default. + max-width: 70%; + } + + li.date + li.post-thumbnail .thumbnail-image { + // Styles for the thumbnail when there's a date above (either date or updated). + margin-inline: 0; // Since metadata is left aligned, the image looks weird when centred. + margin-block-start: 0.7rem; + } + + ul { + margin-inline-end: 0.7rem; + padding: 0; + color: var(--meta-color); + font-weight: 300; + font-size: 0.9rem; + + li { + list-style-type: none; + white-space: nowrap; + } + + li.draft-label { + width: fit-content; + line-height: 1.2rem; + } + } +} + +.bloglist-content { + display: flex; + position: relative; + align-items: flex-start; + background-color: var(--navbar-color); + padding: $padding 0; + + .pinned-label { + display: flex; + position: absolute; + top: 0.8rem; + align-items: center; + gap: 0.3rem; + color: var(--meta-color); + font-weight: 300; + font-size: 0.8rem; + } + + .pinned-label svg { + width: 0.8rem; + height: 0.8rem; + } + + div { + flex: 1; + + .bloglist-title { + margin: 0; + font-weight: bold; + font-size: 1.2em; + + a { + color: var(--text-color-high-contrast); + font-weight: 550; + + &:hover { + color: var(--hover-color); + } + } + } + + .bloglist-tags { + margin-top: 0.1rem; + + .tag { + display: inline-block; + margin-inline-end: 0.7rem; + font-weight: 400; + font-size: 0.75rem; + text-transform: uppercase; + } + } + + .description p { + margin: 0.5rem 0 1rem; + color: var(--text-color); + font-weight: 250; + font-size: 0.9rem; + line-height: 1.5rem; + } + } +} + +.all-posts { + font-weight: 350; + font-size: 1.3rem; +} + +#all-projects { + margin-top: 2rem; +} + +.posts-first #featured-projects { + margin-top: 4rem; +} + +.projects-first #posts-list { + margin-top: 4rem; +} + +@media only screen and (max-width: 1100px) { + .bloglist-container { + display: block; + } + + .pinned-label svg { + margin-bottom: -2px; + } + + .bloglist-meta { + border-bottom: 0; + padding-block: 2rem; + + ul { + margin-block-end: 0; + width: 100%; + + li { + display: inline; + margin-inline-end: 0.3rem; + } + } + + .post-thumbnail { + display: none; + } + } + + .bloglist-content { + flex-direction: column; + align-items: flex-start; + padding: 0; + padding-bottom: 2rem; + + + .pinned-label { + position: static; + margin: 0; + margin-top: -1.9rem; + } + + div { + width: 100%; + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_quick_navigation_buttons.scss b/sysret.org/themes/tabi-lean/sass/parts/_quick_navigation_buttons.scss new file mode 100644 index 0000000..768592f --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_quick_navigation_buttons.scss @@ -0,0 +1,126 @@ +#button-container { + display: flex; + position: fixed; + right: 2rem; + bottom: 2rem; + flex-direction: column; + gap: 0.6rem; + z-index: 2; // Above "copy-code" buttons. Important for the ToC. + + #toc-button, + #comments-button, + #top-button { + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + cursor: pointer; + border: none; + border-radius: 50%; + background-color: var(--bg-1); + padding: 0.4rem; + width: 1rem; + height: 1rem; + text-align: center; + + &:hover { + background-color: var(--bg-3); + + svg { + fill: var(--primary-color); + } + + &::before { + background-color: transparent; + } + } + + svg { + fill: var(--text-color); + width: 1rem; + height: 1rem; + } + } + + #toc-floating-container { + + $padding-vertical: 0.7rem; + $padding-horizontal: 1rem; + + #toc-button { + position: relative; + z-index: 2; + } + + .toc-container { + margin: 0; + margin-top: $padding-vertical; + max-width: 80vw; + } + + .toc-content { + display: none; + position: absolute; + right: 0; + bottom: 100%; + z-index: 2; + margin-block-end: $padding-vertical; + box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; + border: 1px solid var(--divider-color); + border-radius: 5px; + background-color: var(--background-color); + padding-inline-end: $padding-horizontal; + max-height: 70vh; + overflow-y: auto; + font-size: 0.8rem; + text-align: start; + white-space: nowrap; // Prevents wrapping, allowing content to define width. + + ul { + padding-inline-start: $padding-horizontal; + list-style: none; + } + } + + .toggle { + display: none; + + &:checked { + + + .overlay, + + .overlay + #toc-button + .toc-content { + display: block; + } + + + .overlay + #toc-button svg { + fill: var(--primary-color); // Show the ToC icon as toggled. + } + } + } + + .overlay { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 40%; + z-index: 1; // Lower than the Table of Contents + background: var(--background-color); + } + + } +} + +@media (max-width: 700px) { + #button-container { + display: none !important; + } +} + +@media print { + #button-container { + display: none; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_search.scss b/sysret.org/themes/tabi-lean/sass/parts/_search.scss new file mode 100644 index 0000000..df820e4 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_search.scss @@ -0,0 +1,160 @@ +$icon-size: 1.3rem; + +#searchModal { + background: color-mix(in srgb, var(--primary-color) 5%, transparent); + text-align: start; + + #searchContainer { + padding: 1rem; + } + + #searchBar { + display: flex; + position: relative; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding: 1rem; + + .search-icon { + position: absolute; + inset-inline-start: 1rem; + width: $icon-size; + height: $icon-size; + + path { + fill: var(--text-color); + } + } + + .close-icon { + display: none; + position: absolute; + right: $icon-size; + margin-inline-start: 1rem; + margin-inline-end: 0.5rem; + width: $icon-size; + height: $icon-size; + } + + #searchInput { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 20px; + background-color: var(--input-background-color); + padding-inline: 3rem 1rem; + padding-block: 0.75rem; + width: calc(100% - 2rem); + color: var(--text-color); + font-size: 1rem; + } + } + + #results-container { + display: none; + border-top: var(--divider-color) solid 0.5px; + border-bottom-right-radius: 1rem; + border-bottom-left-radius: 1rem; + overflow: hidden; + + #results-info { + padding: 0.5rem; + color: var(--meta-color); + font-size: 0.8rem; + text-align: center; + } + + #results { + display: flex; + flex-direction: column; + max-height: 50vh; + overflow-y: auto; + + b { + font-weight: 590; + } + + a { + display: block; + + &:hover { + background-color: inherit; + } + } + + > div { + cursor: pointer; + padding-inline: 1rem; + padding-block: 0.5rem; + + &[aria-selected="true"] { + background-color: var(--primary-color); + color: var(--hover-color); + + a, + span { + color: inherit; + } + } + } + + span:first-child { + display: block; + color: var(--primary-color); + font-weight: 590; + } + + span:nth-child(2) { + color: var(--text-color); + } + } + + } +} + +.search-icon { + display: block; + position: relative; + align-self: center; + margin-inline-start: 1rem; + margin-inline-end: 0.5rem; + width: $icon-size; + height: $icon-size; +} + +.search-modal { + -webkit-backdrop-filter: blur(8px); + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 0, 0.1); + width: 100%; + height: 100%; + overflow: auto; + + #modal-content { + position: relative; + margin: 8% auto; + border: var(--divider-color) solid 0.5px; + border-radius: 1rem; + background-color: var(--background-color); + width: 80%; + max-width: 28rem; + } +} + +@media only screen and (max-width: 600px) { + .search-modal { + #modal-content { + top: 3.5rem; + width: 92%; + + #results { + max-height: 70vh; + } + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss b/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss new file mode 100644 index 0000000..b43911b --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss @@ -0,0 +1,53 @@ +.spoiler-toggle { + display: none; // Hide the checkbox. +} + +.spoiler-content { + display: inline-block; // Allow content to only take up its own width. + cursor: help; // Indicate interactive element. + + .spoiler-hidden { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + filter: blur(6px); + user-select: none; + + a { + pointer-events: none; // Make links unclickable. + } + } +} + +.spoiler-toggle:checked + .spoiler-content { + .spoiler-hidden { + filter: none; + user-select: auto; + + a { + pointer-events: auto; // Enable clicking on links when revealed. + } + } +} + +.spoiler-container.fixed-blur { + .spoiler-content:before { + display: inline-block; // Block display within the inline flow. + filter: blur(6px); + content: 'SPOILER'; // Display the word "SPOILER". + } + + .spoiler-content .spoiler-hidden { + display: none; // Completely hide the actual content. + } + + .spoiler-toggle:checked + .spoiler-content { + &:before { + content: none; // Hide the word "SPOILER". + } + + .spoiler-hidden { + display: inline; // Reveal the actual content. + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_syntax_theme.scss b/sysret.org/themes/tabi-lean/sass/parts/_syntax_theme.scss new file mode 100644 index 0000000..ece3930 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_syntax_theme.scss @@ -0,0 +1,342 @@ +/* + * based on "Catppuccin Frappe" https://github.com/catppuccin/catppuccin + */ + +:root { + --rosewater: #f2d5cf; + --flamingo: #eebebe; + --pink: #f4b8e4; + --mauve: #ca9ee6; + --red: #e78284; + --maroon: #ea999c; + --peach: #ef9f76; + --yellow: #e5c890; + --green: #a6d189; + --teal: #81c8be; + --sky: #99d1db; + --blue: #8caaee; + --lavender: #b4befe; + --text: #cdd6f4; + --overlay0: #737994; +} + +.z-code { + background-color: var(--codeblock-bg); + color: var(--text); +} + +.z-comment { + color: var(--overlay0); + font-style: italic; +} + +.z-string { + color: var(--green); + + &.z-regexp { + color: var(--sky); + } +} + +.z-constant.z-numeric, +.z-string.z-regexp { + color: var(--sky); +} + +.z-constant { + &.z-character.z-escape { + color: var(--sky); + } + + &.z-language { + color: var(--lavender); + } +} + +.z-support.z-function.z-builtin.z-variable.z-other.z-constant { + color: var(--sky); +} + +.z-keyword { + color: var(--red); + + &.z-control { + + &.z-loop, + &.z-conditional, + &.z-c + + { + color: var(--mauve); + } + + &.z-return, + &.z-flow.z-return { + color: var(--pink); + } + } +} + +.z-support.z-type.z-exception { + color: var(--sky); +} + +.z-keyword.z-operator { + color: var(--teal); +} + +.z-punctuation { + &.z-accessor { + color: var(--teal); + } + + &.z-section { + color: var(--text); + } +} + +.z-keyword.z-control.z-import.z-include { + color: var(--peach); +} + +.z-storage { + color: var(--red); + + &.z-type { + color: var(--yellow); + } + + &.z-modifier { + color: var(--red); + } +} + +.z-entity.z-name.z-namespace, +.z-meta.z-path, +.z-storage.z-type.z-class { + color: var(--rosewater); +} + +.z-entity.z-name.z-label { + color: var(--blue); +} + +.z-keyword.z-declaration.z-class { + color: var(--red); +} + +.z-entity.z-name.z-class, +.z-meta.z-toc-list.z-full-identifier { + color: var(--teal); +} + +.z-entity { + &.z-other.z-inherited-class { + color: var(--teal); + } + + &.z-name.z-function { + color: var(--blue); + font-style: italic; + } +} + +.z-variable.z-function { + color: var(--blue); + font-style: italic; +} + +.z-entity.z-name.z-function.z-preprocessor, +.z-keyword.z-control.z-import { + color: var(--red); +} + +.z-entity.z-name.z-function { + + &.z-constructor, + &.z-destructor { + color: var(--lavender); + } +} + +.z-variable.z-parameter.z-function { + color: var(--rosewater); +} + +.z-keyword.z-declaration.z-function { + color: var(--maroon); +} + +.z-support { + &.z-function { + color: var(--teal); + } + + &.z-constant { + color: var(--blue); + } + + &.z-type, + &.z-class { + color: var(--blue); + font-style: italic; + } +} + +.z-variable { + &.z-function { + color: var(--blue); + } + + &.z-parameter { + color: var(--rosewater); + } + + &.z-other { + color: var(--text); + + &.z-member { + color: var(--rosewater); + } + } + + &.z-language { + color: var(--peach); + } +} + +.z-entity { + &.z-name.z-tag { + color: var(--sky); + } + + &.z-other.z-attribute-name { + color: var(--mauve); + font-style: italic; + } +} + +.z-punctuation.z-definition.z-tag { + color: var(--maroon); +} + +.z-markup.z-underline.z-link.z-markdown { + color: var(--rosewater); + font-style: underline; + font-style: italic; +} + +.z-comment.z-block.z-markdown, +.z-meta.z-code-fence { + color: var(--peach); + font-style: italic; +} + +.z-markup.z-raw { + + &.z-code-fence, + &.z-inline { + color: var(--peach); + font-style: italic; + } +} + +.z-punctuation.z-definition.z-heading, +.z-entity.z-name.z-section { + color: var(--blue); +} + +.z-markup { + &.z-italic { + color: var(--maroon); + font-style: italic; + } + + &.z-bold { + color: var(--maroon); + font-weight: bold; + } +} + +.z-constant.z-character.z-escape, +.z-source.z-shell.z-bash .z-meta.z-function.z-shell .z-meta.z-compound.z-shell .z-meta.z-function-call.z-identifier.z-shell { + color: var(--pink); +} + +.z-variable.z-language.z-shell { + color: var(--red); +} + +.z-source.z-lua .z-meta.z-function.z-lua .z-meta.z-block.z-lua .z-meta.z-mapping { + &.z-value.z-lua .z-meta.z-mapping.z-key.z-lua .z-string.z-unquoted.z-key.z-lua { + color: var(--lavender); + } + + &.z-key.z-lua .z-string.z-unquoted.z-key.z-lua { + color: var(--flamingo); + } +} + +.z-entity.z-name.z-constant.z-java { + color: var(--peach); +} + +.z-support { + &.z-type.z-property-name.z-css { + color: var(--flamingo); + } + + &.z-constant.z-property-value.z-css { + color: var(--text); + } +} + +.z-constant.z-numeric.z-suffix.z-css, +.z-keyword.z-other.z-unit.z-css, +.z-variable.z-other.z-custom-property.z-name.z-css, +.z-support.z-type.z-custom-property.z-name.z-css, +.z-punctuation.z-definition.z-custom-property.z-css { + color: var(--peach); +} + +.z-entity.z-name.z-tag.z-css { + color: var(--lavender); +} + +.z-variable.z-other.z-sass { + color: var(--peach); +} + +.z-invalid { + background-color: var(--red); + color: var(--text); + + &.z-deprecated { + background-color: var(--mauve); + color: var(--text); + } +} + +.z-meta.z-diff { + color: --OVERLAY0; + + &.z-header { + color: --OVERLAY0; + } +} + +.z-markup { + &.z-deleted { + color: var(--red); + } + + &.z-inserted { + color: var(--green); + } + + &.z-changed { + color: var(--yellow); + } +} + +.z-message.z-error { + color: var(--red); +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_table.scss b/sysret.org/themes/tabi-lean/sass/parts/_table.scss new file mode 100644 index 0000000..d6e5326 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_table.scss @@ -0,0 +1,38 @@ +table { + margin: 1rem auto; + border-style: hidden !important; + border-radius: 5px; + border-collapse: collapse; + border-spacing: 0; + overflow: hidden; + font: inherit; + text-align: center; + + th, + td { + border: 1px solid var(--bg-1); + padding-inline: 13px; + padding-block: 6px; + font-size: large; + } + + thead tr { + background-color: var(--primary-color); + color: var(--hover-color); + + code { + background-color: transparent; + } + } + + tbody { + tr:nth-child(even) { + background-color: var(--bg-0); + } + } + + details, + summary { + font-family: inherit !important; + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_tags.scss b/sysret.org/themes/tabi-lean/sass/parts/_tags.scss new file mode 100644 index 0000000..ae28d0a --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_tags.scss @@ -0,0 +1,41 @@ +#tag-cloud { + margin-top: 4vmin; + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + .tags-item { + margin-block-end: 1rem; + } +} + +@mixin column-count($count) { + -webkit-column-count: $count; + -moz-column-count: $count; + column-count: $count; +} + +.two-columns ul { + @include column-count(2); +} + +.three-columns ul { + @include column-count(3); +} + +@media (max-width: 1000px) { + .three-columns ul { + @include column-count(2); + } +} + +@media (max-width: 600px) { + + .two-columns ul, + .three-columns ul { + @include column-count(1); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_theme-switch.scss b/sysret.org/themes/tabi-lean/sass/parts/_theme-switch.scss new file mode 100644 index 0000000..9c5bd4f --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_theme-switch.scss @@ -0,0 +1,42 @@ +.theme-switcher { + -webkit-mask: var(--theme-switcher-svg); + position: relative; + align-self: center; + cursor: pointer; + margin-inline-start: 0.5rem; + background: var(--text-color); + width: 1rem; + height: 1rem; + &:hover { + background: var(--meta-color); + } +} + +.theme-switcher-wrapper { + position: relative; +} + +.theme-resetter { + -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" %3E%3Cpath d="M295.87-193.869v-78.001h291.152q43.63 0 72.369-33.424 28.739-33.423 28.739-79.271t-28.739-79.391Q630.652-497.5 587.022-497.5H343.913l87.478 87.478-55.652 55.153L193.869-536.5l181.87-181.631 55.652 55.653-87.478 86.978h243.109q75.435 0 127.272 56.522 51.837 56.521 51.837 134.174 0 77.652-51.837 134.293-51.837 56.642-127.272 56.642H295.87Z"/%3E%3C/svg%3E'); + position: absolute; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease, visibility 0.3s ease; + transition-delay: 0.5s; + cursor: pointer; + inset-block-start: -0.6rem; + inset-inline-end: -0.6rem; + background: var(--text-color); + width: 0.8rem; + height: 0.8rem; +} + +.theme-switcher-wrapper:hover .theme-resetter.has-custom-theme { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease, visibility 0.1s ease; + transition-delay: 0s; + &:hover { + background: var(--meta-color); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_webmention.scss b/sysret.org/themes/tabi-lean/sass/parts/_webmention.scss new file mode 100644 index 0000000..b6d6338 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_webmention.scss @@ -0,0 +1,149 @@ +#webmentions { + position: relative; + z-index: 100; + margin: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.2em; + + h2 { + margin-bottom: 1.5em; + font-size: 1.1em; + } + + h3 { + display: flex; + align-items: center; + font-size: 0.9em; + + svg { + margin-inline-end: 0.2rem; + } + + .svg-icon, + span { + margin-inline-end: .3rem; + } + } + + ol { + padding: 0; + } + + li, + p { + font-family: inherit; + } + + +.likes { + display: flex; + flex-wrap: wrap; + margin-top: 0.5rem; + padding: 0; + list-style: none; + + li { + position: relative; + transition: transform 0.8s ease-out, z-index 0s linear 0.4s; + margin-bottom: .375rem; + margin-inline-start: -.75rem; + + &:first-child { + margin-inline-start: 0; + } + + &:hover { + transform: scale(1.3) translateY(-4px); + z-index: 10; + transition: transform 0.05s ease-out, z-index 0s linear 0s; + } + + img { + display: block; + border: 2px solid var(--background-color, white); + border-radius: 50%; + aspect-ratio: 1/1; + width: 2.5rem; + height: 2.5rem; + object-fit: cover; + } + } + } + + .comment { + margin-bottom: 1rem; + border-radius: 10px; + background: var(--bg-0); + padding: 1rem; + overflow: hidden; + font-size: 80%; + + div { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } + + p { + margin-bottom: 0; + line-height: 1.5em; + } + + .p-author { + font-style: bold; + font-size: 1.3em; + } + + .u-url { + font-style: italic; + text-decoration: underline; + } + + .u-author { + display: flex; + align-items: center; + + img { + display: block; + margin-inline-end: .625rem; + width: 2rem; + max-width: 100%; + height: 2rem; + } + } + } + + form { + input { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 20px 0px 0px 20px; + background-color: var(--input-background-color); + padding-inline: 1rem 1rem; + padding-block: .75rem; + width: calc(60% - 2rem); + color: var(--text-color); + font-size: 1rem; + } + + button { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 0px 20px 20px 0px; + background-color: var(--input-background-color); + padding-inline: 0.7rem 0.7rem; + padding-block: .75rem; + width: 7rem; + color: var(--text-color); + font-size: 1rem; + } + + button:hover { + cursor: pointer; + background-color: var(--primary-color); + color: var(--hover-color); + } + } +} diff --git a/sysret.org/themes/tabi-lean/sass/parts/_zola-error.scss b/sysret.org/themes/tabi-lean/sass/parts/_zola-error.scss new file mode 100644 index 0000000..3bdbcbc --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/parts/_zola-error.scss @@ -0,0 +1,28 @@ +// Styles Zola error messages. See https://github.com/welpo/tabi/pull/359 +body > div:last-child > div:last-child[style]:not([class]):not([id]) { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 9999; + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; + border: 2px solid var(--admonition-danger-border); + border-radius: 5px; + background-color: var(--admonition-danger-bg); + padding: 15px; + width: fit-content; + max-width: 80%; +} + +body > div:last-child > div:last-child[style]:not([class]):not([id]) > p[style]:first-child { + margin: 0; + color: var(--admonition-danger-border); + font-weight: bold; +} + +body > div:last-child > div:last-child[style]:not([class]):not([id]) > pre[style]:last-child { + margin-block-end: 0; + background-color: var(--admonition-danger-code); + padding: 10px; + overflow-x: auto; +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/blue.scss b/sysret.org/themes/tabi-lean/sass/skins/blue.scss new file mode 100644 index 0000000..d135219 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/blue.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #3271E7; // Contrast ratio: 4.51:1 + } + @else if $theme == 'dark' { + --primary-color: #6cacff; // Contrast ratio: 7.05:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/evangelion.scss b/sysret.org/themes/tabi-lean/sass/skins/evangelion.scss new file mode 100644 index 0000000..d0350a5 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/evangelion.scss @@ -0,0 +1,24 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + // Evangelion Unit-02. + --primary-color: #d12e36; // Contrast ratio: 5.05:1 + } + @else if $theme == 'dark' { + // Evangelion Unit-01. + --primary-color: #c09bd9; // Contrast ratio: 7.01:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/indigo_ingot.scss b/sysret.org/themes/tabi-lean/sass/skins/indigo_ingot.scss new file mode 100644 index 0000000..11a6370 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/indigo_ingot.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #1460bd; // Contrast ratio: 6.1:1 + } + @else if $theme == 'dark' { + --primary-color: #e6c212; // Contrast ratio: 9.48:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/lavender.scss b/sysret.org/themes/tabi-lean/sass/skins/lavender.scss new file mode 100644 index 0000000..97a40df --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/lavender.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #9055d8; // Contrast ratio: 4.69:1 + } + @else if $theme == 'dark' { + --primary-color: #cba2e8; // Contrast ratio: 7.74:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_orange.scss b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_orange.scss new file mode 100644 index 0000000..ad84bf4 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_orange.scss @@ -0,0 +1,26 @@ +// WARNING! This skin, in light theme, may not provide optimal contrast for readability +// and might not be suitable for users with certain types of visual impairment. +// Furthermore, low contrast will affect your Google Lighthouse rating. +// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible. + } + @else if $theme == 'dark' { + --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible. + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss new file mode 100644 index 0000000..328a4da --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_peach.scss @@ -0,0 +1,26 @@ +// WARNING! This skin, in light theme, may not provide optimal contrast for readability +// and might not be suitable for users with certain types of visual impairment. +// Furthermore, low contrast will affect your Google Lighthouse rating. +// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible. + } + @else if $theme == 'dark' { + --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible. + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_pink.scss b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_pink.scss new file mode 100644 index 0000000..3f96d1d --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/lowcontrast_pink.scss @@ -0,0 +1,26 @@ +// WARNING! This skin, in light theme, may not provide optimal contrast for readability +// and might not be suitable for users with certain types of visual impairment. +// Furthermore, low contrast will affect your Google Lighthouse rating. +// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible. + } + @else if $theme == 'dark' { + --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible. + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/mint.scss b/sysret.org/themes/tabi-lean/sass/skins/mint.scss new file mode 100644 index 0000000..e598c24 --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/mint.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #00804d; // Contrast ratio: 5:1 + } + @else if $theme == 'dark' { + --primary-color: #00b86e; // Contrast ratio: 6.34:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/monochrome.scss b/sysret.org/themes/tabi-lean/sass/skins/monochrome.scss new file mode 100644 index 0000000..976e12e --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/monochrome.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #727272; // Contrast ratio: 4.81:1 + } + @else if $theme == 'dark' { + --primary-color: #b3b3b3; // Contrast ratio: 7.86:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/posixlycorrect.scss b/sysret.org/themes/tabi-lean/sass/skins/posixlycorrect.scss new file mode 100644 index 0000000..47b6c2c --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/posixlycorrect.scss @@ -0,0 +1,40 @@ +/* general */ + + +/* theme */ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #FC9300; + --background-color: #131a21; + } + @else if $theme == 'dark' { + --primary-color: #FC9300; + --background-color: #131a21; + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} + + +/* header */ +.home-title { + background-color: var(--primary-color); + color: var(--background-color); + padding: 0.12rem; +} + +.nav-links { + text-decoration: underline; +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/red.scss b/sysret.org/themes/tabi-lean/sass/skins/red.scss new file mode 100644 index 0000000..169340f --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/red.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #ca4963; // Contrast ratio: 4.52:1. + } + @else if $theme == 'dark' { + --primary-color: #ea535f; // Contrast ratio: 4.63:1. + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/sakura.scss b/sysret.org/themes/tabi-lean/sass/skins/sakura.scss new file mode 100644 index 0000000..4e418eb --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/sakura.scss @@ -0,0 +1,22 @@ +@mixin theme-variables($theme) { + @if $theme =='light' { + --primary-color: #D33C5C; // Contrast ratio: 4.61:1 + } + @else if $theme == 'dark' { + --primary-color: #fabed2; // Contrast ratio: 10.48:1 + } +} + +:root { + @include theme-variables('light'); +} + +[data-theme='dark'] { + @include theme-variables('dark'); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} diff --git a/sysret.org/themes/tabi-lean/sass/skins/teal.scss b/sysret.org/themes/tabi-lean/sass/skins/teal.scss new file mode 100644 index 0000000..3a1fbcd --- /dev/null +++ b/sysret.org/themes/tabi-lean/sass/skins/teal.scss @@ -0,0 +1,33 @@ +// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/ +// to verify the accessibility and readability of your colourscheme. +// The default light background is #fff and the dark background is #1f1f1f. + +// This defines theme-specific variables. +@mixin theme-variables($theme) { + @if $theme =='light' { + // Light theme colours. + --primary-color: #087e96; // Contrast ratio: 4.73:1 + } + @else if $theme == 'dark' { + // Dark theme colours. + --primary-color: #91e0ee; // Contrast ratio: 11.06:1 + } +} + +// Apply light theme variables by default. +:root { + @include theme-variables('light'); +} + +// Apply dark theme variables when dark theme is explicitly set. +[data-theme='dark'] { + @include theme-variables('dark'); +} + +// Apply dark theme variables when user's system prefers dark mode +// and the theme is not explicitly set to light. +@media (prefers-color-scheme: dark) { + :root:not([data-theme='light']) { + @include theme-variables('dark'); + } +} |