site rework!!

15 files changed, 610 insertions, 309 deletions

diff --git a/assets/css/404.css b/assets/css/404.page.css
index b75ef00..baece67 100644
--- a/assets/css/404.css
+++ b/assets/css/404.page.css
@@ -8,6 +8,6 @@ main > div {
     text-align: center;
 }
 
-main > div > div {
-    color: var(--fg-low);
+.wavy {
+    margin-bottom: var(--padding-big);
 }
diff --git a/assets/css/buttons.page.css b/assets/css/buttons.page.css
new file mode 100644
index 0000000..57e23dc
--- /dev/null
+++ b/assets/css/buttons.page.css
@@ -0,0 +1,103 @@
+main > div {
+    max-width: 100%;
+    width: 100%;
+}
+
+p {
+    
+}
+
+p > img {
+    width: 20%;
+    border-radius: var(--border-radius);
+    display: block;
+}
+
+#buttons {
+    display: grid;
+    margin-top: var(--padding-big);
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--padding-big);
+    flex-grow: 1;
+    height: min-content;
+}
+
+main a {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    text-decoration: none;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    color: var(--fg) !important;
+}
+
+main a:focus,
+main a:hover {
+    font-weight: normal;
+}
+
+main a > .icon > img {
+    width: 1em;
+    height: 1em;
+    display: block;
+}
+
+@keyframes ticker {
+    0% {
+        transform: rotate(-90deg) translateX(-9ch);
+    }
+
+    100% {
+        transform: rotate(-90deg) translateX(0ch);
+    }
+}
+
+main a > img,
+p > img {
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+
+main a > img {
+    width: 100%;
+    display: block;
+}
+
+main a > .icon,
+main a > .link {
+    --color: var(--bg);
+    background-color: var(--color);
+    position: absolute;
+    transition: transform 0.4s var(--easing);
+}
+
+main a > .link {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    font-size: 0.8em;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    border: var(--border) solid var(--border-width);
+    border-bottom: none;
+    padding: var(--padding);
+}
+
+main a:hover > .link {
+    transform: translate(-50%, 0);
+}
+
+main a > .icon {
+    top: 50%;
+    right: -0.5px;
+    transform: translate(100%, -50%);
+    padding: var(--padding-big);
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+    border: var(--border) solid var(--border-width);
+    border-right: none;
+}
+
+main a:hover > .icon {
+    transform: translate(0, -50%);
+}
diff --git a/assets/css/content.css b/assets/css/content.css
new file mode 100644
index 0000000..e39b29c
--- /dev/null
+++ b/assets/css/content.css
@@ -0,0 +1,230 @@
+main a,
+main a:link {
+    transition: color 0.1s var(--easing), background-color 0.1s var(--easing);
+}
+
+main a:visited {
+    color: inherit
+}
+
+main a.volatile:visited {
+    color: inherit
+}
+
+main a:focus,
+main a:hover {
+    background-color: var(--bg);
+    color: var(--yellow);
+}
+
+main a:active {
+    color: inherit
+}
+
+.anchor {
+    order: -1;
+}
+
+a.anchor:link, a.anchor:visited {
+    color: var(--border);
+}
+
+a.anchor:focus,
+a.anchor:hover {
+    color: var(--yellow-bright);
+}
+
+a.anchor:active {
+    color: var(--yellow);
+}
+
+.anchor::after {
+    content: "#";
+    font-size: 0.8em;
+}
+
+h1, h2 {
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--padding-big);
+}
+
+.anchor::before {
+    content: "";
+    height: var(--border-width);
+    background-color: var(--border);
+}
+
+h1::after, h2::after {
+    content: "";
+    height: var(--border-width);
+    background-color: var(--border);
+    flex-grow: 1;
+}
+
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+main li {
+    margin-left: var(--padding-big);
+    list-style-type: "- ";
+    list-style-position: inside;
+}
+
+main li::marker {
+    color: var(--border);
+}
+
+main ol,
+main ul {
+    padding-top: var(--padding);
+    gap: var(--padding);
+    display: flex;
+    flex-direction: column;
+}
+
+p,
+pre,
+h1, h2
+{
+    margin-top: 0.8em;
+}
+
+strong {
+    font-weight: bold;
+}
+
+code {
+    border-radius: var(--border-radius);
+    padding-inline: calc(var(--padding) / 2);
+    font-family: "Aporetic Mono", monospace;
+    border: var(--border-width) solid var(--border);
+    color: var(--fg);
+    background: var(--bg);
+    overflow: auto;
+}
+
+pre > code {
+    display: block;
+    padding: calc(var(--padding) * 2);
+    position: relative;
+    line-height: 1.3;
+    /* overflow-wrap: break-word; */
+}
+
+pre > code[data-lang]::after {
+    content: attr(data-lang);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: var(--padding);
+    border-radius: 0 var(--border-radius);
+    border-bottom: var(--border-width) solid var(--border);
+    border-left: var(--border-width) solid var(--border);
+    background-color: var(--bg-high);
+    transition: transform 0.2s var(--easing);
+}
+
+pre > code[data-lang]:hover::after {
+    transform: translateX(100%);
+}
+
+aside {
+    padding: var(--padding-big);
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    font-size: 0.9em;
+}
+
+aside::before,
+aside::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+/* @media (max-width: 130ch) { */
+    aside {
+        position: relative;
+        margin-bottom: var(--padding-big);
+        margin-top: calc(var(--padding-big) + var(--arrow-size) / 2);
+    }
+
+    aside::before,
+    aside::after {
+        border-right: var(--arrow-size) solid transparent;
+        border-left: var(--arrow-size) solid transparent; 
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    aside::before {
+        border-bottom: var(--arrow-size) solid var(--border);
+        top: calc(var(--arrow-size) * -1);
+    }
+
+    aside::after {
+        border-bottom: var(--arrow-size) solid var(--yellow);
+        top: calc(var(--arrow-size) * -1 + var(--border-width));
+    }
+/* } */
+
+/* @media (min-width: 130ch) { */
+/*     aside { */
+/*         position: absolute; */
+/*         left: calc(100% + var(--padding-big)); */
+/*         max-width: calc(20vw - var(--padding-big)); */
+/*         transform: translateY(calc(-50% - 1lh)); */
+/*     } */
+/**/
+/*     aside::before, */
+/*     aside::after { */
+/*         content: ""; */
+/*         border-top: var(--arrow-size) solid transparent; */
+/*         border-bottom: var(--arrow-size) solid transparent;  */
+/*         position: absolute; */
+/*         width: 0;  */
+/*         height: 0;  */
+/*         top: 50%; */
+/*         transform: translateY(-50%); */
+/*     } */
+/**/
+/*     aside::before { */
+/*         border-right: var(--arrow-size) solid var(--border); */
+/*         left: calc(var(--arrow-size) * -1); */
+/*     } */
+/**/
+/*     aside::after { */
+/*         border-right: var(--arrow-size) solid var(--yellow); */
+/*         left: calc(var(--arrow-size) * -1 + var(--border-width)); */
+/*     } */
+/* } */
+
+.wavy > span {
+    display: inline-block;
+    transform: translateY(10%);
+    animation: wave 12s ease-in-out infinite;
+    white-space: pre;
+}
+
+@keyframes wave {
+    0% {
+        transform: translateY(10%);
+    }
+
+    50% {
+        transform: translateY(-10%);
+    }
+
+    100% {
+        transform: translateY(10%);
+    }
+}
diff --git a/assets/css/deco.css b/assets/css/deco.css
new file mode 100644
index 0000000..91cf431
--- /dev/null
+++ b/assets/css/deco.css
@@ -0,0 +1,46 @@
+nav .tab::before,
+nav .tab::after {
+    background-color: var(--color);
+    z-index: 1;
+}
+
+nav .tab::before,
+nav .tab::after,
+nav .tab > a::before,
+nav .tab > a::after {
+    --size: var(--border-radius);
+    content: "";
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    bottom: 0;
+}
+
+nav .tab::before,
+nav .tab > a::before {
+    right: 100%;
+}
+
+nav .tab::after,
+nav .tab > a::after {
+    left: 100%;
+}
+
+nav .tab > a::before,
+nav .tab > a::after {
+    background-color: var(--bg-lowest);
+    z-index: 2;
+}
+
+nav .tab > a:focus-visible::before,
+nav .tab > a:focus-visible::after {
+    background-color: transparent;
+}
+
+nav .tab > a::after {
+    border-bottom-left-radius: var(--size);
+}
+
+nav .tab > a::before {
+    border-bottom-right-radius: var(--size);
+}
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index 1e1fc07..82a96e9 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -4,6 +4,7 @@
     src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalbolditalic.woff2");
     font-style: italic;
     font-weight: bold;
+    font-display: swap;
 }
 
 @font-face {
@@ -11,6 +12,7 @@
     src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalboldupright.woff2");
     font-style: normal;
     font-weight: bold;
+    font-display: swap;
 }
 
 @font-face {
@@ -18,6 +20,7 @@
     src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularitalic.woff2");
     font-style: italic;
     font-weight: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -25,6 +28,7 @@
     src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularupright.woff2");
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
 }
 
 /* Mono */
