Skip to content

GitLab

S
scratch-www
Commit 80ae291b authored by Matthew Taylor's avatar Matthew Taylor Committed by GitHub
Browse files
Options

Merge pull request #1365 from mewtaylor/issue/download-tweaks 

Tweak some styling for the download page
parents dd923aa5 dbb4fcc8
Show whitespace changes
Inline Side-by-side
Showing with 112 additions and 76 deletions
src/views/download/download.jsx
View file @ 80ae291b
......@@ -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,8 +86,15 @@ var Download = React.createClass({
</TitleBanner>
<div className="download-content">
<section id="installation" className="installation">
<FlexRow className="three-col-row inner">
<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">
......@@ -121,6 +125,9 @@ var Download = React.createClass({
</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 ? [
......@@ -156,6 +163,9 @@ var Download = React.createClass({
] : []}
</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">
......@@ -180,6 +190,7 @@ var Download = React.createClass({
</ul>
</div>
</FlexRow>
</div>
</section>
<div className="inner">
<section id="updates">
......
src/views/download/download.scss
View file @ 80ae291b
......@@ -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;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment