animations and shadows

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 {

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 />

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 ${
+        class={`absolute right-0 left-0 z-10 overflow-scroll transition-all duration-300 ease-in-out ${
-          isRevealed() ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+          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">

src/routes/contact.tsx

@@ -206,11 +206,7 @@ export default function ContactPage() {
           </Show>
           <LineageQuestionsDropDown />
           <form onSubmit={sendEmailTrigger} class="w-full">
-            <div
+            <div class="flex w-full flex-col justify-evenly">
-              class={`flex w-full flex-col justify-evenly pt-6 ${
-                viewer() !== "lineage" ? "md:mt-24" : ""
-              }`}
-            >
               <div class="mx-auto w-full justify-evenly md:flex md:flex-row">
                 <div class="input-group md:mx-4">
                   <input

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 */}