Streamline headings and fix brand hover

src/app.css

@@ -154,6 +154,48 @@
     display: none;
   }
 
+  /* === HEADINGS === */
+  /* Base heading styles - gray-900 (light) / gray-100 (dark) for high contrast */
+  h1, h2, h3, h4, h5, h6,
+  h1.h-leather, h2.h-leather, h3.h-leather,
+  h4.h-leather, h5.h-leather, h6.h-leather {
+    @apply text-gray-900 dark:text-gray-100;
+  }
+
+  /* Heading sizes and weights */
+  h1, h1.h-leather {
+    @apply text-4xl font-bold;
+  }
+
+  h2, h2.h-leather {
+    @apply text-3xl font-bold;
+  }
+
+  h3, h3.h-leather {
+    @apply text-2xl font-bold;
+  }
+
+  h4, h4.h-leather {
+    @apply text-xl font-bold;
+  }
+
+  h5, h5.h-leather {
+    @apply text-lg font-semibold;
+  }
+
+  h6, h6.h-leather {
+    @apply text-base font-semibold;
+  }
+
+  /* Heading links - primary-600 (light) / primary-400 (dark) for hover */
+  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
+  h1.h-leather a, h2.h-leather a, h3.h-leather a,
+  h4.h-leather a, h5.h-leather a, h6.h-leather a {
+    @apply text-gray-900 dark:text-gray-100
+           hover:text-primary-600 dark:hover:text-primary-400;
+  }
+
+  /* === LEATHER COMPONENTS === */
   .leather,
   .publication-leather {
     @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
@@ -216,39 +258,6 @@
     @apply hover:bg-primary-100 dark:hover:bg-primary-800;
   }
 
