Merge pull request #30 from mcclatchy/PE-301-opinion-banner

PE-301 opinion banner

Author: gabrielakhanna

content/decks/opinion.md

@@ -3,12 +3,12 @@ title: opinion story
 description: A sample opinion story page.
 menu: decks
 layout: story
+type: opinion
 aliases: 
   - /saratoga/decks/opinion-story/
 ---
 
-{{% opinion-banner %}}
-{{< header class="opinion" >}}
+{{< header >}}
 {{< figure >}}
 {{< series-nav >}}
 

layouts/_default/story.html

@@ -15,6 +15,11 @@
     <fake-ad size="[970,250]"></fake-ad>
   </div>
 
+  <!-- Conditionally include the opinion banner -->
+  {{ if eq .Params.type "opinion" }}
+    {{ partial "opinion-banner" . }}
+  {{ end }}
+
   <!-- the wrapper was added by the front-end team -->
   <div class="server-rendered">
     <article class="story-body paper">{{ .Content }}</article>

layouts/partials/opinion-banner.html

@@ -0,0 +1,6 @@
+<div class="opinion-banner">
+  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM10.1042 9.375C9.1849 9.375 8.4375 10.1224 8.4375 11.0417V18.5417C8.4375 19.4609 9.1849 20.2083 10.1042 20.2083H12.6042V22.2917C12.6042 22.4505 12.6901 22.5937 12.8333 22.6641C12.9766 22.7344 13.1458 22.7187 13.2708 22.625L16.4922 20.2083H20.1042C21.0234 20.2083 21.7708 19.4609 21.7708 18.5417V11.0417C21.7708 10.1224 21.0234 9.375 20.1042 9.375H10.1042ZM11.7708 13.125C11.7708 12.6641 12.1432 12.2917 12.6042 12.2917H13.8542C14.3151 12.2917 14.6875 12.6641 14.6875 13.125V13.75V14.375V15.3984C14.6875 16.3151 14.0234 17.0964 13.1198 17.2474L12.9141 17.2812C12.5729 17.3385 12.2526 17.1094 12.1953 16.7682C12.138 16.4271 12.3672 16.1068 12.7083 16.0495L12.9141 16.0156C13.2161 15.9635 13.4375 15.7031 13.4375 15.3984V15.2083H12.6042C12.1432 15.2083 11.7708 14.8359 11.7708 14.375V13.125ZM18.4375 13.75V14.375V15.3984C18.4375 16.3151 17.7734 17.0964 16.8698 17.2474L16.6641 17.2812C16.3229 17.3385 16.0026 17.1094 15.9453 16.7682C15.888 16.4271 16.1172 16.1068 16.4583 16.0495L16.6641 16.0156C16.9661 15.9635 17.1875 15.7031 17.1875 15.3984V15.2083H16.3542C15.8932 15.2083 15.5208 14.8359 15.5208 14.375V13.125C15.5208 12.6641 15.8932 12.2917 16.3542 12.2917H17.6042C18.0651 12.2917 18.4375 12.6641 18.4375 13.125V13.75Z"/>
+    </svg>
+  <p>Opinion articles provide independent perspectives on key community issues, separate from our newsroom reporting.</p>
+</div>

layouts/shortcodes/opinion-banner.html

@@ -59,25 +59,23 @@
 
 .opinion-banner {
   display: grid;
-  grid-template-columns: 35px min-content 1fr;
+  grid-template-columns: 30px auto;
   grid-column-gap: var(--space-sm);
   grid-row-gap: 5px;
+  justify-content: center;
   align-items: center;
-  max-width: var(--story-width);
+  max-width: var(--section-width);
   margin: 0 auto;
-  padding: 15px;
-  background-color: var(--paper-color);
+  padding: var(--space-sm);
   color: var(--text-color);
 }
 
 .opinion-banner * {
   margin: 0;
 }
 
-.opinion-banner svg {
-  position: relative;
-  top: .2em;
-  width: 100%;
+.opinion-banner p {
+  font: 0.75rem var(--sans);
 }
 
 @media(max-width: 700px) {