Skip to content

Revised home page layout #127

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

Merged
merged 5 commits into from
Jan 7, 2022
Merged

Revised home page layout #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ebd47b0
Revised home page layout
ebeneliason Jan 6, 2022
513a780
Review updates
ebeneliason Jan 6, 2022
fa4cc88
Legible icons in dark theme
ebeneliason Jan 7, 2022
e6412a5
tweaks
ebeneliason Jan 7, 2022
7452ed8
Tweak RefArch copy
ebeneliason Jan 7, 2022
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
2 changes: 1 addition & 1 deletion docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
91 changes: 72 additions & 19 deletions src/components/Card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,85 @@
/* BASIC STRUCTURE */

.card {
display: flex;
flex-direction: column;
align-items: left;
padding: 2rem;
width: 100%;
height: 100%;
border-radius: 6px;
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;
object-position: left;
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;
Expand Down Expand Up @@ -70,6 +113,8 @@
color: #5849a6;
}

/* TAGS */

ul.tags {
padding: 1em 0 0 0;
margin: auto 0 0 0;
Expand All @@ -94,6 +139,8 @@ html[data-theme="dark"] ul.tags li {
color: black;
}

/* LINKS & HOVER */

.cardlink,
.cardlink:hover {
text-decoration: none;
Expand All @@ -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);
}
6 changes: 4 additions & 2 deletions src/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export type CardProps = {
number?: number
tags?: string[]
orientation?: "horizontal" | "vertical"
appearance?: "flush" | "float"
appearance?: "float" | "flush" | "invisible"
className?: string
}

Expand All @@ -31,8 +31,10 @@ export const Card: React.FunctionComponent<CardProps> = ({
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
)}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export type GridProps = {

export const Grid: React.FunctionComponent<GridProps> = ({
cols = 3,
gap = "1rem",
gap = "2rem",
colGap,
rowGap,
equalHeightRows = true,
Expand All @@ -34,7 +34,7 @@ export const Grid: React.FunctionComponent<GridProps> = ({
rowGap = rowGap || gap

return (
<section
<div
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is more semantically correct right? section refers more to a "section" in a document rather than this..being a grid, which is more of a container. Am I understanding this properly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had the same thought initially, but in practice I noticed a couple of related things that changed my mind.

  1. In some cases the Grid belongs logically grouped with some other content, e.g. a header, or supplemental text. In those cases, the semantic "section" is all of that content taken together, not just the grid.
  2. In some cases, the component using the grid already had a higher level notion of section, which resulted in nested sections. Nested sections aren't prohibited, but semantically it was again incorrect, since the section is meant to map to a section of the page that would be shown in a document outline.

className={classes}
style={{
gridColumnGap: Number.isInteger(colGap) ? `${colGap}px` : colGap,
Expand All @@ -48,7 +48,7 @@ export const Grid: React.FunctionComponent<GridProps> = ({
}}
>
{children}
</section>
</div>
)
}

Expand Down
115 changes: 68 additions & 47 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -19,8 +19,7 @@ function HomepageHeader() {
className="button button--secondary button--lg"
to="/docs/intro/overview/intro-to-gruntwork"
>
Get Started{" "}
<span className="hideOnMobile">With the Gruntwork Tutorial</span>
Get Started
</Link>
</div>
</div>
Expand All @@ -36,50 +35,72 @@ export default function Home(): JSX.Element {
<main>
<section className={styles.features}>
<div className="container">
<div className="row">
<Grid cols={3} gap="2rem">
<Card
title="Set Up Your Accounts"
href="/docs/guides/build-it-yourself/landing-zone/intro/what-youll-learn-in-this-guide"
>
Streamline how you create, configure, and secure AWS accounts
and multi-account structures.
</Card>
<Card
title="Configure a CI/CD Pipeline"
href="/docs/guides/build-it-yourself/pipelines/intro/what-youll-learn-in-this-guide"
>
Use your preferred CI tool to set up an end‑to‑end pipeline
for your infrastructure code.
</Card>
<Card
title="Achieve Compliance"
href="/docs/guides/build-it-yourself/achieve-compliance/intro/what-youll-learn-in-this-guide"
>
Implement the CIS AWS Foundations Benchmark using our curated
collection of modules and services.
</Card>
<Card
title="The Reference Architecture"
href="/docs/guides/reference-architecture/overview/overview"
>
Bootstrap your infrastructure in about a day by letting
Gruntwork deploy a Reference Architecture customized just for
you.
</Card>
<Card
title="Deploy a Service"
href="/docs/guides/build-it-yourself/overview"
>
Learn how to deploy Gruntwork services to construct your own
bespoke architecture.
</Card>
<Card title="Courses" href="/docs/courses">
Learn DevOps fundamentals with our series of introductory
video tutorials.
</Card>
</Grid>
</div>
<CardGroup>
<Card
title="What is Gruntwork?"
href="/docs/intro/overview/intro-to-gruntwork"
icon="/img/icons/learn.svg"
>
Learn how Gruntwork products can help you deploy a world class
infrastructure.
</Card>
<Card
title="The Reference Architecture"
href="/docs/guides/reference-architecture/overview/overview"
icon="/img/icons/refarch.svg"
>
Bought a Reference Architecture? Get your new infrastructure up
and running quickly with our comprehensive guide.
</Card>
<Card
title="Deploy A Service"
href="/docs/guides/build-it-yourself/overview"
icon="/img/icons/deploy.svg"
>
Follow our tutorials and learn how to deploy Gruntwork services
to construct your own bespoke architecture.
</Card>
</CardGroup>
</div>
<div className="container" style={{ margin: "6rem auto" }}>
<h2>Discover Your Use Case</h2>
<CardGroup commonCardProps={{ appearance: "invisible" }}>
<Card
title="Set Up Your Multi-account Structure"
href="/docs/guides/build-it-yourself/landing-zone/intro/what-youll-learn-in-this-guide"
>
Streamline how you create, configure, and secure your AWS
accounts using Gruntwork Landing Zone.
</Card>
<Card
title="Create an Infra CI/CD Pipeline"
href="/docs/guides/build-it-yourself/pipelines/intro/what-youll-learn-in-this-guide"
>
Use your preferred CI tool to set up an end‑to‑end pipeline for
your infrastructure code.
</Card>
<Card
title="Configure Your Network"
href="/docs/guides/build-it-yourself/vpc/intro/what-youll-learn-in-this-guide"
>
Set up your network according to industry best practices using
our VPC service.
</Card>
<Card
title="Deploy a Kubernetes Cluster"
href="/docs/guides/build-it-yourself/kubernetes-cluster/intro/what-youll-learn-in-this-guide"
>
Deploy Kubernetes using EKS to host all of your apps and
services.
</Card>
<Card
title="Achieve Compliance"
href="/docs/guides/build-it-yourself/achieve-compliance/intro/what-youll-learn-in-this-guide"
>
Implement the CIS AWS Foundations Benchmark using our curated
collection of modules and services.
</Card>
</CardGroup>
</div>
</section>
</main>
Expand Down
8 changes: 8 additions & 0 deletions static/img/icons/deploy.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions static/img/icons/learn.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions static/img/icons/refarch.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.