Skip to content

GitLab

S
scratch-www
Commit e2894dd1 authored by carljbowman's avatar carljbowman
Browse files
Options

Fix photo credit typographic styles

parent 3ab4eb18
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 103 deletions
src/views/annual-report/annual-report.jsx
View file @ e2894dd1
...@@ -1519,9 +1519,9 @@ class AnnualReport extends React.Component { ...@@ -1519,9 +1519,9 @@ class AnnualReport extends React.Component {
</div> </div>
<div className="blm-image"> <div className="blm-image">
<img src="/images/annual-report/initiatives/BLM Hero.svg" /> <img src="/images/annual-report/initiatives/BLM Hero.svg" />
<b> <span className="photo-credit">
<FormattedMessage id="annualReport.communityArtwork" /> <FormattedMessage id="annualReport.communityArtwork" />
</b> </span>
</div> </div>
<div className="blm-projects"> <div className="blm-projects">
<Grid <Grid
...@@ -1684,11 +1684,9 @@ class AnnualReport extends React.Component { ...@@ -1684,11 +1684,9 @@ class AnnualReport extends React.Component {
<div className="pizza-img"> <div className="pizza-img">
<img src="/images/annual-report/initiatives/schools/CPS Story/Pizza.svg" /> <img src="/images/annual-report/initiatives/schools/CPS Story/Pizza.svg" />
</div> </div>
<div className="photo-credit"> <span className="photo-credit">
<p>
<FormattedMessage id="annualReport.familyNightsPhotoCredit" /> <FormattedMessage id="annualReport.familyNightsPhotoCredit" />
</p> </span>
</div>
</div> </div>
<div className="inner schools"> <div className="inner schools">
<h4> <h4>
...@@ -1786,12 +1784,14 @@ class AnnualReport extends React.Component { ...@@ -1786,12 +1784,14 @@ class AnnualReport extends React.Component {
<div className="conferences-hero-and-caption"> <div className="conferences-hero-and-caption">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
<span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesHeroImageCaption" id="annualReport.conferencesHeroImageCaption"
values={{ values={{
photoCredit: 'Carmelo Presicce' photoCredit: 'Carmelo Presicce'
}} }}
/> />
</span>
</div> </div>
</MediaQuery> </MediaQuery>
</div> </div>
...@@ -1799,12 +1799,14 @@ class AnnualReport extends React.Component { ...@@ -1799,12 +1799,14 @@ class AnnualReport extends React.Component {
<MediaQuery maxWidth={frameless.mobile - 1}> <MediaQuery maxWidth={frameless.mobile - 1}>
<div className="conferences-hero-and-caption"> <div className="conferences-hero-and-caption">
<div className="conferences-hero" /> <div className="conferences-hero" />
<span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesHeroImageCaption" id="annualReport.conferencesHeroImageCaption"
values={{ values={{
photoCredit: 'Carmelo Presicce' photoCredit: 'Carmelo Presicce'
}} }}
/> />
</span>
</div> </div>
</MediaQuery> </MediaQuery>
<div className="inner schools-conferences bottom"> <div className="inner schools-conferences bottom">
...@@ -1813,12 +1815,14 @@ class AnnualReport extends React.Component { ...@@ -1813,12 +1815,14 @@ class AnnualReport extends React.Component {
<div className="conference-image-and-caption left"> <div className="conference-image-and-caption left">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Latin America Conference.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Latin America Conference.png" />
<span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesLatinAmericaImageCaption" id="annualReport.conferencesLatinAmericaImageCaption"
values={{ values={{
photoCredit: 'Scratch al Sur' photoCredit: 'Scratch al Sur'
}} }}
/> />
</span>
</div> </div>
<div className="conference-title-and-description"> <div className="conference-title-and-description">
<h4> <h4>
...@@ -1887,24 +1891,28 @@ class AnnualReport extends React.Component { ...@@ -1887,24 +1891,28 @@ class AnnualReport extends React.Component {
<div className="conference-image-and-caption"> <div className="conference-image-and-caption">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Europe Conference.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Europe Conference.png" />
<span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesEuropeImageCaption" id="annualReport.conferencesEuropeImageCaption"
values={{ values={{
photoCredit: 'Raspberry Pi' photoCredit: 'Raspberry Pi'
}} }}
/> />
</span>
</div> </div>
</div> </div>
<div className="schools-conferences-region"> <div className="schools-conferences-region">
<div className="conference-image-and-caption left"> <div className="conference-image-and-caption left">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" />
<span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesAfricaImageCaption" id="annualReport.conferencesAfricaImageCaption"
values={{ values={{
photoCredit: 'Carmelo Presicce' photoCredit: 'Carmelo Presicce'
}} }}
/> />
</span>
</div> </div>
<div className="conference-title-and-description"> <div className="conference-title-and-description">
<h4> <h4>
......
src/views/annual-report/annual-report.scss
View file @ e2894dd1
...@@ -41,6 +41,13 @@ p { ...@@ -41,6 +41,13 @@ p {
line-height: 2em; line-height: 2em;
} }
.photo-credit {
font-size: 0.875rem;
line-height: 1.125rem;
text-align: center;
margin-top: 1rem;
}
@media #{$small} { @media #{$small} {
.inner { .inner {
width: $cols4; width: $cols4;
...@@ -1230,17 +1237,6 @@ p { ...@@ -1230,17 +1237,6 @@ p {
} }
} }
} }
.photo-credit {
padding-bottom: 0px;
padding-top: 0px;
p {
font-size: 0.875rem;
line-height: 1.125rem;
font-weight: bold;
}
}
} }
&.schools-conferences { &.schools-conferences {
...@@ -1395,8 +1391,6 @@ p { ...@@ -1395,8 +1391,6 @@ p {
margin-bottom: 24px; margin-bottom: 24px;
img { img {
margin-bottom: 22px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
width: 460px; width: 460px;
} }
...@@ -1983,9 +1977,12 @@ p { ...@@ -1983,9 +1977,12 @@ p {
.blm-image { .blm-image {
max-width: 380px; max-width: 380px;
font-size: .875rem;
text-align: center; text-align: center;
span {
margin-top: 1rem;
}
@media #{$small} { @media #{$small} {
img { img {
width: 300px; width: 300px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment