2 files changed, 46 insertions, 15 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index c2b56c0..32ea47d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -75,6 +75,12 @@ body {
     animation: scroll 16s linear infinite;
 }
 
+@media screen and (prefers-reduced-motion: reduce) { 
+    #triangles {
+        animation: none;
+    }
+}
+
 @keyframes scroll {
     to {
        background-position: -96px 0; /* svg size */
@@ -151,14 +157,14 @@ main {
     box-sizing: border-box;
 }
 
-nav > ul {
-    display: flex;
-}
-
 nav {
     z-index: 999;
 }
 
+nav > ul > li {
+    display: inline;
+}
+
 main,
 nav {
     padding: var(--padding-big);
@@ -166,10 +172,13 @@ nav {
 
 nav li:not(:last-of-type)::after,
 footer > div > span:not(:last-of-type)::after {
-    content: "|";
+    content: "";
+    border-left: calc(var(--border-width) * 1) solid var(--border);
     margin-left: var(--padding);
     margin-right: var(--padding);
-    color: var(--border);
+    display: inline-block;
+    vertical-align: baseline;
+    height: 1cap;
 }
 
 footer > div {
@@ -208,8 +217,22 @@ a:active {
     text-decoration: none;
 }
 
+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);
+}
+
 .anchor::after {
     content: "#";
+    font-size: 0.8em;
 }
 
 h1, h2 {
@@ -219,6 +242,12 @@ h1, h2 {
     gap: var(--padding-big);
 }
 
+.anchor::before {
+    content: "";
+    height: var(--border-width);
+    background-color: var(--border);
+}
+
 h1::after, h2::after {
     content: "";
     height: var(--border-width);
@@ -252,13 +281,11 @@ main ul {
     flex-direction: column;
 }
 
-main ol,
-main ul,
 p,
 pre,
 h1, h2
 {
-    margin-bottom: var(--padding-big);
+    margin-top: 0.8em;
 }
 
 main > :last-child {
diff --git a/assets/css/prismite.css b/assets/css/prismite.css
index 5d11838..8c082c6 100644
--- a/assets/css/prismite.css
+++ b/assets/css/prismite.css
@@ -34,25 +34,29 @@
     grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
 }
 
-#color_showcase > div > div {
+#color_showcase > div > ol {
     border-radius: var(--border-radius);
     overflow: hidden;
-}
-
-#color_showcase > div > div {
+    padding-top: 0;
+    padding-inline-start: 0;
+    margin-block: 0;
+    flex-direction: row;
+    margin: 0;
     display: flex;
     gap: var(--padding);
 }
 
-#color_showcase > div > div > div {
+#color_showcase > div > ol > li {
     padding: var(--padding);
     font-size: 0.75em;
     transition: color 0.3s var(--easing);
     font-family: "Aporetic Mono", monospace;
     flex: 1;
+    margin: 0;
+    list-style-type: none;
 }
 
-#color_showcase > div:last-child > div {
+#color_showcase > div:last-child > ol {
     flex-direction: column;
 }