diff --git a/scripts/build-pug.js b/scripts/build-pug.js index c652cb1c899..41aabc36d9f 100755 --- a/scripts/build-pug.js +++ b/scripts/build-pug.js @@ -34,7 +34,10 @@ function buildPage(template, target, extraData) { shelljs.ShellString(html).to(`${path}/index.html`); } -buildPage(`home`, `/`, {news: JSON.parse((shelljs.cat(`source/json/temp/news.json`).toString()))}); +buildPage(`home`, `/`, { + news: JSON.parse((shelljs.cat(`source/json/temp/news.json`).toString())), + project: JSON.parse((shelljs.cat(`source/json/temp/pulse-homepage.json`).toString())), +}); buildPage(`people`, `/people`, JSON.parse((shelljs.cat(`source/json/temp/people.json`).toString()))); buildPage(`support`, `/support`); buildPage(`upcoming`, `/programs/upcoming`, JSON.parse((shelljs.cat(`source/json/upcoming.json`).toString()))); diff --git a/scripts/fetch-json.js b/scripts/fetch-json.js index 8ed0272110f..225b2aecf7a 100644 --- a/scripts/fetch-json.js +++ b/scripts/fetch-json.js @@ -18,6 +18,7 @@ let fetchJSON = (shortName, source) => { }); }; +fetchJSON(`pulse-homepage`, `https://network-pulse-api-production.herokuapp.com/entries/216`); fetchJSON(`pulse-privacy`, `https://network-pulse-api-production.herokuapp.com/entries/?issue=Online%20Privacy%20%26%20Security&featured=True&page_size=2`); fetchJSON(`pulse-mozfest`, `https://network-pulse-api-production.herokuapp.com/entries/?tag=mozfest&featured=True&page_size=2`); fetchJSON(`pulse-innovation`, `https://network-pulse-api-production.herokuapp.com/entries/?issue=Open%20Innovation&featured=True&page_size=2`); diff --git a/source/pug/views/home.pug b/source/pug/views/home.pug index c7393d97913..0d9b7edd56d 100755 --- a/source/pug/views/home.pug +++ b/source/pug/views/home.pug @@ -31,32 +31,27 @@ block content .col .mb-5.slanty-background h4.h2-headings-white Get Involved - .row.py-5 + .row .col-xs-12.col-md-6.mb-5 - .home-ihp - .wrapper.p-4 - h5.h4-light-black The Internet Health Report - p.body-black Mozilla’s Internet Health Report is an open source initiative that combines research from multiple sources to document what’s healthy and unhealthy. - a.cta-link(href=`${env.virtualRoot}opportunity/internet-health-report`) Read and contribute + .item-featured.pb-5.px-3.px-sm-4.mt-4 + img.mb-4(src=`${data.project.thumbnail}`) + h5.h4-light-black=`${data.project.title}` + p.body-black=`${data.project.description}` + a.cta-link(href=`${data.project.get_involved_url}`) Join this Project + .mt-5 + a.btn.btn-ghost(href=`${env.virtualRoot}projects`) See More Projects .col-md-6 - h4.h4-light-black Other Opportunities - h5.h5-black Fellowships that Empower Leaders + h5.h4-light-black Fellowships that Empower Leaders p.body-black We provide funding and exciting project-based opportunities to professionals doing game-changing work at the intersection of media, science, security, advocacy, and technology. a.cta-link(href=`${env.virtualRoot}opportunity/fellowships`) Be a fellow hr - h5.h5-black Leadership Training for Collaboration + h5.h4-light-black Leadership Training for Collaboration p.body-black Learn the basics of participation, collaboration, and sharing on community-driven projects. Discover what working open can do for your project. a.cta-link(href=`${env.virtualRoot}opportunity/training`) Be a leader - .row.mx-2.mb-5.cta.cta-projects - .col-xs-12.col-md-5.px-4.py-5.cta-box - h3.h4-light-black Network Projects - p.body-black Discover and contribute to exciting projects made by and for our Network. - a.btn.btn-ghost(href=`${env.virtualRoot}projects`) See Projects - .row .col - .my-5.slanty-background + .mb-5.slanty-background h4.h2-headings-white Latest News - data.news = data.news.filter((item) => { @@ -64,7 +59,7 @@ block content }); .row.mb-5 .col-md-6.mb-3.d-flex - .p-5.news-item-featured + .p-5.item-featured +newsItem(data.news[0]) - if (data.news[0].excerpt) p.body-black=data.news[0].excerpt diff --git a/source/sass/buttons.scss b/source/sass/buttons.scss index 329ac98c3cd..80281c0fe8a 100644 --- a/source/sass/buttons.scss +++ b/source/sass/buttons.scss @@ -10,7 +10,7 @@ .btn-ghost { color: $black; - background: $white; + background: transparent; border: 1px solid #3bb7ef; &:hover { diff --git a/source/sass/views/home.scss b/source/sass/views/home.scss index a7c406087f7..80159887b1f 100644 --- a/source/sass/views/home.scss +++ b/source/sass/views/home.scss @@ -8,8 +8,13 @@ } } -.news-item-featured { +.item-featured { background: $off-white; + + & > img:first-child { + margin-top: -1.5em; + box-shadow: 0 4px 0 0 $gray-lighter; + } } .cta { @@ -46,18 +51,6 @@ } } -.home-ihp { - background: url(../_images/ihp.png) no-repeat; - background-position-x: 50%; - background-size: auto 270px; - padding: 160px 15px 0; - - .wrapper { - background: $white; - box-shadow: 0 4px 0 0 #f2f2f2; - } -} - .stay-connected { background: #f2f2f2;