Merge commit 'a2ea06d513a5802964f8f0ef5795cec7e548ed7b' as 'themes/tabi-lean'

author: Alejandro Soto <alejandro@34project.org> 2025-09-13 14:55:15 -0600
committer: Alejandro Soto <alejandro@34project.org> 2025-09-13 14:55:15 -0600
commit: 87f85704af1fa866be83077b2b351c1fdad7c3ce (patch)
tree: b49c8d49ef717e539bff6578992e692eea55d380 /themes/tabi-lean/sass
parent: 1a4c3216f027d6a6f36104547377b7b21faa5015 (diff)
parent: a2ea06d513a5802964f8f0ef5795cec7e548ed7b (diff)
40 files changed, 3236 insertions, 0 deletions
diff --git a/themes/tabi-lean/sass/main.scss b/themes/tabi-lean/sass/main.scss
new file mode 100644
index 0000000..d1470ff
--- /dev/null
+++ b/themes/tabi-lean/sass/main.scss
@@ -0,0 +1,347 @@
+@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('Inter'),
+        url('fonts/Inter4.woff2') format("woff2");
+    /* Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
+    font-family: 'Inter';
+    font-display: swap;
+}
+
+@font-face {
+    src: local('Source Serif'),
+        url('fonts/SourceSerif4Variable-Roman.ttf.woff2') format("woff2");
+    /* Copyright 2014 - 2023 Adobe (http://www.adobe.com/), with Reserved Font Name ‘Source’.adobe.com/). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
+    font-family: 'Source Serif';
+    font-display: swap;
+}
+
+@font-face {
+    src: local('Cascadia Code'),
+        url('fonts/CascadiaCode-SemiLight.woff2') format("woff2");
+    /* Copyright 2019 - Present, Microsoft Corporation, with Reserved Font Name 'Cascadia Code'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */
+    font-family: 'Cascadia Code';
+    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: 'Inter', Helvetica, Arial, sans-serif;
+    --serif-font: 'Source Serif', 'Georgia', serif;
+    --code-font: 'Cascadia Code';
+
+    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/themes/tabi-lean/sass/parts/_admonitions.scss b/themes/tabi-lean/sass/parts/_admonitions.scss
new file mode 100644
index 0000000..6feec43
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_archive.scss b/themes/tabi-lean/sass/parts/_archive.scss
new file mode 100644
index 0000000..6df323b
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_aside.scss b/themes/tabi-lean/sass/parts/_aside.scss
new file mode 100644
index 0000000..4757524
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_cards.scss b/themes/tabi-lean/sass/parts/_cards.scss
new file mode 100644
index 0000000..0b6c560
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_code.scss b/themes/tabi-lean/sass/parts/_code.scss
new file mode 100644
index 0000000..2623f50
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_comments.scss b/themes/tabi-lean/sass/parts/_comments.scss
new file mode 100644
index 0000000..aab54d9
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_footer.scss b/themes/tabi-lean/sass/parts/_footer.scss
new file mode 100644
index 0000000..2b49c3d
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_header-anchor.scss b/themes/tabi-lean/sass/parts/_header-anchor.scss
new file mode 100644
index 0000000..8a06200
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_header.scss b/themes/tabi-lean/sass/parts/_header.scss
new file mode 100644
index 0000000..414aa82
--- /dev/null
+++ b/themes/tabi-lean/sass/parts/_header.scss
@@ -0,0 +1,197 @@
+header {
+    width: 100%;
+    font-family: 'Inter Subset', 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/themes/tabi-lean/sass/parts/_home-banner.scss b/themes/tabi-lean/sass/parts/_home-banner.scss
new file mode 100644
index 0000000..ce6b9c1
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_iine.scss b/themes/tabi-lean/sass/parts/_iine.scss
new file mode 100644
index 0000000..9ac95c4
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_image-hover.scss b/themes/tabi-lean/sass/parts/_image-hover.scss
new file mode 100644
index 0000000..9f36f23
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_image-toggler.scss b/themes/tabi-lean/sass/parts/_image-toggler.scss
new file mode 100644
index 0000000..e2f420e
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_image.scss b/themes/tabi-lean/sass/parts/_image.scss
new file mode 100644
index 0000000..e8bae01
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_misc.scss b/themes/tabi-lean/sass/parts/_misc.scss
new file mode 100644
index 0000000..d798ddd
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_multilingual_quote.scss b/themes/tabi-lean/sass/parts/_multilingual_quote.scss
new file mode 100644
index 0000000..ecd5f1c
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_pagination.scss b/themes/tabi-lean/sass/parts/_pagination.scss
new file mode 100644
index 0000000..5361b1e
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_posts_list.scss b/themes/tabi-lean/sass/parts/_posts_list.scss
new file mode 100644
index 0000000..e74f89c
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_quick_navigation_buttons.scss b/themes/tabi-lean/sass/parts/_quick_navigation_buttons.scss
new file mode 100644
index 0000000..768592f
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_search.scss b/themes/tabi-lean/sass/parts/_search.scss
new file mode 100644
index 0000000..df820e4
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_spoiler.scss b/themes/tabi-lean/sass/parts/_spoiler.scss
new file mode 100644
index 0000000..b43911b
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_syntax_theme.scss b/themes/tabi-lean/sass/parts/_syntax_theme.scss
new file mode 100644
index 0000000..ece3930
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_table.scss b/themes/tabi-lean/sass/parts/_table.scss
new file mode 100644
index 0000000..d6e5326
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_tags.scss b/themes/tabi-lean/sass/parts/_tags.scss
new file mode 100644
index 0000000..ae28d0a
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_theme-switch.scss b/themes/tabi-lean/sass/parts/_theme-switch.scss
new file mode 100644
index 0000000..9c5bd4f
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_webmention.scss b/themes/tabi-lean/sass/parts/_webmention.scss
new file mode 100644
index 0000000..b6d6338
--- /dev/null
+++ b/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/themes/tabi-lean/sass/parts/_zola-error.scss b/themes/tabi-lean/sass/parts/_zola-error.scss
new file mode 100644
index 0000000..3bdbcbc
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/blue.scss b/themes/tabi-lean/sass/skins/blue.scss
new file mode 100644
index 0000000..d135219
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/evangelion.scss b/themes/tabi-lean/sass/skins/evangelion.scss
new file mode 100644
index 0000000..d0350a5
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/indigo_ingot.scss b/themes/tabi-lean/sass/skins/indigo_ingot.scss
new file mode 100644
index 0000000..11a6370
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/lavender.scss b/themes/tabi-lean/sass/skins/lavender.scss
new file mode 100644
index 0000000..97a40df
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/lowcontrast_orange.scss b/themes/tabi-lean/sass/skins/lowcontrast_orange.scss
new file mode 100644
index 0000000..ad84bf4
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/lowcontrast_peach.scss b/themes/tabi-lean/sass/skins/lowcontrast_peach.scss
new file mode 100644
index 0000000..328a4da
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/lowcontrast_pink.scss b/themes/tabi-lean/sass/skins/lowcontrast_pink.scss
new file mode 100644
index 0000000..3f96d1d
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/mint.scss b/themes/tabi-lean/sass/skins/mint.scss
new file mode 100644
index 0000000..e598c24
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/monochrome.scss b/themes/tabi-lean/sass/skins/monochrome.scss
new file mode 100644
index 0000000..976e12e
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/red.scss b/themes/tabi-lean/sass/skins/red.scss
new file mode 100644
index 0000000..169340f
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/sakura.scss b/themes/tabi-lean/sass/skins/sakura.scss
new file mode 100644
index 0000000..4e418eb
--- /dev/null
+++ b/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/themes/tabi-lean/sass/skins/teal.scss b/themes/tabi-lean/sass/skins/teal.scss
new file mode 100644
index 0000000..3a1fbcd
--- /dev/null
+++ b/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');
+    }
+}
author	Alejandro Soto <alejandro@34project.org>	2025-09-13 14:55:15 -0600
committer	Alejandro Soto <alejandro@34project.org>	2025-09-13 14:55:15 -0600
commit	87f85704af1fa866be83077b2b351c1fdad7c3ce (patch)
tree	b49c8d49ef717e539bff6578992e692eea55d380 /themes/tabi-lean/sass
parent	1a4c3216f027d6a6f36104547377b7b21faa5015 (diff)
parent	a2ea06d513a5802964f8f0ef5795cec7e548ed7b (diff)