@@ -33,6 +37,7 @@
     src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalbolditalic.woff2");
     font-style: italic;
     font-weight: bold;
+    font-display: swap;
 }
 
 @font-face {
@@ -40,6 +45,7 @@
     src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalboldupright.woff2");
     font-style: normal;
     font-weight: bold;
+    font-display: swap;
 }
 
 @font-face {
@@ -47,6 +53,7 @@
     src: local("Aporetitalicic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularitalic.woff2");
     font-style: italic;
     font-weight: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -54,4 +61,14 @@
     src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularupright.woff2");
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
+}
+
+/* Fallback */
+@font-face {
+    font-family: "Aporetic Fallback";
+    src: local(-apple-system), local(BlinkMacSystemFont), local("Segoe UI"), local("Noto Sans"), local(Helvetica), local(Arial), local(sans-serif);
+    ascent-override: 96.5%;
+    descent-override: -21.5%;
+    line-gap-override: 0.07%;
 }
diff --git a/assets/css/index.page.css b/assets/css/index.page.css
new file mode 100644
index 0000000..bf7091b
--- /dev/null
+++ b/assets/css/index.page.css
@@ -0,0 +1,15 @@
+main > div {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+main > div > div:first-child {
+    flex-grow: 1;
+}
+
+.webring {
+    display: flex;
+    gap: var(--padding);
+    justify-content: center;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 32ea47d..504fd15 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,6 +32,7 @@
     --pink-bright: oklch(90% 0.06662 9.2146);
 
     --border-radius: 5px;
+    --border-radius-big: calc(var(--border-radius) * 4);
     --border-width: 1px;
     --padding: 5px;
     --padding-big: 10px;
@@ -40,38 +41,32 @@
 }
 
 body {
-    font-family: "Aporetic", "Open Sans", sans-serif;
-    background-color: var(--bg);
+    font-family: "Aporetic", "Aporetic Fallback";
+    background-color: var(--bg-lowest);
     background-repeat: repeat;
-    color: var(--fg);
+    color: var(--bg);
     display: flex;
-    gap: var(--padding-big);
     min-height: 100vh;
-    padding: var(--padding-big);
+    padding: calc(var(--padding-big) * 2);
+    padding-bottom: 0;
     box-sizing: border-box;
     position: relative;
-}
-
-#deco {
-    overflow: hidden;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
+    scroll-behavior: smooth;
+    flex-direction: column;
 }
 
 #triangles {
     content: "";
