update home look and feel

home/site/app.css

@@ -534,10 +534,23 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -546,6 +559,26 @@ video {
   height: 100vh;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -562,14 +595,46 @@ video {
   width: 16rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-\[800px\] {
+  width: 800px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.max-w-6xl {
+  max-width: 72rem;
+}
+
 .list-none {
   list-style-type: none;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
@@ -590,6 +655,10 @@ video {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
@@ -616,6 +685,22 @@ video {
   background-color: rgb(39 39 42 / 0.8);
 }
 
+.bg-zinc-800\/90 {
+  background-color: rgb(39 39 42 / 0.9);
+}
+
+.bg-zinc-950\/90 {
+  background-color: rgb(9 9 11 / 0.9);
+}
+
+.bg-zinc-950\/80 {
+  background-color: rgb(9 9 11 / 0.8);
+}
+
+.bg-zinc-950\/70 {
+  background-color: rgb(9 9 11 / 0.7);
+}
+
 .bg-\[url\(\'bg\.webp\'\)\] {
   background-image: url('bg.webp');
 }
@@ -628,10 +713,54 @@ video {
   background-image: url('bg-transformed.webp');
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-red-600 {
+  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-pink-600 {
+  --tw-gradient-from: #db2777 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-pink-500 {
+  --tw-gradient-to: rgb(236 72 153 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-blue-500 {
+  --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-indigo-500 {
+  --tw-gradient-to: rgb(99 102 241 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #6366f1 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-yellow-400 {
+  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
+}
+
+.to-cyan-400 {
+  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
+}
+
 .bg-cover {
   background-size: cover;
 }
 
+.bg-clip-text {
+  -webkit-background-clip: text;
+          background-clip: text;
+}
+
 .bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -644,6 +773,10 @@ video {
   padding: 4rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -669,6 +802,10 @@ video {
   padding-right: 16rem;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -679,10 +816,64 @@ video {
   line-height: 2rem;
 }
 
+.text-8xl {
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-black {
+  font-weight: 900;
+}
+
+.text-transparent {
+  color: transparent;
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-pink-600 {
+  --tw-shadow-color: #db2777;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-600 {
+  --tw-shadow-color: #0891b2;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-200 {
+  --tw-shadow-color: #a5f3fc;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-cyan-300 {
+  --tw-shadow-color: #67e8f9;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-pink-300 {
+  --tw-shadow-color: #f9a8d4;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.shadow-pink-800 {
+  --tw-shadow-color: #9d174d;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .ring-4 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -699,6 +890,40 @@ video {
   --tw-ring-color: rgb(39 39 42 / 0.1);
 }
 
+.ring-pink-500\/10 {
+  --tw-ring-color: rgb(236 72 153 / 0.1);
+}
+
+.ring-pink-500\/20 {
+  --tw-ring-color: rgb(236 72 153 / 0.2);
+}
+
+.ring-cyan-500\/20 {
+  --tw-ring-color: rgb(6 182 212 / 0.2);
+}
+
+.drop-shadow-\[0_1\.2px_1\.2px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
+  --tw-drop-shadow: drop-shadow(0 1.2px 1.2px rgba(0,0,0,0.8));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-\[0_2\.4px_2\.4px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
+  --tw-drop-shadow: drop-shadow(0 2.4px 2.4px rgba(0,0,0,0.8));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 html {
   scroll-behavior: smooth;
   --tw-bg-opacity: 1;
@@ -785,3 +1010,19 @@ body::-webkit-scrollbar-thumb:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+
+@media (min-width: 768px) {
+  .md\:max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .md\:px-64 {
+    padding-left: 16rem;
+    padding-right: 16rem;
+  }
+
+  .md\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}

home/site/index.html

@@ -9,56 +9,148 @@
 </head>
 
 <body
-    class="bg-zinc-900 h-screen flex flex-col items-center justify-center bg-[url('bg-transformed.webp')] bg-no-repeat bg-cover">
-    <div class="flex flex-col items-center justify-center bg-zinc-800/80 px-64 py-8 rounded-xl ring-8 ring-zinc-800/10">
-        <h1 class="text-4xl font-bold mt-4">Welcome to the Lab</h1>
+    class="bg-zinc-900 h-screen flex flex-col items-center justify-center bg-[url('bg-transformed.webp')] bg-no-repeat bg-cover w-screen h-screen overflow-hidden">
+    <div
+        class="flex flex-col items-center justify-center bg-zinc-950/70 p-8 md:px-64 md:py-8 rounded-xl shadow-2xl shadow-pink-800 ring-8 ring-zinc-800/10 backdrop-blur overflow-hidden max-w-screen max-h-screen md:max-w-6xl">
+        <h1
+            class='mx-auto text-6xl font-black bg-gradient-to-r from-pink-600 via-indigo-500 to-cyan-400 inline-block text-transparent bg-clip-text text-shadow-xl text-shadow-zinc-950 drop-shadow-[0_2.4px_2.4px_rgba(0,0,0,0.8)]'>
+            Welcome to the Lab
+        </h1>
 
-        <div class="w-64">
-            <h3 class="text-2xl font-bold mt-4">Services</h3>
-            <ul class="mt-4 space-y-2 list-none flex flex-col">
+        <div class="w-full">
+            <ul class="mt-4 space-y-2 list-none flex flex-row flex-wrap w-full">
                 <!-- registry -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://registry-ui.wayl.one">Registry</a>
+                <li>
+                    <a href="https://registry-ui.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M7.875 14.25l1.214 1.942a2.25 2.25 0 001.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 011.872 1.002l.164.246a2.25 2.25 0 001.872 1.002h2.092a2.25 2.25 0 001.872-1.002l.164-.246A2.25 2.25 0 0116.954 9h4.636M2.41 9a2.25 2.25 0 00-.16.832V12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 01.382-.632l3.285-3.832a2.25 2.25 0 011.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0021.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 002.25 2.25z" />
+                        </svg>
+                        Registry</a>
                 </li>
                 <!-- shots -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://shots.wayl.one">Shots</a>
+                <li>
+                    <a href="https://shots.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+                        </svg>
+                        Shots
+                    </a>
                 </li>
                 <!-- status -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://status.wayl.one">Status</a>
+                <li>
+                    <a href="https://status.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                        </svg>
+                        Status
+                    </a>
                 </li>
                 <!-- ntfy -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://ntfy.wayl.one">ntfy</a>
+                <li>
+                    <a href="https://ntfy.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
+                        </svg>
+                        ntfy
+                    </a>
                 </li>
                 <!-- jf -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://jf.wayl.one">jellyfin</a>
+                <li>
+                    <a href="https://jf.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+                        </svg>
+                        jellyfin
+                    </a>
                 </li>
                 <!-- matrix -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://matrix.wayl.one">matrix</a>
+                <li>
+                    <a href="https://matrix.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+                        </svg>
+                        matrix
+                    </a>
                 </li>
                 <!-- code-server -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://code-server.wayl.one">code-server</a>
+                <li>
+                    <a href="https://code-server.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                        </svg>
+                        code-server
+                    </a>
                 </li>
                 <!-- jupyter -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://jupyter.wayl.one">jupyter</a>
+                <li>
+                    <a href="https://jupyter.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                        </svg>
+                        jupyter
+                    </a>
                 </li>
                 <!-- photoview -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://photoview.wayl.one">photoview</a>
+                <li>
+                    <a href="https://photoview.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" />
+                        </svg>
+                        photoview
+                    </a>
                 </li>
                 <!-- syncthing -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://syncthing.wayl.one">syncthing</a>
+                <li>
+                    <a href="https://syncthing.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
+                        </svg>
+                        syncthing
+                    </a>
                 </li>
                 <!-- librespeed -->
-                <li class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1">
-                    <a href="https://librespeed.wayl.one">librespeed</a>
+                <li>
+                    <a href="https://librespeed.wayl.one"
+                        class="flex items-center space-x-2 hover:bg-zinc-800 hover:text-white px-4 py-1 h-12 w-32">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-6 h-6 mr-2">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" />
+                        </svg>
+                        librespeed
+                    </a>
                 </li>
         </div>
     </div>