diff --git a/docusaurus.config.js b/docusaurus.config.js index 3d7e0b361c..21300f4dc6 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -20,7 +20,7 @@ const siteUrl = cfg.has("siteUrl") /** @type {import('@docusaurus/types').Config} */ const config = { title: "Gruntwork Docs", - tagline: "Your entire infrastructure, defined as code, in about a day.", + tagline: "Learn how to deploy and manage your entire infrastructure as code.", url: siteUrl, baseUrl: "/", favicon: "/favicon.ico", diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 232a55f516..93e2a70ef0 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -1,7 +1,7 @@ +/* BASIC STRUCTURE */ + .card { display: flex; - flex-direction: column; - align-items: left; padding: 2rem; width: 100%; height: 100%; @@ -9,27 +9,55 @@ transition: 0.15s ease-in-out; } -.card.horizontal { +/* ORIENTATIONS */ + +.vertical { + flex-direction: column; + align-items: left; +} + +.horizontal { flex-direction: row; align-items: left; } +.horizontal .title { + margin-bottom: 0.25rem; +} + +/* APPEARANCES */ + .flush { background-color: transparent; - box-shadow: none; border: solid 1px #ddd; + box-shadow: none; +} + +html[data-theme="dark"] .flush { + border: solid 1px var(--ifm-color-emphasis-300); } .float { background-color: #f9fbfc; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border: solid 1px transparent; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); } -.card.horizontal .title { - margin-bottom: 0.25rem; +html[data-theme="dark"] .float { + background-color: var(--ifm-background-surface-color); + border: solid 1px var(--ifm-color-emphasis-300); + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } +.invisible { + border: solid 1px transparent; + background-color: transparent; + box-shadow: none; + padding: 1rem 0; +} + +/* CONTENT */ + .card .icon { height: 60px; object-fit: contain; @@ -37,6 +65,21 @@ margin-bottom: 1rem; } +/* Use filters to make our icons appear legible in the dark + * theme. Note that this depends on all icon files using the + * plum purple (gw-purple-900) by default. + */ +html[data-theme="dark"] .icon { + /* matches --ifm-color-primary */ + filter: brightness(2.5) hue-rotate(25deg); + + /* matches gruntwork brand purple */ + /*filter: brightness(1.5) hue-rotate(10deg);*/ + + /* brighter "brand" purple */ + filter: brightness(2) hue-rotate(10deg); +} + .card .title { margin-top: 0; margin-bottom: 0.75rem; @@ -70,6 +113,8 @@ color: #5849a6; } +/* TAGS */ + ul.tags { padding: 1em 0 0 0; margin: auto 0 0 0; @@ -94,6 +139,8 @@ html[data-theme="dark"] ul.tags li { color: black; } +/* LINKS & HOVER */ + .cardlink, .cardlink:hover { text-decoration: none; @@ -102,26 +149,32 @@ html[data-theme="dark"] ul.tags li { .cardlink .card:hover { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25); -} - -.cardlink .card:active { - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -} - -html[data-theme="dark"] .card { - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); - background-color: var(--ifm-background-color); - border: solid 1px var(--ifm-color-emphasis-300); + background-color: #f9fbfc; } html[data-theme="dark"] .cardlink .card:hover { - box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5); background-color: var(--ifm-background-surface-color); border-color: var(--ifm-color-primary); + box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.5); +} + +.cardlink .card:active { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .cardlink .card:active { + border-color: var(--ifm-color-primary); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); opacity: 0.8; - border-color: var(--ifm-color-primary); +} + +.cardlink .invisible:hover, +html[data-theme="dark"] .cardlink .invisible:hover { + border: solid 1px transparent; + background: transparent; + box-shadow: none; +} + +.cardlink .invisible:hover h3 { + color: var(--ifm-color-primary); } diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 3feafcb197..b880b9f1e9 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -10,7 +10,7 @@ export type CardProps = { number?: number tags?: string[] orientation?: "horizontal" | "vertical" - appearance?: "flush" | "float" + appearance?: "float" | "flush" | "invisible" className?: string } @@ -31,8 +31,10 @@ export const Card: React.FunctionComponent = ({ className={clsx( styles.card, orientation === "horizontal" && styles.horizontal, - appearance === "flush" && styles.flush, + orientation === "vertical" && styles.vertical, appearance === "float" && styles.float, + appearance === "flush" && styles.flush, + appearance === "invisible" && styles.invisible, className )} > diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx index 247a6f9956..5256ede0b4 100644 --- a/src/components/Grid.tsx +++ b/src/components/Grid.tsx @@ -14,7 +14,7 @@ export type GridProps = { export const Grid: React.FunctionComponent = ({ cols = 3, - gap = "1rem", + gap = "2rem", colGap, rowGap, equalHeightRows = true, @@ -34,7 +34,7 @@ export const Grid: React.FunctionComponent = ({ rowGap = rowGap || gap return ( -
= ({ }} > {children} -
+ ) } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3a3ec0e95f..2627924677 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,7 @@ import Link from "@docusaurus/Link" import useDocusaurusContext from "@docusaurus/useDocusaurusContext" import styles from "./index.module.css" import Card from "../components/Card" -import Grid from "../components/Grid" +import CardGroup from "../components/CardGroup" function HomepageHeader() { const { siteConfig } = useDocusaurusContext() @@ -19,8 +19,7 @@ function HomepageHeader() { className="button button--secondary button--lg" to="/docs/intro/overview/intro-to-gruntwork" > - Get Started{" "} - With the Gruntwork Tutorial + Get Started @@ -36,50 +35,72 @@ export default function Home(): JSX.Element {
-
- - - Streamline how you create, configure, and secure AWS accounts - and multi-account structures. - - - Use your preferred CI tool to set up an end‑to‑end pipeline - for your infrastructure code. - - - Implement the CIS AWS Foundations Benchmark using our curated - collection of modules and services. - - - Bootstrap your infrastructure in about a day by letting - Gruntwork deploy a Reference Architecture customized just for - you. - - - Learn how to deploy Gruntwork services to construct your own - bespoke architecture. - - - Learn DevOps fundamentals with our series of introductory - video tutorials. - - -
+ + + Learn how Gruntwork products can help you deploy a world class + infrastructure. + + + Bought a Reference Architecture? Get your new infrastructure up + and running quickly with our comprehensive guide. + + + Follow our tutorials and learn how to deploy Gruntwork services + to construct your own bespoke architecture. + + +
+
+

Discover Your Use Case

+ + + Streamline how you create, configure, and secure your AWS + accounts using Gruntwork Landing Zone. + + + Use your preferred CI tool to set up an end‑to‑end pipeline for + your infrastructure code. + + + Set up your network according to industry best practices using + our VPC service. + + + Deploy Kubernetes using EKS to host all of your apps and + services. + + + Implement the CIS AWS Foundations Benchmark using our curated + collection of modules and services. + +
diff --git a/static/img/icons/deploy.svg b/static/img/icons/deploy.svg new file mode 100644 index 0000000000..d9e01f7f56 --- /dev/null +++ b/static/img/icons/deploy.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/img/icons/learn.svg b/static/img/icons/learn.svg new file mode 100644 index 0000000000..235b85ddaa --- /dev/null +++ b/static/img/icons/learn.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/refarch.svg b/static/img/icons/refarch.svg new file mode 100644 index 0000000000..70ce0b4dc9 --- /dev/null +++ b/static/img/icons/refarch.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +