From 9cea36988c1f9a6634e4c9f4c770650fac0587a0 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Sat, 20 Dec 2025 12:45:07 -0500
Subject: [PATCH] animations and shadows

---
 src/app.css                       |  8 ++++++++
 src/components/Bars.tsx           |  6 ++++--
 src/components/RevealDropDown.tsx |  6 ++++--
 src/routes/contact.tsx            |  6 +-----
 src/routes/login/index.tsx        | 10 ----------
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/app.css b/src/app.css
index 798e4e2..6f197ed 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,13 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* Register --color-base as animatable color property */
+@property --color-base {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #fbf1c7;
+}
+
 :root {
   /* Comments indicate what they are used for in vim/term
   /* Base Colors (Background/Text) */
@@ -220,6 +227,7 @@
 body {
   background: var(--color-base);
   color: var(--color-text);
+  transition: background-color 500ms ease-in-out;
 }
 
 .cursor-typing {
diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index 1f63d7a..8eff784 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -350,7 +350,8 @@ export function LeftBar() {
         "transition-timing-function": leftBarVisible()
           ? "cubic-bezier(0.34, 1.56, 0.64, 1)" // Bounce out when revealing
           : "cubic-bezier(0.4, 0, 0.2, 1)", // Smooth when hiding
-        "min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined
+        "min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined,
+        "box-shadow": "inset -6px 0 16px -6px rgba(0, 0, 0, 0.1)"
       }}
     >
       {/* Hamburger menu button - positioned at right edge of navbar */}
@@ -542,7 +543,8 @@ export function RightBar() {
         "transition-timing-function": rightBarVisible()
           ? "cubic-bezier(0.34, 1.56, 0.64, 1)"
           : "cubic-bezier(0.4, 0, 0.2, 1)",
-        "min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined
+        "min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined,
+        "box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)"
       }}
     >
       <RightBarContent />
diff --git a/src/components/RevealDropDown.tsx b/src/components/RevealDropDown.tsx
index 56b30b8..2214c4e 100644
--- a/src/components/RevealDropDown.tsx
+++ b/src/components/RevealDropDown.tsx
@@ -46,8 +46,10 @@ export default function RevealDropDown(props: {
 
       {/* Reveal Content */}
       <div
-        class={`absolute right-0 left-0 z-10 overflow-hidden transition-all duration-300 ease-in-out ${
-          isRevealed() ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+        class={`absolute right-0 left-0 z-10 overflow-scroll transition-all duration-300 ease-in-out ${
+          isRevealed()
+            ? "mx-h-[75dvh] opacity-100 md:max-h-[60vh]"
+            : "max-h-0 opacity-0"
         }`}
       >
         <div class="bg-mantle p-4 shadow-lg dark:bg-gray-900">
diff --git a/src/routes/contact.tsx b/src/routes/contact.tsx
index 57b7c39..b0bccf1 100644
--- a/src/routes/contact.tsx
+++ b/src/routes/contact.tsx
@@ -206,11 +206,7 @@ export default function ContactPage() {
           </Show>
           <LineageQuestionsDropDown />
           <form onSubmit={sendEmailTrigger} class="w-full">
-            <div
-              class={`flex w-full flex-col justify-evenly pt-6 ${
-                viewer() !== "lineage" ? "md:mt-24" : ""
-              }`}
-            >
+            <div class="flex w-full flex-col justify-evenly">
               <div class="mx-auto w-full justify-evenly md:flex md:flex-row">
                 <div class="input-group md:mx-4">
                   <input
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
index 90d391c..3ab81e1 100644
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -328,16 +328,6 @@ export default function LoginPage() {
         content="Sign in to your account or register for a new account to access personalized features and manage your profile."
       />
       <div class="flex h-dvh flex-row justify-evenly">
-        {/* Logo section - hidden on mobile */}
-        {/* <div class="hidden md:flex">
-          <div class="vertical-rule-around z-0 flex justify-center">
-            <picture class="-mr-8">
-              <source srcset="/WhiteLogo.png" media="(prefers-color-scheme: dark)" />
-              <img src="/BlackLogo.png" alt="logo" width={64} height={64} />
-            </picture>
-          </div>
-        </div> */}
-
         {/* Main content */}
         <div class="pt-24 md:pt-48">
           {/* Error message */}