From 7a6451885b52101b896af5e19f13ca51692966a5 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Tue, 21 May 2024 16:57:52 -0500
Subject: [PATCH] remove hover on global nav dropdowns (#136)

---
 preview-src/page-templates/home.adoc | 112 ++++++++++++---------------
 src/partials/global-nav.hbs          |   2 +-
 2 files changed, 51 insertions(+), 63 deletions(-)

diff --git a/preview-src/page-templates/home.adoc b/preview-src/page-templates/home.adoc
index c33ded2d..60b7c0f7 100644
--- a/preview-src/page-templates/home.adoc
+++ b/preview-src/page-templates/home.adoc
@@ -6,8 +6,8 @@
 
 [subs="macros,attributes"]
 ++++
-<div class="flex rounded bg-level1 gap-6 mt-6 py-6 px-2 -mx-2 lg:px-4 lg:-mx-4">
-  <div class="flex flex-col gap-6">
+<div class="flex rounded bg-level1 gap-6 mt-12 py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 items-center">
+  <div class="flex flex-col gap-6 max-w-2xl">
     
     <h2 class="discrete !m-0">Astra DB Serverless</h2>
     
@@ -16,27 +16,26 @@
     <div class="flex gap-6">
       <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Vector Search</span>
       <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Modern APIs</span>
-      <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Enterprise Ready</span>
+      <span class="text-secondary text-caption font-display flex gap-2 items-center"><i class="icon material-icons text-2xl">handyman</i> Native Integrations</span>
     </div>
     
     <div class="flex gap-4">
-      xref:astra-db-serverless:get-started:quickstart.adoc[Quickstart <i class="material-icons icon ml-1">arrow_forward</i>,role="btn btn-primary btn-solid"]
+      xref:astra-db-serverless:get-started:quickstart.adoc[Quickstart <i class="material-icons icon ml-1 group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>,role="btn btn-primary btn-solid group"]
       https://astra.datastax.com[Try Astra^,role="btn btn-neutral btn-outlined"]
     </div>
 
   </div>
-  <div class="hidden lg:flex relative pl-10">
+  <div class="hidden lg:flex relative -my-12 ml-6">
 ++++
 
-image::../img/vector-ui-dark.png["Vector Database UI", role="absolute -bottom-12 !m-0 rounded w-[31rem] h-[17.5rem] [&_img]:rounded drop-shadow-md for-dark no-zoom"]
-image::../img/vector-ui-light.png["Vector Database UI", role="absolute -bottom-12 !m-0 rounded w-[31rem] h-[17.5rem] [&_img]:rounded drop-shadow-md for-light no-zoom"]
-
-[source,python,subs="verbatim,quotes",role="nolang inverse-theme [&_.source-toolbox]:hidden rounded w-[31rem] h-[17.5rem] relative !-mt-0 !-mb-12 -top-12 right-10"]
+[source,python,subs="verbatim,quotes",role="nolang inverse-theme [&_.source-toolbox]:hidden rounded !m-0 [&_pre]:!py-6"]
 ----
+
 from astrapy import DataAPIClient
 
 # connect to a database
-database = DataAPIClient(*TOKEN*).get_database_by_api_endpoint(*URL*)
+database = 
+  DataAPIClient(*TOKEN*).get_database_by_api_endpoint(*URL*)
 
 # Ingest vectors into your collection
 collection = database.test_collection
@@ -44,6 +43,7 @@ collection.insert_many(documents=*DOCUMENTS*)
 
 # Find the closest vectors
 collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
+
 ----
 
 [subs="macros,attributes"]
@@ -51,7 +51,7 @@ collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
   </div>
 </div>
 
-<h3 class="discrete !my-12">Popular Products</h3>
+<h3 class="discrete !mt-12 !mb-10">Popular Products</h3>
 
 <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
   
@@ -72,7 +72,7 @@ collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
       <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">timer</i></div>
       <div>
         <h4 class="discrete !m-0 !text-primary">RAGStack</h4>
-        <p class="text-tertiary">Build AI apps faster</p>
+        <p class="text-tertiary">Enterprise RAG</p>
       </div>
     </div>
   ,role="!no-underline relative group"]
@@ -104,7 +104,7 @@ collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
     <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
       <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">air</i></div>
       <div>
-        <h4 class="discrete !m-0 !text-primary">Streaming</h4>
+        <h4 class="discrete !m-0 !text-primary">Astra Streaming</h4>
         <p class="text-tertiary">Efficient data streaming</p>
       </div>
     </div>
@@ -115,7 +115,7 @@ collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
     <div class="relative h-full p-2 md:p-4 text-primary rounded border flex items-center gap-3 bg-body transition-colors group-hover:border-[var(--ds-primary-outlined-hover-border)\] duration-300">
       <div class="w-10 h-10 p-3 rounded bg-level1 flex items-center justify-center"><i class="icon material-icons">nights_stay</i></div>
       <div>
-        <h4 class="discrete !m-0 !text-primary">Luna</h4>
+        <h4 class="discrete !m-0 !text-primary">Luna Support</h4>
         <p class="text-tertiary">Expertise and support for DataStax products</p>
       </div>
     </div>
@@ -123,128 +123,116 @@ collection.find(vector=[0.15, 0.1, 0.1, 0.35, 0.55])
 
 </div>
 
-<div class="mt-12 grid gap-12 md:grid-cols-2 md:grid-rows-[min-content_repeat(3,1fr)] md:grid-flow-col">
+<div class="mt-12 grid gap-10 md:grid-cols-2 md:grid-rows-[min-content_repeat(3,1fr)] md:grid-flow-col">
 
   <h3 class="pb-4 border-b !m-0">Latest Additions<i class="material-icons icon text-2xl mr-2">new_label</i></h3>
 
   xref:astra-db-serverless:databases:load-data.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Loading data into Astra DB databases
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           Astra DB
         </span>
       </h4>
       <p class="text-tertiary">++Use the Astra DB Data Loader to load data in your database from a variety of sources, including CSV files, sample datasets, and Amazon DynamoDB.++</p>
-      <p class="!text-link !mt-auto">Read Loading data into Astra DB databases <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Loading data into Astra DB databases <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 
   xref:ragstack:intro-to-rag:evaluation.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Optimizing Query Performance
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           RAGStack
         </span>
       </h4>
       <p class="text-tertiary">++Improve the efficiency of your queries on AI-ready cloud databases with best practices for indexing and query tuning.++</p>
-      <p class="!text-link !mt-auto">Read Optimizing Query Performance <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Optimizing Query Performance <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 
   xref:astra-db-serverless::index.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Securing Database Connections
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           Astra DB
         </span>
       </h4>
       <p class="text-tertiary">++Learn how to secure connections to your AI-ready cloud database using SSL encryption and access control methods.++</p>
-      <p class="!text-link !mt-auto">Read Securing Database Connections <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Securing Database Connections <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 
   <h3 class="pb-4 border-b !m-0">Working with AI/ML <i class="material-icons icon text-2xl mr-2">smart_toy</i></h3>
 
   xref:astra-db-serverless::index.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Automating Backups and Recovery
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           Astra DB
         </span>
       </h4>
       <p class="text-tertiary">++Set up automated backups for your cloud database and learn how to quickly recover your data in case of loss or corruption.++</p>
-      <p class="!text-link !mt-auto">Read Automating Backups and Recovery <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Automating Backups and Recovery <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 
   xref:astra-db-serverless::index.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Monitoring and Alerts
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           Mission Control
         </span>
       </h4>
       <p class="text-tertiary">++Monitor the health and performance of your cloud database with real-time analytics and set up alerts for potential issues.++</p>
-      <p class="!text-link !mt-auto">Read Monitoring and Alerts <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Monitoring and Alerts <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 
   xref:astra-db-serverless::index.adoc[
-    <div class="py-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
+    <div class="py-4 -my-4 px-2 -mx-2 lg:px-4 lg:-mx-4 rounded flex flex-col grow gap-3 transition-colors group-hover:bg-level1">
       <h4 class="discrete !m-0 !text-primary text-display pb-2">
         Scaling Your Database
-        <span class="ml-1 py-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
+        <span class="ml-1 py-1 -my-1 px-2 bg-level1 text-nowrap rounded color-primary text-caption font-sans border border-transparent group-hover:border-[var(--ds-divider)\] transition-colors">
           Astra DB
         </span>
       </h4>
       <p class="text-tertiary">++Scale your AI-ready cloud database vertically or horizontally to meet changing workload demands and optimize performance.++</p>
-      <p class="!text-link !mt-auto">Read Scaling Your Database <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
+      <p class="!text-link">Read Scaling Your Database <i class="material-icons icon group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i></p>
     </div>
   ,role="!no-underline group flex flex-col"]
 </div>
 
-<div class="p-8 rounded grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-level1 mt-12">
+<div class="mt-12 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
   
   https://www.datastax.com/[
-    <h4 class="discrete !m-0 !text-primary text-display pb-2">
-      <i class="material-icons icon text-2xl mr-2">home</i>
-      DataStax Home
-    </h4>
-    <span class="!text-link mr-1 break-words">Go to the DataStax website</span>
-    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
-  ,role="!no-underline group after:hidden"]
+    <i class="material-icons icon text-2xl text-[var(--ds-text-placeholder)\] group-hover:color-primary transition-colors duration-300">home</i>
+    <h4 class="discrete !m-0 !text-primary text-display">DataStax Home</h4>
+    <p class="!text-link">Go to the DataStax website</p>
+  ^,role="!no-underline group after:hidden rounded bg-level1 p-4 flex flex-col gap-1 hover:bg-[var(--ds-primary-soft-bg)\] transition-colors duration-300"]
 
   xref:glossary::index.adoc[
-    <h4 class="discrete !m-0 !text-primary text-display pb-2">
-      <i class="material-icons icon text-2xl mr-2">menu_book</i>
-      Glossary
-    </h4>
-    <span class="!text-link mr-1 break-words">Learn terminology used in DataStax products</span>
-    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
-  ,role="!no-underline group after:hidden"]
+    <i class="material-icons icon text-2xl text-[var(--ds-text-placeholder)\] group-hover:color-primary transition-colors duration-300">menu_book</i>
+    <h4 class="discrete !m-0 !text-primary text-display">Glossary</h4>
+    <p class="!text-link">Review common terms</p>
+  ,role="!no-underline group after:hidden rounded bg-level1 p-4 flex flex-col gap-1 hover:bg-[var(--ds-primary-soft-bg)\] transition-colors duration-300"]
 
   https://support.datastax.com/s/[
