Merge pull request #150 from lbryio/home_features_refactor
turn home features area into a component
This commit is contained in:
netop:// ウェッブ
GitHub
commit
e42082dd9d
5 changed files with 88 additions and 68 deletions
22
app/components/link-grid.js
Normal file
22
app/components/link-grid.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
"use strict";
|
||||
|
||||
import html from "choo/html";
|
||||
|
||||
function returnLinkTemplate(title, description, destination, label) {
|
||||
return `
|
||||
<li class="link-grid__link">
|
||||
<p class="link-grid__title"><strong>${title}</strong></p>
|
||||
<p class="link-grid__description">${description}</p>
|
||||
<a class="link-grid__cta" href="${destination}">${label}</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
export default (links) => {
|
||||
const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label));
|
||||
return html`
|
||||
<ul class="link-grid">
|
||||
${renderedLinks}
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
"partials/footer",
|
||||
"partials/github-feed",
|
||||
"partials/glossary",
|
||||
"partials/link-grid",
|
||||
"partials/navigation",
|
||||
"partials/mission-statement",
|
||||
"partials/modal",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
53
app/sass/partials/_link-grid.scss
Normal file
53
app/sass/partials/_link-grid.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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`
|
|||
</section>
|
||||
|
||||
<section class="features">
|
||||
<ul class="home__features">
|
||||
<li class="home__feature">
|
||||
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
|
||||
<p class="home__feature__description">Learn how LBRY works with 3 easy examples</p>
|
||||
<a class="home__feature__cta" href="/tour">Take the Tour</a>
|
||||
</li>
|
||||
|
||||
<li class="home__feature">
|
||||
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
|
||||
<p class="home__feature__description">Help make LBRY better!</p>
|
||||
<a class="home__feature__cta" href="/contribute">Explore our repos</a>
|
||||
</li>
|
||||
</ul>
|
||||
${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"
|
||||
}])}
|
||||
</section>
|
||||
|
||||
<section class="intro">
|
||||
|
|
|
|||
Loading…
Reference in a new issue