🎨 refactor: turn macros into partials & sort CSS (#146)

main
Óscar 2 years ago committed by GitHub
parent cc029d0b19
commit 14ccb208cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -21,31 +21,30 @@
@use 'parts/_theme-switch.scss';
@font-face {
/* 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';
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 {
/* 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';
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 {
/* 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';
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;
}
:root {
color-scheme: light;
--max-layout-width: 1000px;
--normal-layout-width: 600px;
@ -56,9 +55,6 @@
--serif-font: 'Source Serif', 'Georgia', serif;
--code-font: 'Cascadia Code';
font-family: var(--sans-serif-font);
line-height: 190%;
--background-color: white;
--bg-0: #f0f0f0;
--bg-1: #e7e7e7;
@ -74,10 +70,13 @@
--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;
line-height: 190%;
font-family: var(--sans-serif-font);
}
[data-theme='dark'] {
color-scheme: dark;
--background-color: #1f1f1f;
--bg-0: #2f2f2f;
@ -94,6 +93,7 @@
--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;
.invertible-image {
filter: invert(.88);
@ -114,25 +114,25 @@ html {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0 5vmin;
padding: 0;
min-height: 100vh;
}
.content {
width: 100%;
max-width: var(--max-layout-width);
word-wrap: break-word;
margin: 0 auto;
margin-top: 6vmin;
margin-bottom: 4rem;
word-wrap: break-word;
width: 100%;
max-width: var(--max-layout-width);
}
article {
$base-margin: 6rem;
margin: 0 auto;
max-width: calc(var(--max-layout-width) - 2*$base-margin);
margin: 0 auto;
p,
li,
@ -146,9 +146,9 @@ article {
}
.full-width {
max-width: calc(100% + 2*$base-margin);
margin-left: -$base-margin;
margin-right: -$base-margin;
margin-left: -$base-margin;
max-width: calc(100% + 2*$base-margin);
}
}
@ -175,59 +175,59 @@ h6 {
h1 {
display: block;
font-size: 1.5em;
margin-top: 0.67em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: 550;
font-size: 1.5em;
}
h2 {
display: block;
font-size: 1.4em;
margin-top: 0.5em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: 550;
font-size: 1.4em;
}
h3 {
display: block;
font-size: 1.2em;
margin-top: 0.3em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: 550;
font-size: 1.2em;
}
h4 {
display: block;
font-size: 1em;
margin-top: 0.83em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: 550;
font-size: 1em;
}
h5 {
display: block;
font-size: 1em;
margin-top: 0.83em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: normal;
font-size: 1em;
}
p {
margin-top: 0.4rem;
margin-bottom: max(2.3vmin, 24px);
line-height: 2rem;
font-size: 1em;
line-height: 2rem;
}
strong {
@ -252,18 +252,18 @@ strong {
}
article .full-width {
max-width: none;
margin-left: 0;
margin-right: 0;
display: block;
margin-right: 0;
margin-left: 0;
max-width: none;
overflow-x: auto;
}
}
@media only screen and (max-width: 600px) {
.content {
max-width: var(--medium-layout-width);
margin-top: 0rem;
max-width: var(--medium-layout-width);
}
article {

@ -2,20 +2,20 @@
margin-top: 4vmin;
.listing-title {
font-size: 1.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.listing-item {
padding: 0.2rem 1rem;
margin-bottom: 0.5rem;
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
padding: 0.2rem 1rem;
.post-time {
padding-left: 1vmin;
min-width: 5rem;
text-align: left;
padding-left: 1vmin;
.date {
color: var(--meta-color);
@ -25,9 +25,9 @@
}
ul {
list-style: none;
padding: 0;
margin: 0;
padding: 0;
list-style: none;
}
li {

@ -1,16 +1,16 @@
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: auto;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
padding: 12px 0;
margin-top: 4vmin;
padding: 12px 0;
}
.card {
min-height: 100px;
background: var(--bg-2);
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
background: var(--bg-2);
min-height: 100px;
overflow: hidden;
}
@ -28,8 +28,8 @@
}
.card-image-placeholder {
height: 12px;
width: 100%;
height: 12px;
}
.card-description {

@ -2,21 +2,21 @@ code {
border-radius: 5px;
background-color: var(--bg-1);
padding: 0.1em 0.2em;
font-family: var(--code-font);
font-size: 0.9rem;
font-family: var(--code-font);
mark {
display: block;
filter: brightness(110%);
background-color: var(--codeblock-highlight);
color: inherit;
filter: brightness(110%);
display: block;
}
table {
width: 100%;
margin: 0rem;
border-collapse: collapse;
border-spacing: 0rem;
width: 100%;
text-align: left;
td,
@ -27,8 +27,8 @@ code {
}
tbody td:first-child {
user-select: none;
width: 2rem;
user-select: none;
text-align: left;
}
@ -43,63 +43,63 @@ a:hover code {
}
pre {
overflow: hidden;
position: relative;
display: block;
line-height: 1.4;
overflow-x: auto;
padding: 2.4rem 1rem 1rem;
position: relative;
border-radius: 5px;
padding: 2.4rem 1rem 1rem;
overflow: hidden;
overflow-x: auto;
line-height: 1.4;
code {
display: block;
overflow-x: auto;
white-space: pre;
font-size: 0.8rem; // Fits ~77 characters.
background-color: transparent;
color: inherit;
padding: 0rem;
border: 0rem;
border-radius: 5px;
background-color: transparent;
padding: 0rem;
overflow-x: auto;
color: inherit;
font-size: 0.8rem; // Fits ~77 characters.
white-space: pre;
&::before {
content: attr(data-lang);
display: block;
position: absolute;
top: 0;
left: 0;
background-color: var(--primary-color);
color: var(--hover-color);
padding: 0.3rem;
padding-left: 1rem;
width: calc(100% - 1.3rem);
height: 0.9rem;
content: attr(data-lang);
color: var(--hover-color);
font-size: 0.65rem;
position: absolute;
text-align: left;
text-transform: uppercase;
top: 0;
left: 0;
}
}
}
.copy-code {
z-index: 1;
-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");
background: var(--hover-color);
cursor: pointer;
position: absolute;
height: 0.9rem;
width: 0.9rem;
background-size: contain;
color: white;
right: 0.7rem;
top: 0.3rem;
right: 0.7rem;
align-self: center;
z-index: 1;
cursor: pointer;
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");
height: 1rem;
width: 1rem;
height: 1rem;
}
.copy-code.error {

@ -3,30 +3,30 @@
}
.comments {
margin-top: 2rem;
border-top: var(--divider-color) solid 0.5px;
border-bottom: var(--divider-color) solid 0.5px;
margin-top: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
iframe {
margin: 0;
border: none;
aspect-ratio: inherit;
width: 100%;
margin: 0;
max-width: 100%;
aspect-ratio: inherit;
}
.load-comments-button {
display: block;
font-family: var(--sans-serif-font);
color: inherit;
font-size: 0.95rem;
background: none;
cursor: pointer;
margin: 0.5em auto;
border: none;
background: none;
padding: 0.5em 1em;
margin: 0.5em auto;
cursor: pointer;
color: inherit;
font-size: 0.95rem;
font-family: var(--sans-serif-font);
text-decoration: none;
}
}

@ -17,10 +17,10 @@ footer nav {
}
.socials {
justify-content: center;
flex-grow: 0;
display: flex;
flex-grow: 0;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
svg {
@ -33,18 +33,18 @@ footer nav {
}
.social {
background-image: unset;
padding: 0.5vmin;
display: flex;
justify-content: center;
align-items: center;
background-image: unset;
padding: 0.5vmin;
}
.social > img {
color: #000000;
aspect-ratio: 1/1;
width: 1.5rem;
height: auto;
color: #000000;
}
.social {
@ -70,8 +70,8 @@ footer nav {
}
.credits {
font-size: 0.88rem;
color: var(--meta-color);
font-size: 0.88rem;
text-align: center;
p {

@ -1,14 +1,14 @@
.header-anchor {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
width: 1.9rem;
justify-content: center;
align-items: center;
opacity: 0;
margin-left: -2rem;
padding-right: 0.3rem;
opacity: 0;
user-select: none;
width: 1.9rem;
height: 100%;
user-select: none;
@media (max-width: 500px) {
display: none;
@ -17,9 +17,9 @@
.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");
background: var(--text-color);
align-self: center;
cursor: pointer;
background: var(--text-color);
width: 1rem;
height: 1rem;
}

@ -1,24 +1,24 @@
header {
font-family: 'Inter Subset', var(--sans-serif-font);
width: 100%;
font-family: 'Inter Subset', var(--sans-serif-font);
}
.page-header {
margin: 4rem 0px 1rem 0px;
font-size: 3em;
line-height: 100%;
font-family: var(--header-font);
margin: 4rem 0px 1rem 0px;
}
.navbar {
max-width: var(--max-layout-width);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 1em 0;
align-items: center;
margin: 0 auto;
padding: 1em 0;
max-width: var(--max-layout-width);
}
.nav-navs {
@ -28,76 +28,76 @@ header {
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-items: center;
gap: 1px;
list-style: none;
padding: 0;
margin: 0;
padding: 0;
list-style: none;
}
}
.nav-links {
font-size: 1em;
font-weight: 340;
text-decoration: none;
justify-content: right;
color: var(--text-color);
padding: 0.66rem;
color: var(--text-color);
font-weight: 340;
font-size: 1em;
line-height: 2.5;
text-decoration: none;
}
.home-title {
font-size: 1.7em;
font-weight: 450;
padding: 0.12rem;
margin-left: -0.12rem;
border: none;
padding: 0.12rem;
color: var(--primary-color);
font-weight: 450;
font-size: 1.7em;
text-decoration: none;
}
.meta {
color: var(--meta-color);
letter-spacing: -0.4px;
font-size: 0.8rem;
font-weight: 300;
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);
text-decoration-color: none;
font-weight: inherit;
text-decoration: none;
text-decoration-color: none;
}
ul,
li {
display: inline;
font-family: var(--sans-serif-font);
list-style-type: none;
display: inline;
}
}
.language-switcher {
margin-left: 0.5rem;
margin-right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
align-items: center;
margin-right: 0.5rem;
margin-left: 0.5rem;
}
.language-switcher-icon {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960'><path d='M480 976q-84 0-157-31.5T196 859q-54-54-85-127.5T80 574q0-84 31-156.5T196 291q54-54 127-84.5T480 176q84 0 157 30.5T764 291q54 54 85 126.5T880 574q0 84-31 157.5T764 859q-54 54-127 85.5T480 976Zm0-58q35-36 58.5-82.5T577 725H384q14 60 37.5 108t58.5 85Zm-85-12q-25-38-43-82t-30-99H172q38 71 88 111.5T395 906Zm171-1q72-23 129.5-69T788 725H639q-13 54-30.5 98T566 905ZM152 665h159q-3-27-3.5-48.5T307 574q0-25 1-44.5t4-43.5H152q-7 24-9.5 43t-2.5 45q0 26 2.5 46.5T152 665Zm221 0h215q4-31 5-50.5t1-40.5q0-20-1-38.5t-5-49.5H373q-4 31-5 49.5t-1 38.5q0 21 1 40.5t5 50.5Zm275 0h160q7-24 9.5-44.5T820 574q0-26-2.5-45t-9.5-43H649q3 35 4 53.5t1 34.5q0 22-1.5 41.5T648 665Zm-10-239h150q-33-69-90.5-115T565 246q25 37 42.5 80T638 426Zm-254 0h194q-11-53-37-102.5T480 236q-32 27-54 71t-42 119Zm-212 0h151q11-54 28-96.5t43-82.5q-75 19-131 64t-91 115Z'/%3E%3C/svg%3E%0A");
background: var(--text-color);
position: relative;
align-self: center;
cursor: pointer;
background: var(--text-color);
width: 1.2rem;
height: 1.2rem;
position: relative;
cursor: pointer;
}
.dropdown {
@ -110,13 +110,13 @@ header {
.dropdown-content {
display: none;
position: absolute;
padding-left: 0.5rem;
padding-right: 0.5rem;
z-index: 1;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 1;
background: var(--background-color);
padding-right: 0.5rem;
padding-left: 0.5rem;
text-align: center;
white-space: nowrap;
a {
@ -141,16 +141,16 @@ header {
@media only screen and (max-width: 600px) {
.nav-navs {
flex-wrap: wrap;
justify-content: center;
margin-top: 0.8rem;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.navbar {
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
}
}

@ -1,6 +1,6 @@
.image-hover-container {
position: relative;
display: inline-block;
position: relative;
width: 100%;
.image-default {

@ -3,10 +3,10 @@
}
.image-toggled {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.image-toggler-toggle {
@ -14,11 +14,11 @@
}
.image-toggler-toggle:checked ~ .image-label .image-toggled {
visibility: visible;
position: static;
visibility: visible;
}
.image-toggler-toggle:checked ~ .image-label .image-default {
visibility: hidden;
position: absolute;
visibility: hidden;
}

@ -1,15 +1,15 @@
figure {
box-sizing: border-box;
display: inline-block;
box-sizing: border-box;
margin: 0;
max-width: 100%;
height: auto;
}
figcaption {
font-family: var(--serif-font);
font-size: 0.72rem;
color: var(--meta-color);
font-size: 0.72rem;
font-family: var(--serif-font);
text-align: center;
}
@ -21,9 +21,9 @@ img {
}
figure h4 {
font-size: 1rem;
margin: 0;
margin-bottom: 1em;
font-size: 1rem;
}
figure h4::before {

@ -1,28 +1,28 @@
.draft-label {
color: var(--hover-color);
margin-right: 0.3rem;
background-color: var(--primary-color);
padding: 2px 4px;
margin-right: 0.3rem;
color: var(--hover-color);
}
.article-title {
display: block;
margin: 0;
color: var(--text-color-high-contrast);
display: block;
font-size: 2rem;
font-weight: 550;
font-size: 2rem;
line-height: 3rem;
}
iframe {
border: none;
display: block;
margin-right: 15%;
margin-bottom: 3vmin;
margin-left: 15%;
border: none;
aspect-ratio: 16/9;
width: 100vmin;
max-width: 70%;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 3vmin;
}
ul {
@ -61,16 +61,16 @@ ul {
}
blockquote {
border-left: 0.3rem solid var(--primary-color);
margin: 0;
border-left: 0.3rem solid var(--primary-color);
padding-left: 1em;
}
a {
position: relative;
color: var(--primary-color);
text-decoration: inherit;
font-weight: inherit;
position: relative;
text-decoration: inherit;
}
a:hover {
@ -79,15 +79,15 @@ a:hover {
}
a:not(.no-hover-padding)::before {
content: "";
position: absolute;
top: 0;
right: -0.15em;
bottom: 0;
left: -0.15em;
right: -0.15em;
opacity: 0;
z-index: -1;
background-color: var(--primary-color);
opacity: 0;
content: "";
}
a:not(.no-hover-padding):hover::before {
@ -102,24 +102,24 @@ a:not(.no-hover-padding):hover::before {
}
hr {
margin: 3.5rem 0 1rem;
border: none;
height: 1px;
background-color: var(--divider-color);
margin: 3.5rem 0 1rem;
height: 1px;
}
.footnote-reference {
font-family: var(--serif-font);
font-size: 0.7rem;
font-family: var(--serif-font);
}
.footnote-definition {
margin-bottom: 0.6rem;
sup {
font-family: var(--serif-font);
font-size: 0.75rem;
margin-right: 0.15rem;
font-size: 0.75rem;
font-family: var(--serif-font);
}
p {
@ -128,21 +128,21 @@ hr {
}
.footnote-backlink {
font-size: 0.8rem;
margin-left: 0.2rem;
font-size: 0.8rem;
}
.references p {
text-indent: -2.4rem;
margin-left: 2.4rem;
text-indent: -2.4rem;
}
.info-box {
border: 1px solid var(--primary-color);
border-left-width: 0.3rem;
padding: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid var(--primary-color);
border-left-width: 0.3rem;
border-radius: 10px;
padding: 1rem;
text-align: center;
}

@ -7,14 +7,14 @@
}
.quote-label {
font-family: var(--sans-serif-font);
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;
font-size: 0.75rem;
border-radius: 5px;
display: none;
}
.quote-toggle:not(:checked) ~ .quote .translated .quote-label-original,

@ -3,9 +3,9 @@
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding: 0;
font-size: 1em;
list-style: none;
padding: 0;
.page-item .disabled {
opacity: 0.5;
@ -13,7 +13,7 @@
}
.page-numbers {
font-size: 0.9rem;
color: var(--meta-color);
font-size: 0.9rem;
}
}

@ -4,16 +4,16 @@
}
.bloglist-row {
background-color: var(--navbar-color);
display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding: 2.5rem 0;
.date {
font-size: 0.9rem;
font-weight: 300;
color: var(--meta-color);
width: 13.5rem;
color: var(--meta-color);
font-weight: 300;
font-size: 0.9rem;
}
.bloglist-tags {
@ -21,8 +21,8 @@
.tag {
margin-right: 0.7rem;
font-size: 0.75rem;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}
}
@ -33,8 +33,8 @@
.bloglist-title {
margin: 0;
font-size: 1.2em;
font-weight: bold;
font-size: 1.2em;
a {
color: var(--text-color-high-contrast);
@ -49,16 +49,16 @@
.description p {
margin: 0.5rem 0 1rem;
color: var(--text-color);
font-size: 0.9rem;
font-weight: 250;
font-size: 0.9rem;
line-height: 1.5rem;
}
}
}
.all-posts {
font-size: 1.3rem;
font-weight: 350;
font-size: 1.3rem;
}
@media only screen and (max-width: 1100px) {

@ -3,15 +3,15 @@
}
.spoiler-content {
cursor: help; // Indicate interactive element.
display: inline-block; // Allow content to only take up its own width.
cursor: help; // Indicate interactive element.
.spoiler-hidden {
filter: blur(6px);
user-select: none;
-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.
@ -32,9 +32,9 @@
.spoiler-container.fixed-blur {
.spoiler-content:before {
content: 'SPOILER'; // Display the word "SPOILER".
filter: blur(6px);
display: inline-block; // Block display within the inline flow.
filter: blur(6px);
content: 'SPOILER'; // Display the word "SPOILER".
}
.spoiler-content .spoiler-hidden {

@ -3,290 +3,290 @@
*/
: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;
--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 {
color: var(--text);
background-color: var(--codeblock-bg);
background-color: var(--codeblock-bg);
color: var(--text);
}
.z-comment {
color: var(--overlay0);
font-style: italic;
color: var(--overlay0);
font-style: italic;
}
.z-string {
color: var(--green);
color: var(--green);
&.z-regexp {
color: var(--sky);
}
&.z-regexp {
color: var(--sky);
}
}
.z-constant.z-numeric,
.z-string.z-regexp {
color: var(--sky);
color: var(--sky);
}
.z-constant {
&.z-character.z-escape {
color: var(--sky);
}
&.z-character.z-escape {
color: var(--sky);
}
&.z-language {
color: var(--lavender);
}
&.z-language {
color: var(--lavender);
}
}
.z-support.z-function.z-builtin.z-variable.z-other.z-constant {
color: var(--sky);
color: var(--sky);
}
.z-keyword {
color: var(--red);
color: var(--red);
&.z-control {
&.z-control {
&.z-loop,
&.z-conditional,
&.z-c + + {
color: var(--mauve);
}
&.z-loop,
&.z-conditional,
&.z-c + + {
color: var(--mauve);
}
&.z-return,
&.z-flow.z-return {
color: var(--pink);
&.z-return,
&.z-flow.z-return {
color: var(--pink);
}
}
}
}
.z-support.z-type.z-exception {
color: var(--sky);
color: var(--sky);
}
.z-keyword.z-operator {
color: var(--teal);
color: var(--teal);
}
.z-punctuation {
&.z-accessor {
color: var(--teal);
}
&.z-accessor {
color: var(--teal);
}
&.z-section {
color: var(--text);
}
&.z-section {
color: var(--text);
}
}
.z-keyword.z-control.z-import.z-include {
color: var(--peach);
color: var(--peach);
}
.z-storage {
color: var(--red);
color: var(--red);
&.z-type {
color: var(--yellow);
}
&.z-type {
color: var(--yellow);
}
&.z-modifier {
color: var(--red);
}
&.z-modifier {
color: var(--red);
}
}
.z-entity.z-name.z-namespace,
.z-meta.z-path,
.z-storage.z-type.z-class {
color: var(--rosewater);
color: var(--rosewater);
}
.z-entity.z-name.z-label {
color: var(--blue);
color: var(--blue);
}
.z-keyword.z-declaration.z-class {
color: var(--red);
color: var(--red);
}
.z-entity.z-name.z-class,
.z-meta.z-toc-list.z-full-identifier {
color: var(--teal);
color: var(--teal);
}
.z-entity {
&.z-other.z-inherited-class {
color: var(--teal);
}
&.z-other.z-inherited-class {
color: var(--teal);
}
&.z-name.z-function {
color: var(--blue);
font-style: italic;
}
&.z-name.z-function {
color: var(--blue);
font-style: italic;
}
}
.z-variable.z-function {
color: var(--blue);
font-style: italic;
color: var(--blue);
font-style: italic;
}
.z-entity.z-name.z-function.z-preprocessor,
.z-keyword.z-control.z-import {
color: var(--red);
color: var(--red);
}
.z-entity.z-name.z-function {
&.z-constructor,
&.z-destructor {
color: var(--lavender);
}
&.z-constructor,
&.z-destructor {
color: var(--lavender);
}
}
.z-variable.z-parameter.z-function {
color: var(--rosewater);
color: var(--rosewater);
}
.z-keyword.z-declaration.z-function {
color: var(--maroon);
color: var(--maroon);
}
.z-support {
&.z-function {
color: var(--teal);
}
&.z-function {
color: var(--teal);
}
&.z-constant {
color: var(--blue);
}
&.z-constant {
color: var(--blue);
}
&.z-type,
&.z-class {
color: var(--blue);
font-style: italic;
}
&.z-type,
&.z-class {
color: var(--blue);
font-style: italic;
}
}
.z-variable {
&.z-function {
color: var(--blue);
}
&.z-function {
color: var(--blue);
}
&.z-parameter {
color: var(--rosewater);
}
&.z-parameter {
color: var(--rosewater);
}
&.z-other {
color: var(--text);
&.z-other {
color: var(--text);
&.z-member {
color: var(--rosewater);
&.z-member {
color: var(--rosewater);
}
}
}
&.z-language {
color: var(--peach);
}
&.z-language {
color: var(--peach);
}
}
.z-entity {
&.z-name.z-tag {
color: var(--sky);
}
&.z-name.z-tag {
color: var(--sky);
}
&.z-other.z-attribute-name {
color: var(--mauve);
font-style: italic;
}
&.z-other.z-attribute-name {
color: var(--mauve);
font-style: italic;
}
}
.z-punctuation.z-definition.z-tag {
color: var(--maroon);
color: var(--maroon);
}
.z-markup.z-underline.z-link.z-markdown {
color: var(--rosewater);
font-style: underline;
font-style: italic;
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;
color: var(--peach);
font-style: italic;
}
.z-markup.z-raw {
&.z-code-fence,
&.z-inline {
color: var(--peach);
font-style: italic;
}
&.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);
color: var(--blue);
}
.z-markup {
&.z-italic {
color: var(--maroon);
font-style: italic;
}
&.z-italic {
color: var(--maroon);
font-style: italic;
}
&.z-bold {
color: var(--maroon);
font-weight: bold;
}
&.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);
color: var(--pink);
}
.z-variable.z-language.z-shell {
color: var(--red);
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-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-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);
color: var(--peach);
}
.z-support {
&.z-type.z-property-name.z-css {
color: var(--flamingo);
}
&.z-type.z-property-name.z-css {
color: var(--flamingo);
}
&.z-constant.z-property-value.z-css {
color: var(--text);
}
&.z-constant.z-property-value.z-css {
color: var(--text);
}
}
.z-constant.z-numeric.z-suffix.z-css,
@ -294,49 +294,49 @@
.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);
color: var(--peach);
}
.z-entity.z-name.z-tag.z-css {
color: var(--lavender);
color: var(--lavender);
}
.z-variable.z-other.z-sass {
color: var(--peach);
color: var(--peach);
}
.z-invalid {
color: var(--text);
background-color: var(--red);
&.z-deprecated {
background-color: var(--red);
color: var(--text);
background-color: var(--mauve);
}
&.z-deprecated {
background-color: var(--mauve);
color: var(--text);
}
}
.z-meta.z-diff {
color: --OVERLAY0;
&.z-header {
color: --OVERLAY0;
}
&.z-header {
color: --OVERLAY0;
}
}
.z-markup {
&.z-deleted {
color: var(--red);
}
&.z-deleted {
color: var(--red);
}
&.z-inserted {
color: var(--green);
}
&.z-inserted {
color: var(--green);
}
&.z-changed {
color: var(--yellow);
}
&.z-changed {
color: var(--yellow);
}
}
.z-message.z-error {
color: var(--red);
color: var(--red);
}

