From fadf0a33466d7a79074e787017a46819600aad61 Mon Sep 17 00:00:00 2001
From: The_Grits <TheGrits@users.noreply.github.com>
Date: Sat, 20 May 2017 00:24:18 -0400
Subject: [PATCH] Download Page Restyle

---
 src/views/download/download.jsx  | 228 ++++++++++++++++---------------
 src/views/download/download.scss |  37 +++--
 2 files changed, 141 insertions(+), 124 deletions(-)

diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx
index a466b78b5..484087f49 100644
--- a/src/views/download/download.jsx
+++ b/src/views/download/download.jsx
@@ -54,117 +54,123 @@ var Download = React.createClass({
                         </SubNavigation>
                     </div>
                 </TitleBanner>
-                <div className="inner">
-                    <section id="installation">
-                        <span className="nav-spacer"></span>
-                        <FlexRow className="three-col-row">
-                            <div class="installation column">
-                                <h3><FormattedMessage id='download.airTitle' /></h3>
-                                <p><FormattedHTMLMessage id='download.airBody' /></p>
-                                <ul class="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 class="installation column">
-                                <h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
-                                <p><FormattedMessage id='download.offlineEditorBody' /></p>
-                                <p>
-                                    <FormattedMessage id='download.macOSX' /> -
-                                    {' '}<a href="http://get.adobe.com/air/">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                                <p>
-                                    <FormattedMessage id='download.macOlder' /> -
-                                    {' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                                <p>
-                                    <FormattedMessage id='download.windows' /> -
-                                    {' '}<a href="http://get.adobe.com/air/">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                                <p>
-                                    <FormattedMessage id='download.linux' /> -
-                                    {' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                            </div>
-                            <div className="installation column">
-                                <h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
-                                <p><FormattedMessage id='download.supportMaterialsBody' /></p>
-                                <p>
-                                    <FormattedMessage id='download.starterProjects' /> -
-                                    {' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                                <p>
-                                    <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>
-                                </p>
-                                <p>
-                                    <FormattedMessage id='download.scratchCards' /> -
-                                    {' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
-                                        <FormattedMessage id='download.download' />
-                                    </a>
-                                </p>
-                            </div>
-                        </FlexRow>
-                    </section>
-                    
-                    <section id="updates">
-                        <span className="nav-spacer"></span>
-                        <h2><FormattedMessage id='download.updatesTitle' /></h2>
-                        <p><FormattedMessage id='download.updatesBody' /></p>
-                        <p><FormattedMessage id='download.currentVersion' /></p>
-                    </section>
-                    
-                    <section id="other">
-                        <span className="nav-spacer"></span>
-                        <h2><FormattedMessage id='download.otherVersionsTitle' /></h2>
-                        <p><FormattedHTMLMessage id='download.otherVersionsOlder' /></p>
-                        <p><FormattedHTMLMessage id='download.otherVersionsAdmin' /></p>
-                    </section>
-                    
-                    <section id="issues">
-                        <span className="nav-spacer"></span>
-                        <h2><FormattedMessage id='download.knownIssuesTitle' /></h2>
-                        <p><FormattedMessage id='download.knownIssuesOne' /></p>
-                        <p><FormattedMessage id='download.knownIssuesTwo' /></p>
-                        <p><FormattedHTMLMessage id='download.knownIssuesThree' /></p>
-                        <a href="https://scratch.mit.edu/discuss/3/" className='button'>
-                            <FormattedMessage id='download.reportBugs' />
-                        </a>
-                    </section>
+                <div className="download-content">
+                    <div className="inner">
+                        <section id="installation">
+                            <span className="nav-spacer"></span>
+                            <FlexRow className="three-col-row">
+                                <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>
+                                    <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.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>
+                        </section>
+
+                        <section id="updates">
+                            <span className="nav-spacer"></span>
+                            <h2><FormattedMessage id='download.updatesTitle' /></h2>
+                            <p><FormattedMessage id='download.updatesBody' /></p>
+                            <p><FormattedMessage id='download.currentVersion' /></p>
+                        </section>
+
+                        <section id="other">
+                            <span className="nav-spacer"></span>
+                            <h2><FormattedMessage id='download.otherVersionsTitle' /></h2>
+                            <p><FormattedHTMLMessage id='download.otherVersionsOlder' /></p>
+                            <p><FormattedHTMLMessage id='download.otherVersionsAdmin' /></p>
+                        </section>
+
+                        <section id="issues">
+                            <span className="nav-spacer"></span>
+                            <h2><FormattedMessage id='download.knownIssuesTitle' /></h2>
+                            <p><FormattedMessage id='download.knownIssuesOne' /></p>
+                            <p><FormattedMessage id='download.knownIssuesTwo' /></p>
+                            <p><FormattedHTMLMessage id='download.knownIssuesThree' /></p>
+                            <a href="https://scratch.mit.edu/discuss/3/" className='button'>
+                                <FormattedMessage id='download.reportBugs' />
+                            </a>
+                        </section>
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/views/download/download.scss b/src/views/download/download.scss
index e1840c9e9..342e75750 100644
--- a/src/views/download/download.scss
+++ b/src/views/download/download.scss
@@ -49,23 +49,34 @@ $developer-spot: $ui-yellow;
             }
         }
     }
-    .inner {
+    
+    .download-content {
         padding-bottom: 2rem;
-        
-        .installation {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: center;
-            justify-content: space-between;
-        }
-        
-        .installation .column {
-            max-width: $cols4;
-        }
     }
+    
+    .installation {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+        
+    .installation-column {
+        max-width: $cols4;
+    }
+    
+    .installation-downloads {
+        list-style: none;
+    }
+    
+    .installation-downloads-item {
+        padding: 0;
+        margin: 0.25rem;
+    }
+    
     @media only screen and (max-width: $mobile - 1) {
         .inner {
-            .installation .column {
+            .installation-column {
                 max-width: $cols2;
             }
         }