diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js index c962109df..ee6c4cb0a 100644 --- a/gitlab-pages/website/pages/en/index.js +++ b/gitlab-pages/website/pages/en/index.js @@ -259,33 +259,42 @@ class Index extends React.Component { ); + const FeatureCard = props => ( +
+ +
+

{props.title}

+

{props.content}

+
+
+ ); + const Features = () => (
-

Features

- +

Features

+ +
{[ - { - content: - "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.", - image: `${baseUrl}img/edit.svg`, - imageAlign: "top", - title: "Syntax Agnostic" - }, { content: "Write types, then code, and benefit from the safety coming from type systems.", - image: `${baseUrl}img/lightning.svg`, - imageAlign: "top", + image: `${baseUrl}img/strong-type-system.svg`, title: "Strong Type System" }, + { + content: + "Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.", + image: `${baseUrl}img/syntax-agnostic.svg`, + title: "Syntax Agnostic" + }, + { content: "With Granary, you can use LIGO as a lib from NodeJS.", - image: `${baseUrl}img/puzzle.svg`, - imageAlign: "top", + image: `${baseUrl}img/easy-integration.svg`, title: "Easy Integration" } - ]} - + ].map(FeatureCard)} +
); @@ -339,7 +348,7 @@ class Index extends React.Component { return (
-

Partners

+

Partners

{showcase}
{/*
@@ -372,8 +381,8 @@ class Index extends React.Component { return (
-

Team

-
{showcase}
+

Team

+
{showcase}
{/*
More {siteConfig.title} Users diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css index 35509042f..8d0954962 100644 --- a/gitlab-pages/website/static/css/custom.css +++ b/gitlab-pages/website/static/css/custom.css @@ -462,7 +462,7 @@ body flex-direction: column; align-items: center; justify-content: center; - max-width: fit-content; + max-width: 20%; color: var(--color-primary-text); padding: 0 var(--padding-level-1); } @@ -474,18 +474,71 @@ body .profileImage { max-height: 195px; max-width: 195px; + width: 100%; border: var(--color-gray); } .profileImage:hover { box-shadow: 12px 12px 0px var(--color-primary-brand); } -.team-container { +.flex-inline-container { display: flex; flex-direction: row; justify-content: space-around; padding: var(--padding-level-1); flex-wrap: wrap; + align-items: flex-start; +} + +/** Feature Cards **/ +.card { + display: flex; + flex-direction: column; + padding: 2rem; + align-items: center; + justify-content: flex-start; + max-width: 30%; + height: auto; + background-color: var(--color-light-gray); +} + +.card:hover { + background-color: var(--color-light-blue); +} + +.card-text { + text-align: center; +} + +@media (min-width: 560px) and (max-width: 768px) { + /** Special rules to reorient feature cards at only one screen size**/ + .card { + flex-direction: row; + width: 100%; + max-width: 100%; + justify-content: left; + margin: var(--padding-level-1) 0; + } + .card-text { + text-align: left; + } +} + +@media (max-width: 768px) { + .profileContainer { + max-width: 30%; + } +} + +@media (max-width: 560px) { + .card { + max-width: 100%; + margin: var(--padding-level-1) 0; + } + .profileContainer { + max-width: 100%; + width: 100%; + } } @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { diff --git a/gitlab-pages/website/static/img/easy-integration.svg b/gitlab-pages/website/static/img/easy-integration.svg new file mode 100644 index 000000000..de1284626 --- /dev/null +++ b/gitlab-pages/website/static/img/easy-integration.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/gitlab-pages/website/static/img/strong-type-system.svg b/gitlab-pages/website/static/img/strong-type-system.svg new file mode 100644 index 000000000..997b516a9 --- /dev/null +++ b/gitlab-pages/website/static/img/strong-type-system.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/gitlab-pages/website/static/img/syntax-agnostic.svg b/gitlab-pages/website/static/img/syntax-agnostic.svg new file mode 100644 index 000000000..5cc55d5ae --- /dev/null +++ b/gitlab-pages/website/static/img/syntax-agnostic.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gitlab-pages/website/static/img/user.png b/gitlab-pages/website/static/img/user.png deleted file mode 100644 index 1079d42d7..000000000 Binary files a/gitlab-pages/website/static/img/user.png and /dev/null differ