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

Fix line spacing and font size along with a message.

Browse source
This commit is contained in:
picklesrus 2018-12-10 19:34:23 -05:00
parent 422a5864a2
commit 8bfa310f5a
3 changed files with 25 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/views/download/download.jsx
View file

@ -55,7 +55,9 @@ class Download extends React.Component {
/> />
<FormattedMessage id="download.title" /> <FormattedMessage id="download.title" />
</h1> </h1>
<FormattedMessage id="download.intro" /> <span className="download-description">
<FormattedMessage id="download.intro" />
</span>
</FlexRow> </FlexRow>
<FlexRow className="column download-requirements-container"> <FlexRow className="column download-requirements-container">
<span className="requirements-header"> <span className="requirements-header">
@ -93,7 +95,7 @@ class Download extends React.Component {
/> />
<div className="blue install-scratch"> <div className="blue install-scratch">
<FlexRow className="inner column"> <FlexRow className="inner column">
<h2> <h2 className="title">
<FormattedMessage id="download.installHeaderTitle" /> <FormattedMessage id="download.installHeaderTitle" />
</h2> </h2>
<Steps> <Steps>
@ -148,23 +150,25 @@ class Download extends React.Component {
</div> </div>
<div className="download-section faq"> <div className="download-section faq">
<FlexRow className="inner column"> <FlexRow className="inner column">
<h2><FormattedMessage id="download.troubleshootingTitle" /></h2> <h2 className="faq-title">
<FormattedMessage id="download.troubleshootingTitle" />
</h2>
<h3 className="faq-title"> <h3 className="faq-question">
<FormattedMessage id="download.howDoIInstall" /> <FormattedMessage id="download.howDoIInstall" />
</h3> </h3>
<p> <p>
You will need to install lorem ipsum dolor sit amet, consectetur adipiscing elit. You will need to install lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </p>
<h3 className="faq-title"> <h3 className="faq-question">
<FormattedMessage id="download.whenSupportLinux" /> <FormattedMessage id="download.whenSupportLinux" />
</h3> </h3>
<p> <p>
<FormattedMessage id="download.supportLinuxAnswer" /> <FormattedMessage id="download.supportLinuxAnswer" />
</p> </p>
<h3 className="faq-title"> <h3 className="faq-question">
<FormattedMessage id="download.supportChromeOS" /> <FormattedMessage id="download.supportChromeOS" />
</h3> </h3>
<p> <p>
@ -172,7 +176,7 @@ class Download extends React.Component {
</p> </p>
<h3 className="faq-title"> <h3 className="faq-question">
{ this.state.OS === OS_ENUM.WINDOWS ? { this.state.OS === OS_ENUM.WINDOWS ?
<FormattedMessage id="download.cannotAccessWindowsStore" /> : <FormattedMessage id="download.cannotAccessWindowsStore" /> :
<FormattedMessage id="download.cannotAccessMacStore" /> <FormattedMessage id="download.cannotAccessMacStore" />
@ -197,7 +201,7 @@ class Download extends React.Component {
<h2> <h2>
<FormattedMessage id="download.olderVersionsTitle" /> <FormattedMessage id="download.olderVersionsTitle" />
</h2> </h2>
<h3 className="faq-title"> <h3 className="faq-question">
<FormattedMessage id="download.olderVersions" /> <FormattedMessage id="download.olderVersions" />
</h3> </h3>
<FlexRow> <FlexRow>

37
src/views/download/download.scss
View file

@ -11,6 +11,9 @@
color: $ui-white; color: $ui-white;
padding: 4rem 0; padding: 4rem 0;
.title {
font-size: 2rem;
}
.inner { .inner {
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -35,6 +38,10 @@
max-height: 100%; max-height: 100%;
} }
} }
.download-description {
font-size: 1.2rem;
line-height: 1.7rem;
}
} }
.download-requirements-container { .download-requirements-container {
@ -88,32 +95,10 @@
width: 150px; width: 150px;
height: 80px; height: 80px;
} }
.title {
.horizontal-divider { margin-bottom: 1rem;
display: block;
margin: 20px;
} }
.horizontal-divider:before,
.horizontal-divider:after {
display: inline-block;
position: relative;
background-color: $ui-dark-gray;
width: 50%;
height: 1px;
vertical-align: middle;
content: "";
}
.horizontal-divider:before {
right: .5em;
margin-left: -50%;
}
.horizontal-divider:after {
left: .5em;
margin-right: -50%;
}
} }
.download-section { .download-section {
padding: 4rem 0; padding: 4rem 0;
@ -133,8 +118,10 @@
max-width: $cols8; max-width: $cols8;
text-align: left; text-align: left;
} }
.faq-title { .faq-title {
margin-bottom: 1rem;
}
.faq-question{
margin-bottom: 0; margin-bottom: 0;
font-size: 1.4rem; font-size: 1.4rem;
} }

2
src/views/download/l10n.json
View file

@ -1,6 +1,6 @@
{ {
"download.title": "Scratch 3.0 Desktop", "download.title": "Scratch 3.0 Desktop",
"download.intro": "You can install the Scratch 3.0 editor to work on projects without an internet connection. This version will work on Windows and MacOS", "download.intro": "You can install the Scratch 3.0 editor to work on projects without an internet connection. This version will work on Windows and MacOS.",
"download.requirements": "Requirements", "download.requirements": "Requirements",
"download.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot", "download.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot",
"download.installHeaderTitle": "Install Scratch Desktop", "download.installHeaderTitle": "Install Scratch Desktop",