Some more clean up to the new design

_includes/downloads/board_image.html

@@ -1,7 +1,12 @@
-{% assign small_image = "/assets/images/boards/small/" | append: include.board_image | absolute_url %}
-{% assign large_image = "/assets/images/boards/large/" | append: include.board_image | absolute_url %}
-<img srcset="{{ small_image }} 300w,
-             {{ large_image }} 700w"
-     sizes="(max-width: 1024px) 700px,
-            300px"
-     src="{{ large_image }}" alt="Image of Board" loading="lazy">
+{% assign small_image = "/assets/images/boards/small/" | append:
+include.board_image | absolute_url %} {% assign large_image =
+"/assets/images/boards/large/" | append: include.board_image | absolute_url %}
+<img
+  srcset="{{ small_image }} 300w,
+             {{ large_image }} 800w"
+  sizes="(max-width: 300px) 300px,
+            800px"
+  src="{{ large_image }}"
+  alt="Image of Board"
+  loading="lazy"
+/>

_includes/index/learn_block.html

@@ -1,15 +1,16 @@
 <div class="image">
   {% assign guide = site.data.guides[include.index] %}
-  <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
-                            src="{{ guide.image }}"
-    />
+  <img class="image-headline"
+       alt="{{ guide.image_alt_attribute }}"
+       src="{{ guide.image }}"
+       loading="lazy" />
   <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 }}"
-      />
+         src="{{ "assets/images/made_with_circuitpython.svg" |
+                    relative_url }}"
+         loading="lazy" />
   </span>
 </div>

assets/sass/base/_variables.scss

@@ -1,27 +1,28 @@
 $purple: #652f8f;
 $pink: #e90e8b;
 $gray: #999999;
+$dark-gray: #333333;
 $gray-border: #cecece;
 
 // derived from bootstrap variables
 
 // Extra small screen / phone
-$screen-xs:                  480px !default;
-$screen-phone:               $screen-xs !default;
+$screen-xs: 480px !default;
+$screen-phone: $screen-xs !default;
 
 // Small screen / tablet
-$screen-sm:                  768px !default;
-$screen-tablet:              $screen-sm !default;
+$screen-sm: 768px !default;
+$screen-tablet: $screen-sm !default;
 
 // Medium screen / desktop
-$screen-md:                  1024px !default;
-$screen-desktop:             $screen-md !default;
+$screen-md: 1024px !default;
+$screen-desktop: $screen-md !default;
 
 // Large screen / wide desktop
-$screen-lg:                  1366px !default;
-$screen-lg-desktop:          $screen-lg !default;
+$screen-lg: 1366px !default;
+$screen-lg-desktop: $screen-lg !default;
 
 // So media queries don't overlap when required, provide a maximum
-$screen-xs-max:              ($screen-sm - 1) !default;
-$screen-sm-max:              ($screen-md - 1) !default;
-$screen-md-max:              ($screen-lg - 1) !default;
+$screen-xs-max: ($screen-sm - 1) !default;
+$screen-sm-max: ($screen-md - 1) !default;
+$screen-md-max: ($screen-lg - 1) !default;

assets/sass/layout/_header.scss

@@ -19,24 +19,25 @@
     padding: 0 25px;
     margin: 20px 0;
   }
-
-  a.active {
-    color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
-  }
 }
 
 .top-navigation {
-  background-color: #333;
+  background-color: variables.$dark-gray;
   @include mixins.readable-content;
 
   .navigation {
     margin-left: 15px;
     padding: 10px;
+
     a {
       font-size: 16px;
       color: #aaa;
       margin-right: 40px;
 
+      &.active {
+        color: #fff;
+      }
+
       &:hover {
         color: #fff;
       }
@@ -100,11 +101,15 @@
 
   a {
     margin-right: 30px;
-    color: #63338f;
+    color: variables.$purple;
     white-space: nowrap;
 
+    &.active {
+      color: variables.$dark-gray;
+    }
+
     &:hover {
-      color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
+      color: variables.$dark-gray;
     }
   }
 }

assets/sass/layout/_header_mobile.scss

@@ -1,7 +1,7 @@
 @use "../base/variables";
 
 #mobile-header {
-  background-color: #333;
+  background-color: variables.$dark-gray;
 
   .header-contents {
     padding: 9px 5px 5px 8px;

assets/sass/pages/_downloads.scss

@@ -264,7 +264,7 @@
       }
     }
     .downloads-section {
-      grid-template-columns: repeat(1, 1fr);
+      grid-template-columns: repeat(1, 100%);
     }
   }
 }

assets/sass/pages/_espinstaller.scss

@@ -1,3 +1,5 @@
+@use "../base/variables";
+
 .cp-installer-dialog {
     min-width: 300px;
     min-height: 100px;
@@ -30,7 +32,7 @@
             content: ' ';
             height: 25px;
             width: 2px;
-            background-color: #333;
+            background-color: variables.$dark-gray;
         }
         &:before {
             transform: rotate(45deg);

assets/sass/pages/_home.scss

@@ -205,8 +205,12 @@
     .one-column-content {
       section {
         display: grid;
-        grid-template-columns: 1fr 2fr;
+        grid-template-columns: repeat(1, 1fr);
         column-gap: 20px;
+
+        .icon-block {
+          grid-template-columns: repeat(1, 1fr);
+        }
       }
     }
   }

index.html

@@ -36,7 +36,8 @@ <h2>When we say easy, we mean it.</h2>
         <div>
           <img alt="Brain Circuit Icon"
               src="{{ "assets/images/icons/brain-circuit.svg" |
-                        relative_url }}" />
+                          relative_url }}"
+              loading="lazy" />
           <div>
             <h3>Beginner Friendly</h3>
             <p>
@@ -47,7 +48,8 @@ <h3>Beginner Friendly</h3>
         <div>
           <img alt="Microchip Icon"
               src="{{ "assets/images/icons/microchip.svg" |
-                        relative_url }}" />
+                          relative_url }}"
+              loading="lazy" />
           <div>
             <h3>File Storage</h3>
             <p>
@@ -58,7 +60,8 @@ <h3>File Storage</h3>
         <div>
           <img alt="Files Icon"
               src="{{ "assets/images/icons/files.svg" |
-                        relative_url }}" />
+                        relative_url }}"
+              loading="lazy" />
           <div>
             <h3>Easy Code Updates</h3>
             <p>
@@ -70,7 +73,8 @@ <h3>Easy Code Updates</h3>
         <div>
           <img alt="Terminal Icon"
               src="{{ "assets/images/icons/terminal.svg" |
-                        relative_url }}" />
+                        relative_url }}"
+              loading="lazy" />
           <div>
             <h3>Serial Console + REPL</h3>
             <p>