scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -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> </SubNavigation>
</div> </div>
</TitleBanner> </TitleBanner>
<div className="download-content">
<div className="inner"> <div className="inner">
<section id="installation"> <section id="installation">
<span className="nav-spacer"></span> <span className="nav-spacer"></span>
<FlexRow className="three-col-row"> <FlexRow className="three-col-row">
<div class="installation column"> <div className="installation-column">
<h3><FormattedMessage id='download.airTitle' /></h3> <h3><FormattedMessage id='download.airTitle' /></h3>
<p><FormattedHTMLMessage id='download.airBody' /></p> <p><FormattedHTMLMessage id='download.airBody' /></p>
<ul class="installation-downloads"> <ul className="installation-downloads">
<li className="installation-downloads-item"> <li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> - <FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/"> {' '}<a href="http://get.adobe.com/air/">
@ -88,55 +89,59 @@ var Download = React.createClass({
</li> </li>
</ul> </ul>
</div> </div>
<div class="installation column"> <div className="installation-column">
<h3><FormattedMessage id='download.offlineEditorTitle' /></h3> <h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
<p><FormattedMessage id='download.offlineEditorBody' /></p> <p><FormattedMessage id='download.offlineEditorBody' /></p>
<p> <ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.macOSX' /> - <FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/"> {' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
<p> <li className="installation-downloads-item">
<FormattedMessage id='download.macOlder' /> - <FormattedMessage id='download.macOlder' /> -
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip"> {' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
<p> <li className="installation-downloads-item">
<FormattedMessage id='download.windows' /> - <FormattedMessage id='download.windows' /> -
{' '}<a href="http://get.adobe.com/air/"> {' '}<a href="http://get.adobe.com/air/">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
<p> <li className="installation-downloads-item">
<FormattedMessage id='download.linux' /> - <FormattedMessage id='download.linux' /> -
{' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin"> {' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
</ul>
</div> </div>
<div className="installation column"> <div className="installation-column">
<h3><FormattedMessage id='download.supportMaterialsTitle' /></h3> <h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
<p><FormattedMessage id='download.supportMaterialsBody' /></p> <p><FormattedMessage id='download.supportMaterialsBody' /></p>
<p> <ul className="installation-downloads">
<li className="installation-downloads-item">
<FormattedMessage id='download.starterProjects' /> - <FormattedMessage id='download.starterProjects' /> -
{' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip"> {' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
<p> <li className="installation-downloads-item">
<FormattedMessage id='download.gettingStarted' /> - <FormattedMessage id='download.gettingStarted' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf"> {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
<p> <li className="installation-downloads-item">
<FormattedMessage id='download.scratchCards' /> - <FormattedMessage id='download.scratchCards' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf"> {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
<FormattedMessage id='download.download' /> <FormattedMessage id='download.download' />
</a> </a>
</p> </li>
</ul>
</div> </div>
</FlexRow> </FlexRow>
</section> </section>
@ -167,6 +172,7 @@ var Download = React.createClass({
</section> </section>
</div> </div>
</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; padding-bottom: 2rem;
}
.installation { .installation {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
} }
.installation .column { .installation-column {
max-width: $cols4; max-width: $cols4;
} }
.installation-downloads {
list-style: none;
} }
.installation-downloads-item {
padding: 0;
margin: 0.25rem;
}
@media only screen and (max-width: $mobile - 1) { @media only screen and (max-width: $mobile - 1) {
.inner { .inner {
.installation .column { .installation-column {
max-width: $cols2; max-width: $cols2;
} }
} }