From 8a284f5a6d14806370400b453eb753a825ed2724 Mon Sep 17 00:00:00 2001
From: foamyguy <foamyguy@gmail.com>
Date: Mon, 4 Nov 2024 09:16:22 -0600
Subject: [PATCH 1/2] fix comma spacing and extra comma at end of modules list

---
 _includes/download/board.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/_includes/download/board.html b/_includes/download/board.html
index ad7db3b1d..c12d0d706 100644
--- a/_includes/download/board.html
+++ b/_includes/download/board.html
@@ -160,8 +160,7 @@ <h3>CircuitPython {{ version.version }}</h3>
           {% else %}
           <a target="_blank" class="library-link" href="https://docs.circuitpython.org/en/latest/shared-bindings/{{ module_name }}">
           {% endif %}
-            {{ module_name }}
-          </a>{% if module_name != version.modules[version.modules.size - 1] %}, {% endif %}
+            {{ module_name }}</a>{% unless forloop.last %}, {% endunless %}
           {% endfor %}
         </span>
     </p>
@@ -172,8 +171,7 @@ <h3>CircuitPython {{ version.version }}</h3>
         <span class="download-modules {% if version.stable %}stable{% else %}unstable{% endif %}">
           {% for module_name in version.frozen_libraries %}
           <a target="_blank" class="library-link" href="https://docs.circuitpython.org/projects/{{ module_name | split: 'adafruit_' | last }}">
-            {{ module_name }}
-          </a>{% if module_name != version.frozen_libraries[version.frozen_libraries.size - 1] %}, {% endif %}
+            {{ module_name }}</a>{% unless forloop.last %}, {% endunless %}
           {% endfor %}
         </span>
     </p>

From 5565a3475430713440c8bba184339c2c25b185ee Mon Sep 17 00:00:00 2001
From: foamyguy <foamyguy@gmail.com>
Date: Mon, 4 Nov 2024 09:25:03 -0600
Subject: [PATCH 2/2] change features list style to match modules.

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

diff --git a/_includes/download/board.html b/_includes/download/board.html
index c12d0d706..f2907e590 100644
--- a/_includes/download/board.html
+++ b/_includes/download/board.html
@@ -178,9 +178,11 @@ <h3>CircuitPython {{ version.version }}</h3>
     {% endif %}
     {% if page.features %}
     <p>Features:
-    {% for feature in page.features %}
-      <span class="feature-span">{{feature}}</span>
-    {% endfor %}
+      <span class="features-list">
+      {% for feature in page.features %}
+        <a class="library-link" href="/downloads?features={{ feature }}">{{feature}}</a>{% unless forloop.last %}, {% endunless %}
+      {% endfor %}
+      </span>
     </p>
     {% endif %}
   </div>
diff --git a/assets/sass/pages/_download.scss b/assets/sass/pages/_download.scss
index c74a183f3..3c0a9607d 100644
--- a/assets/sass/pages/_download.scss
+++ b/assets/sass/pages/_download.scss
@@ -116,7 +116,7 @@
           background-color: $purple;
         }
 
-        .download-modules {
+        .download-modules, .features-list {
             color: $purple;
         }
       }
@@ -135,7 +135,7 @@
         a.download-button:hover, a.download-button-unrecommended:hover {
           background-color: $purple;
         }
-        .download-modules {
+        .download-modules, .features-list {
             color: $purple;
         }
       }
@@ -184,16 +184,6 @@
       }
     }
   }
-  .feature-span {
-    padding: 2px 4px 2px 4px;
-    margin-left: 3px;
-    margin-bottom: 3px;
-    display: inline-block;
-    background-color: $purple;
-    color: #fff;
-    border-radius: 5px;
-    font-size: 14px;
-  }
 }
 
 @media (max-width: $screen-lg) {