From 0b8c993f29050c41d11cefaa7735478772e6dc11 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Thu, 13 Apr 2017 16:46:16 -0400 Subject: [PATCH 1/2] Restyle get involved section --- source/pug/views/home.pug | 21 +++++++++++---------- source/sass/buttons.scss | 2 +- source/sass/views/home.scss | 19 ++++++------------- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/source/pug/views/home.pug b/source/pug/views/home.pug index c7393d97913..4bd0f27a06b 100755 --- a/source/pug/views/home.pug +++ b/source/pug/views/home.pug @@ -31,20 +31,21 @@ 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="https://assets.mofoprod.net/network-pulse/images/entries/2017-04-12_164148.6437050000.jpg") + 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`) Join this Project + .mt-5 + a.btn.btn-ghost(href=`#`) 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 @@ -64,7 +65,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; From f27b2e8e4a476908c5bc7a5514df28046d79a7da Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Thu, 13 Apr 2017 17:12:43 -0400 Subject: [PATCH 2/2] Pull a pulse project for homepage --- scripts/build-pug.js | 5 ++++- scripts/fetch-json.js | 1 + source/pug/views/home.pug | 18 ++++++------------ 3 files changed, 11 insertions(+), 13 deletions(-) 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 4bd0f27a06b..0d9b7edd56d 100755 --- a/source/pug/views/home.pug +++ b/source/pug/views/home.pug @@ -34,12 +34,12 @@ block content .row .col-xs-12.col-md-6.mb-5 .item-featured.pb-5.px-3.px-sm-4.mt-4 - img.mb-4(src="https://assets.mofoprod.net/network-pulse/images/entries/2017-04-12_164148.6437050000.jpg") - 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`) Join this Project + 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=`#`) See More Projects + a.btn.btn-ghost(href=`${env.virtualRoot}projects`) See More Projects .col-md-6 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. @@ -49,15 +49,9 @@ block content 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) => {