Merge pull request #37 from mcclatchy/PE-423-header-dom-update

PE-423 header dom update

Author: gabrielakhanna

builds/saratoga.scss

@@ -22,6 +22,7 @@
 @use '../static/css/cards/correction';
 @use '../static/css/cards/related-stories';
 @use '../static/css/cards/author-card';
+@use '../static/css/cards/author-byline';
 @use '../static/css/cards/timeline';
 @use '../static/css/cards/transparency';
 @use '../static/css/cards/big-news';

layouts/_default/baseof.html

@@ -46,6 +46,7 @@
     <link rel="stylesheet" href="/css/cards/correction.css">
     <link rel="stylesheet" href="/css/cards/related-stories.css">
     <link rel="stylesheet" href="/css/cards/author-card.css">
+    <link rel="stylesheet" href="/css/cards/author-byline.css">
     <link rel="stylesheet" href="/css/cards/timeline.css">
     <link rel="stylesheet" href="/css/cards/transparency.css">
     <link rel="stylesheet" href="/css/cards/big-news.css">

layouts/shortcodes/header.html

@@ -1,19 +1,18 @@
 {{- $class := .Get "class" }}
-
 <header class="header {{$class}}">
-  <a class="kicker h6" href="#">Section</a>
+  <a class="kicker" href="#">Section</a>
   <h1 class="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus lorem amet.</h1>
-  <div class="bio">
-    {{- if eq $class "opinion" }}
-    <div class="thumb">
-      <img src="/img/aaron_moody.jpg" alt="John Doe">
-    </div>
-    {{- end }}
+  <div class="author-byline">
     <div>
-      <div class="byline">By <a href="#">John Doe</a> <span class="credit">Sample Newspaper</span></div>
-      <div>
-        <time>Updated August 13, 2018 3:19 PM</time>
-      </div>
+      By <span class="author-name">John Doe</span> and <span class="author-name">Jane Doe</span>
+      <span class="credit">Sample Newspaper</span>
+    </div>
+    <div class="article-details">
+      <time datetime="">Updated August 13, 2018 3:19 PM</time>      <!--comments DOM added for demo purposes only -->
+      <span class="comments">
+        <svg viewBox="0 0 512 512" aria-hidden="true"><path d="M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z"></path></svg>
+        <span class="vf-comments-count vf-body-text--deprecated viafoura vf-is-logged-in" style="min-height: 0px;">35</span>
+      </span>
     </div>
   </div>
-</header>
+</header>

layouts/shortcodes/transparency.html

@@ -1,7 +1,7 @@
 <div class="transparency">
   <h3>Behind the story</h3>
   <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor. Ut eget imperdiet neque. In volutpat ante semper diam molestie, et aliquam erat laoreet. Sed sit amet arcu aliquet, molestie justo at, auctor nunc. Phasellus ligula ipsum, volutpat eget semper id, viverra eget nibh. Suspendisse luctus mattis cursus. Nam consectetur ante at nisl hendrerit gravida. Donec vehicula rhoncus mattis. Mauris dignissim semper mattis. Fusce porttitor a mi at suscipit.</p>
-  <a class="more-link expander" onclick="this.classList.toggle('open');">Read More</a>
+  <a class="more-link expander" onclick="this.classList.toggle('open');">More</a>
   <div class="question">
     <h3>What's next?</h3>
     <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor. Ut eget imperdiet neque. In volutpat ante semper diam molestie, et aliquam erat laoreet. Sed sit amet arcu aliquet, molestie justo at, auctor nunc. Phasellus ligula ipsum, volutpat eget semper id, viverra eget nibh. Suspendisse luctus mattis cursus. Nam consectetur ante at nisl hendrerit gravida. Donec vehicula rhoncus mattis. Mauris dignissim semper mattis. Fusce porttitor a mi at suscipit.</p>

static/css/atoms.css

@@ -158,15 +158,16 @@ li {
 
 .kicker {
   color: var(--secondary-text-color);
-  font-size: 0.667rem;
+  font: 0.667rem/1em var(--sans);
   font-weight: bold;
   text-transform: uppercase;
+  line-height: 1em;
 }
 
 time, .time, .byline {
   display: inline-block;
   color: var(--secondary-text-color);
-  font: 0.778rem/1.1em var(--sans);
+  font: 0.778rem/1em var(--sans);
 }
 
 .byline a {

static/css/cards/author-byline.css

@@ -0,0 +1,57 @@
+/**
+ * Author byline
+ */
+
+ .author-byline {
+  display: grid;
+  gap: var(--byline-gap, 5px);
+  font-size: var(--byline-font-size, 14px);
+  font-family: var(--header-family);
+  color: var(--byline-color, var(--darkgray));
+ }
+
+ .author-name,
+ .article-details .viafoura {
+  font-weight: bold;
+ }
+
+ .article-details {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  overflow: hidden;
+  gap: 5px var(--space);
+  --link-color: var(--darkgray);
+  --line-offset: calc(var(--gap) / 2);
+  --line-thickness: 1px;
+  --line-color: #d9d9d9;
+}
+
+.article-details > * {
+  position: relative;
+  line-height: normal;
+}
+
+.article-details > *::before {
+  content: '';
+  position: absolute;
+  background-color: var(--line-color);
+  inline-size: var(--line-thickness);
+  block-size: 100vh;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--line-offset) * -1);
+  z-index: 1;
+}
+
+.article-details .comments {
+  display: inline-flex;
+  gap: 5px;
+}
+
+.article-details .comments > svg {
+  display: inline-block;
+  align-self: center;
+  height: 1em;
+  padding-top: 2px;
+  --fill-color: var(--byline-color);
+}

static/css/cards/story.css

@@ -4,7 +4,7 @@
 
 .story-body {
   display: flow-root;
-  font: var(--story-font, 18px/2em var(--serif));
+  font-family: var(--story-font, var(--serif));
   color: var(--story-text-color, var(--text-color));
   background-color: var(--story-background-color, var(--paper-color));
   --header-family: var(--story-subhead-family, var(--sans));

static/css/decks/fixes.css

@@ -134,9 +134,7 @@ custom-digest {
 
 .viafoura {
   --dark-text-on-default-color: #0F1521;
-  color: #0F1521;
   font-family: 'Noto Sans', sans-serif;
-  font-size: 16px;
 }
 
 .viafoura p,