Merge pull request #1525 from FoamyGuy/modules_comma_fix

Fix modules extra comma and spacing

Author: dhalbert

_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,17 +171,18 @@ <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>
     {% 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>

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