scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Download Page Restyle

Browse source
This commit is contained in:
The_Grits 2017-05-20 00:24:18 -04:00 committed by GitHub
parent f901d3b429
commit fadf0a3346
2 changed files with 141 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -54,14 +54,15 @@ var Download = React.createClass({
</SubNavigation>
</div>
</TitleBanner>
<div className="download-content">
<div className="inner">
<section id="installation">
<span className="nav-spacer"></span>
<FlexRow className="three-col-row">
<div class="installation column">
<div className="installation-column">
<h3><FormattedMessage id='download.airTitle' /></h3>
<p><FormattedHTMLMessage id='download.airBody' /></p>
<ul class="installation-downloads">
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/">
@ -88,55 +89,59 @@ var Download = React.createClass({
</li>
</ul>
</div>
<div class="installation column">
<div className="installation-column">
<h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
<p><FormattedMessage id='download.offlineEditorBody' /></p>
<p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</p>
<p>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.macOlder' /> -
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
<FormattedMessage id='download.download' />
</a>
</p>
<p>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.windows' /> -
{' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' />
</a>
</p>
<p>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.linux' /> -
{' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
<FormattedMessage id='download.download' />
</a>
</p>
</li>
</ul>
</div>
<div className="installation column">
<div className="installation-column">
<h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
<p><FormattedMessage id='download.supportMaterialsBody' /></p>
<p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.starterProjects' /> -
{' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
<FormattedMessage id='download.download' />
</a>
</p>
<p>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.gettingStarted' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
<FormattedMessage id='download.download' />
</a>
</p>
<p>
</li>
<li className="installation-downloads-item">
<FormattedMessage id='download.scratchCards' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
<FormattedMessage id='download.download' />
</a>
</p>
</li>
</ul>
</div>
</FlexRow>
</section>
@ -167,6 +172,7 @@ var Download = React.createClass({
</section>
</div>
</div>
</div>
);
}
});

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

@ -49,23 +49,34 @@ $developer-spot: $ui-yellow;
}
}
}
.inner {
.download-content {
padding-bottom: 2rem;
}
.installation {
display: flex;
flex-wrap: wrap;
align-items: center;
align-items: flex-start;
justify-content: space-between;
}
.installation .column {
.installation-column {
max-width: $cols4;
}
.installation-downloads {
list-style: none;
}
.installation-downloads-item {
padding: 0;
margin: 0.25rem;
}
@media only screen and (max-width: $mobile - 1) {
.inner {
.installation .column {
.installation-column {
max-width: $cols2;
}
}