download page in progress

Author: jwcooper

_layouts/download.html

@@ -1,34 +1,41 @@
 ---
 layout: default
 ---
-<div id="download-page">
-  <h1>{{ page.name }}</h1>
-  <h3>by {{ page.manufacturer }}</h3>
 
+<div id="download-page">
   <div class="download-section">
-    <div class="details">
+    <div>
+      <div class="image-section">
+        {% assign large_image = "/assets/images/boards/large/" | append:
+        page.board_image %}
+        <img src="{{ large_image | relative_url }}" alt="Image of Board" />
+        <h1>{{ page.name }} by {{ page.manufacturer }}</h1>
+      </div>
       <div class="section">
-        {% assign large_image = "/assets/images/boards/large/" | append: page.board_image %}
-        <img src="{{ large_image | relative_url }}" alt="Image of Board">
+        <p>{{ content }}</p>
+        <h2>Contribute</h2>
         <p>
-          {{ content }}
+          Have some info to add for this board? Edit the source for this page
+          <a
+            href="https://github.com/adafruit/circuitpython-org/edit/main/{{ page.path }}"
+            >here</a
+          >.
         </p>
-        <h2>Contribute</h2>
-          <p>Have some info to add for this board? Edit the source for this page <a href="https://github.com/adafruit/circuitpython-org/edit/main/{{ page.path }}">here</a>.</p>
       </div>
     </div>
     <div class="download">
-      {% if page.blinka == true %}
-        {% include download/blinka.html %}
-      {% else %}
-        {% include download/board.html %}
-      {% endif %}
+      {% if page.blinka == true %} {% include download/blinka.html %} {% else %}
+      {% include download/board.html %} {% endif %}
     </div>
   </div>
 </div>
 
-{% if page.family == 'esp32' or page.family == 'esp32s2' or page.family == 'esp32c3' or page.family == 'esp32s3' or page.family == 'esp32c6' %}
-<script src="https://cdn.jsdelivr.net/gh/adafruit/[email protected]/dist/cpinstaller.min.js" type="module"></script>
+{% if page.family == 'esp32' or page.family == 'esp32s2' or page.family ==
+'esp32c3' or page.family == 'esp32s3' or page.family == 'esp32c6' %}
+<script
+  src="https://cdn.jsdelivr.net/gh/adafruit/[email protected]/dist/cpinstaller.min.js"
+  type="module"
+></script>
 <!--<script src="/assets/javascript/installer/cpinstaller.js" type="module"></script>-->
 {% endif %}
 <script src="/assets/javascript/download.js"></script>

assets/sass/pages/_download.scss

@@ -1,7 +1,7 @@
 @use "../base/variables";
 
 #download-page {
-  padding: 50px 0 200px 0;
+  padding: 0 0 200px 0;
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 1fr)
@@ -32,18 +32,31 @@
     grid-row-gap: 1em;
     grid-auto-rows: minmax(min-content, max-content);
 
+    .image-section {
+      position: relative;
+      border-radius: 25px;
+      margin-bottom: 20px;
+      overflow: hidden;
+
+      h1 {
+        position: absolute;
+        bottom: 15px;
+        left: 15px;
+        right: 15px;
+        font-size: 22px;
+        font-weight: 400;
+        color: #fff;
+        padding: 10px;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 10px;
+      }
+    }
+
     .section {
-      border: 1px solid #cecece;
       background-color: #fff;
-      border-radius: 5px;
+      border-radius: 25px;
       padding: 20px;
-      margin-bottom: 1em;
-    }
-
-    .details {
-      img {
-        width: 100%;
-      }
+      margin-bottom: 20px;
     }
 
     .download {