-    width: 200%;
-    height: 200%;
-    background-image: url("/assets/triangle.svg");
-    position: absolute;
-    transform: translate(-50%, -50%) rotate(22.5deg);
+    /*                  cos(22.5deg)         sin(22.5deg) */
+    width: calc(100vw * 0.92387953 + 100vh * 0.38268343);
+    height: calc(100vh * 0.92387953 + 100vw * 0.38268343);
+    position: fixed;
     left: 50%;
     top: 50%;
-    z-index: -2;
+    z-index: 2;
+    background-image: url("/assets/triangle.svg");
+    opacity: 0.075;
+    transform: translate(-50%, -50%) rotate(22.5deg);
     animation: scroll 16s linear infinite;
 }
 
@@ -87,323 +82,121 @@ body {
     }
 }
 
-#rainbow {
-    --bar-size: 0.3em;
-    position: absolute;
-    z-index: -1;
-    bottom: 0;
-    right: 0;
-    aspect-ratio: 1 / 1;
-    height: calc(var(--bar-size) * 14); /* magic number */
-    background-image: linear-gradient(
-        -45deg,
-        transparent,
-        transparent var(--bar-size),
-        var(--blue) var(--bar-size),
-        var(--blue) calc(var(--bar-size) * 2),
-        transparent calc(var(--bar-size) * 2),
-        transparent calc(var(--bar-size) * 3),
-        var(--green) calc(var(--bar-size) * 3),
-        var(--green) calc(var(--bar-size) * 4),
-        transparent calc(var(--bar-size) * 4),
-        transparent calc(var(--bar-size) * 5),
-        var(--yellow) calc(var(--bar-size) * 5),
-        var(--yellow) calc(var(--bar-size) * 6),
-        transparent calc(var(--bar-size) * 6),
-        transparent calc(var(--bar-size) * 7),
-        var(--orange) calc(var(--bar-size) * 7),
-        var(--orange) calc(var(--bar-size) * 8),
-        transparent calc(var(--bar-size) * 8),
-        transparent calc(var(--bar-size) * 9),
-        var(--red) calc(var(--bar-size) * 9),
-        var(--red) calc(var(--bar-size) * 10),
-        transparent calc(var(--bar-size) * 10)
-    );
-}
-
-/*
- * failsafe for when the viewport is too small and the rainbow overlaps the text
- */
-main > div,
-footer,
-nav > ul {
-    background-color: var(--bg);
-    box-shadow: var(--bg) 0 0 32px 8px;
-    border-radius: var(--border-radius);
-}
-
-#upper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
-
-#upper > div {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--padding-big);
-    align-items: center;
-}
-
 .subtle {
     color: var(--fg-low);
 }
 
 main {
     flex-grow: 1;
-    width: 80vw;
     line-height: 1.4;
+    padding: calc(var(--padding-big) * 2);
+    display: flex;
+    justify-content: center;
     box-sizing: border-box;
+    background-color: var(--yellow);
+    border-radius: var(--border-radius-big);
+    overflow: hidden;
+    text-wrap: pretty;
 }
 
