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] 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) {