mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-22 19:05:56 -04:00
Merge pull request #1365 from mewtaylor/issue/download-tweaks
Tweak some styling for the download page
This commit is contained in:
Matthew Taylor
GitHub
commit
80ae291b9d
2 changed files with 112 additions and 76 deletions
src/views/download
|
|
@ -58,28 +58,25 @@ var Download = React.createClass({
|
|||
<p className="title-banner-p intro">
|
||||
<FormattedMessage id='download.intro' />
|
||||
</p>
|
||||
<p className="title-banner-p intro">
|
||||
<FormattedHTMLMessage id='download.introMac' />
|
||||
</p>
|
||||
</div>
|
||||
<div className="band">
|
||||
<SubNavigation className="inner">
|
||||
<a href="#installation">
|
||||
<a href="#installation" className="sub-nav-item">
|
||||
<li>
|
||||
<FormattedMessage id='download.installation' />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#updates">
|
||||
<a href="#updates" className="sub-nav-item">
|
||||
<li>
|
||||
<FormattedMessage id='download.updatesTitle' />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#other">
|
||||
<a href="#other" className="sub-nav-item">
|
||||
<li>
|
||||
<FormattedMessage id='download.otherVersionsTitle' />
|
||||
</li>
|
||||
</a>
|
||||
<a href="#issues">
|
||||
<a href="#issues" className="sub-nav-item">
|
||||
<li>
|
||||
<FormattedMessage id='download.knownIssuesTitle' />
|
||||
</li>
|
||||
|
|
@ -89,97 +86,111 @@ var Download = React.createClass({
|
|||
</TitleBanner>
|
||||
<div className="download-content">
|
||||
<section id="installation" className="installation">
|
||||
<FlexRow className="three-col-row inner">
|
||||
<div className="installation-column">
|
||||
<h3><FormattedMessage id='download.airTitle' /></h3>
|
||||
<p><FormattedHTMLMessage id='download.airBody' /></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>
|
||||
</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>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.windows' /> -
|
||||
{' '}<a href="http://get.adobe.com/air/">
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="installation-column">
|
||||
<h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
|
||||
<p><FormattedMessage id='download.offlineEditorBody' /></p>
|
||||
{downloadUrls ? [
|
||||
<div className="inner">
|
||||
<p className="callout">
|
||||
<FormattedHTMLMessage id='download.introMac' />
|
||||
</p>
|
||||
<FlexRow className="three-col-row">
|
||||
<div className="installation-column">
|
||||
<div className="installation-column-number">
|
||||
<h2 className="installation-column-number-text">{'1'}</h2>
|
||||
</div>
|
||||
<h3><FormattedMessage id='download.airTitle' /></h3>
|
||||
<p><FormattedHTMLMessage id='download.airBody' /></p>
|
||||
<ul className="installation-downloads">
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.macOSX' /> -
|
||||
{' '}<a href={downloadUrls.mac}>
|
||||
{' '}<a href="http://get.adobe.com/air/">
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.macOlder' /> -
|
||||
{' '}<a href={downloadUrls.mac105}>
|
||||
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.windows' /> -
|
||||
{' '}<a href={downloadUrls.windows}>
|
||||
{' '}<a href="http://get.adobe.com/air/">
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.linux' /> -
|
||||
{' '}<a href={downloadUrls.linux}>
|
||||
{' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
] : []}
|
||||
{this.state.swfVersion === -1 ? [
|
||||
<p><i><FormattedMessage id='download.notAvailable' /></i></p>
|
||||
] : []}
|
||||
</div>
|
||||
<div className="installation-column">
|
||||
<h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
|
||||
<p><FormattedMessage id='download.supportMaterialsBody' /></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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<div className="installation-column">
|
||||
<div className="installation-column-number">
|
||||
<h2 className="installation-column-number-text">{'2'}</h2>
|
||||
</div>
|
||||
<h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
|
||||
<p><FormattedMessage id='download.offlineEditorBody' /></p>
|
||||
{downloadUrls ? [
|
||||
<ul className="installation-downloads">
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.macOSX' /> -
|
||||
{' '}<a href={downloadUrls.mac}>
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.macOlder' /> -
|
||||
{' '}<a href={downloadUrls.mac105}>
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.windows' /> -
|
||||
{' '}<a href={downloadUrls.windows}>
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
<li className="installation-downloads-item">
|
||||
<FormattedMessage id='download.linux' /> -
|
||||
{' '}<a href={downloadUrls.linux}>
|
||||
<FormattedMessage id='download.download' />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
] : []}
|
||||
{this.state.swfVersion === -1 ? [
|
||||
<p><i><FormattedMessage id='download.notAvailable' /></i></p>
|
||||
] : []}
|
||||
</div>
|
||||
<div className="installation-column">
|
||||
<div className="installation-column-number">
|
||||
<h2 className="installation-column-number-text">{'3'}</h2>
|
||||
</div>
|
||||
<h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
|
||||
<p><FormattedMessage id='download.supportMaterialsBody' /></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>
|
||||
</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>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
</section>
|
||||
<div className="inner">
|
||||
<section id="updates">
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@ $developer-spot: $splash-blue;
|
|||
}
|
||||
}
|
||||
|
||||
.sub-nav-item {
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.download-content {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
|
@ -65,6 +69,23 @@ $developer-spot: $splash-blue;
|
|||
|
||||
.installation-column {
|
||||
max-width: $cols4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.installation-column-number {
|
||||
margin: 2rem auto;
|
||||
border: 2px solid $active-gray;
|
||||
border-radius: 2rem;
|
||||
box-shadow: 0 0 0 .5rem lighten($ui-blue, 35);
|
||||
background-color: $ui-blue;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
||||
.installation-column-number-text {
|
||||
text-align: center;
|
||||
line-height: 1.8em;
|
||||
color: $type-white;
|
||||
}
|
||||
|
||||
.installation-downloads {
|
||||
|
|
@ -75,6 +96,7 @@ $developer-spot: $splash-blue;
|
|||
.installation-downloads-item {
|
||||
margin: .25rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
@ -91,8 +113,11 @@ $developer-spot: $splash-blue;
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $desktop - 1) {
|
||||
.three-col-row {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue