scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

clean up some css and align some images with text

Browse source
This commit is contained in:
picklesrus 2018-12-11 10:11:06 -05:00
parent 8bfa310f5a
commit 77c311ccea
2 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,13 +47,15 @@ class Download extends React.Component {
<FlexRow className="inner">
<FlexRow className="column download-info">
<FlexRow className="column download-copy">
<h1 className="title"><img
alt=""
height="40"
src="/images/download/placeholder.png"
width="40"
/>
<FormattedMessage id="download.title" />
<h1 className="download-title">
<img
alt=""
className="self-center"
height="40"
src="/images/download/placeholder.png"
width="40"
/>
<FormattedMessage id="download.title" />
</h1>
<span className="download-description">
<FormattedMessage id="download.intro" />
@ -150,7 +152,7 @@ class Download extends React.Component {
</div>
<div className="download-section faq">
<FlexRow className="inner column">
<h2 className="faq-title">
<h2 className="title">
<FormattedMessage id="download.troubleshootingTitle" />
</h2>
@ -175,7 +177,6 @@ class Download extends React.Component {
<FormattedMessage id="download.supportChromeOSAnswer" />
</p>
<h3 className="faq-question">
{ this.state.OS === OS_ENUM.WINDOWS ?
<FormattedMessage id="download.cannotAccessWindowsStore" /> :
@ -198,7 +199,7 @@ class Download extends React.Component {
</div>
<div className="download-section blue">
<FlexRow className="inner column">
<h2>
<h2 className="title">
<FormattedMessage id="download.olderVersionsTitle" />
</h2>
<h3 className="faq-question">
@ -214,7 +215,7 @@ class Download extends React.Component {
width="150"
/>
<p>
<a href="/scratch_1.4">
<a className="centered" href="/scratch_1.4">
<FormattedMessage id="download.scratch1-4Desktop" />
<img src="images/download/r-arrow.svg" />
</a>
@ -229,7 +230,7 @@ class Download extends React.Component {
width="150"
/>
<p>
<a href="/download/scratch2">
<a className="centered" href="/download/scratch2">
<FormattedMessage id="download.scratch2Desktop" />
<img src="images/download/r-arrow.svg" />
</a>

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

@ -6,13 +6,22 @@
}
.download {
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
.centered {
display: flex;
}
.self-center {
align-self: center;
}
.download-header {
background-color: $ui-blue;
color: $ui-white;
padding: 4rem 0;
.title {
font-size: 2rem;
color: $ui-white;
}
.inner {
justify-content: space-between;
@ -28,8 +37,9 @@
margin-bottom: 5rem;
align-items: flex-start;
h1, h2 {
.download-title {
display: flex;
font-size: 2rem;
margin-bottom: 2rem;
color: $ui-white;
@ -76,7 +86,6 @@
max-width: 100%;
max-height: 100%;
}
}
}
.install-scratch {
@ -95,10 +104,6 @@
width: 150px;
height: 80px;
}
.title {
margin-bottom: 1rem;
}
}
.download-section {
padding: 4rem 0;
@ -118,9 +123,6 @@
max-width: $cols8;
text-align: left;
}
.faq-title {
margin-bottom: 1rem;
}
.faq-question{
margin-bottom: 0;
font-size: 1.4rem;