Give the Tri's Lab menu button a playful pixel look

Tri's blush pink with a hard outline and a shadow that presses in on
hover, like the buttons in Tri's Lab by FEAScript.

Signed-off-by: Nikos Chamakos <nikoscham@gmail.com>

Author: nikoscham

404.html

@@ -88,7 +88,7 @@
             <a class="nav-link" href="index.html#licensing"><span>Licensing</span></a>
             <a class="nav-link nav-link-out" href="https://docs.feascript.com"><span>Documentation</span></a>
             <a class="nav-link nav-link-out" href="studio.html"><span>Studio</span></a>
-            <a class="nav-link nav-link-out" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
+            <a class="nav-link nav-link-out nav-link-lab" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
           </nav>
         </div>
 
@@ -172,7 +172,7 @@
         <a href="index.html#licensing">Licensing</a>
         <a class="nav-link-out" href="https://docs.feascript.com">Documentation</a>
         <a class="nav-link-out" href="studio.html">FEAScript Studio</a>
-        <a class="nav-link-out" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
+        <a class="nav-link-out nav-link-lab" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
       </nav>
     </header>
 

feascript-website.css

@@ -549,6 +549,29 @@ html.site {
   color: #1d1d1d;
 }
 
+/* Tri's Lab gets the lab's playful pixel look: Tri's blush pink, a hard outline and a shadow that presses in */
+.nav-link-lab span {
+  border: 1px solid #1d1d1d;
+  border-radius: 2px;
+  background: #ffd6e3;
+  color: #1d1d1d;
+  box-shadow: 2px 2px 0 #1d1d1d;
+  transition:
+    transform 0.1s steps(1),
+    box-shadow 0.1s steps(1);
+}
+
+.nav-link-lab:hover span {
+  border-color: #1d1d1d;
+  background: #ffd6e3;
+  transform: translate(2px, 2px);
+  box-shadow: 0 0 0 #1d1d1d;
+}
+
+html[data-theme="dark"] .nav-link-lab span {
+  box-shadow: 2px 2px 0 #ff5c8d;
+}
+
 .mobile-nav a.nav-link-out {
   color: var(--gold-ink);
   font-weight: 500;

index.html

@@ -126,7 +126,7 @@
             <a class="nav-link" href="#licensing"><span>Licensing</span></a>
             <a class="nav-link nav-link-out" href="https://docs.feascript.com"><span>Documentation</span></a>
             <a class="nav-link nav-link-out" href="studio.html"><span>Studio</span></a>
-            <a class="nav-link nav-link-out" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
+            <a class="nav-link nav-link-out nav-link-lab" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
           </nav>
         </div>
 
@@ -210,7 +210,7 @@
         <a href="#licensing">Licensing</a>
         <a class="nav-link-out" href="https://docs.feascript.com">Documentation</a>
         <a class="nav-link-out" href="studio.html">FEAScript Studio</a>
-        <a class="nav-link-out" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
+        <a class="nav-link-out nav-link-lab" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
       </nav>
     </header>
 

sponsors.html

@@ -81,7 +81,7 @@
             <a class="nav-link" href="index.html#licensing"><span>Licensing</span></a>
             <a class="nav-link nav-link-out" href="https://docs.feascript.com"><span>Documentation</span></a>
             <a class="nav-link nav-link-out" href="studio.html"><span>Studio</span></a>
-            <a class="nav-link nav-link-out" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
+            <a class="nav-link nav-link-out nav-link-lab" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
           </nav>
         </div>
 
@@ -165,7 +165,7 @@
         <a href="index.html#licensing">Licensing</a>
         <a class="nav-link-out" href="https://docs.feascript.com">Documentation</a>
         <a class="nav-link-out" href="studio.html">FEAScript Studio</a>
-        <a class="nav-link-out" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
+        <a class="nav-link-out nav-link-lab" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
       </nav>
     </header>
 

studio.html

@@ -81,7 +81,7 @@
             <a class="nav-link" href="index.html#licensing"><span>Licensing</span></a>
             <a class="nav-link nav-link-out" href="https://docs.feascript.com"><span>Documentation</span></a>
             <a class="nav-link nav-link-out" href="studio.html"><span>Studio</span></a>
-            <a class="nav-link nav-link-out" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
+            <a class="nav-link nav-link-out nav-link-lab" href="https://lab.feascript.com/"><span>Tri's Lab</span></a>
           </nav>
         </div>
 
@@ -165,7 +165,7 @@
         <a href="index.html#licensing">Licensing</a>
         <a class="nav-link-out" href="https://docs.feascript.com">Documentation</a>
         <a class="nav-link-out" href="studio.html">FEAScript Studio</a>
-        <a class="nav-link-out" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
+        <a class="nav-link-out nav-link-lab" href="https://lab.feascript.com/">Tri's Lab by FEAScript</a>
       </nav>
     </header>