From 57671aedf050a2deeb16d408fbc276281dc22a54 Mon Sep 17 00:00:00 2001
From: Justin Cooper <jwcooper@gmail.com>
Date: Tue, 25 Feb 2025 11:11:41 -0600
Subject: [PATCH] modules section

---
 _includes/download/board.html    |  8 ++++----
 assets/sass/pages/_download.scss | 30 +++++++++++++++++++-----------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/_includes/download/board.html b/_includes/download/board.html
index 8b834c4ea..481bdd72e 100644
--- a/_includes/download/board.html
+++ b/_includes/download/board.html
@@ -148,8 +148,8 @@
       <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 "." %}
@@ -157,10 +157,10 @@
           {% 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>
diff --git a/assets/sass/pages/_download.scss b/assets/sass/pages/_download.scss
index f8a945ddc..4cfd83715 100644
--- a/assets/sass/pages/_download.scss
+++ b/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 {