From dc10537953dc260cc0ba7c0f9f5b0cd0e5231419 Mon Sep 17 00:00:00 2001 From: Sahitya Buddharaju Date: Tue, 14 May 2024 16:36:39 -0500 Subject: [PATCH] styles(landing-page): add effects to cards --- src/components/HomepageFeatures/index.js | 69 ++++++++++--------- .../HomepageFeatures/styles.module.css | 7 +- src/css/custom.css | 25 +++++++ src/theme/SearchBar/styles.css | 28 ++++---- src/theme/SearchPage/index.tsx | 7 +- src/theme/SearchPage/styles.module.css | 21 ------ 6 files changed, 86 insertions(+), 71 deletions(-) diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js index a7bd4dea8a..867c70dfda 100644 --- a/src/components/HomepageFeatures/index.js +++ b/src/components/HomepageFeatures/index.js @@ -1,49 +1,52 @@ import clsx from 'clsx'; import Heading from '@theme/Heading'; import styles from './styles.module.css'; +import Link from '@docusaurus/Link'; const FeatureTitle = 'Categories'; const FeatureList = [ { - title: 'The freedom to innovate is now as limitless as your imagination', - description: ( - <> - Discover faster, easier, and more cost-effective AI innovation with - Teradata AI Unlimited, our serverless AI/ML engine in the cloud, now - available in private preview through Azure Marketplace. - - ), - }, - { - title: 'Focus on What Matters', - description: ( - <> - Bring the power of Teradata's industry-leading ClearScape Analytics - capabilities to a low-cost environment that maximizes exploration and - discovery. - - ), - }, - { - title: 'AI Unlimited on Microsoft Azure and Fabric Marketplace', - description: ( - <> - With high-performance compute and in-engine analytics, Teradata AI - Unlimited offers incredible new use cases, all securely and natively - integrated into the Microsoft ecosystem. - - ), + title: `What's new`, + href: '/docs/whats-new/', + }, + { + title: 'Get started', + href: '/docs/install-ai-unlimited/', + }, + { + title: 'Explore and analyze data', + href: '/docs/explore-and-analyze-data/', + }, + { + title: 'Manage projects', + href: '/docs/manage-ai-unlimited/', + }, + { + title: 'Other resources', + href: '/docs/resources/', + }, + { + title: 'FAQ', + href: '/docs/faq/', + }, + { + title: 'Glossary', + href: '/docs/glossary/', + }, + { + title: 'Release notes', + href: '/docs/release-notes/', }, ]; -function Feature({ title, description }) { +function Feature({ title, description, href }) { return ( -
-
+ +
{title} -

{description}

+ {description &&

{description}

}
-
+ ); } diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index 78f69d1adb..c494ac2b50 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -19,6 +19,10 @@ letter-spacing: -1.26px; } +a.col { + text-decoration: none; +} + .col { padding: 0 0.75rem 1.5rem; } @@ -29,7 +33,6 @@ border-radius: 12px; border: 1px solid #CED3DA; background: #FFF; - height: 100%; margin-bottom: 1rem; padding: 1.5rem; } @@ -43,7 +46,7 @@ font-weight: 600; line-height: 34px; /* 141.667% */ letter-spacing: -0.24px; - margin-bottom: 0.5rem; + margin-bottom: 0; } .featureSvg { diff --git a/src/css/custom.css b/src/css/custom.css index a2da77f7eb..c708cf5178 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -304,6 +304,31 @@ html.plugin-search-algolia .main-wrapper .container { padding: 0 2rem; } +.doc-card { + position: relative; +} + +.doc-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); +} + +.doc-card:hover::after { + transform: scaleX(1); +} + +.doc-card:after { + border-bottom: 2px solid var(--cv-theme-text-logo-on-background); + bottom: 0; + content: ''; + display: block; + left: 0; + position: absolute; + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform 0.25s ease-in-out; + width: 100%; +} + @media screen and (max-width: 767px) { html:not(.plugin-pages) .main-wrapper { padding: 6.75rem 0.5rem 0; diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css index 6a16c5298f..f536504735 100644 --- a/src/theme/SearchBar/styles.css +++ b/src/theme/SearchBar/styles.css @@ -116,22 +116,22 @@ line-height: 1.5rem; padding: 0.75rem 1rem; transition: all 0.25s ease-in-out 0s; +} - &:hover { - background: var(--cv-theme-text-logo-on-background); - border-color: var(--cv-theme-text-logo-on-background); - color: var(--cv-theme-surface-canvas); - text-decoration: none; - } +.DocSearch-HitsFooter a:hover { + background: var(--cv-theme-text-logo-on-background); + border-color: var(--cv-theme-text-logo-on-background); + color: var(--cv-theme-surface-canvas); + text-decoration: none; +} - &::after { - content: 'east'; - font-family: Material Symbols Outlined; - margin-left: 0.5rem; - pointer-events: none; - position: relative; - top: 1px; - } +.DocSearch-HitsFooter a::after { + content: 'east'; + font-family: Material Symbols Outlined; + margin-left: 0.5rem; + pointer-events: none; + position: relative; + top: 1px; } .DocSearch-Button { diff --git a/src/theme/SearchPage/index.tsx b/src/theme/SearchPage/index.tsx index e2a1f069e1..354c3a9420 100644 --- a/src/theme/SearchPage/index.tsx +++ b/src/theme/SearchPage/index.tsx @@ -428,7 +428,12 @@ function SearchPageContent(): JSX.Element {