-nav {
-    z-index: 999;
-}
-
-nav > ul > li {
-    display: inline;
+main > div {
+    max-width: 70%;
+    z-index: 3;
+    position: relative;
 }
 
-main,
 nav {
-    padding: var(--padding-big);
-}
-
-nav li:not(:last-of-type)::after,
-footer > div > span:not(:last-of-type)::after {
-    content: "";
-    border-left: calc(var(--border-width) * 1) solid var(--border);
-    margin-left: var(--padding);
-    margin-right: var(--padding);
-    display: inline-block;
-    vertical-align: baseline;
-    height: 1cap;
-}
-
-footer > div {
-    line-height: 1.5;
+    padding-bottom: 0;
+    position: relative;
 }
 
-footer {
-    text-align: center;
-    padding: var(--padding);
-    font-size: 0.8em;
+nav > ul {
     display: flex;
-    flex-direction: column;
-    gap: var(--padding);
+    gap: calc(var(--padding) + var(--border-radius) * 2);
+    padding-left: calc(var(--border-radius-big) + var(--padding-big));
 }
 
-a,
-a:link {
-    color: var(--yellow);
+nav .tab {
+    --color: var(--bg);
+    display: block;
+    color: var(--fg);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    background-color: var(--color);
+    position: relative;
 }
 
-a:not(.volatile):visited {
-    color: var(--pink);
+nav .tab:not(.active) {
+    z-index: 3
 }
 
-a:focus,
-a:hover {
-    color: var(--yellow-bright);
+nav .tab:hover {
+    --color: var(--bg-high);
 }
 
-a:active {
-    color: var(--yellow);
+nav .tab.active {
+    --color: var(--yellow);
+    color: var(--bg);
 }
 
-.anchor {
-    order: -1;
+nav .tab > a {
+    padding: var(--padding-big);
+    display: block;
+    color: inherit;
     text-decoration: none;
+    z-index: 3;
+    position: relative;
 }
 
-a.anchor:link, a.anchor:visited {
-    color: var(--fg-low);
-}
-
-a.anchor:focus,
-a.anchor:hover {
-    color: var(--yellow-bright);
-}
-
-a.anchor:active {
-    color: var(--yellow);
+nav .tab > a:focus-visible {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+    outline: var(--blue) solid calc(var(--border-radius) + 1px);
+    outline-offset: 0;
 }
 
-.anchor::after {
-    content: "#";
+footer {
+    text-align: center;
+    color: var(--fg);
+    border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
+    padding: var(--padding-big);
     font-size: 0.8em;
+    position: relative;
+    background-color: var(--bg-lowest);
+    z-index: 3;
 }
 
-h1, h2 {
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    gap: var(--padding-big);
-}
-
-.anchor::before {
-    content: "";
-    height: var(--border-width);
-    background-color: var(--border);
-}
-
-h1::after, h2::after {
-    content: "";
-    height: var(--border-width);
-    background-color: var(--border);
-    flex-grow: 1;
-}
-
-h1 {
-    font-size: 1.5em;
-}
-
-h2 {
-    font-size: 1.25em;
-}
-
-main li {
-    margin-left: var(--padding-big);
-    list-style-type: "- ";
-    list-style-position: inside;
-}
-
-main li::marker {
-    color: var(--border);
-}
-
-main ol,
-main ul {
-    padding-top: var(--padding);
-    gap: var(--padding);
+footer > div {
     display: flex;
     flex-direction: column;
+    gap: var(--padding);
 }
 
-p,
-pre,
-h1, h2
-{
-    margin-top: 0.8em;
-}
-
-main > :last-child {
-    margin-bottom: 0;
-}
-
-strong {
-    font-weight: bold;
-}
-
-code {
-    border-radius: var(--border-radius);
-    padding-inline: calc(var(--padding) / 2);
-    font-family: "Aporetic Mono", monospace;
-    border: var(--border-width) solid var(--border);
-    overflow-wrap: anywhere;
-}
-
-pre {
-    overflow: hidden;
+footer > div > div {
+    line-height: 1.5;
 }
 
-pre > code {
-    display: block;
-    padding: calc(var(--padding) * 2);
-    position: relative;
-    line-height: 1.3;
-    overflow-wrap: break-word;
-    background: transparent;
-    overflow-x: scroll;
+footer > div > div > span:not(:last-of-type)::after {
+    content: "";
+    border-left: calc(var(--border-width) * 1) solid var(--border);
+    margin-left: var(--padding);
+    margin-right: var(--padding);
+    display: inline-block;
+    vertical-align: baseline;
+    height: 1cap;
 }
 
-pre > code[data-lang]::after {
-    content: attr(data-lang);
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: var(--padding);
-    border-radius: 0 var(--border-radius);
-    border-bottom: var(--border-width) solid var(--border);
-    border-left: var(--border-width) solid var(--border);
-    background-color: var(--bg-high);
-    transition: transform 0.2s var(--easing);
+footer a {
+    color: var(--fg);
 }
 
-pre > code[data-lang]:hover::after {
-    transform: translateX(100%);
+footer a:hover,
+footer a:focus {
+    color: var(--yellow);
 }
 
-@media (max-width: 130ch) {
-    aside {
-        padding: var(--padding-big);
-        font-size: 0.9em;
-        box-sizing: border-box;
-        border: var(--border-width) solid var(--border);
-        border-radius: var(--border-radius);
-        background-color: var(--bg-high);
-        position: relative;
-        margin-bottom: var(--padding-big);
-        margin-top: calc(var(--padding-big) + var(--arrow-size) / 2);
-    }
-
-    aside::after,
-    aside::before {
-        content: "";
-        border-right: var(--arrow-size) solid transparent;
-        border-left: var(--arrow-size) solid transparent; 
-        position: absolute;
-        width: 0; 
-        height: 0; 
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    aside::before {
-        border-bottom: var(--arrow-size) solid var(--border);
-        top: calc(var(--arrow-size) * -1);
-    }
-
-    aside::after {
-        border-bottom: var(--arrow-size) solid var(--bg-high);
-        top: calc(var(--arrow-size) * -1 + var(--border-width));
-    }
+main a {
+    color: inherit;
 }
 
-@media (min-width: 130ch) {
-    aside {
-        position: absolute;
-        right: var(--padding-big);
-        max-width: calc(10vw - var(--padding-big));
-        padding: var(--padding-big);
-        font-size: 0.9em;
-        box-sizing: border-box;
-        border: var(--border-width) solid var(--border);
-        border-radius: var(--border-radius);
-        background-color: var(--bg-high);
-        transform: translateY(calc(-50% - 1lh));
-    }
-
-    aside::after,
-    aside::before {
-        content: "";
-        border-top: var(--arrow-size) solid transparent;
-        border-bottom: var(--arrow-size) solid transparent; 
-        position: absolute;
-        width: 0; 
-        height: 0; 
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    aside::before {
-        border-right: var(--arrow-size) solid var(--border);
-        left: calc(var(--arrow-size) * -1);
-    }
-
-    aside::after {
-        border-right: var(--arrow-size) solid var(--bg-high);
-        left: calc(var(--arrow-size) * -1 + var(--border-width));
-    }
+.wavy {
+    font-size: 3em;
 }
diff --git a/assets/css/posts.css b/assets/css/posts.page.css
index 50ca347..50ca347 100644
--- a/assets/css/posts.css
+++ b/assets/css/posts.page.css
diff --git a/assets/css/prismite.css b/assets/css/prismite.page.css
index 8c082c6..2eb7b9c 100644
--- a/assets/css/prismite.css
+++ b/assets/css/prismite.page.css
@@ -1,3 +1,21 @@
+main {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
+nav .tab {
+    --color: var(--bg-low);
+}
+
+nav .tab.active {
+    --color: var(--bg);
+    color: var(--fg);
+}
+
+#triangles {
+    opacity: 0.5;
+}
+
 #logo {
     display: flex;
     justify-content: center;
@@ -14,10 +32,9 @@
 
 #color_showcase {
     color: var(--bg);
-    /* writing-mode: sideways-lr; */
+    margin-top: var(--padding-big);
     max-width: 100%;
     display: flex;
-    /* flex-direction: column; */
     flex-wrap: wrap;
     gap: var(--padding-big);
 }
@@ -60,11 +77,6 @@
     flex-direction: column;
 }
 
-/* #color_showcase > div > div:hover { */
-/*     color: transparent; */
-/*     user-select: none; */
-/* } */
-
 .fg-light {
     color: var(--fg);
 }
diff --git a/assets/svg/external.svg b/assets/svg/external.svg
new file mode 100644
index 0000000..ab0224d
--- /dev/null
+++ b/assets/svg/external.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#c8ced7" viewBox="0 0 256 256"><path d="M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"></path></svg>
diff --git a/assets/svg/mask_bottom_left.svg b/assets/svg/mask_bottom_left.svg
new file mode 100644
index 0000000..255090d
--- /dev/null
+++ b/assets/svg/mask_bottom_left.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="128"
+   viewBox="0 0 33.866668 33.866668"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+       d="M 33.866668,33.866668 A 33.866665,33.866665 0 0 1 0,0 v 33.866668 z" />
+  </g>
+</svg>
diff --git a/assets/svg/mask_bottom_right.svg b/assets/svg/mask_bottom_right.svg
new file mode 100644
index 0000000..e99bc40
--- /dev/null
+++ b/assets/svg/mask_bottom_right.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="128"
+   viewBox="0 0 33.866668 33.866668"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+       d="M 33.866668,0 A 33.866665,33.866665 0 0 1 0,33.866668 h 33.866668 z" />
+  </g>
+</svg>
diff --git a/assets/svg/mask_top_left.svg b/assets/svg/mask_top_left.svg
new file mode 100644
index 0000000..41f8d41
--- /dev/null
+++ b/assets/svg/mask_top_left.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="128"
+   viewBox="0 0 33.866668 33.866668"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+       d="M 0,33.866668 A 33.866665,33.866665 0 0 1 33.866668,0 H 0 Z" />
+  </g>
+</svg>
diff --git a/assets/svg/mask_top_right.svg b/assets/svg/mask_top_right.svg
new file mode 100644
index 0000000..ab0c7e7
--- /dev/null
+++ b/assets/svg/mask_top_right.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128"
+   height="128"
+   viewBox="0 0 33.866668 33.866668"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+       d="M 0,0 A 33.866665,33.866665 0 0 1 33.866668,33.866668 V 0 Z" />
+  </g>
+</svg>
diff --git a/assets/triangle.svg b/assets/triangle.svg
index 7e960f6..3ce502b 100644
--- a/assets/triangle.svg
+++ b/assets/triangle.svg
@@ -14,9 +14,9 @@
   <g
      id="layer1"
      transform="matrix(0.33333334,0,0,0.33333332,4.2333331,4.2333329)"
-     style="fill:#0c1116;fill-opacity:1">
+     style="fill:#070c11;fill-opacity:1">
     <path
-       style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
+       style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
        id="path1"
        d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z"
        transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" />
@@ -24,18 +24,18 @@
   <g
      id="layer1-5"
      transform="matrix(0.33333334,0,0,-0.33333332,15.08125,8.9958329)"
-     style="fill:#171c22;fill-opacity:1">
+     style="fill:#070c11;fill-opacity:1">
     <path
-       style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
+       style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
        id="path1-3"
        d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" />
   </g>
   <g
      id="layer1-3"
      transform="matrix(0.33333334,0,0,0.33333332,16.933333,16.933335)"
-     style="fill:#0c1116;fill-opacity:1">
+     style="fill:#070c11;fill-opacity:1">
     <path
-       style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
+       style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
        id="path1-7"
        d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z"
        transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" />
@@ -43,9 +43,9 @@
   <g
      id="layer1-5-5"
      transform="matrix(0.33333334,0,0,-0.33333332,2.3812497,21.695833)"
-     style="fill:#171c22;fill-opacity:1">
+     style="fill:#070c11;fill-opacity:1">
     <path
-       style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
+       style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
        id="path1-3-9"
        d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" />
   </g>