Merge pull request #48 from mcclatchy/2.8.8

Trending vertical video button styles

Author: gabrielakhanna

layouts/shortcodes/header.html

@@ -1,5 +1,11 @@
 {{- $class := .Get "class" }}
 <header class="header {{$class}}">
+  <div>
+    <a class="button vertical-video">
+      <svg viewBox="0 0 512 512" height="15"><path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z" fill="white"/></svg>
+      <span>Trending Videos</span>
+    </a>
+  </div>
   <a class="kicker" href="#">Section</a>
   <h1 class="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus lorem amet.</h1>
   <div class="author-byline">

static/css/atoms.css

@@ -262,6 +262,17 @@ hr {
   border: none;
 }
 
+.button.vertical-video {
+  --button-background-color: #365FCA;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: var(--space) 0; 
+  padding: 8px 10px;
+  font-size: 12px;
+  text-transform: none;
+}
+
 .button > img {
   display: block;
 }