1 files changed, 158 insertions, 16 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 835b6f9..c2b56c0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,10 +32,11 @@
     --pink-bright: oklch(90% 0.06662 9.2146);
 
     --border-radius: 5px;
-    --border-width: 2px;
+    --border-width: 1px;
     --padding: 5px;
     --padding-big: 10px;
     --easing: cubic-bezier(0.2, 0.0, 0, 1.0);
+    --arrow-size: 1em;
 }
 
 body {
@@ -71,7 +72,7 @@ body {
     left: 50%;
     top: 50%;
     z-index: -2;
-    animation: scroll 12s linear infinite;
+    animation: scroll 16s linear infinite;
 }
 
 @keyframes scroll {
@@ -146,30 +147,42 @@ nav > ul {
 main {
     flex-grow: 1;
     width: 80vw;
-    line-height: 1.6;
+    line-height: 1.4;
+    box-sizing: border-box;
 }
 
 nav > ul {
     display: flex;
 }
 
+nav {
+    z-index: 999;
+}
+
 main,
 nav {
     padding: var(--padding-big);
 }
 
 nav li:not(:last-of-type)::after,
-footer > span:not(:last-of-type)::after {
+footer > div > span:not(:last-of-type)::after {
     content: "|";
     margin-left: var(--padding);
     margin-right: var(--padding);
     color: var(--border);
 }
 
+footer > div {
+    line-height: 1.5;
+}
+
 footer {
     text-align: center;
     padding: var(--padding);
     font-size: 0.8em;
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding);
 }
 
 a,
@@ -177,7 +190,7 @@ a:link {
     color: var(--yellow);
 }
 
-a:visited {
+a:not(.volatile):visited {
     color: var(--pink);
 }
 
@@ -190,18 +203,35 @@ a:active {
     color: var(--yellow);
 }
 
+.anchor {
+    order: -1;
+    text-decoration: none;
+}
+
+.anchor::after {
+    content: "#";
+}
+
+h1, h2 {
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--padding-big);
+}
+
+h1::after, h2::after {
+    content: "";
+    height: var(--border-width);
+    background-color: var(--border);
+    flex-grow: 1;
+}
+
 h1 {
     font-size: 1.5em;
-    margin-bottom: calc(var(--padding-big) * 2);
 }
 
 h2 {
     font-size: 1.25em;
-    margin-bottom: calc(var(--padding-big) * 1.5);
-}
-
-p:not(:last-of-type) {
-    margin-bottom: var(--padding-big);
 }
 
 main li {
@@ -222,19 +252,131 @@ main ul {
     flex-direction: column;
 }
 
-main ol:not(:last-child),
-main ul:not(:last-child) {
+main ol,
+main ul,
+p,
+pre,
+h1, h2
+{
     margin-bottom: var(--padding-big);
 }
 
+main > :last-child {
+    margin-bottom: 0;
+}
+
 strong {
     font-weight: bold;
 }
 
 code {
-    background-color: var(--bg-low);
-    padding: var(--padding);
     border-radius: var(--border-radius);
+    padding-inline: calc(var(--padding) / 2);
     font-family: "Aporetic Mono", monospace;
-    text-wrap: nowrap;
+    border: var(--border-width) solid var(--border);
+    overflow-wrap: anywhere;
+}
+
+pre {
+    overflow: hidden;
+}
+
+pre > code {
+    display: block;
+    padding: calc(var(--padding) * 2);
+    position: relative;
+    line-height: 1.3;
+    overflow-wrap: break-word;
+    background: transparent;
+    overflow-x: scroll;
+}
+
+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%);
+}
+
+@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));
+    }
+}
+
+@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));
+    }
 }