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

sass/main.scss

@@ -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%;
+    word-wrap: break-word;
-    max-width: var(--max-layout-width);
     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 {

sass/parts/_archive.scss

@@ -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 {

sass/parts/_cards.scss

@@ -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 {

sass/parts/_code.scss

@@ -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;
+    position: relative;
-    overflow-x: auto;
-    padding: 2.4rem 1rem 1rem;
     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 {

sass/parts/_comments.scss

@@ -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 {
-        border: none;
-        width: 100%;
         margin: 0;
-        max-width: 100%;
+        border: none;
         aspect-ratio: inherit;
+        width: 100%;
+        max-width: 100%;
     }
 
     .load-comments-button {
         display: block;
-        font-family: var(--sans-serif-font);
+        cursor: pointer;
+        margin: 0.5em auto;
+        border: none;
+        background: none;
+        padding: 0.5em 1em;
         color: inherit;
         font-size: 0.95rem;
-        background: none;
+        font-family: var(--sans-serif-font);
-        border: none;
-        padding: 0.5em 1em;
-        margin: 0.5em auto;
-        cursor: pointer;
         text-decoration: none;
     }
 }

sass/parts/_footer.scss

@@ -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 {

sass/parts/_header-anchor.scss

@@ -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;
+    width: 1.9rem;
-    user-select: none;
     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;
 }

sass/parts/_header.scss

@@ -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;
     }
 }
 

sass/parts/_image-hover.scss

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

sass/parts/_image-toggler.scss

@@ -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;
 }

sass/parts/_image.scss

@@ -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 {

sass/parts/_misc.scss

@@ -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 {
-    color: var(--primary-color);
-    text-decoration: inherit;
-    font-weight: inherit;
     position: relative;
+    color: var(--primary-color);
+    font-weight: inherit;
+    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 {
-    border: none;
-    height: 1px;
-    background-color: var(--divider-color);
     margin: 3.5rem 0 1rem;
+    border: none;
+    background-color: var(--divider-color);
+    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;
 }

sass/parts/_multilingual_quote.scss

@@ -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,

sass/parts/_pagination.scss

@@ -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;
     }
 }

sass/parts/_posts_list.scss

@@ -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) {

sass/parts/_spoiler.scss

@@ -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 {

sass/parts/_syntax_theme.scss

@@ -21,8 +21,8 @@
 }
 
 .z-code {
-  color: var(--text);
     background-color: var(--codeblock-bg);
+    color: var(--text);
 }
 
 .z-comment {
@@ -306,12 +306,12 @@
 }
 
 .z-invalid {
-  color: var(--text);
     background-color: var(--red);
+    color: var(--text);
 
     &.z-deprecated {
-    color: var(--text);
         background-color: var(--mauve);
+        color: var(--text);
     }
 }
 

sass/parts/_table.scss

@@ -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;
     }
 

sass/parts/_tags.scss

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

sass/parts/_theme-switch.scss

@@ -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);
 }

templates/base.html

@@ -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 %}

templates/cards.html

@@ -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 %}

templates/macros/page_header.html

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

templates/macros/rel_attributes.html

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

templates/page.html

@@ -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 %}
+            {% include "partials/comments.html" %}
-            {{ macros_add_comments::add_comments(comment_system=comment_system, automatic_loading=automatic_loading) }}
         {% endif %}
 
     </article>

templates/partials/cards_pages.html

@@ -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 %}

templates/partials/comments.html

@@ -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 -%}

templates/partials/header.html

@@ -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 %}

templates/partials/history_url.html

@@ -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 %}

templates/partials/home_banner.html

@@ -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") -%}
+        {%- if header.img is containing("$BASE_URL") -%}
-            {%- set image_path = desc.img | replace(from="$BASE_URL", to=config.base_url) | safe -%}
+            {%- 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 %}

templates/partials/paginate.html

@@ -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 %}

templates/partials/title.html

@@ -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 -%}

templates/section.html

@@ -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 %}