fix header hover and active links and style downloads page

Author: jwcooper

assets/sass/layout/_header.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../base/mixins";
 @use "../base/variables";
 
@@ -20,7 +21,7 @@
   }
 
   a.active {
-    color: #fff;
+    color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
   }
 }
 
@@ -88,14 +89,15 @@
 .site-navigation {
   flex: 2 1 0;
   padding: 0 0 10px 0;
-  font-size: 18px;
+  font-size: 20px;
+  font-weight: 500;
 
   a {
     margin-right: 30px;
     color: #63338f;
 
     &:hover {
-      color: #fff;
+      color: color.adjust(variables.$purple, $lightness: -15%, $space: hsl);
     }
   }
 }

assets/sass/pages/_downloads.scss

@@ -3,7 +3,7 @@
 @use "../base/variables";
 
 #downloads-page {
-  padding: 50px 0 200px 0;
+  padding: 20px 0 200px 0;
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 1fr)
@@ -52,7 +52,7 @@
         width: 100%;
         height: 50px;
         padding: 15px;
-        border-radius: 5px;
+        border-radius: 10px;
         border: 3px solid variables.$purple;
         box-sizing: border-box;
       }
@@ -66,7 +66,7 @@
         color: #fff;
         background-color: variables.$purple;
         float: left;
-        border-radius: 5px;
+        border-radius: 10px;
         border: none;
         cursor: pointer;
 
@@ -180,21 +180,21 @@
 
     .download {
       height: 100%;
+      border-radius: 10px;
 
       .img-responsive-4by3 {
         height: 0;
-        overflow: hidden;
-        padding-top: 75%;
+        padding-bottom: 100%;
         position: relative;
-        width: 100%;
 
         img {
           position: absolute;
-          top: 50%;
-          left: 50%;
-          max-width: 100%;
-          max-height: 100%;
-          transform: translate(-50%, -50%);
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
         }
       }
 
@@ -204,20 +204,12 @@
         justify-content: space-between;
         height: 100%;
         background-color: #fff;
-        padding: 5px 5px 0px 5px;
         color: #000;
-        border: 1px solid variables.$gray-border;
-        margin: 1px;
-        border-radius: 5px;
-
-        &:hover {
-          border-radius: 5px;
-          margin: 0px;
-          border: 2px solid #e90e8b;
-        }
+        border-radius: 25px;
+        overflow: hidden;
 
         .details {
-          margin-left: 3px;
+          padding: 10px 20px 0px 20px;
         }
 
         .features {