diff options
Diffstat (limited to 'sass')
40 files changed, 0 insertions, 3236 deletions
diff --git a/sass/main.scss b/sass/main.scss deleted file mode 100644 index d1470ff..0000000 --- a/sass/main.scss +++ /dev/null @@ -1,347 +0,0 @@ -@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/sass/parts/_admonitions.scss b/sass/parts/_admonitions.scss deleted file mode 100644 index 6feec43..0000000 --- a/sass/parts/_admonitions.scss +++ /dev/null @@ -1,159 +0,0 @@ -@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/sass/parts/_archive.scss b/sass/parts/_archive.scss deleted file mode 100644 index 6df323b..0000000 --- a/sass/parts/_archive.scss +++ /dev/null @@ -1,37 +0,0 @@ -.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/sass/parts/_aside.scss b/sass/parts/_aside.scss deleted file mode 100644 index 4757524..0000000 --- a/sass/parts/_aside.scss +++ /dev/null @@ -1,31 +0,0 @@ -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/sass/parts/_cards.scss b/sass/parts/_cards.scss deleted file mode 100644 index 0b6c560..0000000 --- a/sass/parts/_cards.scss +++ /dev/null @@ -1,105 +0,0 @@ -.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/sass/parts/_code.scss b/sass/parts/_code.scss deleted file mode 100644 index 2623f50..0000000 --- a/sass/parts/_code.scss +++ /dev/null @@ -1,152 +0,0 @@ -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/sass/parts/_comments.scss b/sass/parts/_comments.scss deleted file mode 100644 index aab54d9..0000000 --- a/sass/parts/_comments.scss +++ /dev/null @@ -1,33 +0,0 @@ -.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/sass/parts/_footer.scss b/sass/parts/_footer.scss deleted file mode 100644 index 2b49c3d..0000000 --- a/sass/parts/_footer.scss +++ /dev/null @@ -1,91 +0,0 @@ -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/sass/parts/_header-anchor.scss b/sass/parts/_header-anchor.scss deleted file mode 100644 index 8a06200..0000000 --- a/sass/parts/_header-anchor.scss +++ /dev/null @@ -1,35 +0,0 @@ -.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/sass/parts/_header.scss b/sass/parts/_header.scss deleted file mode 100644 index 414aa82..0000000 --- a/sass/parts/_header.scss +++ /dev/null @@ -1,197 +0,0 @@ -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/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss deleted file mode 100644 index ce6b9c1..0000000 --- a/sass/parts/_home-banner.scss +++ /dev/null @@ -1,82 +0,0 @@ -#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/sass/parts/_iine.scss b/sass/parts/_iine.scss deleted file mode 100644 index 9ac95c4..0000000 --- a/sass/parts/_iine.scss +++ /dev/null @@ -1,37 +0,0 @@ -.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/sass/parts/_image-hover.scss b/sass/parts/_image-hover.scss deleted file mode 100644 index 9f36f23..0000000 --- a/sass/parts/_image-hover.scss +++ /dev/null @@ -1,22 +0,0 @@ -.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/sass/parts/_image-toggler.scss b/sass/parts/_image-toggler.scss deleted file mode 100644 index e2f420e..0000000 --- a/sass/parts/_image-toggler.scss +++ /dev/null @@ -1,24 +0,0 @@ -.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/sass/parts/_image.scss b/sass/parts/_image.scss deleted file mode 100644 index e8bae01..0000000 --- a/sass/parts/_image.scss +++ /dev/null @@ -1,60 +0,0 @@ -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/sass/parts/_misc.scss b/sass/parts/_misc.scss deleted file mode 100644 index d798ddd..0000000 --- a/sass/parts/_misc.scss +++ /dev/null @@ -1,330 +0,0 @@ -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/sass/parts/_multilingual_quote.scss b/sass/parts/_multilingual_quote.scss deleted file mode 100644 index ecd5f1c..0000000 --- a/sass/parts/_multilingual_quote.scss +++ /dev/null @@ -1,35 +0,0 @@ -.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/sass/parts/_pagination.scss b/sass/parts/_pagination.scss deleted file mode 100644 index 5361b1e..0000000 --- a/sass/parts/_pagination.scss +++ /dev/null @@ -1,19 +0,0 @@ -.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/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss deleted file mode 100644 index e74f89c..0000000 --- a/sass/parts/_posts_list.scss +++ /dev/null @@ -1,172 +0,0 @@ -.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/sass/parts/_quick_navigation_buttons.scss b/sass/parts/_quick_navigation_buttons.scss deleted file mode 100644 index 768592f..0000000 --- a/sass/parts/_quick_navigation_buttons.scss +++ /dev/null @@ -1,126 +0,0 @@ -#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/sass/parts/_search.scss b/sass/parts/_search.scss deleted file mode 100644 index df820e4..0000000 --- a/sass/parts/_search.scss +++ /dev/null @@ -1,160 +0,0 @@ -$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/sass/parts/_spoiler.scss b/sass/parts/_spoiler.scss deleted file mode 100644 index b43911b..0000000 --- a/sass/parts/_spoiler.scss +++ /dev/null @@ -1,53 +0,0 @@ -.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/sass/parts/_syntax_theme.scss b/sass/parts/_syntax_theme.scss deleted file mode 100644 index ece3930..0000000 --- a/sass/parts/_syntax_theme.scss +++ /dev/null @@ -1,342 +0,0 @@ -/* - * 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/sass/parts/_table.scss b/sass/parts/_table.scss deleted file mode 100644 index d6e5326..0000000 --- a/sass/parts/_table.scss +++ /dev/null @@ -1,38 +0,0 @@ -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/sass/parts/_tags.scss b/sass/parts/_tags.scss deleted file mode 100644 index ae28d0a..0000000 --- a/sass/parts/_tags.scss +++ /dev/null @@ -1,41 +0,0 @@ -#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/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss deleted file mode 100644 index 9c5bd4f..0000000 --- a/sass/parts/_theme-switch.scss +++ /dev/null @@ -1,42 +0,0 @@ -.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/sass/parts/_webmention.scss b/sass/parts/_webmention.scss deleted file mode 100644 index b6d6338..0000000 --- a/sass/parts/_webmention.scss +++ /dev/null @@ -1,149 +0,0 @@ -#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/sass/parts/_zola-error.scss b/sass/parts/_zola-error.scss deleted file mode 100644 index 3bdbcbc..0000000 --- a/sass/parts/_zola-error.scss +++ /dev/null @@ -1,28 +0,0 @@ -// 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/sass/skins/blue.scss b/sass/skins/blue.scss deleted file mode 100644 index d135219..0000000 --- a/sass/skins/blue.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/evangelion.scss b/sass/skins/evangelion.scss deleted file mode 100644 index d0350a5..0000000 --- a/sass/skins/evangelion.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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/sass/skins/indigo_ingot.scss b/sass/skins/indigo_ingot.scss deleted file mode 100644 index 11a6370..0000000 --- a/sass/skins/indigo_ingot.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/lavender.scss b/sass/skins/lavender.scss deleted file mode 100644 index 97a40df..0000000 --- a/sass/skins/lavender.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/lowcontrast_orange.scss b/sass/skins/lowcontrast_orange.scss deleted file mode 100644 index ad84bf4..0000000 --- a/sass/skins/lowcontrast_orange.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/sass/skins/lowcontrast_peach.scss b/sass/skins/lowcontrast_peach.scss deleted file mode 100644 index 328a4da..0000000 --- a/sass/skins/lowcontrast_peach.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/sass/skins/lowcontrast_pink.scss b/sass/skins/lowcontrast_pink.scss deleted file mode 100644 index 3f96d1d..0000000 --- a/sass/skins/lowcontrast_pink.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/sass/skins/mint.scss b/sass/skins/mint.scss deleted file mode 100644 index e598c24..0000000 --- a/sass/skins/mint.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/monochrome.scss b/sass/skins/monochrome.scss deleted file mode 100644 index 976e12e..0000000 --- a/sass/skins/monochrome.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/red.scss b/sass/skins/red.scss deleted file mode 100644 index 169340f..0000000 --- a/sass/skins/red.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/sakura.scss b/sass/skins/sakura.scss deleted file mode 100644 index 4e418eb..0000000 --- a/sass/skins/sakura.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/sass/skins/teal.scss b/sass/skins/teal.scss deleted file mode 100644 index 3a1fbcd..0000000 --- a/sass/skins/teal.scss +++ /dev/null @@ -1,33 +0,0 @@ -// 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'); - } -} |