Website: add view changelog button to fleetsm.com/releases (#25269)

Closes: https://github.com/fleetdm/confidential/issues/8824

Changes:
- Added a "view changelog" button to fleetmd.com/releases that goes to
https://github.com/fleetdm/fleet/releases

website/assets/styles/pages/articles/articles.less

@@ -32,6 +32,10 @@
   }
   [purpose='category-title'] {
     padding-bottom: 40px;
+    margin-right: 25px;
+    p {
+      margin-bottom: 0px;
+    }
   }
 
   [purpose='guides-category-page'] {
@@ -40,6 +44,36 @@
       margin-right: 6px;
     }
   }
+  [purpose='changelog-button'] {
+    display: flex;
+    padding: var(--spacing-spacing-xxs, 4px) var(--spacing-spacing-sm, 16px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-spacing-xxs, 4px);
+    border-radius: var(--spacing-spacing-xs, 8px);
+    border: 1px solid var(--color-grey-200, #E2E4EA);
+    background: var(--color-grey-50, #F9FAFC);
+    color: #515774;
+    text-align: center;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+    width: 168px;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+    &:hover {
+      color: #515774;
+      text-decoration: none;
+      border-radius: var(--spacing-spacing-xs, 8px);
+      border: 1px solid var(--color-grey-400, #C5C7D1);
+      background: var(--color-grey-100, #F2F2F5);
+    }
+  }
   [purpose='rss-button'] {
     padding: 4px 8px;
     cursor: pointer;
@@ -290,6 +324,10 @@
       margin-left: 10px;
       margin-right: 10px;
     }
+    [purpose='category-title'] {
+      padding-bottom: 40px;
+      margin-right: 35px;
+    }
     [purpose='articles'] {
       [purpose='article-card'] {
         flex: 1 1 350px;
@@ -304,6 +342,7 @@
   }
 
    @media (min-width: 991px) {
+
     [purpose='articles'] {
       [purpose='article-card'] {
         flex: 1 1 290px;
@@ -316,6 +355,9 @@
     [purpose='page-container'] {
       padding: 64px 32px;
     }
+    [purpose='category-title'] {
+      margin-right: 20px;
+    }
     [purpose='guide-card'] {
       max-width: unset;
     }
@@ -358,6 +400,11 @@
         width: 100%;
       }
     }
+    [purpose='category-title'] {
+      p {
+        margin-bottom: 16px;
+      }
+    }
     [purpose='guides'] {
       column-count: 2;
     }
@@ -392,6 +439,7 @@
         max-width: 100%;
       }
     }
+
     [purpose='guide-card'] {
       width: 100%;
     }

website/views/pages/articles/articles.ejs

@@ -22,6 +22,9 @@
               </div>
             </div>
           </div>
+          <div class="d-flex flex-column align-self-md-end" v-if="articleCategory === 'Releases'">
+            <a purpose="changelog-button" href="https://github.com/fleetdm/fleet/releases" target="_blank"><img alt="GitHub logo" src="/images/logo-github-dark-24x24@2x.png"/>View changelog</a>
+          </div>
         </div>
       </div>
     <div purpose="articles" class="card-deck d-flex justify-content-center" v-if="articleCategory !== 'Guides'">