From ebd47b0ad787561f5be7db0e0e622741f725b452 Mon Sep 17 00:00:00 2001 From: Eben Eliason Date: Wed, 5 Jan 2022 18:16:21 -0800 Subject: [PATCH 1/5] Revised home page layout This tweaks copy and layout on the homepage to provide a better visual hierarchy. It also introduces some changes to the Card component and styles to support the new look in cleaner fashion. --- docusaurus.config.js | 2 +- src/components/Card.module.css | 76 +++++++++++++++------ src/components/Card.tsx | 6 +- src/components/Grid.tsx | 6 +- src/pages/index.tsx | 116 ++++++++++++++++++++------------- static/img/icons/deploy.svg | 8 +++ static/img/icons/learn.svg | 6 ++ static/img/icons/refarch.svg | 15 +++++ 8 files changed, 163 insertions(+), 72 deletions(-) create mode 100644 static/img/icons/deploy.svg create mode 100644 static/img/icons/learn.svg create mode 100644 static/img/icons/refarch.svg 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..62ed6c4aa9 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; @@ -70,6 +98,8 @@ color: #5849a6; } +/* TAGS */ + ul.tags { padding: 1em 0 0 0; margin: auto 0 0 0; @@ -94,6 +124,8 @@ html[data-theme="dark"] ul.tags li { color: black; } +/* LINKS & HOVER */ + .cardlink, .cardlink:hover { text-decoration: none; @@ -102,26 +134,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..f8183fb44f 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,73 @@ 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 what Gruntwork is and how its products can help you deploy + a world class infrastructure. + + + Bootstrap your infrastructure in about a day by letting + Gruntwork deploy a Reference Architecture customized just for + you. + + + 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 AWS accounts + and multi-account structures. + + + 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 a Kubernetes Cluster 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 @@ + + + + + + + + + + + + + + + From 513a78057be72c0677eaad3ae8c943a73474ae14 Mon Sep 17 00:00:00 2001 From: Eben Eliason Date: Thu, 6 Jan 2022 15:43:07 -0800 Subject: [PATCH 2/5] Review updates --- src/pages/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f8183fb44f..9ef184bbdd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -41,8 +41,8 @@ export default function Home(): JSX.Element { href="/docs/intro/overview/intro-to-gruntwork" icon="/img/icons/learn.svg" > - Learn what Gruntwork is and how its products can help you deploy - a world class infrastructure. + Learn how Gruntwork products can help you deploy a world class + infrastructure. Discover Your Use Case - Streamline how you create, configure, and secure AWS accounts - and multi-account structures. + 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 @@ -91,8 +91,8 @@ export default function Home(): JSX.Element { title="Deploy a Kubernetes Cluster" href="/docs/guides/build-it-yourself/kubernetes-cluster/intro/what-youll-learn-in-this-guide" > - Deploy a Kubernetes Cluster to host all of your apps and - services. + Deploy Kubernetes to host all of your apps and services using + EKS. Date: Thu, 6 Jan 2022 16:52:58 -0800 Subject: [PATCH 3/5] Legible icons in dark theme --- src/components/Card.module.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 62ed6c4aa9..15c40952c8 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -65,6 +65,18 @@ html[data-theme="dark"] .float { 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);*/ +} + .card .title { margin-top: 0; margin-bottom: 0.75rem; From e6412a5b04e5b39be346c229c8e6a3f1f48459a8 Mon Sep 17 00:00:00 2001 From: Eben Eliason Date: Thu, 6 Jan 2022 17:14:32 -0800 Subject: [PATCH 4/5] tweaks --- src/components/Card.module.css | 3 +++ src/pages/index.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Card.module.css b/src/components/Card.module.css index 15c40952c8..93e2a70ef0 100644 --- a/src/components/Card.module.css +++ b/src/components/Card.module.css @@ -75,6 +75,9 @@ html[data-theme="dark"] .icon { /* matches gruntwork brand purple */ /*filter: brightness(1.5) hue-rotate(10deg);*/ + + /* brighter "brand" purple */ + filter: brightness(2) hue-rotate(10deg); } .card .title { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9ef184bbdd..16ffb5ff9d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -91,8 +91,8 @@ export default function Home(): JSX.Element { title="Deploy a Kubernetes Cluster" href="/docs/guides/build-it-yourself/kubernetes-cluster/intro/what-youll-learn-in-this-guide" > - Deploy Kubernetes to host all of your apps and services using - EKS. + Deploy Kubernetes using EKS to host all of your apps and + services. Date: Fri, 7 Jan 2022 07:19:30 -0800 Subject: [PATCH 5/5] Tweak RefArch copy --- src/pages/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 16ffb5ff9d..2627924677 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -49,9 +49,8 @@ export default function Home(): JSX.Element { href="/docs/guides/reference-architecture/overview/overview" icon="/img/icons/refarch.svg" > - Bootstrap your infrastructure in about a day by letting - Gruntwork deploy a Reference Architecture customized just for - you. + Bought a Reference Architecture? Get your new infrastructure up + and running quickly with our comprehensive guide.