Add links

diff --git a/index.html b/index.html
index 1783e68259cfb1fca6edbe4a7f8ac1d3d15c13b0..0f53b9db3c254af8403ebb6dc8c22eb33cefb575 100644 (file)
--- a/index.html
+++ b/index.html
@@ -9,27 +9,39 @@
       <h2>Autumn on <i>Tangled</i></h2>
       <hr>
       <p>Hello, and welcome to my Tangled homepage.<br>You've probably already seen my main homepage, hosted on GitHub. However, in search of better alternatives, I'm hosting my own knot on Tangled, and porting a website through their infrastructure.</p>
+      <h3>my projects</h3>
+      <p class="links">
+        <a href="https://tangled.org/autumn.bsky.gay/todo" name="todo" target="_blank">todo</a>
+        <a href="https://tangled.org/autumn.bsky.gay/dots" name="dots" target="_blank">dotfiles</a>
+        <span>
+          <em desc="todo">local-first todo tracking web application</em>
+          <em desc="dots">personal ArchLinux & Hyprland configuration files</em>
+        </span>
+      </p>
     </div>
     <style>
+      :root {
+        color-scheme: light dark;
+      }
       @font-face {
         font-family: "Maple Mono";
-        src: url("https://cdn.amazingca.dev/assets/fonts/maple-mono/MapleMono-Medium.ttf.woff2") format("woff2");
+        src: url("https://cdn.amazingca.dev/assets/fonts/maple-mono/MapleMono[wght].woff2") format("woff2-variations");
         font-style: normal;
       }
       @font-face {
         font-family: "Maple Mono";
-        src: url("https://cdn.amazingca.dev/assets/fonts/maple-mono/MapleMono-MediumItalic.ttf.woff2") format("woff2");
+        src: url("https://cdn.amazingca.dev/assets/fonts/maple-mono/MapleMono-Italic[wght].woff2") format("woff2-variations");
         font-style: italic;
       }
       body {
-        background-color: whitesmoke;
+        background-color: light-dark(whitesmoke, #101);
         display: flex;
         font-family: "Maple Mono", sans-serif !important;
         justify-content: center;
         margin: 1em;
       }
       #main {
-        background-color: lavender;
+        background-color: light-dark(lavender, #212);
         border: 4px solid purple;
         max-width: 500px;
         padding: 1em;
@@ -41,11 +53,37 @@
         }
       }
       hr {
-        border: 1px solid black;
+        border: 1px solid light-dark(black, white);
+      }
+      p.links {
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 1rem;
+        & > a {
+          color: light-dark(#212 ,#fdf);
+          background-color: light-dark(#dbd, #434);
+          &:active {
+            color: light-dark(#545, #a8a);
+          }
+        }
+        & > span > em {
+          display: none;
+          &:hover {
+            display: unset;
+          }
+        }
+        &:has(> a[name="todo"]:hover) > span > em[desc="todo"],
+        &:has(> a[name="dots"]:hover) > span > em[desc="dots"] {
+          display: unset;
+        }
+        & > span {
+          flex: 1 0 100%;
+          background-color: light-dark(#ece, #323);
+        }
       }
       @media screen and (max-width: 450px) {
         body {
-          background-color: lavender;
+          background-color: light-dark(lavender, #212);
         }
         #main {
           border: unset;