Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove hover on global nav dropdowns #136

Merged
merged 1 commit into from
May 21, 2024
Merged

remove hover on global nav dropdowns #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 50 additions & 62 deletions preview-src/page-templates/home.adoc
View file
Open in desktop
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
View file
Open in desktop
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
Loading