mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
a bunch of color and linting fixes
This commit is contained in:
caseymm
parent
b8091292ca
commit
f09e3e51c4
4 changed files with 133 additions and 48 deletions
|
|
@ -22,6 +22,8 @@ $ui-dark-gray: hsla(0, 0, 70, 1); //#B3B3B3
|
|||
|
||||
$background-color: hsla(0, 0, 99, 1); //#FDFDFD
|
||||
|
||||
$motion-blue-3: hsla(215, 60, 50, 1);//#3373CC
|
||||
|
||||
/* UI Secondary Colors */
|
||||
/* 3.0 colors */
|
||||
/* Using www naming convention for now, should be consistent with gui */
|
||||
|
|
@ -67,5 +69,4 @@ $link-blue: $ui-blue;
|
|||
$dd-darkblue: hsla(195, 72.4, 17.1, 1);
|
||||
$dd-medium-blue: hsla(195, 72.4, 42, .65);
|
||||
|
||||
/* Annual Report Colors */
|
||||
$ui-teal: #297EA4;
|
||||
|
||||
|
|
|
|||
|
|
@ -340,14 +340,18 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/2020/founders-message/Masthead_Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMastheadIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altMastheadIllustration'}
|
||||
)}
|
||||
/>
|
||||
</FlexRow>
|
||||
<MediaQuery minWidth={frameless.desktop}>
|
||||
<img
|
||||
className="wave-icon-desktop"
|
||||
src="/images/annual-report/2020/founders-message/Wave_Icon.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWave'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altWave'}
|
||||
)}
|
||||
/>
|
||||
</MediaQuery>
|
||||
<FlexRow className="message-content">
|
||||
|
|
@ -356,7 +360,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="wave-icon-and-title">
|
||||
<img
|
||||
src="/images/annual-report/2020/founders-message/Wave_Icon.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altWave'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altWave'}
|
||||
)}
|
||||
/>
|
||||
<h2>
|
||||
<FormattedMessage id="annualReport.2020.foundersMessageTitle" />
|
||||
|
|
@ -388,7 +394,9 @@ class AnnualReport extends React.Component {
|
|||
<img
|
||||
className="mitch-photo"
|
||||
src="/images/annual-report/2020/founders-message/mitch_headshot.jpg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMitchHeadshot'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altMitchHeadshot'}
|
||||
)}
|
||||
/>
|
||||
<div className="signature-container">
|
||||
<p className="message-signature">
|
||||
|
|
@ -408,11 +416,15 @@ class AnnualReport extends React.Component {
|
|||
<div className="transition-images">
|
||||
<img
|
||||
src="/images/annual-report/message/blocks.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBlocks'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altBlocks'}
|
||||
)}
|
||||
/>
|
||||
<img
|
||||
src="/images/annual-report/message/banana.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBanana'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altBanana'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -458,7 +470,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/mission/Projects Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altProjectsIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altProjectsIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -473,7 +487,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="small-p four-ps-projects">
|
||||
<img
|
||||
src="/images/annual-report/mission/Projects Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altProjectsIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altProjectsIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -485,7 +501,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/mission/Passion Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPassionIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPassionIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -502,7 +520,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="small-p four-ps-passion">
|
||||
<img
|
||||
src="/images/annual-report/mission/Passion Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPassionIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPassionIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -514,7 +534,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/mission/Peers Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPeersIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPeersIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -529,7 +551,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="small-p four-ps-peers">
|
||||
<img
|
||||
src="/images/annual-report/mission/Peers Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPeersIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPeersIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -541,7 +565,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/mission/Play Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPlayIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPlayIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -556,7 +582,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="small-p four-ps-play">
|
||||
<img
|
||||
src="/images/annual-report/mission/Play Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPlayIllustration'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPlayIllustration'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -578,7 +606,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/2020/data/Calendar.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCalendar'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altCalendar'}
|
||||
)}
|
||||
/>
|
||||
<div className="reach-numbers">
|
||||
<div className="reach-datapoint">
|
||||
|
|
@ -638,7 +668,9 @@ class AnnualReport extends React.Component {
|
|||
<img
|
||||
className="comment-viz"
|
||||
src="/images/annual-report/2020/data/Comments-visualization.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCommentsVisualization'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altCommentsVisualization'}
|
||||
)}
|
||||
/>
|
||||
<div className="reach-datapoint increase">
|
||||
<FormattedMessage
|
||||
|
|
@ -749,7 +781,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="inline">
|
||||
<img
|
||||
src="/images/annual-report/2020/Symbols-UI/Arrow_up.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowUp'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altArrowUp'}
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.reachTranslationIncrease" />
|
||||
</div>
|
||||
|
|
@ -759,7 +793,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/2020/data/translated-illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altTranslated'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altTranslated'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -767,7 +803,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="scratch-jr-transition-img">
|
||||
<img
|
||||
src="/images/annual-report/reach/horizontal-command.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altScratchHorizontalCommand'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altScratchHorizontalCommand'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -777,7 +815,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="scratch-jr-intro">
|
||||
<img
|
||||
src="/images/annual-report/2020/data/ScratchJr_Logo.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altScratchJr'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altScratchJr'}
|
||||
)}
|
||||
/>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2020.reachScratchJrBlurb" />
|
||||
|
|
@ -815,7 +855,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="scratch-jr-transition-img">
|
||||
<img
|
||||
src="/images/annual-report/reach/horizontal-loop.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altHorizontalLoop'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altHorizontalLoop'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
|
|
@ -902,7 +944,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="content around">
|
||||
<img
|
||||
src="/images/annual-report/2020/connectivity/India_Data/data_projectscreatedonline_graphic.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altPieChart'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altPieChart'}
|
||||
)}
|
||||
/>
|
||||
<div className="india-numbers">
|
||||
<h2>
|
||||
|
|
@ -936,7 +980,9 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<img
|
||||
src="/images/annual-report/2020/connectivity/India_Data/data_alltimeusers_graphic.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altUsers'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altUsers'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="content around users">
|
||||
|
|
@ -961,7 +1007,9 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
<img
|
||||
src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowNext'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altArrowNext'}
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id="annualReport.2020.connectivityIndiaUsersNew"
|
||||
|
|
@ -989,7 +1037,9 @@ class AnnualReport extends React.Component {
|
|||
/>
|
||||
<img
|
||||
src="/images/annual-report/2020/Symbols-UI/Arrow_Next_purple.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altArrowNext'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altArrowNext'}
|
||||
)}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id="annualReport.2020.connectivityIndiaProjectsNew"
|
||||
|
|
@ -1223,7 +1273,9 @@ class AnnualReport extends React.Component {
|
|||
<div className="images">
|
||||
<img
|
||||
src="/images/annual-report/2020/adaptation/Aaron Reuland Illustration_Photo.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altAaronReuland'})}
|
||||
alt={this.props.intl.formatMessage(
|
||||
{id: 'annualReport.2020.altAaronReuland'}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1336,7 +1388,7 @@ class AnnualReport extends React.Component {
|
|||
</div>
|
||||
<div className="inner">
|
||||
<div className="flex-content lg">
|
||||
<div className="snapshot bubble adaptation">
|
||||
<div className="snapshot bubble adaptation bump">
|
||||
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
|
||||
</div>
|
||||
<TextAndMediaSnippet
|
||||
|
|
@ -1746,18 +1798,22 @@ class AnnualReport extends React.Component {
|
|||
<img
|
||||
className="april"
|
||||
src="/images/annual-report/2020/community/Timeline/April Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altApril'})}
|
||||
/>
|
||||
<img
|
||||
className="may"
|
||||
src="/images/annual-report/2020/community/Timeline/May Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altMay'})}
|
||||
/>
|
||||
<img
|
||||
className="june"
|
||||
src="/images/annual-report/2020/community/Timeline/June Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altJune'})}
|
||||
/>
|
||||
<img
|
||||
className="july"
|
||||
src="/images/annual-report/2020/community/Timeline/July Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altJuly'})}
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
|
|
@ -1805,7 +1861,10 @@ class AnnualReport extends React.Component {
|
|||
</p>
|
||||
</div>
|
||||
<div className="images">
|
||||
<img src="/images/annual-report/2020/community/Tools Illustration.svg" />
|
||||
<img
|
||||
src="/images/annual-report/2020/community/Tools Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altToolsIllustration'})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="world">
|
||||
|
|
@ -1826,6 +1885,7 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<img
|
||||
src="/images/annual-report/2020/community/tutorials_virtualtown.jpg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altVirtualTown'})}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.tutorial1" />
|
||||
</a>
|
||||
|
|
@ -1838,6 +1898,7 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<img
|
||||
src="/images/annual-report/2020/community/tutorials_catchgame.jpg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCatchGame'})}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.tutorial2" />
|
||||
</a>
|
||||
|
|
@ -1850,6 +1911,7 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<img
|
||||
src="/images/annual-report/2020/community/tutorials_characterdesigner.jpg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altCharacterDesigner'})}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.tutorial3" />
|
||||
</a>
|
||||
|
|
@ -1862,6 +1924,7 @@ class AnnualReport extends React.Component {
|
|||
>
|
||||
<img
|
||||
src="/images/annual-report/2020/community/tutorials_virtualpet.jpg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altVirtualPet'})}
|
||||
/>
|
||||
<FormattedMessage id="annualReport.2020.tutorial4" />
|
||||
</a>
|
||||
|
|
@ -1934,6 +1997,7 @@ class AnnualReport extends React.Component {
|
|||
<img
|
||||
className="illo"
|
||||
src="/images/annual-report/2020/Looking Forward Illustration.svg"
|
||||
alt={this.props.intl.formatMessage({id: 'annualReport.2020.altLookingForward'})}
|
||||
/>
|
||||
<p>
|
||||
<FormattedMessage id="annualReport.2020.lookingForwardText2" />
|
||||
|
|
@ -1943,12 +2007,20 @@ class AnnualReport extends React.Component {
|
|||
</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.legofoundation.com/en/about-us/news/the-lego-foundation-and-scratch-foundation-announce-partnership-to-support-learning-through-play-with-technology-for-millions-of-children-across-the-world/">
|
||||
<a
|
||||
href="https://www.legofoundation.com/en/about-us/news/the-lego-foundation-and-scratch-foundation-announce-partnership-to-support-learning-through-play-with-technology-for-millions-of-children-across-the-world/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="annualReport.2020.learnMoreLink1Text" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.google/outreach-initiatives/education/cs-ed-week-2020/">
|
||||
<a
|
||||
href="https://blog.google/outreach-initiatives/education/cs-ed-week-2020/"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage id="annualReport.2020.learnMoreLink2Text" />
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
@import "../../../frameless";
|
||||
|
||||
$base-bg: $ui-white;
|
||||
$annual-report-aqua: #088763;
|
||||
$annual-report-teal: #297EA4;
|
||||
|
||||
$ui-purple-dark: hsla(260, 55, 55, 1);
|
||||
// $motion-blue-3 #3373CC
|
||||
|
||||
#view {
|
||||
background-color: $ui-white;
|
||||
|
|
@ -43,6 +48,7 @@ p {
|
|||
|
||||
a{
|
||||
cursor: pointer;
|
||||
color: $motion-blue-3;
|
||||
}
|
||||
|
||||
.photo-credit {
|
||||
|
|
@ -72,7 +78,7 @@ a{
|
|||
}
|
||||
|
||||
.message-section {
|
||||
background-color: $ui-teal;
|
||||
background-color: $annual-report-teal;
|
||||
|
||||
h1, h2, p {
|
||||
color: $ui-white;
|
||||
|
|
@ -486,7 +492,7 @@ a{
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
background-color: $ui-teal;
|
||||
background-color: $annual-report-teal;
|
||||
color: $ui-white;
|
||||
|
||||
h2, h3, h4, p {
|
||||
|
|
@ -671,7 +677,7 @@ a{
|
|||
}
|
||||
|
||||
.bubble {
|
||||
background-color: darken($ui-teal, 10%);
|
||||
background-color: darken($annual-report-teal, 10%);
|
||||
border-radius: 50px;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
|
|
@ -686,7 +692,7 @@ a{
|
|||
&.increase{
|
||||
padding: 5px 5px;
|
||||
&.dark{
|
||||
background-color: darken($ui-teal, 15%);
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
padding: 5px 15px;
|
||||
.million{
|
||||
font-size: 14px;
|
||||
|
|
@ -738,10 +744,10 @@ a{
|
|||
background-color: $ui-purple-dark;
|
||||
}
|
||||
&.community{
|
||||
background-color: $ui-blue-dark;
|
||||
background-color: $motion-blue-3;
|
||||
}
|
||||
&.adaptation{
|
||||
background-color: $ui-aqua;
|
||||
background-color: $annual-report-aqua;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -821,7 +827,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.reach-scratch-jr {
|
||||
background-color: darken($ui-teal, 10%);
|
||||
background-color: darken($annual-report-teal, 10%);
|
||||
color: $ui-white;
|
||||
padding: 100px 0;
|
||||
|
||||
|
|
@ -845,7 +851,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.increase-bubble {
|
||||
background-color: darken($ui-teal, 15%);
|
||||
background-color: darken($annual-report-teal, 15%);
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
|
|
@ -1048,7 +1054,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
&.community {
|
||||
background-color: $ui-blue-dark;
|
||||
background-color: $motion-blue-3;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
|
|
@ -1159,6 +1165,12 @@ img.comment-viz{
|
|||
}
|
||||
&.snapshot{
|
||||
padding: 10px 0px;
|
||||
&.bump{
|
||||
margin-left: 45px;
|
||||
@media #{$intermediate-and-smaller} {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.about-breaker{
|
||||
|
|
@ -1373,7 +1385,7 @@ img.comment-viz{
|
|||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
&.community{
|
||||
background-color: $ui-blue-dark;
|
||||
background-color: $motion-blue-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1515,7 +1527,7 @@ img.comment-viz{
|
|||
}
|
||||
// change colors for quotes in different sections
|
||||
.community.comment-text, .community.comment-text::before, .community.comment-text::after {
|
||||
border-color: $ui-blue-dark;
|
||||
border-color: $motion-blue-3;
|
||||
}
|
||||
.comment-text::before {
|
||||
border-color: $ui-mint-green;
|
||||
|
|
@ -1525,7 +1537,7 @@ img.comment-viz{
|
|||
border-left-width: 10px;
|
||||
}
|
||||
.community.comment-text::before {
|
||||
border-color: $ui-blue-dark;
|
||||
border-color: $motion-blue-3;
|
||||
}
|
||||
.community.comment-text::after, .comment-text::after {
|
||||
border-color: $ui-white;
|
||||
|
|
@ -2101,7 +2113,7 @@ img.comment-viz{
|
|||
}
|
||||
|
||||
.donate-section {
|
||||
background-color: $ui-aqua;
|
||||
background-color: $annual-report-aqua;
|
||||
|
||||
.donate-info {
|
||||
justify-content: center;
|
||||
|
|
@ -2152,7 +2164,7 @@ img.comment-viz{
|
|||
|
||||
.donate-button {
|
||||
background-color: $ui-white;
|
||||
color: $ui-blue-dark;
|
||||
color: $motion-blue-3;
|
||||
height: 66px;
|
||||
width: 176px;
|
||||
padding: 0px;
|
||||
|
|
@ -2165,7 +2177,7 @@ img.comment-viz{
|
|||
line-height: 29px;
|
||||
|
||||
a {
|
||||
color: $ui-blue-dark;
|
||||
color: $motion-blue-3;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -2179,7 +2191,7 @@ img.comment-viz{
|
|||
top: 50px;
|
||||
z-index: 9;
|
||||
box-shadow: 0 0 3px $box-shadow-gray;
|
||||
background-color: $ui-teal;
|
||||
background-color: $annual-report-teal;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 39 KiB |
Loading…
Reference in a new issue