mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 23:27:54 -05:00
Skeleton of downloads page.
This commit is contained in:
picklesrus
parent
9d5788cc77
commit
2baf5860ca
8 changed files with 336 additions and 333 deletions
|
|
@ -4,13 +4,15 @@ const injectIntl = require('react-intl').injectIntl;
|
||||||
const intlShape = require('react-intl').intlShape;
|
const intlShape = require('react-intl').intlShape;
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
||||||
const api = require('../../lib/api');
|
|
||||||
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
const FlexRow = require('../../components/flex-row/flex-row.jsx');
|
||||||
const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
|
const bindAll = require('lodash.bindall');
|
||||||
const TitleBanner = require('../../components/title-banner/title-banner.jsx');
|
const Steps = require('../../components/steps/steps.jsx');
|
||||||
|
const Step = require('../../components/steps/step.jsx');
|
||||||
|
|
||||||
const Page = require('../../components/page/www/page.jsx');
|
const Page = require('../../components/page/www/page.jsx');
|
||||||
const render = require('../../lib/render.jsx');
|
const render = require('../../lib/render.jsx');
|
||||||
|
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
|
||||||
|
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
|
||||||
|
|
||||||
require('./download.scss');
|
require('./download.scss');
|
||||||
require('../../components/forms/button.scss');
|
require('../../components/forms/button.scss');
|
||||||
|
|
@ -18,246 +20,203 @@ require('../../components/forms/button.scss');
|
||||||
class Download extends React.Component {
|
class Download extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
bindAll(this, [
|
||||||
|
'onSetOS'
|
||||||
|
]);
|
||||||
|
let detectedOS = OS_ENUM.WINDOWS;
|
||||||
|
if (window.navigator && window.navigator.platform) {
|
||||||
|
if (window.navigator.platform === 'MacIntel') {
|
||||||
|
detectedOS = OS_ENUM.MACOS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
swfVersion: ''
|
OS: detectedOS
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
componentDidMount () {
|
|
||||||
let uri = '/scratchr2/static/sa/version.xml';
|
|
||||||
if (this.props.intl.locale === 'pt-br') {
|
|
||||||
uri = '/scratchr2/static/sa/pt-br/version.xml';
|
|
||||||
}
|
|
||||||
|
|
||||||
api({
|
onSetOS (os) {
|
||||||
host: '',
|
this.setState({
|
||||||
uri: uri,
|
OS: os
|
||||||
responseType: 'string'
|
|
||||||
}, (err, body, res) => {
|
|
||||||
if (err || res.statusCode >= 400) {
|
|
||||||
return this.setState({
|
|
||||||
swfVersion: -1
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const doc = new DOMParser().parseFromString(body, 'text/xml');
|
|
||||||
return this.setState({
|
|
||||||
swfVersion: doc.getElementsByTagName('versionNumber')[0].childNodes[0].nodeValue
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
render () {
|
|
||||||
let downloadPath = '/scratchr2/static/sa/Scratch-';
|
|
||||||
let downloadUrls = null;
|
|
||||||
if (this.props.intl.locale === 'pt-br') {
|
|
||||||
downloadPath = '/scratchr2/static/sa/pt-br/Scratch-';
|
|
||||||
}
|
|
||||||
if (this.state.swfVersion.length > 0 && this.state.swfVersion !== -1) {
|
|
||||||
downloadUrls = {
|
|
||||||
mac: `${downloadPath}${this.state.swfVersion}.dmg`,
|
|
||||||
mac105: `${downloadPath}${this.state.swfVersion}.air`,
|
|
||||||
windows: `${downloadPath}${this.state.swfVersion}.exe`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className="download">
|
<div className="download">
|
||||||
<TitleBanner className="masthead">
|
<div className="download-header">
|
||||||
<div className="inner">
|
<FlexRow className="inner">
|
||||||
<h1 className="title-banner-h1">
|
<FlexRow className="column download-info">
|
||||||
<FormattedMessage id="download.title" />
|
<FlexRow className="column download-copy">
|
||||||
</h1>
|
<h1 className="title"><img
|
||||||
<p className="title-banner-p intro">
|
alt=""
|
||||||
<FormattedMessage id="download.intro" />
|
height="40"
|
||||||
</p>
|
src="/images/download/placeholder.png"
|
||||||
</div>
|
width="40"
|
||||||
<div className="band">
|
/>
|
||||||
<SubNavigation className="inner">
|
<FormattedMessage id="download.title" />
|
||||||
<a
|
</h1>
|
||||||
className="sub-nav-item"
|
<FormattedMessage id="download.intro" />
|
||||||
href="#installation"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id="download.installation" />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="sub-nav-item"
|
|
||||||
href="#updates"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id="download.updatesTitle" />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="sub-nav-item"
|
|
||||||
href="#other"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id="download.otherVersionsTitle" />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="sub-nav-item"
|
|
||||||
href="#issues"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
<FormattedMessage id="download.knownIssuesTitle" />
|
|
||||||
</li>
|
|
||||||
</a>
|
|
||||||
</SubNavigation>
|
|
||||||
</div>
|
|
||||||
</TitleBanner>
|
|
||||||
<div className="download-content">
|
|
||||||
<section
|
|
||||||
className="installation"
|
|
||||||
id="installation"
|
|
||||||
>
|
|
||||||
<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="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>
|
|
||||||
</ul>
|
|
||||||
</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 === null ? [] : [
|
|
||||||
<ul
|
|
||||||
className="installation-downloads"
|
|
||||||
key="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>
|
|
||||||
</ul>
|
|
||||||
]}
|
|
||||||
{this.state.swfVersion === -1 ? [
|
|
||||||
<p key="not-available">
|
|
||||||
<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>
|
</FlexRow>
|
||||||
|
<FlexRow className="column download-requirements-container">
|
||||||
|
<span className="requirements-header">
|
||||||
|
<FormattedMessage id="download.requirements" />
|
||||||
|
</span>
|
||||||
|
<FlexRow className="download-requirements">
|
||||||
|
<span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/svgs/extensions/windows.svg"
|
||||||
|
/>
|
||||||
|
Windows 10+
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="svgs/extensions/mac.svg"
|
||||||
|
/>
|
||||||
|
macOS 10.13+
|
||||||
|
</span>
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
<div className="download-image">
|
||||||
|
<img
|
||||||
|
alt={this.props.intl.formatMessage({id: 'download.imgAltDownloadIllustration'})}
|
||||||
|
src="/images/download/download.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</FlexRow>
|
||||||
<div className="inner">
|
</div>
|
||||||
<section id="updates">
|
|
||||||
<span className="nav-spacer" />
|
|
||||||
<h2><FormattedMessage id="download.updatesTitle" /></h2>
|
|
||||||
<p><FormattedMessage id="download.updatesBody" /></p>
|
|
||||||
{this.state.swfVersion === -1 ? [] : [
|
|
||||||
<p key="current-version">
|
|
||||||
<FormattedMessage
|
|
||||||
id="download.currentVersion"
|
|
||||||
values={{
|
|
||||||
version: this.state.swfVersion
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
]}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="other">
|
<OSChooser
|
||||||
<span className="nav-spacer" />
|
currentOS={this.state.OS}
|
||||||
<h2><FormattedMessage id="download.otherVersionsTitle" /></h2>
|
handleSetOS={this.onSetOS}
|
||||||
<p><FormattedHTMLMessage id="download.otherVersionsOlder" /></p>
|
/>
|
||||||
<p><FormattedHTMLMessage id="download.otherVersionsAdmin" /></p>
|
<div className="blue install-scratch">
|
||||||
</section>
|
<FlexRow className="inner column">
|
||||||
|
<h2><FormattedMessage id="download.installHeaderTitle" /></h2>
|
||||||
|
<Steps>
|
||||||
|
<div className="step">
|
||||||
|
<Step
|
||||||
|
compact
|
||||||
|
number={1}
|
||||||
|
>
|
||||||
|
<span className="step-description">
|
||||||
|
<FormattedMessage id="download.downloadAndInstall" />
|
||||||
|
</span>
|
||||||
|
<div className="downloads-container">
|
||||||
|
<a
|
||||||
|
href={
|
||||||
|
this.state.OS === OS_ENUM.WINDOWS ?
|
||||||
|
'FILL ME IN' :
|
||||||
|
''
|
||||||
|
}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
className="store-badge"
|
||||||
|
src={`/images/scratchlink/${
|
||||||
|
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||||
|
}-store-badge.svg`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<span className="horizontal-divider">
|
||||||
|
<FormattedMessage id="download.or" />
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href={`https://downloads.scratch.mit.edu/link/${
|
||||||
|
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||||
|
}.zip`}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="download.directDownload" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</Step>
|
||||||
|
|
||||||
<section id="issues">
|
</div>
|
||||||
<span className="nav-spacer" />
|
<Step
|
||||||
<h2><FormattedMessage id="download.knownIssuesTitle" /></h2>
|
compact
|
||||||
<p><FormattedMessage id="download.knownIssuesOne" /></p>
|
number={2}
|
||||||
<p><FormattedMessage id="download.knownIssuesTwo" /></p>
|
|
||||||
<p><FormattedHTMLMessage id="download.knownIssuesThree" /></p>
|
|
||||||
<p><FormattedMessage id="download.knownIssuesFour" /></p>
|
|
||||||
<a
|
|
||||||
className="button mod-link"
|
|
||||||
href="https://scratch.mit.edu/discuss/3/"
|
|
||||||
>
|
>
|
||||||
<FormattedMessage id="download.reportBugs" />
|
<span className="step-description">
|
||||||
</a>
|
<FormattedMessage id="download.startScratchLink" />
|
||||||
</section>
|
</span>
|
||||||
</div>
|
<div className="step-image">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
className="screenshot"
|
||||||
|
src={`/images/scratchlink/${
|
||||||
|
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
|
||||||
|
}-toolbar.png`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
</FlexRow>
|
||||||
|
</div>
|
||||||
|
<div className="download-section faq">
|
||||||
|
<FlexRow className="inner column">
|
||||||
|
<h2><FormattedMessage id="download.troubleshootingTitle" /></h2>
|
||||||
|
<h3 className="faq-title"><FormattedMessage id="download.haveYouInstalled" /></h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="download.answerInstalled" />
|
||||||
|
</p>
|
||||||
|
<h3 className="faq-title"><FormattedMessage id="download.question2" /></h3>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage id="download.question2" />
|
||||||
|
</p>
|
||||||
|
</FlexRow>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="download-section blue">
|
||||||
|
<FlexRow className="inner column">
|
||||||
|
<h2><FormattedMessage id="download.olderVersions" /></h2>
|
||||||
|
<h3 className="faq-title"><FormattedMessage id="download.lookingForOlder" /></h3>
|
||||||
|
<FlexRow>
|
||||||
|
<div className="older-version">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
className="screenshot"
|
||||||
|
height="106"
|
||||||
|
src="/images/download/scratch1-4.png"
|
||||||
|
width="150"
|
||||||
|
/>
|
||||||
|
<p>
|
||||||
|
<a href="/scratch_1.4">
|
||||||
|
<FormattedMessage id="download.scratch14Desktop" />
|
||||||
|
<img src="images/download/r-arrow.svg" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="older-version">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
className="screenshot"
|
||||||
|
height="106"
|
||||||
|
src="/images/download/scratch2.png"
|
||||||
|
width="150"
|
||||||
|
/>
|
||||||
|
<p>
|
||||||
|
<a href="/download/scratch2">
|
||||||
|
<FormattedMessage id="download.scratch2Desktop" />
|
||||||
|
<img src="images/download/r-arrow.svg" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Download.propTypes = {
|
Download.propTypes = {
|
||||||
intl: intlShape
|
intl: intlShape
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const WrappedDownload = injectIntl(Download);
|
const WrappedDownload = injectIntl(Download);
|
||||||
|
|
|
||||||
|
|
@ -6,123 +6,152 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.download {
|
.download {
|
||||||
.title-banner {
|
.download-header {
|
||||||
&.masthead {
|
|
||||||
margin-bottom: 0;
|
|
||||||
background-color: $ui-blue-dark;
|
|
||||||
padding-bottom: 0;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0 0 2rem 0;
|
|
||||||
text-align: left;
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
color: $ui-white;
|
|
||||||
|
|
||||||
a {
|
|
||||||
border-bottom: 1px solid $ui-white;
|
|
||||||
color: $ui-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.band {
|
|
||||||
margin-top: 2rem;
|
|
||||||
background-color: $ui-white-15percent;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-nav {
|
|
||||||
text-align: left;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0 .5rem 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-nav-item {
|
|
||||||
margin: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.callout {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-content {
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.three-col-row {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.installation {
|
|
||||||
background-color: $ui-gray;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.installation-column {
|
|
||||||
max-width: $cols4;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-right: .5rem;
|
|
||||||
margin-left: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.installation-column-number {
|
|
||||||
margin: 2rem auto;
|
|
||||||
border: 2px solid $active-gray;
|
|
||||||
border-radius: 2rem;
|
|
||||||
background-color: $ui-blue;
|
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 {
|
|
||||||
padding-left: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.installation-downloads-item {
|
|
||||||
margin: .25rem;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mod-link {
|
|
||||||
color: $ui-white;
|
color: $ui-white;
|
||||||
}
|
padding: 4rem 0;
|
||||||
|
|
||||||
@media #{$small} {
|
|
||||||
.inner {
|
.inner {
|
||||||
.installation-column {
|
justify-content: space-between;
|
||||||
max-width: 100%;
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-info {
|
||||||
|
padding-right: $cols1;
|
||||||
|
max-width: $cols7 + ($gutter / $em);
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.download-copy {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
color: $ui-white;
|
||||||
|
|
||||||
|
img {
|
||||||
|
padding-right: .5rem;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-requirements-container {
|
||||||
|
font-weight: 500;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.requirements-header {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-requirements {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-requirements span {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-requirements span img {
|
||||||
|
padding-right: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.download-image {
|
||||||
|
width: 100%;
|
||||||
|
max-width: $cols4;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@media #{$intermediate-and-smaller} {
|
|
||||||
.three-col-row {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.install-scratch {
|
||||||
|
padding: 2rem 0;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloads-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-badge {
|
||||||
|
display: block;
|
||||||
|
width: 150px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-divider {
|
||||||
|
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 {
|
||||||
|
padding: 4rem 0;
|
||||||
|
.inner {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: $ui-blue-10percent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
p {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
margin-left: 0;
|
||||||
|
max-width: $cols8;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-title {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.older-version {
|
||||||
|
padding-right: 24px;
|
||||||
|
p {
|
||||||
|
color: $link-blue;
|
||||||
|
font-weight:600;
|
||||||
|
}
|
||||||
|
.screenshot {
|
||||||
|
$img-border: rgba(0, 0, 0, .05);
|
||||||
|
border: 2px solid $img-border;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: $ui-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
static/images/download/desktop.png
Normal file
BIN
static/images/download/desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
static/images/download/download.png
Normal file
BIN
static/images/download/download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
static/images/download/placeholder.png
Normal file
BIN
static/images/download/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
15
static/images/download/r-arrow.svg
Normal file
15
static/images/download/r-arrow.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Arrow-Right</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs>
|
||||||
|
<path d="M10.1575922,16.994103 C9.84650021,16.994103 9.55614768,16.8751967 9.34045723,16.6608889 L4.99899559,12.3194272 C4.66301623,11.9627084 4.57314521,11.4621959 4.75980041,11.0321977 C4.94507298,10.6021994 5.35433178,10.3367342 5.82857425,10.3367342 L7.47528788,10.3367342 L8.31454496,4.29463633 C8.43483386,3.36965613 9.23952516,2.6658969 10.1866275,2.6658969 C10.2682027,2.6658969 10.3511606,2.67142742 10.4327358,2.68110584 C11.2872018,2.81522106 11.9467168,3.48164924 12.0504142,4.30154948 L12.9117934,10.3367342 L14.4866102,10.3367342 C14.9663832,10.3367342 15.3936162,10.618791 15.5747408,11.0543198 C15.7558655,11.4926138 15.6576987,11.9779173 15.3161888,12.3194272 L10.9747272,16.6608889 C10.7590367,16.8751967 10.4686842,16.994103 10.1575922,16.994103" id="path-1"></path>
|
||||||
|
</defs>
|
||||||
|
<g id="Arrow-Right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<mask id="mask-2" fill="white">
|
||||||
|
<use xlink:href="#path-1"></use>
|
||||||
|
</mask>
|
||||||
|
<use id="Fill-1" fill="#4C97FF" transform="translate(10.164103, 9.830000) rotate(-90.000000) translate(-10.164103, -9.830000) " xlink:href="#path-1"></use>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/images/download/scratch1-4.png
Normal file
BIN
static/images/download/scratch1-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
static/images/download/scratch2.png
Normal file
BIN
static/images/download/scratch2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
Loading…
Reference in a new issue