fix and refactor names

This commit is contained in:
Jeremy Kauffman 2018-09-24 17:14:50 -04:00
parent 4ad784da2f
commit 3ba7557d01
2 changed files with 11 additions and 11 deletions

View file

@ -4,10 +4,10 @@ import html from "choo/html";
function returnLinkTemplate(title, description, destination, label) { function returnLinkTemplate(title, description, destination, label) {
return ` return `
<li class="home__feature"> <li class="link-grid__link">
<p class="home__feature__title"><strong>${title}</strong></p> <p class="link-grid__title"><strong>${title}</strong></p>
<p class="home__feature__description">${description}</p> <p class="link-grid__description">${description}</p>
<a class="home__feature__cta" href="${destination}">${label}</a> <a class="link-grid__cta" href="${destination}">${label}</a>
</li> </li>
`; `;
} }
@ -15,8 +15,8 @@ function returnLinkTemplate(title, description, destination, label) {
export default (links) => { export default (links) => {
const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label)); const renderedLinks = links.map((link) => returnLinkTemplate(link.title, link.description, link.destination, link.label));
return html` return html`
<ul class="home__features"> <ul class="link-grid">
${renderedLinks.join("\n")} ${renderedLinks}
</ul> </ul>
`; `;
} }

View file

@ -1,4 +1,4 @@
.home__features { .link-grid {
align-content: center; align-content: center;
border-bottom: 1px solid rgba($black, 0.05); border-bottom: 1px solid rgba($black, 0.05);
display: flex; display: flex;
@ -8,7 +8,7 @@
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.home__feature { .link-grid__link {
position: relative; position: relative;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
@ -32,12 +32,12 @@
.home__feature__title { .link-grid__title {
font-size: 2rem; font-size: 2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.home__feature__description { .link-grid__description {
font-size: 1rem; font-size: 1rem;
left: 10%; left: 10%;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -45,7 +45,7 @@
width: 80%; width: 80%;
} }
.home__feature__cta { .link-grid__cta {
@extend .__button-black; @extend .__button-black;
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;