scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

misc styling changes

Browse source
This commit is contained in:
caseymm 2021-10-18 15:37:37 -07:00
parent 33132818c0
commit 4c29cb5dcc
5 changed files with 70 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/timeline-card/timeline-card.jsx
View file

@ -22,7 +22,7 @@ const TimelineCard = props => (
<VideoPreview
buttonMessage=""
thumbnail={props.image}
thumbnailWidth="300"
thumbnailWidth="100%"
videoHeight="216"
videoId={props.videoId}
videoWidth="380"

9
src/components/timeline-card/timeline-card.scss
View file

@ -2,7 +2,8 @@
@import "../../frameless";
.timeline-card{
width: 450px;
max-width: 450px;
width: calc(100% - 30px);
background-color: $ui-white;
border-radius: 8px;
padding: 15px;
@ -37,4 +38,10 @@
margin-top: 10px;
width: 100%;
}
.video-preview{
margin-top: 15px;
img{
margin-top: 0px;
}
}
}

18
src/views/annual-report/2020/annual-report.jsx
View file

@ -49,7 +49,7 @@ const SECTION_NAMES = {
mission: <FormattedMessage id="annualReport.2020.subnavMission" />,
reach: <FormattedMessage id="annualReport.2020.subnavReach" />,
themes: <FormattedMessage id="annualReport.2020.subnavThemes" />,
directors_message: <FormattedMessage id="annualReport.2020.subnavDirectors_message" />,
directors_message: <FormattedMessage id="annualReport.2020.subnavDirectorsMessage" />,
supporters: <FormattedMessage id="annualReport.2020.subnavSupporters" />,
team: <FormattedMessage id="annualReport.2020.subnavTeam" />,
donate: <FormattedMessage id="annualReport.2020.subnavDonate" />
@ -1255,10 +1255,10 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="inner">
<div className="snapshot bubble adaptation">
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<div className="flex-content lg">
<div className="snapshot bubble adaptation">
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<TextAndMediaSnippet
className="regular"
title={this.props.intl.formatMessage(
@ -1665,7 +1665,7 @@ class AnnualReport extends React.Component {
/>
</div>
<div className="initiatives-subsection-content">
<div className="inner">
<div className="inner community">
<div className="community-quotes">
<div className="community-quote">
<div className="quote-person">
@ -1695,9 +1695,9 @@ class AnnualReport extends React.Component {
<div className="snapshot bubble community">
<FormattedMessage id="annualReport.2020.adaptationSnapshot" />
</div>
<h2>
<h5>
<FormattedMessage id="annualReport.2020.communitySnapshotTitle" />
</h2>
</h5>
<p>
<FormattedMessage id="annualReport.2020.communitySnapshotText" />
</p>
@ -1707,9 +1707,9 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="world">
<h2>
<h5>
<FormattedMessage id="annualReport.2020.communitySnapshot2Title" />
</h2>
</h5>
<p>
<FormattedMessage id="annualReport.2020.communitySnapshot2Text" />
</p>

65
src/views/annual-report/2020/annual-report.scss
View file

@ -735,10 +735,10 @@ a{
}
}
&.connectivity{
background-color: $ui-purple;
background-color: $ui-purple-dark;
}
&.community{
background-color: $ui-blue;
background-color: $ui-blue-dark;
}
&.adaptation{
background-color: $ui-aqua;
@ -1037,7 +1037,7 @@ img.comment-viz{
padding: 92px 0;
&.connectivity {
background-color: $ui-purple;
background-color: $ui-purple-dark;
background-position: 50% 100%;
}
@ -1048,7 +1048,7 @@ img.comment-viz{
}
&.community {
background-color: $ui-blue;
background-color: $ui-blue-dark;
background-position: 50% 50%;
}
@ -1148,15 +1148,18 @@ img.comment-viz{
margin-left: auto;
}
&.inverted{
border: 2.5px solid $ui-purple;
border: 2.5px solid $ui-purple-dark;
background-color: $ui-white;
color: $ui-purple;
color: $ui-purple-dark;
span{
&:before{
background: url("/images/annual-report/2020/Symbols-UI/Arrow_up_purple.svg");
}
}
}
&.snapshot{
padding: 10px 0px;
}
}
.about-breaker{
max-width: 90%;
@ -1182,6 +1185,10 @@ img.comment-viz{
&.center{
text-align: center;
}
&.community h5{
font-size: 28px;
line-height: 1.5;
}
@media #{$big} {
max-width: 940px;
padding: 72px 0;
@ -1252,11 +1259,16 @@ img.comment-viz{
padding: 80px 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
@media #{$intermediate-and-smaller} {
padding: 80px 15px;
}
.upper-wave{
width: 100%;
position: absolute;
top: 50px;
z-index: 0;
left: 0px;
}
.inner {
&.center.yr{
@ -1311,6 +1323,7 @@ img.comment-viz{
position: absolute;
bottom: 50px;
z-index: 0;
left: 0px;
}
}
@ -1358,9 +1371,9 @@ img.comment-viz{
height: 50px;
display: flex;
align-items: center;
justify-content: space-around;
justify-content: space-evenly;
&.community{
background-color: $ui-blue;
background-color: $ui-blue-dark;
}
}
@ -1369,9 +1382,13 @@ img.comment-viz{
width: 100%;
margin-top: -70px;
padding-top: 51.5%;
@media #{$intermediate-and-smaller} {
margin-top: -20px;
}
img{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
}
@ -1381,6 +1398,7 @@ img.comment-viz{
margin-top: 80px;
max-width: 600px;
margin: auto;
margin-top: 70px;
}
}
.moderation-and-guidelines {
@ -1497,7 +1515,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;
border-color: $ui-blue-dark;
}
.comment-text::before {
border-color: $ui-mint-green;
@ -1507,7 +1525,7 @@ img.comment-viz{
border-left-width: 10px;
}
.community.comment-text::before {
border-color: $ui-blue;
border-color: $ui-blue-dark;
}
.community.comment-text::after, .comment-text::after {
border-color: $ui-white;
@ -1634,9 +1652,12 @@ img.comment-viz{
margin: auto;
justify-content: space-around;
align-items:flex-start;
@media #{$intermediate-and-smaller} {
@media #{$small} {
flex-direction: column;
}
.twitter-tweet{
width: 100%;
}
}
}
@ -1669,7 +1690,7 @@ img.comment-viz{
background-image: url("/images/annual-report/initiatives/schools/CPS Story/CPS Video Splash.svg");
.button {
background-color: $ui-purple;
background-color: $ui-purple-dark;
}
}
}
@ -1699,6 +1720,9 @@ img.comment-viz{
justify-content: space-between;
.header{
width: 37%;
h2{
line-height: 1.4;
}
}
.text{
width: 60%;
@ -1726,9 +1750,13 @@ img.comment-viz{
color: $ui-white;
margin-bottom: 0px;
text-align: left;
@media #{$small}{
margin-top: 0px;
}
}
p{
margin-top: 0px;
line-height: 1.4;
}
}
@ -1740,11 +1768,16 @@ img.comment-viz{
max-width: 780px;
display: flex;
flex-direction: column;
text-align: left;
@media #{$intermediate-and-smaller}{
padding: 0 25px;
width: calc(100% - 50px);
}
img.illo{
margin: 40px auto;
margin: 40px 0;
width: 100%;
max-width: 524px;
align-self: center;
// align-self: center;
}
ul{
list-style-type: none;
@ -2119,7 +2152,7 @@ img.comment-viz{
.donate-button {
background-color: $ui-white;
color: $ui-blue;
color: $ui-blue-dark;
height: 66px;
width: 176px;
padding: 0px;
@ -2132,7 +2165,7 @@ img.comment-viz{
line-height: 29px;
a {
color: $ui-blue;
color: $ui-blue-dark;
}
span {

6
src/views/annual-report/2020/l10n.json
View file

@ -190,7 +190,7 @@
"annualReport.2020.yearInReviewCard2Date": "April",
"annualReport.2020.yearInReviewCard2Title": "April Fool’s Day",
"annualReport.2020.yearInReviewCard2Text": "“Mundane mysteries” appeared around the site, and Cat Blocks surprised and delighted the Scratch community.",
"annualReport.2020.yearInReviewCard2Link": "https://scratch.mit.edu/studios/26134426/",
"annualReport.2020.yearInReviewCard2Link": "https://scratch.mit.edu/studios/26160799/",
"annualReport.2020.yearInReviewCard3Date": "April",
"annualReport.2020.yearInReviewCard3Title": "Create-Alongs",
@ -225,7 +225,7 @@
"annualReport.2020.yearInReviewCard9Date": "October",
"annualReport.2020.yearInReviewCard9Title": "Scratchtober",
"annualReport.2020.yearInReviewCard9Text": "Scratchers made hundreds of creative stories, games, and animations based on daily themed prompts.",
"annualReport.2020.yearInReviewCard9Link": "https://docs.google.com/document/d/1yTT5h9RiNTUcDKPqE0wDWo8HsRMOSy4NREk0-0Bmrhk/edit#:~:text=edu/projects/412126066/-,Scratchtober,-scratch.mit.edu",
"annualReport.2020.yearInReviewCard9Link": "https://scratch.mit.edu/studios/27737452",
"annualReport.2020.communityQuote2Name": "Anna Lytical, Scratch Alumni",
"annualReport.2020.communityQuote2Title": "Google Cloud Platform Developer Relations Engineer, and the Coding Drag Queen",
@ -235,7 +235,7 @@
"annualReport.2020.communitySnapshotText": "Our Community Team uses a wide variety of tools and strategies to encourage good digital citizenship and maintain a positive environment for Scratchers to create in. In 2020, we developed a new, more intuitive interface to help Scratchers flag inappropriate content, and improved the tools used by our community moderation team. As a result, we received higher quality reports from the community, and our community moderators were able to work more quickly and efficiently—keeping the site safer and friendlier for everyone.",
"annualReport.2020.communitySnapshot2Title": "New Scratch Tutorials on YouTube",
"annualReport.2020.communitySnapshot2Text": "The Scratch Teambegan sharing tutorials on our YouTube channel in March 2020 to help Scratchers gain the skills to create whatever they can imagine. From pixel art to virtual pets, these tutorials are a hit with Scratchers of all ages, gaining 1.3 million views in 2020.",
"annualReport.2020.communitySnapshot2Text": "The Scratch Team began sharing tutorials on our YouTube channel in March 2020 to help Scratchers gain the skills to create whatever they can imagine. From pixel art to virtual pets, these tutorials are a hit with Scratchers of all ages, gaining 1.3 million views in 2020.",
"annualReport.2020.tutorial1": "Virtual Town",
"annualReport.2020.tutorial2": "Catch Game",