Merge pull request #1609 from jwcooper/design-cleanup

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

assets/sass/base/_variables.scss

@@ -1,6 +1,7 @@
 $purple: #652f8f;
 $pink: #e90e8b;
 $gray: #999999;
+$dark-gray: #333333;
 $gray-border: #cecece;
 
 // derived from bootstrap variables

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 @@ layout: home
         <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 @@ layout: home
         <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 @@ layout: home
         <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 @@ layout: home
         <div>
           <img alt="Terminal Icon"
               src="{{ "assets/images/icons/terminal.svg" |
-                        relative_url }}" />
+                        relative_url }}"
+              loading="lazy" />
           <div>
             <h3>Serial Console + REPL</h3>
             <p>