scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

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

@ -11,6 +11,9 @@
color: $ui-white;
padding: 4rem 0;
.title {
font-size: 2rem;
}
.inner {
justify-content: space-between;
flex-wrap: nowrap;
@ -35,6 +38,10 @@
max-height: 100%;
}
}
.download-description {
font-size: 1.2rem;
line-height: 1.7rem;
}
}
.download-requirements-container {
@ -88,32 +95,10 @@
width: 150px;
height: 80px;
}
.horizontal-divider {
display: block;
margin: 20px;
.title {
margin-bottom: 1rem;
}
.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 {
padding: 4rem 0;
@ -133,8 +118,10 @@
max-width: $cols8;
text-align: left;
}
.faq-title {
margin-bottom: 1rem;
}
.faq-question{
margin-bottom: 0;
font-size: 1.4rem;
}

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

@ -1,6 +1,6 @@
{
"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.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot",
"download.installHeaderTitle": "Install Scratch Desktop",