@ -1,17 +1,17 @@
table {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
font: inherit;
overflow: hidden;
border-style: hidden !important;
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 {
padding: 6px 13px;
border: 1px solid var(--bg-1);
padding: 6px 13px;
font-size: large;
}

@ -2,9 +2,9 @@
margin-top: 4vmin;
ul {
list-style: none;
padding: 0;
margin: 0;
padding: 0;
list-style: none;
}
.tags-item {

@ -1,10 +1,10 @@
.theme-switcher {
-webkit-mask: var(--theme-switcher-svg);
position: relative;
align-self: center;
cursor: pointer;
margin-left: 0.5rem;
background: var(--text-color);
width: 1rem;
height: 1rem;
position: relative;
cursor: pointer;
-webkit-mask: var(--theme-switcher-svg);
background: var(--text-color);
}

@ -1,13 +1,7 @@
{% import "macros/add_comments.html" as macros_add_comments %}
{% import "macros/cards_pages.html" as macros_cards_pages %}
{% import "macros/create_history_url.html" as macros_create_history_url %}
{% import "macros/format_date.html" as macros_format_date %}
{% import "macros/list_posts.html" as macros_list_posts %}
{% import "macros/page_desc.html" as macros_page_desc %}
{% import "macros/page_header.html" as macros_page_header %}
{% import "macros/paginate.html" as macros_paginate %}
{% import "macros/rel_attributes.html" as macros_rel_attributes %}
{% import "macros/set_title.html" as macros_set_title %}
{% import "macros/settings.html" as macros_settings %}
{% import "macros/table_of_contents.html" as macros_toc %}
{% import "macros/translate.html" as macros_translate %}

@ -14,10 +14,10 @@
{%- set show_pages = section.pages -%}
{% endif -%}
{{ macros_cards_pages::cards_pages(pages=show_pages) }}
{%- include "partials/cards_pages.html" -%}
</main>
{% if paginator %}
{{ macros_paginate::paginate(language_strings=language_strings) }}
{%- include "partials/paginate.html" -%}
{% endif %}
{% endblock main_content %}

@ -1,7 +1,5 @@
{% macro page_header(title) %}
<h1 class="title-container section-title bottom-divider">
{{ title }}
</h1>
{% endmacro page_header %}

@ -16,4 +16,4 @@
{# Return the array of rel attributes joined by a space #}
{{- rel_attributes | join(sep=" ") -}}
{% endmacro external_links %}
{% endmacro rel_attributes %}

@ -84,7 +84,7 @@
{# Show link to remote changes if enabled #}
{% if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" %}
{{ separator }}
<li><a href="{{ macros_create_history_url::create_history_url(relative_path=page.relative_path) }}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small></small></a></li>
<li><a href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}<small></small></a></li>
{% endif %}
{% endif %}
</ul>
@ -141,8 +141,7 @@
{% endif %}
{% if comment_system %}
{% set automatic_loading = config.extra[comment_system].automatic_loading %}
{{ macros_add_comments::add_comments(comment_system=comment_system, automatic_loading=automatic_loading) }}
{% include "partials/comments.html" %}
{% endif %}
</article>

@ -1,5 +1,3 @@
{% macro cards_pages(pages) %}
{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
{%- if config.markdown.external_links_target_blank -%}
@ -9,7 +7,7 @@
{%- endif -%}
<div class="cards">
{%- for page in pages %}
{%- for page in show_pages %}
<div class="card">
{% if page.extra.link_to %}
<a rel="{{ rel_attributes }}" {{ blank_target }} href={{ page.extra.link_to }}>
@ -45,5 +43,3 @@
{% endfor -%}
</div>
{% endmacro cards_pages %}

@ -1,4 +1,4 @@
{%- macro add_comments(comment_system, automatic_loading) -%}
{% set automatic_loading = config.extra[comment_system].automatic_loading %}
<div id="comments" class="comments"
@ -92,5 +92,3 @@
<noscript>You need JavaScript to view the comments.</noscript>
</div>
{%- endmacro add_comments -%}

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# Site title #}
<title>{{ macros_set_title::set_title(language_strings=language_strings) }}</title>
<title>{%- include "partials/title.html" -%}</title>
{# Favicon #}
{% if config.extra.favicon %}

@ -1,5 +1,4 @@
{% macro create_history_url(relative_path) %}
{%- set relative_path = page.relative_path -%}
{%- set repository_url = config.extra.remote_repository_url | trim_end_matches(pat='/') -%}
{%- set branch = config.extra.remote_repository_branch | default(value="main") -%}
{%- set git_platform = config.extra.remote_repository_git_platform | default(value="auto") -%}
@ -25,5 +24,3 @@
{%- else -%}
{{ throw(message="ERROR: Unknown, unsupported, or unspecified git platform. If you're using a custom domain, please specify the 'git_platform' in the config. If you think this is a bug, please report it: https://github.com/welpo/tabi/issues/new?assignees=&labels=bug&template=bug_report.md&title=Unsupported%20Git%20Platform%20Detected") }}
{%- endif -%}
{% endmacro %}

@ -1,25 +1,22 @@
{% macro page_desc(desc, page) %}
{%- set header = section.extra.header-%}
<div id="banner-container-home">
<div id="home-banner-text">
<h1 id="home-banner-header">{{ desc.title }}</h1>
<h1 id="home-banner-header">{{ header.title }}</h1>
<section id="banner-home-subtitle">
{{ page.content | safe }}
{{ section.content | safe }}
</section>
</div>
{%- if desc.img -%}
{%- if header.img -%}
{# Check if the image contains "$BASE_URL". This feature will be removed in the future #} {# in favour of using the proper image path. It will be a breaking change. #}
{%- if desc.img is containing("$BASE_URL") -%}
{%- set image_path = desc.img | replace(from="$BASE_URL", to=config.base_url) | safe -%}
{%- if header.img is containing("$BASE_URL") -%}
{%- set image_path = header.img | replace(from="$BASE_URL", to=config.base_url) | safe -%}
{# When the feature is removed, uncomment below to throw a descriptive error #}
{# {{ throw(message="ERROR: The image path for the header should not contain '$BASE_URL'. Please remove it and use the proper image path.") }} #}
{%- else -%}
{%- set image_path = get_url(path=desc.img, trailing_slash=false) | safe -%}
{%- set image_path = get_url(path=header.img, trailing_slash=false) | safe -%}
{%- endif -%}
<div id="image-container-home">
<img alt="the owner" id="banner-home-img" src="{{ image_path }}" />
</div>
{%- endif -%}
</div>
{% endmacro %}

@ -1,5 +1,3 @@
{% macro paginate(language_strings="") %}
{% if paginator %}
<ul class="pagination">
{% if paginator.previous %}
@ -27,5 +25,3 @@
{% endif %}
</ul>
{% endif %}
{% endmacro paginate %}

@ -1,11 +1,9 @@
{%- macro set_title(language_strings="") -%}
{# Setup. #}
{#- Setup -#}
{%- set prefix = config.title | safe -%}
{%- set custom_separator = config.extra.separator | default(value="•") -%}
{%- set separator = " " ~ custom_separator ~ " " -%}
{# Get the base path for the current language. #}
{#- Get the base path for the current language -#}
{%- if lang != config.default_language %}
{%- set base_path = "/" ~ lang ~ "/" %}
{%- else -%}
@ -22,20 +20,18 @@
{% elif page.title %}
{%- set suffix = page.title -%}
{% elif term.name %}
{# Individual tags. #}
{#- Individual tags -#}
{%- set suffix = term.name -%}
{% elif taxonomy.name %}
{# List of tags. #}
{#- List of tags -#}
{%- set suffix = macros_translate::translate(key=taxonomy.name, language_strings=language_strings) | capitalize -%}
{% else %}
{%- set suffix = "404" %}
{%- endif -%}
{# Return the final concatenated string. #}
{#- Return the final concatenated string -#}
{%- if config.extra.invert_title_order -%}
{{- suffix ~ separator ~ prefix -}}
{%- else -%}
{{- prefix ~ separator ~ suffix -}}
{%- endif -%}
{%- endmacro set_title -%}

@ -8,7 +8,7 @@
{% endif -%}
{%- if section.extra.header %}
{{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }}
{%- include "partials/home_banner.html" -%}
{% endif -%}
<div class="list">
@ -28,7 +28,7 @@
</main>
{% if paginator %}
{{ macros_paginate::paginate(language_strings=language_strings) }}
{%- include "partials/paginate.html" -%}
{% endif %}
{% endblock main_content %}

Loading…
Cancel
Save