diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx index 7ddac333c..8032ca6cd 100644 --- a/src/views/annual-report/annual-report.jsx +++ b/src/views/annual-report/annual-report.jsx @@ -730,48 +730,48 @@ class AnnualReport extends React.Component {

- - - - - - - - - - - - + + + + + + + + + + + +
@@ -1705,7 +1705,7 @@ class AnnualReport extends React.Component { /> -
+
@@ -1760,7 +1760,7 @@ class AnnualReport extends React.Component {

-
+

diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss index e0776591f..9196236c2 100644 --- a/src/views/annual-report/annual-report.scss +++ b/src/views/annual-report/annual-report.scss @@ -657,7 +657,6 @@ p { .scratch-jr-transition-img { margin-bottom: -44px; margin-left: 88px; - width: 100%; display: flex; overflow: hidden; @@ -923,10 +922,14 @@ p { align-items: center; @media #{$big} { - max-width: 1032px; + max-width: 940px; padding: 72px; } + @media #{$medium-and-intermediate} { + padding-top: 72px; + } + @media #{$medium} { max-width: 460px; } @@ -945,7 +948,6 @@ p { align-items: flex-start; text-align: left; - padding-top: 10px; padding-bottom: 0px; .subsection-tag { @@ -957,7 +959,8 @@ p { } @media #{$small} { - align-items: center; + padding-top: 32px; + align-items: flex-start; h2 { line-height: 2.5rem; } @@ -970,6 +973,13 @@ p { padding-bottom: 0px; position: relative; + @media #{$medium} { + max-width: 760px; + + padding-top: 10px; + padding-bottom: 10px; + } + .four-pictures { display: flex; flex-direction: row; @@ -1007,8 +1017,21 @@ p { left: 60px; top: 60px; - @media #{$medium-and-smaller} { + @media #{$intermediate} { + left: -20px; + top: -5px; + } + + @media #{$medium} { width: 80px; + left: -90px; + top: -20px; + } + + @media #{$small} { + width: 80px; + left: -80px; + top: -10px; } } @@ -1017,8 +1040,18 @@ p { right: 80px; bottom: 40px; - @media #{$medium-and-smaller} { + @media #{$intermediate} { + right: 0px; + } + + @media #{$medium} { width: 80px; + right: 0px; + } + + @media #{$small} { + width: 80px; + right: 0px; } } @@ -1038,6 +1071,14 @@ p { align-items: flex-start; text-align: left; + &.bottom { + padding-top: 0px; + + @media #{$intermediate-and-smaller} { + padding-top: 32px; + } + } + @media #{$medium} { width: 460px; } @@ -1122,6 +1163,10 @@ p { @media #{$medium-and-smaller} { flex-direction: column; align-items: center; + + &.europe { + flex-direction: column-reverse; + } } .conference-image-and-caption { @@ -1132,6 +1177,10 @@ p { img { width: 300px; } + + @media #{$medium-and-smaller} { + margin-bottom: 32px; + } } .conference-title-and-description { @@ -1232,6 +1281,10 @@ p { margin: 20px 0px; + @media #{$medium-and-smaller} { + flex-direction: column; + } + .icon-and-link { display: flex; align-items: center; @@ -1282,7 +1335,7 @@ p { img { &.left { @media #{$big} { - width: 432px; + height: 420px; } @media #{$intermediate} { width: 340px; @@ -1297,7 +1350,7 @@ p { &.right { @media #{$big} { - width: 780px; + height: 420px; } @media #{$intermediate} { width: 468px; @@ -1620,14 +1673,20 @@ p { .initiatives-community { .community-hero-img { width: 100%; + height: 545px; margin: 52px 0; background-image: url("/images/annual-report/initiatives/community-hero.png"); - background-size: cover; + background-size: contain; + background-repeat: no-repeat; background-position: center center; overflow: hidden; - @media #{$small} { + @media #{$intermediate} { + height: 330px; + } + + @media #{$medium-and-smaller} { height: 244px; } } @@ -1869,7 +1928,7 @@ p { } .video-background { - width: 1020px; + width: 100%; height: 500px; overflow: hidden; @@ -1881,13 +1940,6 @@ p { align-items: center; justify-content: center; - width: 100%; - height: 100%; - - @media #{$big} { - - } - &.blm { background-image: url("/images/annual-report/initiatives/BLM Video Splash.svg"); } diff --git a/static/images/annual-report/donate-illustration.svg b/static/images/annual-report/donate-illustration.svg index b38e87690..c3c269f15 100644 --- a/static/images/annual-report/donate-illustration.svg +++ b/static/images/annual-report/donate-illustration.svg @@ -2,41 +2,41 @@ Donate Illustration - - + + \ No newline at end of file