-  h1.h-leather,
-  h2.h-leather,
-  h3.h-leather,
-  h4.h-leather,
-  h5.h-leather,
-  h6.h-leather {
-    @apply text-gray-900 dark:text-gray-100;
-  }
-
-  h1.h-leather {
-    @apply text-4xl font-bold;
-  }
-
-  h2.h-leather {
-    @apply text-3xl font-bold;
-  }
-
-  h3.h-leather {
-    @apply text-2xl font-bold;
-  }
-
-  h4.h-leather {
-    @apply text-xl font-bold;
-  }
-
-  h5.h-leather {
-    @apply text-lg font-semibold;
-  }
-
-  h6.h-leather {
-    @apply text-base font-semibold;
-  }
-
   div.modal-leather > div {
     @apply bg-primary-50 dark:bg-primary-950 border-b-[1px] border-primary-100
       dark:border-primary-600;
@@ -260,14 +269,16 @@
   div.modal-leather > div > h4,
   div.modal-leather > div > h5,
   div.modal-leather > div > h6 {
-    @apply text-gray-900 hover:text-gray-900 dark:text-gray-100
+    @apply text-gray-900 dark:text-gray-100;
-      dark:hover:text-gray-100;
   }
 
-  div.modal-leather button {
+  div.modal-leather > div > h1 a,
-    @apply bg-primary-50 hover:bg-primary-50 dark:bg-primary-950
+  div.modal-leather > div > h2 a,
-      dark:hover:bg-primary-950 text-gray-900 hover:text-primary-600
+  div.modal-leather > div > h3 a,
-      dark:text-gray-100 dark:hover:text-primary-400;
+  div.modal-leather > div > h4 a,
+  div.modal-leather > div > h5 a,
+  div.modal-leather > div > h6 a {
+    @apply hover:text-primary-600 dark:hover:text-primary-400;
   }
 
   /* Navbar */
@@ -284,14 +295,29 @@
       dark:hover:fill-primary-400;
   }
 
+  /* NavBrand hover - all text highlights together */
+  #navi a:hover h1,
+  #navi a:hover p {
+    @apply !text-primary-600 dark:!text-primary-400;
+    transition: color 0.2s ease-in-out;
+  }
+
   nav.navbar-leather h1,
   nav.navbar-leather h2,
   nav.navbar-leather h3,
   nav.navbar-leather h4,
   nav.navbar-leather h5,
   nav.navbar-leather h6 {
-    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100
+    @apply text-gray-900 dark:text-gray-100;
-      dark:hover:text-primary-400;
+  }
+
+  nav.navbar-leather h1 a,
+  nav.navbar-leather h2 a,
+  nav.navbar-leather h3 a,
+  nav.navbar-leather h4 a,
+  nav.navbar-leather h5 a,
+  nav.navbar-leather h6 a {
+    @apply hover:text-primary-600 dark:hover:text-primary-400;
   }
 
   div.textarea-leather {
@@ -350,33 +376,7 @@
 
 /* Utilities can be applied via the @apply directive. */
 @layer utilities {
-  .h-leather {
+  /* Removed redundant .h-leather and .h1-leather through .h6-leather - use base layer definitions instead */
-    @apply text-gray-900 dark:text-gray-100 pt-4;
-  }
-
-  .h1-leather {
-    @apply text-4xl font-bold;
-  }
-
-  .h2-leather {
-    @apply text-3xl font-bold;
-  }
-
-  .h3-leather {
-    @apply text-2xl font-bold;
-  }
-
-  .h4-leather {
-    @apply text-xl font-bold;
-  }
-
-  .h5-leather {
-    @apply text-lg font-semibold;
-  }
-
-  .h6-leather {
-    @apply text-base font-semibold;
-  }
 
   /* Line clamp utilities for text truncation */
   .line-clamp-1 {
@@ -407,13 +407,14 @@
   /* Lists */
   .ol-leather li a,
   .ul-leather li a {
-    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100
+    @apply text-gray-900 dark:text-gray-100
-      dark:hover:text-primary-400;
+           hover:text-primary-600 dark:hover:text-primary-400;
   }
 
+  /* Links - consistent hover colors */
   .link {
-    @apply underline cursor-pointer hover:text-primary-600
+    @apply underline cursor-pointer
-      dark:hover:text-primary-400;
+           hover:text-primary-600 dark:hover:text-primary-400;
   }
 
   .npub-badge {
@@ -471,44 +472,9 @@
     @apply flex flex-col space-y-4;
     scroll-margin-top: 150px;
     scroll-behavior: smooth;
-
-    /* common heading base styles */
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply text-gray-900 dark:text-gray-100 pt-4;
-    }
-
-    /* sizes/weights per level */
-
-    h1 {
-      @apply text-4xl font-bold;
-    }
-
-    h2 {
-      @apply text-3xl font-bold;
-    }
-
-    h3 {
-      @apply text-2xl font-bold;
-    }
-
-    h4 {
-      @apply text-xl font-bold;
   }
 
-    h5 {
+  /* Publication headings inherit from base layer - removed duplicate definitions */
-      @apply text-lg font-semibold;
-    }
-
-    h6 {
-      @apply text-base font-semibold;
-    }
-  }
 
   .olist {
     @apply flex flex-col space-y-4;
@@ -538,9 +504,10 @@
     }
   }
 
+  /* All links - consistent hover behavior */
   a {
-    @apply underline cursor-pointer hover:text-primary-600
+    @apply underline cursor-pointer
-      dark:hover:text-primary-400;
+           hover:text-primary-600 dark:hover:text-primary-400;
   }
 
   .imageblock {

src/lib/a/cards/AProfilePreview.svelte

@@ -294,7 +294,7 @@
     ></div>
   {/if}
 
-  <div class={`p-6 flex flex-col gap-4 relative`}>
+  <div class={`p-6 flex flex-col relative`}>
     <Avatar
       size="xl"
       src={props.profile?.picture ?? null}
@@ -302,7 +302,7 @@
       class="card-avatar-container"
     />
 
-    <div class="flex flex-col gap-3 mt-14">
+    <div class="flex flex-col gap-3">
       <Heading tag="h1" class="h-leather mb-2">{displayName()}</Heading>
       {#if props.user?.npub}
         <CopyToClipboard displayText={shortNpub()} copyText={props.user.npub} />

src/lib/a/nav/ANavbar.svelte

@@ -59,6 +59,8 @@
     NavHamburger,
     NavBrand,
     MegaMenu,
+    P,
+    Heading
   } from "flowbite-svelte";
   import Profile from "$components/util/Profile.svelte";
 
@@ -110,16 +112,12 @@
 >
   <NavBrand href="/" >
     <div class="flex flex-col">
-      <h1
+      <Heading class="text-2xl font-bold mb-0">
-        class="text-2xl font-bold mb-0 dark:text-primary-100 hover:dark:text-highlight"
-      >
         Alexandria
-      </h1>
+      </Heading>
-      <p
+      <P class="text-xs font-semibold tracking-wide max-sm:max-w-[11rem] mb-0">
-        class="text-xs font-semibold tracking-wide max-sm:max-w-[11rem] mb-0 dark:text-primary-200"
-      >
         READ THE ORIGINAL. MAKE CONNECTIONS. CULTIVATE KNOWLEDGE.
-      </p>
+      </P>
     </div>
   </NavBrand>
   <div class="flex md:order-2">

src/styles/a/cards.css

@@ -22,8 +22,8 @@
   }
 
   .card-leather .font-thin {
-    @apply text-gray-900 hover:text-primary-700 dark:text-gray-100
+    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100
-      dark:hover:text-primary-300;
+      dark:hover:text-primary-400;
   }
 
   /* Main card leather (used in profile previews) */
@@ -65,8 +65,8 @@
   }
 
   .ArticleBox .font-thin {
-    @apply text-gray-900 hover:text-primary-700 dark:text-gray-100
+    @apply text-gray-900 hover:text-primary-600 dark:text-gray-100
-      dark:hover:text-primary-300;
+      dark:hover:text-primary-400;
   }
 
   /* Article box image transitions */
@@ -183,7 +183,7 @@
   .deferral-link {
     @apply underline
       text-primary-700 dark:text-primary-400
-      hover:text-primary-900 dark:hover:text-primary-200
+      hover:text-primary-600 dark:hover:text-primary-400
       break-all cursor-pointer;
   }