Skip to content

Commit

Permalink
remove hover on global nav dropdowns (#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
colegoldsmith authored May 21, 2024
1 parent 35b00c9 commit 7a64518
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 63 deletions.
112 changes: 50 additions & 62 deletions preview-src/page-templates/home.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -16,42 +16,42 @@
<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
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"]
++++
</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">
Expand All @@ -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"]
Expand Down Expand Up @@ -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>
Expand All @@ -115,136 +115,124 @@ 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>
,role="!no-underline relative group"]
</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>
++++
2 changes: 1 addition & 1 deletion src/partials/global-nav.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 7a64518

Please sign in to comment.