modules section

Author: jwcooper

_includes/download/board.html

@@ -148,19 +148,19 @@ <h3>CircuitPython {{ version.version }}</h3>
       <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:
+    <details>
+        <summary>Modules included in this download</summary>
         <span class="download-modules {% if version.stable %}stable{% else %}unstable{% endif %}">
           {% for module_name in version.modules %}
           {% if module_name contains "." %}
           <a target="_blank" class="library-link" href="https://docs.circuitpython.org/en/latest/shared-bindings/{{ module_name | split: '.' | first }}/#{{ module_name }}">
           {% else %}
           <a target="_blank" class="library-link" href="https://docs.circuitpython.org/en/latest/shared-bindings/{{ module_name }}">
           {% endif %}
-            {{ module_name }}</a>{% unless forloop.last %}, {% endunless %}
+            {{ module_name }}</a>
           {% endfor %}
         </span>
-    </p>
+    </details>
     {% endif %}
     {% if version.frozen_libraries and version.frozen_libraries.size != 0 %}
     <p>

assets/sass/pages/_download.scss

@@ -80,9 +80,8 @@
       .install-instructions {
         display: block;
         width: 100%;
-        padding: 0 0 10px 0;
         text-align: center;
-        margin-bottom: 1em;
+        margin: 1.5em 0;
       }
 
       .download-details {
@@ -128,6 +127,24 @@
         box-sizing: border-box;
       }
 
+      details {
+        summary {
+          color: #fff;
+          margin-top: 1em;
+          padding: 1em;
+          border-radius: 10px;
+          background-color: variables.$gray;
+          cursor: pointer;
+        }
+
+        .download-modules {
+          // three column grid
+          display: grid;
+          font-size: 12px;
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+
       .stable {
         .language-select {
           border-color: variables.$purple;
@@ -139,11 +156,6 @@
         a.download-button-unrecommended {
           background-color: variables.$purple;
         }
-
-        .download-modules,
-        .features-list {
-          color: variables.$purple;
-        }
       }
 
       .unstable {
@@ -162,10 +174,6 @@
         a.download-button-unrecommended:hover {
           background-color: variables.$purple;
         }
-        .download-modules,
-        .features-list {
-          color: variables.$purple;
-        }
       }
 
       .unrecommended {