-    <h4 class="discrete !m-0 !text-primary text-display pb-2">
-      <i class="material-icons icon text-2xl mr-2">support</i>
-      Support
-    </h4>
-    <span class="!text-link mr-1 break-words">Access support resources</span>
-    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
-  ,role="!no-underline group after:hidden"]
+    <i class="material-icons icon text-2xl text-[var(--ds-text-placeholder)\] group-hover:color-primary transition-colors duration-300">support</i>
+    <h4 class="discrete !m-0 !text-primary text-display">Support</h4>
+    <p class="!text-link">Access support resources</p>
+  ^,role="!no-underline group after:hidden rounded bg-level1 p-4 flex flex-col gap-1 hover:bg-[var(--ds-primary-soft-bg)\] transition-colors duration-300"]
 
   https://downloads.datastax.com/#enterprise[
-    <h4 class="discrete !m-0 !text-primary text-display pb-2">
-      <i class="material-icons icon text-2xl mr-2">downloading</i>
-      Downloads
-    </h4>
-    <span class="!text-link mr-1 break-words">Download installation files and drivers</span>
-    <i class="material-icons icon absolute group-hover:translate-x-1 transition-transform duration-300">arrow_forward</i>
-  ,role="!no-underline group after:hidden"]
+    <i class="material-icons icon text-2xl text-[var(--ds-text-placeholder)\] group-hover:color-primary transition-colors duration-300">downloading</i>
+    <h4 class="discrete !m-0 !text-primary text-display">Downloads</h4>
+    <p class="!text-link">Install files and drivers</p>
+  ^,role="!no-underline group after:hidden rounded bg-level1 p-4 flex flex-col gap-1 hover:bg-[var(--ds-primary-soft-bg)\] transition-colors duration-300"]
 
 </div>
 ++++
diff --git a/src/partials/global-nav.hbs b/src/partials/global-nav.hbs
index a37bd01f..bcaa04cb 100644
--- a/src/partials/global-nav.hbs
+++ b/src/partials/global-nav.hbs
@@ -12,7 +12,7 @@
   {{#if ./home}}<div class="m-0.5 border-l h-6 w-[1px]"></div>{{/if}}
 {{/if}}
 {{#if ./items}}
-  <div class="dropdown" data-trigger-type="hover">
+  <div class="dropdown">
     <button id="nav-dropdown-{{@index}}" class="group dropdown-trigger btn btn-plain btn-neutral flex gap-1{{#if (global-nav-active this)}} !color-primary nav-group-active{{/if}}" aria-haspopup="true" aria-expanded="false">
       {{{./title}}}
       <i class="material-icons text-lg text-tertiary motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out group-[.active]:rotate-180">expand_more</i>