From 0c5e42d8c359239b4ecdd983fb5b23d219c6c1fe Mon Sep 17 00:00:00 2001
From: Daniel Helm <dan.helm@gmail.com>
Date: Wed, 12 Jan 2022 09:48:09 -0600
Subject: [PATCH] fix brand color and image compression artifacts

---
 packages/website/src/images/logo.svg |  6 +++---
 packages/website/src/pages/news.js   | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/images/logo.svg b/packages/website/src/images/logo.svg
index 16c695f9..1cf1118d 100644
--- a/packages/website/src/images/logo.svg
+++ b/packages/website/src/images/logo.svg
@@ -2,7 +2,7 @@
   <defs>
     <style>.cls-1,.cls-2{fill:#0071bc;}.cls-1{fill-rule:evenodd;}.cls-2{font-size:87px;font-family:Karbon-Light, Karbon;font-weight:300;letter-spacing:-0.05em;}.cls-3{letter-spacing:-0.05em;}.cls-4{letter-spacing:-0.05em;}</style>
   </defs>
-  <path class="cls-1" d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z" style="fill: rgb(88, 181, 96);"></path>
-  <path class="cls-1" d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z" style="fill: rgb(88, 181, 96);"></path>
-  <path class="cls-1" d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z" style="fill: rgb(88, 181, 96);"></path>
+  <path class="cls-1" d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z" style="fill: rgb(0, 198, 94);"></path>
+  <path class="cls-1" d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z" style="fill: rgb(0, 198, 94);"></path>
+  <path class="cls-1" d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z" style="fill: rgb(0, 198, 94);"></path>
 </svg>
\ No newline at end of file
diff --git a/packages/website/src/pages/news.js b/packages/website/src/pages/news.js
index f3b9a220..ebc7374e 100644
--- a/packages/website/src/pages/news.js
+++ b/packages/website/src/pages/news.js
@@ -24,12 +24,12 @@ const NewsCard = ({ frontmatter, fields }) => {
         </div>
       )}
 
-      <Link {...link} className="text-xl mt-6">
+      <Link {...link} className="mt-6 text-xl">
         {title}
       </Link>
 
       {description && (
-        <Link {...link} className="font-content text-palette-400 mt-4">
+        <Link {...link} className="mt-4 font-content text-palette-400">
           {description}
         </Link>
       )}
@@ -49,7 +49,7 @@ const NewsPage = ({ data }) => {
       <Section className="bg-white" first={true}>
         {/* this is the gray box in the top left corner, 400px height is totally arbitrary but it works */}
         <div
-          className="hidden desktop:block bg-white bg-column absolute top-0 left-0 right-0"
+          className="absolute top-0 left-0 right-0 hidden bg-white desktop:block bg-column"
           style={{ height: "400px" }}
         />
 
@@ -81,12 +81,18 @@ export const query = graphql`
             external
             thumbnail {
               childImageSharp {
-                gatsbyImageData(width: 320, height: 170, placeholder: BLURRED, transformOptions: { cropFocus: CENTER })
+                gatsbyImageData(
+                  width: 320
+                  height: 170
+                  placeholder: BLURRED
+                  formats: [AUTO, AVIF, WEBP]
+                  transformOptions: { fit: COVER, cropFocus: CENTER }
+                )
               }
             }
             avatar {
               childImageSharp {
-                gatsbyImageData(width: 40, placeholder: BLURRED, transformOptions: { cropFocus: CENTER })
+                gatsbyImageData(width: 40, placeholder: BLURRED, transformOptions: { fit: COVER, cropFocus: CENTER })
               }
             }
           }