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 @@ Learn how to install CircuitPython on this board {% endif %} {% if version.modules %} -
- Built-in modules available:
+ Modules included in this download
{% for module_name in version.modules %}
{% if module_name contains "." %}
@@ -157,10 +157,10 @@
{% else %}
{% endif %}
- {{ module_name }}{% unless forloop.last %}, {% endunless %}
+ {{ module_name }}
{% endfor %}
-
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 {