mirror of
https://github.com/welpo/tabi.git
synced 2026-06-15 15:57:34 +02:00
Merge branch 'main' into main
This commit is contained in:
Blaine Traudt
GitHub
commit
5495c25073
57 changed files with 1317 additions and 424 deletions
|
|
@ -138,8 +138,8 @@ html {
|
|||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 5vmin;
|
||||
padding: 0;
|
||||
margin-inline: 5vmin;
|
||||
margin-block: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ body {
|
|||
word-wrap: break-word;
|
||||
margin: 0 auto;
|
||||
margin-top: 6vmin;
|
||||
margin-bottom: 4rem;
|
||||
margin-block-end: 4rem;
|
||||
width: 100%;
|
||||
max-width: var(--max-layout-width);
|
||||
}
|
||||
|
|
@ -174,18 +174,18 @@ article {
|
|||
}
|
||||
|
||||
.full-width {
|
||||
margin-right: -$base-margin;
|
||||
margin-left: -$base-margin;
|
||||
margin-inline-start: -$base-margin;
|
||||
margin-inline-end: -$base-margin;
|
||||
max-width: calc(100% + 2*$base-margin);
|
||||
}
|
||||
|
||||
li {
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
p + :last-child {
|
||||
margin-bottom: var(--paragraph-spacing);
|
||||
margin-block-end: var(--paragraph-spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -210,62 +210,44 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin-top: 0.67em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
font-weight: 550;
|
||||
font-size: 1.62rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
margin-top: 0.5em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
font-weight: 550;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
margin-top: 0.3em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
font-weight: 550;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: block;
|
||||
margin-top: 0.83em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
font-weight: 550;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
display: block;
|
||||
margin-top: 0.83em;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0em;
|
||||
margin-left: 0;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: var(--paragraph-spacing);
|
||||
margin-block-end: var(--paragraph-spacing);
|
||||
font-size: 1em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
|
@ -294,7 +276,7 @@ video {
|
|||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 2rem;
|
||||
margin-block-end: 2rem;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
|
|
@ -312,8 +294,8 @@ video {
|
|||
|
||||
article .full-width {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
max-width: none;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -334,7 +316,8 @@ video {
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 0 16px;
|
||||
margin-inline: 16px;
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +1,26 @@
|
|||
.admonition {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 1em 0;
|
||||
border-left: 6px solid;
|
||||
border-radius: 10px;
|
||||
padding: 0.8rem;
|
||||
color: var(--text-color-high-contrast);
|
||||
font-family: var(--sans-serif-font);
|
||||
@mixin admonition-type($type) {
|
||||
border-color: var(--admonition-#{$type}-border);
|
||||
background-color: var(--admonition-#{$type}-bg);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
margin-left: -1.75rem;
|
||||
font-family: inherit;
|
||||
code {
|
||||
background-color: var(--admonition-#{$type}-code);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--hover-color) !important;
|
||||
a {
|
||||
border-bottom: 1px solid var(--admonition-#{$type}-border);
|
||||
color: var(--admonition-#{$type}-border);
|
||||
|
||||
code {
|
||||
color: var(--text-color-high-contrast) !important;
|
||||
&:hover {
|
||||
background-color: var(--admonition-#{$type}-border);
|
||||
color: var(--hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admonition-content {
|
||||
flex: 1;
|
||||
strong {
|
||||
font-weight: 580;
|
||||
.admonition-icon {
|
||||
background-color: var(--admonition-#{$type}-border);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Note */
|
||||
--admonition-note-border: #5b6167;
|
||||
|
|
@ -73,7 +48,7 @@
|
|||
--admonition-danger-code: #fcc1c5;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
@mixin dark-theme-variables {
|
||||
/* Note */
|
||||
--admonition-note-border: #d0d1d4;
|
||||
--admonition-note-bg: #3d3e40;
|
||||
|
|
@ -100,95 +75,62 @@
|
|||
--admonition-danger-code: #8c2e00;
|
||||
}
|
||||
|
||||
.admonition.note {
|
||||
border-color: var(--admonition-note-border);
|
||||
background-color: var(--admonition-note-bg);
|
||||
[data-theme='dark'] {
|
||||
@include dark-theme-variables;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--admonition-note-code) !important;
|
||||
@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 {
|
||||
border-bottom: 1px solid var(--admonition-note-border);
|
||||
color: var(--admonition-note-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admonition-note-border);
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admonition.tip {
|
||||
border-color: var(--admonition-tip-border);
|
||||
background-color: var(--admonition-tip-bg);
|
||||
|
||||
code {
|
||||
background-color: var(--admonition-tip-code) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid var(--admonition-tip-border);
|
||||
color: var(--admonition-tip-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admonition-tip-border);
|
||||
}
|
||||
.admonition-content {
|
||||
flex: 1;
|
||||
strong {
|
||||
font-weight: 580;
|
||||
}
|
||||
}
|
||||
|
||||
.admonition.info {
|
||||
border-color: var(--admonition-info-border);
|
||||
background-color: var(--admonition-info-bg);
|
||||
|
||||
code {
|
||||
background-color: var(--admonition-info-code) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid var(--admonition-info-border);
|
||||
color: var(--admonition-info-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admonition-info-border);
|
||||
}
|
||||
}
|
||||
.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.warning {
|
||||
border-color: var(--admonition-warning-border);
|
||||
background-color: var(--admonition-warning-bg);
|
||||
|
||||
code {
|
||||
background-color: var(--admonition-warning-code) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid var(--admonition-warning-border);
|
||||
color: var(--admonition-warning-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admonition-warning-border);
|
||||
}
|
||||
}
|
||||
.admonition-title {
|
||||
opacity: 0.92;
|
||||
font-weight: bold;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.admonition.danger {
|
||||
border-color: var(--admonition-danger-border);
|
||||
background-color: var(--admonition-danger-bg);
|
||||
|
||||
code {
|
||||
background-color: var(--admonition-danger-code) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid var(--admonition-danger-border);
|
||||
color: var(--admonition-danger-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--admonition-danger-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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");
|
||||
|
|
@ -210,23 +152,8 @@
|
|||
-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 type styles */
|
||||
.admonition.note .admonition-icon {
|
||||
background-color: var(--admonition-note-border);
|
||||
}
|
||||
|
||||
.admonition.tip .admonition-icon {
|
||||
background-color: var(--admonition-tip-border);
|
||||
}
|
||||
|
||||
.admonition.info .admonition-icon {
|
||||
background-color: var(--admonition-info-border);
|
||||
}
|
||||
|
||||
.admonition.warning .admonition-icon {
|
||||
background-color: var(--admonition-warning-border);
|
||||
}
|
||||
|
||||
.admonition.danger .admonition-icon {
|
||||
background-color: var(--admonition-danger-border);
|
||||
}
|
||||
.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'); }
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
.archive {
|
||||
margin-top: 4vmin;
|
||||
margin-block-start: 4vmin;
|
||||
|
||||
.listing-title {
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.listing-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.2rem 1rem;
|
||||
margin-block-end: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
padding-block: 0.2rem;
|
||||
|
||||
.post-time {
|
||||
padding-left: 1vmin;
|
||||
min-width: 5rem;
|
||||
text-align: left;
|
||||
padding-inline-start: 1vmin;
|
||||
min-inline-size: 5rem;
|
||||
text-align: start;
|
||||
|
||||
.date {
|
||||
color: var(--meta-color);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 4vmin;
|
||||
padding: 12px 0;
|
||||
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;
|
||||
|
|
@ -22,7 +22,9 @@
|
|||
}
|
||||
|
||||
.card-info {
|
||||
padding: 0 24px 24px;
|
||||
padding-inline: 24px;
|
||||
padding-block-start: 0;
|
||||
padding-block-end: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
code {
|
||||
border-radius: 5px;
|
||||
background-color: var(--bg-1);
|
||||
padding: 0.1em 0.2em;
|
||||
padding-inline: 0.2em;
|
||||
padding-block: 0.1em;
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--code-font);
|
||||
|
||||
|
|
@ -17,7 +18,7 @@ code {
|
|||
border-collapse: collapse;
|
||||
border-spacing: 0rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
td,
|
||||
th,
|
||||
|
|
@ -29,7 +30,7 @@ code {
|
|||
tbody td:first-child {
|
||||
width: 2rem;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
|
|
@ -46,7 +47,9 @@ pre {
|
|||
display: block;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
padding: 2.4rem 1rem 1rem;
|
||||
padding-inline: 1rem;
|
||||
padding-block-start: 2.4rem;
|
||||
padding-block-end: 1rem;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
line-height: 1.4;
|
||||
|
|
@ -66,16 +69,16 @@ pre {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
background-color: var(--primary-color);
|
||||
padding: 0.3rem;
|
||||
padding-left: 1rem;
|
||||
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: left;
|
||||
text-align: start;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -83,15 +86,15 @@ pre {
|
|||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1.3rem;
|
||||
inset-inline-end: 1.3rem;
|
||||
padding-top: 0.3rem;
|
||||
padding-right: 1.3rem;
|
||||
padding-inline-end: 1.3rem;
|
||||
max-width: calc(100% - 14em);
|
||||
height: 0.9rem;
|
||||
overflow: hidden;
|
||||
color: var(--hover-color);
|
||||
font-size: 0.65rem;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -102,10 +105,10 @@ pre {
|
|||
-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;
|
||||
right: 0.7rem;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
inset-inline-end: 0.7rem;
|
||||
background: var(--hover-color);
|
||||
background-size: contain;
|
||||
width: 0.9rem;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
margin: 0.5em auto;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0.5em 1em;
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
color: inherit;
|
||||
font-size: 0.95rem;
|
||||
font-family: var(--sans-serif-font);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
footer {
|
||||
margin-top: auto;
|
||||
margin-bottom: 1.4rem;
|
||||
margin-block-end: 1.4rem;
|
||||
color: var(--meta-color);
|
||||
font-size: 0.88rem;
|
||||
font-family: var(--post-font-family);
|
||||
|
|
@ -66,7 +66,7 @@ footer nav {
|
|||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@mixin dark-theme-social {
|
||||
.social {
|
||||
&:hover {
|
||||
& > img {
|
||||
|
|
@ -79,3 +79,13 @@ footer nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@include dark-theme-social;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
@include dark-theme-social;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
margin-left: -2rem;
|
||||
padding-right: 0.3rem;
|
||||
margin-inline-start: -2rem;
|
||||
padding-inline-end: 0.3rem;
|
||||
width: 1.9rem;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
|
@ -15,11 +15,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
:dir(rtl) .header-anchor {
|
||||
margin-right: -2rem;
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ header {
|
|||
}
|
||||
|
||||
.page-header {
|
||||
margin: 4rem 0px 1rem 0px;
|
||||
margin-block: 4rem 1rem;
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
font-family: var(--header-font);
|
||||
|
|
@ -17,7 +17,7 @@ header {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: 1em 0;
|
||||
padding-block: 1em;
|
||||
max-width: var(--max-layout-width);
|
||||
}
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ header {
|
|||
}
|
||||
|
||||
.home-title {
|
||||
margin-left: -0.12rem;
|
||||
margin-inline-start: -0.12rem;
|
||||
border: none;
|
||||
padding: 0.12rem;
|
||||
color: var(--primary-color);
|
||||
|
|
@ -85,8 +85,8 @@ header {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
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");
|
||||
|
|
@ -129,8 +129,8 @@ header {
|
|||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
background: var(--background-color);
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
|
||||
@media only screen and (max-width: 600px) {
|
||||
display: block;
|
||||
margin-bottom: 2rem;
|
||||
margin-block-end: 2rem;
|
||||
}
|
||||
|
||||
#home-banner-text {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-block-end: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.875rem;
|
||||
line-height: 3rem;
|
||||
|
|
@ -22,12 +22,12 @@
|
|||
|
||||
#home-banner-header {
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
font-weight: 550;
|
||||
font-size: 2.8rem;
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
#image-container-home {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
padding-inline-start: 2rem;
|
||||
min-width: 11rem;
|
||||
min-height: 11rem;
|
||||
overflow: hidden;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ img.inline {
|
|||
|
||||
figure h4 {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
margin-block-end: 1em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.draft-label {
|
||||
margin-right: 0.3rem;
|
||||
margin-inline-end: 0.3rem;
|
||||
background-color: var(--primary-color);
|
||||
padding: 2px 4px;
|
||||
padding-inline: 4px;
|
||||
padding-block: 2px;
|
||||
color: var(--hover-color);
|
||||
}
|
||||
|
||||
|
|
@ -16,9 +17,9 @@
|
|||
|
||||
iframe {
|
||||
display: block;
|
||||
margin-right: 15%;
|
||||
margin-bottom: 3vmin;
|
||||
margin-left: 15%;
|
||||
margin-inline-start: 15%;
|
||||
margin-inline-end: 15%;
|
||||
margin-block-end: 3vmin;
|
||||
border: none;
|
||||
aspect-ratio: 16/9;
|
||||
width: 100vmin;
|
||||
|
|
@ -30,7 +31,7 @@ ul {
|
|||
}
|
||||
|
||||
.toc-container {
|
||||
margin-bottom: 4vmin;
|
||||
margin-block-end: 4vmin;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
|
|
@ -81,13 +82,13 @@ a:hover {
|
|||
a:not(.no-hover-padding):hover::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -0.15em;
|
||||
bottom: 0;
|
||||
left: -0.15em;
|
||||
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-width: 105%; // This fixes multi-line links (see #225)
|
||||
max-inline-size: 105%; // This fixes multi-line links (see #225)
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -111,10 +112,10 @@ hr {
|
|||
}
|
||||
|
||||
.footnote-definition {
|
||||
margin-bottom: 0.6rem;
|
||||
margin-block-end: 0.6rem;
|
||||
|
||||
sup {
|
||||
margin-right: 0.15rem;
|
||||
margin-inline-end: 0.15rem;
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--serif-font);
|
||||
}
|
||||
|
|
@ -125,7 +126,7 @@ hr {
|
|||
}
|
||||
|
||||
.footnote-backlink {
|
||||
margin-left: 0.2rem;
|
||||
margin-inline-start: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -134,16 +135,16 @@ hr {
|
|||
}
|
||||
|
||||
.references p {
|
||||
margin-left: 2.4rem;
|
||||
margin-inline-start: 2.4rem;
|
||||
text-indent: -2.4rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-left-width: 0.3rem;
|
||||
border-radius: 10px;
|
||||
border-inline-start-width: 0.3rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -187,18 +188,18 @@ details summary {
|
|||
|
||||
.article-navigation {
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
border-top: var(--divider-color) solid 0.5px;
|
||||
padding-top: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
border-block-start: var(--divider-color) solid 0.5px;
|
||||
padding-block-start: 2rem;
|
||||
|
||||
div:first-child {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
div p {
|
||||
|
|
@ -218,25 +219,15 @@ details summary {
|
|||
}
|
||||
}
|
||||
|
||||
:dir(rtl) .article-navigation {
|
||||
div:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
:dir(rtl) .arrow {
|
||||
display: inline-block;
|
||||
transform: rotate(180deg);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
// This for the arrows that point to a corner, (e.g. '↗', '↘', '↙', '↖')
|
||||
:dir(rtl) .arrow-corner {
|
||||
display: inline-block;
|
||||
transform: rotate(270deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.mermaid p {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: var(--navbar-color);
|
||||
padding: 2.5rem 0;
|
||||
padding-block: 2.5rem;
|
||||
|
||||
.bloglist-meta {
|
||||
margin-right: 0.7rem;
|
||||
margin-inline-end: 0.7rem;
|
||||
padding: 0;
|
||||
width: 13.5rem;
|
||||
color: var(--meta-color);
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin-right: 0.7rem;
|
||||
margin-inline-end: 0.7rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -89,15 +89,15 @@
|
|||
.bloglist-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 2rem 0;
|
||||
padding-block: 2rem;
|
||||
|
||||
.bloglist-meta {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin-right: 0.3rem;
|
||||
margin-inline-end: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,20 +64,20 @@
|
|||
right: 0;
|
||||
bottom: 100%;
|
||||
z-index: 2;
|
||||
margin-bottom: $padding-vertical;
|
||||
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-right: $padding-horizontal;
|
||||
padding-inline-end: $padding-horizontal;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
font-size: 0.8rem;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
white-space: nowrap; // Prevents wrapping, allowing content to define width.
|
||||
|
||||
ul {
|
||||
padding-left: $padding-horizontal;
|
||||
padding-inline-start: $padding-horizontal;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ $icon-size: 1.3rem;
|
|||
|
||||
#searchModal {
|
||||
background: color-mix(in srgb, var(--primary-color) 5%, transparent);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
#searchContainer {
|
||||
padding: 1rem;
|
||||
|
|
@ -18,7 +18,7 @@ $icon-size: 1.3rem;
|
|||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
inset-inline-start: 1rem;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
|
|
@ -28,10 +28,11 @@ $icon-size: 1.3rem;
|
|||
}
|
||||
|
||||
.close-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: $icon-size;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
}
|
||||
|
|
@ -41,7 +42,8 @@ $icon-size: 1.3rem;
|
|||
border: 1px solid var(--divider-color);
|
||||
border-radius: 20px;
|
||||
background-color: var(--input-background-color);
|
||||
padding: 0.75rem 1rem 0.75rem 3rem;
|
||||
padding-inline: 3rem 1rem;
|
||||
padding-block: 0.75rem;
|
||||
width: calc(100% - 2rem);
|
||||
color: var(--text-color);
|
||||
font-size: 1rem;
|
||||
|
|
@ -82,7 +84,8 @@ $icon-size: 1.3rem;
|
|||
|
||||
> div {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-inline: 1rem;
|
||||
padding-block: 0.5rem;
|
||||
|
||||
&[aria-selected="true"] {
|
||||
background-color: var(--primary-color);
|
||||
|
|
@ -113,8 +116,8 @@ $icon-size: 1.3rem;
|
|||
display: block;
|
||||
position: relative;
|
||||
align-self: center;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ table {
|
|||
th,
|
||||
td {
|
||||
border: 1px solid var(--bg-1);
|
||||
padding: 6px 13px;
|
||||
padding-inline: 13px;
|
||||
padding-block: 6px;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.tags-item {
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
position: relative;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
background: var(--text-color);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
.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;
|
||||
top: -0.6rem;
|
||||
right: -0.6rem;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ body > div:last-child > div:last-child[style]:not([class]):not([id]) > p[style]:
|
|||
}
|
||||
|
||||
body > div:last-child > div:last-child[style]:not([class]):not([id]) > pre[style]:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
background-color: var(--admonition-danger-code);
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #3271E7; // Contrast ratio: 4.51:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #6cacff; // Contrast ratio: 7.05:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,24 @@
|
|||
// Evangelion Unit-02.
|
||||
:root {
|
||||
--primary-color: #d12e36; // Contrast ratio: 5.05:1
|
||||
@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
|
||||
}
|
||||
}
|
||||
|
||||
// Evangelion Unit-01.
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #c09bd9; // Contrast
|
||||
: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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #1460bd; // Contrast ratio: 6.1:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #e6c212; // Contrast ratio: 9.48:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #9055d8; // Contrast ratio: 4.69:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #cba2e8; // Contrast ratio: 7.74:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,25 @@
|
|||
// 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 {
|
||||
--primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,25 @@
|
|||
// 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 {
|
||||
--primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,25 @@
|
|||
// 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 {
|
||||
--primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #00804d; // Contrast ratio: 5:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #00b86e; // Contrast ratio: 6.34:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #727272; // Contrast ratio: 4.81:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #b3b3b3; // Contrast ratio: 7.86:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #ca4963; // Contrast ratio: 4.52:1.
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #ea535f; // Contrast ratio: 4.63:1.
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +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 {
|
||||
--primary-color: #D33C5C; // Contrast ratio: 4.61:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #fabed2; // Contrast ratio: 10.48:1
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
@include theme-variables('dark');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,33 @@
|
|||
// This file is never loaded; it's serves as reference for the default skin (in main.scss).
|
||||
// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
|
||||
// to verify the accessibility and readability of your colourscheme.
|
||||
// The light background is #fff and the dark background is #1f1f1f.
|
||||
// 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 {
|
||||
--primary-color: #087e96; // Contrast ratio: 4.73:1
|
||||
@include theme-variables('light');
|
||||
}
|
||||
|
||||
// Apply dark theme variables when dark theme is explicitly set.
|
||||
[data-theme='dark'] {
|
||||
--primary-color: #91e0ee; // Contrast ratio: 11.06:1
|
||||
@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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue