Updated Design

.tool-versions

@@ -1 +1 @@
-ruby 3.2.2
+ruby 3.4.2

Gemfile.lock

@@ -1,41 +1,47 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.1)
-      public_suffix (>= 2.0.2, < 6.0)
-    bigdecimal (3.1.8)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.2.0)
+    bigdecimal (3.1.9)
     colorator (1.1.0)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.3.5)
+    csv (3.3.2)
     deep_merge (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.5)
+    ffi (1.17.1)
+    ffi (1.17.1-x86_64-linux-gnu)
     forwardable-extended (2.6.0)
-    google-protobuf (4.27.5)
+    google-protobuf (4.29.3)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86_64-linux)
+    google-protobuf (4.29.3-x86_64-linux)
       bigdecimal
       rake (>= 13)
     http_parser.rb (0.8.0)
-    i18n (1.12.0)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    jekyll (4.3.3)
+    jekyll (4.4.1)
       addressable (~> 2.4)
+      base64 (~> 0.2)
       colorator (~> 1.0)
+      csv (~> 3.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
       jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
+      json (~> 2.6)
       kramdown (~> 2.3, >= 2.3.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
+      mercenary (~> 0.3, >= 0.3.6)
       pathutil (~> 0.9)
       rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
@@ -47,45 +53,46 @@ GEM
     jekyll-paginate (1.1.0)
     jekyll-redirect-from (0.16.0)
       jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
+    jekyll-sass-converter (3.1.0)
+      sass-embedded (~> 1.75)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.4.0)
-      rexml
+    json (2.10.1)
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.4)
-    listen (3.8.0)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
     mini_magick (4.12.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.1)
+    public_suffix (6.0.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.9)
-    rouge (4.1.0)
+    rexml (3.4.1)
+    rouge (4.5.1)
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     safe_yaml (1.0.5)
-    sass-embedded (1.75.0)
-      google-protobuf (>= 3.25, < 5.0)
-      rake (>= 13.0.0)
-    sass-embedded (1.75.0-x86_64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.85.0)
+      google-protobuf (~> 4.29)
+      rake (>= 13)
+    sass-embedded (1.85.0-x86_64-linux-gnu)
+      google-protobuf (~> 4.29)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.4.2)
-    webrick (1.8.2)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
 
 PLATFORMS
   ruby

README.md

@@ -33,3 +33,6 @@ were tested with ruby 2.5 and ruby-bundler 1.17.3 on a Debian Stretch system.
 5. Visit the displayed "server address"
 6. After most local edits, the content will be updated.  You will need to
 reload (ctrl-r or F5) your browser
+
+Note: For faster jekyll builds, you can use the `--incremental` flag. You'll
+also want to install ruby with yjit enabled for even faster builds.

_config.yml

@@ -3,10 +3,9 @@ email: justin@adafruit.com
 description: >-
   The easiest way to program microcontrollers
 site_image: "https://circuitpython.org/assets/images/CircuitPythonLogo_Black.png"
-hero_image: CircuitPython_Hero.jpg
 timezone: America/New_York
 twitter_username: circuitpython
-github_username:  adafruit
+github_username: adafruit
 baseurl: ""
 url: "https://circuitpython.org"
 paginate: 5
@@ -39,7 +38,9 @@ collections:
 
 jekyll_get_json:
   - data: libraries
-    json: 'https://adafruit-circuit-python.s3.amazonaws.com/adabot/web/libraries.v2.json'
+    json: "https://adafruit-circuit-python.s3.amazonaws.com/adabot/web/libraries.v2.json"
+  - data: guides
+    json: "https://learn.adafruit.com/api/categories/circuitpython.json?count=10&filter=guides_only,random,exclude_product"
 
 ### Exclude from processing.
 exclude:

_includes/download/board.html

@@ -18,8 +18,6 @@ <h3>CircuitPython {{ version.version }}</h3>
     {% if version.stable %}
     <p>
       This is the latest <strong>stable</strong> release of CircuitPython that will work with the {{ page.name }}.
-    </p>
-    <p>
       <strong>Use this release</strong> if you are new to CircuitPython.
     </p>
     {% else %}
@@ -45,14 +43,10 @@ <h3>CircuitPython {{ version.version }}</h3>
         Older bootloaders cannot load the firmware. See <i>Update UF2 Bootloader</i> below.</b>
       </p>
     {% endif %}
-    <div class="release-details">
-      <p>
-        <a href="https://github.com/adafruit/circuitpython/releases/tag/{{ version.version }}">Release Notes for {{ version.version }}</a>
-      </p>
-      {% if page.download_instructions != nil and page.download_instructions != "" %}
-        <a class="download-button install-instructions-button" target="_blank" href="{{ page.download_instructions }}">HOW TO INSTALL<i class="fas fa-arrow-circle-right" aria-hidden="true"></i></a>
-      {% endif %}
-    </div>
+    <p>
+      <a href="https://github.com/adafruit/circuitpython/releases/tag/{{ version.version }}">Release Notes for {{ version.version }}</a>
+    </p>
+
     <div class="download-details">
       {% comment %}
       Create a list of language codes and names so it can be sorted.
@@ -150,20 +144,23 @@ <h3>CircuitPython {{ version.version }}</h3>
       {% endif %}
       </div>
     </div>
+    {% if page.download_instructions != nil and page.download_instructions != "" %}
+      <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 "." %}
           <a target="_blank" class="library-link" href="https://docs.circuitpython.org/en/latest/shared-bindings/{{ module_name | split: '.' | first }}/#{{ module_name }}">
           {% 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>

_includes/header.html

@@ -18,27 +18,26 @@
   <div class="wrapper">
     <div class="content">
       <nav class="site-brand">
-        <div class="site-logo">
-          <a href="{{ "/" | relative_url  }}">
-            <img src="{{ "/assets/images/logo.png" | relative_url }}"
-                 srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
-                         {{ "/assets/images/logo@2x.png" | relative_url }} 2x,
-                         {{ "/assets/images/logo@3x.png" | relative_url }} 3x"
-                                         alt="CircuitPython Logo"
-                                         height="60" width="136">
-          </a>
-        </div>
         <div class="site-navigation">
           <a {% if current[1] == 'downloads' %}class="active" aria-current="page"{% endif %} href="{{ "/downloads" | relative_url  }}">Downloads</a>
           <a {% if current[1] == 'libraries' %}class="active" aria-current="page"{% endif %} href="{{ "/libraries" | relative_url  }}">Libraries</a>
           <a {% if current[1] == 'blinka' %}class="active" aria-current="page"{% endif %} href="{{ "/blinka" | relative_url  }}">Blinka</a>
           <a href="https://code.circuitpython.org">Code Editor</a>
         </div>
+        <div class="site-logo">
+          <a href="{{ "/" | relative_url  }}">
+            <img src="{{ "/assets/images/logo-dark.png" | relative_url }}"
+                 srcset="{{ "/assets/images/logo-dark.png" | relative_url }} 1x,
+                         {{ "/assets/images/logo-dark@2x.png" | relative_url }} 2x,
+                         {{ "/assets/images/logo-dark3x.png" | relative_url }} 3x"
+                                         alt="CircuitPython Logo"
+                                         height="60" width="136">
+          </a>
+        </div>
         <div class="get-started">
           <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
         </div>
       </nav>
     </div>
   </div>
-  <div class="bottom-bar"></div>
 </header>

_includes/header_mobile.html

@@ -40,5 +40,4 @@
       </ul>
     </nav>
   </div>
-  <div class="bottom-bar"></div>
 </header>

_includes/index/learn_block.html

@@ -0,0 +1,15 @@
+<div class="image">
+  {% assign guide = site.data.guides[include.index] %}
+  <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
+                            src="{{ guide.image }}"
+    />
+  <span class="image-title">
+    <span>
+      <p><a href="{{ guide.guide_url }}">{{ guide.title }} by {{ guide.author }}</a></p>
+    </span>
+    <img alt="Made with CircuitPython Logo"
+                              src="{{ "assets/images/made_with_circuitpython.svg" |
+                                      relative_url }}"
+      />
+  </span>
+</div>

_layouts/download.html

@@ -1,34 +1,41 @@
 ---
 layout: default
 ---
-<div id="download-page">
-  <h1>{{ page.name }}</h1>
-  <h3>by {{ page.manufacturer }}</h3>
 
+<div id="download-page">
   <div class="download-section">
-    <div class="details">
+    <div>
+      <div class="image-section">
+        {% assign large_image = "/assets/images/boards/large/" | append:
+        page.board_image %}
+        <img src="{{ large_image | relative_url }}" alt="Image of Board" />
+        <h1>{{ page.name }} by {{ page.manufacturer }}</h1>
+      </div>
       <div class="section">
-        {% assign large_image = "/assets/images/boards/large/" | append: page.board_image %}
-        <img src="{{ large_image | relative_url }}" alt="Image of Board">
+        <p>{{ content }}</p>
+        <h2>Contribute</h2>
         <p>
-          {{ content }}
+          Have some info to add for this board? Edit the source for this page
+          <a
+            href="https://github.com/adafruit/circuitpython-org/edit/main/{{ page.path }}"
+            >here</a
+          >.
         </p>
-        <h2>Contribute</h2>
-          <p>Have some info to add for this board? Edit the source for this page <a href="https://github.com/adafruit/circuitpython-org/edit/main/{{ page.path }}">here</a>.</p>
       </div>
     </div>
     <div class="download">
-      {% if page.blinka == true %}
-        {% include download/blinka.html %}
-      {% else %}
-        {% include download/board.html %}
-      {% endif %}
+      {% if page.blinka == true %} {% include download/blinka.html %} {% else %}
+      {% include download/board.html %} {% endif %}
     </div>
   </div>
 </div>
 
-{% if page.family == 'esp32' or page.family == 'esp32s2' or page.family == 'esp32c3' or page.family == 'esp32s3' or page.family == 'esp32c6' %}
-<script src="https://cdn.jsdelivr.net/gh/adafruit/web-firmware-installer-js@2.0.0/dist/cpinstaller.min.js" type="module"></script>
+{% if page.family == 'esp32' or page.family == 'esp32s2' or page.family ==
+'esp32c3' or page.family == 'esp32s3' or page.family == 'esp32c6' %}
+<script
+  src="https://cdn.jsdelivr.net/gh/adafruit/web-firmware-installer-js@2.0.0/dist/cpinstaller.min.js"
+  type="module"
+></script>
 <!--<script src="/assets/javascript/installer/cpinstaller.js" type="module"></script>-->
 {% endif %}
 <script src="/assets/javascript/download.js"></script>

assets/css/main.scss

@@ -1,23 +1,22 @@
 ---
 ---
+
 @charset "utf-8";
 
-@import 'vendors/normalize';
+@use "../sass/vendors/normalize";
 
-@import 'base/variables';
-@import 'base/typography';
-@import 'base/base';
-@import 'base/mixins';
+@use "../sass/base/typography";
+@use "../sass/base/base";
 
-@import 'layout/grid';
-@import 'layout/header';
-@import 'layout/header_mobile';
+@use "../sass/layout/grid";
+@use "../sass/layout/header";
+@use "../sass/layout/header_mobile";
 
-@import 'pages/home';
-@import 'pages/common';
-@import 'pages/downloads';
-@import 'pages/download';
-@import 'pages/awesome';
-@import 'pages/libraries';
-@import 'pages/contributing';
-@import 'pages/espinstaller';
+@use "../sass/pages/home";
+@use "../sass/pages/common";
+@use "../sass/pages/downloads";
+@use "../sass/pages/download";
+@use "../sass/pages/awesome";
+@use "../sass/pages/libraries";
+@use "../sass/pages/contributing";
+@use "../sass/pages/espinstaller";