diff --git a/app/components/link-grid.js b/app/components/link-grid.js new file mode 100644 index 0000000..9e0d42c --- /dev/null +++ b/app/components/link-grid.js @@ -0,0 +1,22 @@ +"use strict"; + +import html from "choo/html"; + +function returnLinkTemplate(title, description, destination, label) { + return ` + + `; +} + +export default (links) => { + const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label)); + return html` + + `; +} diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss index 3e8215f..c5804cf 100755 --- a/app/sass/bundle.scss +++ b/app/sass/bundle.scss @@ -16,6 +16,7 @@ "partials/footer", "partials/github-feed", "partials/glossary", + "partials/link-grid", "partials/navigation", "partials/mission-statement", "partials/modal", diff --git a/app/sass/pages/_home.scss b/app/sass/pages/_home.scss index d178ef5..8b79cfd 100644 --- a/app/sass/pages/_home.scss +++ b/app/sass/pages/_home.scss @@ -63,60 +63,6 @@ .features { grid-area: features; - - .home__features { - align-content: center; - border-bottom: 1px solid rgba($black, 0.05); - display: flex; - flex-flow: row wrap; - list-style-type: none; - padding-top: 2rem; - padding-bottom: 2rem; - } - - .home__feature { - position: relative; - text-align: center; - vertical-align: top; - - @media (min-width: 651px) { - width: 50%; - } - - @media (max-width: 650px) { - width: 100%; - - &:first-of-type { - padding-bottom: 1rem; - } - - &:last-of-type { - padding-top: 1rem; - } - } - } - - - - .home__feature__title { - font-size: 2rem; - margin-bottom: 0.5rem; - } - - .home__feature__description { - font-size: 1rem; - left: 10%; - margin-bottom: 1rem; - position: relative; - width: 80%; - } - - .home__feature__cta { - @extend .__button-black; - display: inline-block; - font-size: 1rem; - position: relative; - } } .intro, diff --git a/app/sass/partials/_link-grid.scss b/app/sass/partials/_link-grid.scss new file mode 100644 index 0000000..8f4d04f --- /dev/null +++ b/app/sass/partials/_link-grid.scss @@ -0,0 +1,53 @@ +.link-grid { + align-content: center; + border-bottom: 1px solid rgba($black, 0.05); + display: flex; + flex-flow: row wrap; + list-style-type: none; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.link-grid__link { + position: relative; + text-align: center; + vertical-align: top; + + @media (min-width: 651px) { + width: 50%; + } + + @media (max-width: 650px) { + width: 100%; + + &:first-of-type { + padding-bottom: 1rem; + } + + &:last-of-type { + padding-top: 1rem; + } + } +} + + + +.link-grid__title { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.link-grid__description { + font-size: 1rem; + left: 10%; + margin-bottom: 1rem; + position: relative; + width: 80%; +} + +.link-grid__cta { + @extend .__button-black; + display: inline-block; + font-size: 1rem; + position: relative; +} diff --git a/app/views/home.js b/app/views/home.js index 028bf14..b24b74b 100644 --- a/app/views/home.js +++ b/app/views/home.js @@ -5,7 +5,7 @@ // P A C K A G E import html from "choo/html"; - +import linkGrid from "../components/link-grid"; // E X P O R T @@ -22,19 +22,17 @@ module.exports = exports = () => html`
- + ${linkGrid([{ + title: "New to LBRY?", + description: "Learn how LBRY works with 3 easy examples", + destination: "/tour", + label: "Take the Tour" + }, { + title: "New to LBRY?", + description: "Learn how LBRY works with 3 easy examples", + destination: "/tour", + label: "Take the Tour" + }])}