diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx index 4a3fb6d35..65f37f6ac 100644 --- a/src/views/annual-report/annual-report.jsx +++ b/src/views/annual-report/annual-report.jsx @@ -21,6 +21,7 @@ const CountryUsage = require('./country-usage.json'); const PeopleGrid = require('../../components/people-grid/people-grid.jsx'); const People = require('./people.json'); const BLMProjects = require('./blm-projects.json'); +const Video = require('../../components/Video/video.jsx'); require('./annual-report.scss'); @@ -69,7 +70,8 @@ class AnnualReport extends React.Component { this.state = { currentlyVisible: SECTIONS.message, // The currently visible section - dropdownVisible: false + dropdownVisible: false, + videoOpen: false }; bindAll(this, [ @@ -780,6 +782,16 @@ class AnnualReport extends React.Component { ref={this.setRef(SECTIONS.initiatives)} >
+
+
+

+ +

+

+ +

+
+

@@ -977,7 +989,7 @@ class AnnualReport extends React.Component {

-
+

Black Lives Matter

-
+
@@ -1007,7 +1019,7 @@ class AnnualReport extends React.Component { showViews={false} />
-
+

@@ -1016,6 +1028,39 @@ class AnnualReport extends React.Component {

+ + {this.state.videoOpen ? + ( + +
+
+
+
+

+ +

+

+ +

diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss index 3dc54ae11..d9282c594 100644 --- a/src/views/annual-report/annual-report.scss +++ b/src/views/annual-report/annual-report.scss @@ -506,15 +506,27 @@ p { .initiatives-section { .initiatives-subsection-header { - // background-image: url("/images/annual-report/initiatives/guideline-splash.svg"); + background-image: url("/images/annual-report/initiatives/Juice Pattern.svg"); + padding: 92px 0; //>.initiatives-community { // background-color: $ui-blue-dark; //} + &.tools { + background-color: $ui-aqua; + background-position: 50% 0%; + } + &.community { - background-color: $ui-blue-dark; + background-color: $ui-blue; + background-position: 50% 50%; + } + + &.schools { + background-color: $ui-purple; + background-position: 50% 100%; } .inner { @@ -581,12 +593,13 @@ p { .guidelines-list { display: flex; + flex-wrap: wrap; ul { list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg'); } li { - vertical-align: middle; + // vertical-align: middle; } } @@ -638,6 +651,49 @@ p { line-height: 40px; } } + .comment-text, .comment-text::before, .comment-text::after { + border-color: $ui-blue; + } + } + } + + .community-blm { + display: flex; + flex-wrap: wrap; + + .blm-intro { + max-width: 460px; + } + + .blm-image { + max-width: 380px; + font-size: .875rem; + text-align: center; + } + + .blm-projects { + .flex-row { + max-width: 500px; + flex-wrap: true; + } + } + + .blm-change { + width: 380px; + } + } + + .blm-video-container { + background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg"); + width: 1020px; + height: 500px; + + background-size: 100% auto; + background-repeat: no-repeat; + background-position: 50% 50%; + + img { + width: 576px; } } } diff --git a/static/images/annual-report/initiatives/Juice Pattern.svg b/static/images/annual-report/initiatives/Juice Pattern.svg new file mode 100644 index 000000000..ce442bb3e --- /dev/null +++ b/static/images/annual-report/initiatives/Juice Pattern.svg @@ -0,0 +1,14 @@ + + + Juice Pattern + + + + + + + + + + + \ No newline at end of file