more work on download page

Author: jwcooper

_includes/download/board.html

@@ -18,8 +18,6 @@ <h3>CircuitPython {{ version.version }}</h3>
     {% if version.stable %}
     <p>
       This is the latest <strong>stable</strong> release of CircuitPython that will work with the {{ page.name }}.
-    </p>
-    <p>
       <strong>Use this release</strong> if you are new to CircuitPython.
     </p>
     {% else %}
@@ -45,14 +43,10 @@ <h3>CircuitPython {{ version.version }}</h3>
         Older bootloaders cannot load the firmware. See <i>Update UF2 Bootloader</i> below.</b>
       </p>
     {% endif %}
-    <div class="release-details">
-      <p>
-        <a href="https://github.com/adafruit/circuitpython/releases/tag/{{ version.version }}">Release Notes for {{ version.version }}</a>
-      </p>
-      {% if page.download_instructions != nil and page.download_instructions != "" %}
-        <a class="download-button install-instructions-button" target="_blank" href="{{ page.download_instructions }}">HOW TO INSTALL<i class="fas fa-arrow-circle-right" aria-hidden="true"></i></a>
-      {% endif %}
-    </div>
+    <p>
+      <a href="https://github.com/adafruit/circuitpython/releases/tag/{{ version.version }}">Release Notes for {{ version.version }}</a>
+    </p>
+
     <div class="download-details">
       {% comment %}
       Create a list of language codes and names so it can be sorted.
@@ -150,6 +144,9 @@ <h3>CircuitPython {{ version.version }}</h3>
       {% endif %}
       </div>
     </div>
+    {% if page.download_instructions != nil and page.download_instructions != "" %}
+      <a class="install-instructions" target="_blank" href="{{ page.download_instructions }}">Learn how to install CircuitPython on this board <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
+    {% endif %}
     {% if version.modules %}
     <p>
         Built-in modules available:

assets/sass/pages/_download.scss

@@ -20,7 +20,7 @@
   }
 
   h3 {
-    font-size: 22px;
+    font-size: 28px;
     font-weight: 500;
     margin: 0 0 10px 0;
   }
@@ -31,6 +31,7 @@
     grid-column-gap: 1em;
     grid-row-gap: 1em;
     grid-auto-rows: minmax(min-content, max-content);
+    font-size: 18px;
 
     .image-section {
       position: relative;
@@ -67,7 +68,7 @@
         width: auto;
         padding: 15px 30px 15px 30px;
         color: #fff;
-        border-radius: 5px;
+        border-radius: 10px;
         border: none;
         cursor: pointer;
 
@@ -76,22 +77,23 @@
         }
       }
 
-      .install-instructions-button {
+      .install-instructions {
+        display: block;
         width: 100%;
+        padding: 0 0 10px 0;
         text-align: center;
         margin-bottom: 1em;
       }
 
-      .download-details,
-      .release-details {
+      .download-details {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
       }
 
       .language-select {
         float: left;
         margin-right: 1em;
-        border-radius: 5px;
+        border-radius: 10px;
         border: 2px solid variables.$gray;
         overflow: hidden;
         height: 45px;