Merge pull request #38 from mcclatchy/PE-424-author-card

PE-424 author card

Author: gabrielakhanna

dist/saratoga.css

@@ -31,6 +31,7 @@
   --darkgray: #4B5972;
   --lightgray: #afb9ca;
   --white: #ffffff;
+  --blue: #2760D1;
   --light-brown: #f7efe0;
   --dark-brown: #a4906e;
   --light-orange: #fee4d0;
@@ -51,7 +52,7 @@
   --sub-text-color: var(--white);
   --sub-secondary-text-color: var(--gray);
   /* Link properties */
-  --link-color: #2760D1;
+  --link-color: var(--blue);
   --link-decoration: none;
   /* Paper properties */
   --paper-color: var(--white);
@@ -127,7 +128,7 @@ h6, .h6 {
   }
 }
 a {
-  color: var(--link-color);
+  color: var(--link-color, inherit);
   text-decoration: var(--link-decoration);
 }
 
@@ -184,17 +185,15 @@ summary, .summary {
   align-items: center;
   gap: 5px;
   font: 700 0.89rem/1em var(--sans);
-  color: var(--more-link-color, var(--link-color));
   text-decoration: none;
   text-transform: uppercase;
+  color: var(--more-link-color, var(--link-color));
+  --fill-color: var(--more-link-color);
 }
 
 .more-link:hover {
   text-decoration: none;
-}
-
-.more-link:after {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M10.3536 4.35355C10.5488 4.15829 10.5488 3.84171 10.3536 3.64645L7.17157 0.464467C6.97631 0.269205 6.65973 0.269204 6.46447 0.464467C6.2692 0.659729 6.2692 0.976311 6.46447 1.17157L9.29289 4L6.46447 6.82843C6.2692 7.02369 6.2692 7.34027 6.46447 7.53553C6.65973 7.7308 6.97631 7.7308 7.17157 7.53553L10.3536 4.35355ZM-4.37114e-08 4.5L10 4.5L10 3.5L4.37114e-08 3.5L-4.37114e-08 4.5Z' fill='%232760D1'/%3E%3C/svg%3E");
+  color: var(--more-link-color, var(--link-color));
 }
 
 .dateline {
@@ -255,6 +254,10 @@ hr {
 /**
  * Color schemes
  */
+.opinion svg {
+  --fill-color: var(--purple);
+}
+
 .impact, .in-depth {
   --paper-color: var(--impact-color, var(--black));
   --text-color: var(--impact-text-color, var(--white));
@@ -728,13 +731,13 @@ section, .section {
 .social-media {
   place-content: center;
   display: flex;
+  align-items: center;
   gap: var(--social-media-gap, var(--space-sm));
 }
 
 .social-media svg {
   display: block;
-  width: 20px;
-  height: 20px;
+  --fill-color: var(--text-color);
 }
 
 /*
@@ -2371,113 +2374,85 @@ footer {
 /**
  * Author card
  *
- * Note: the DOM is quite old and could use some love
  */
 .author-card {
   display: grid;
-  gap: 15px;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "thumb info" "bio bio";
+  gap: var(--space-sm) var(--space);
+  grid-template-columns: auto;
+  grid-template-areas: "thumb" "info" "bio";
   font-family: var(--sans);
-  font-size: 0.875rem;
   align-items: center;
-  --package-padding: var(--space-sm) 0;
-  --link-decoration: none;
-  --header-transform: none;
-  --gap: 0;
+  max-width: 980px;
 }
 
+@media (min-width: 769px) {
+  .author-card {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "thumb info" "bio bio";
+  }
+}
 .author-card .thumb {
-  position: relative;
-  background-color: var(--media-background-color);
-  width: 70px;
-  height: 70px;
-  box-sizing: border-box;
+  align-items: center;
+  align-self: start;
   grid-area: thumb;
-  border-radius: 50%;
+  width: 45px;
+  height: 45px;
 }
 
-.author-card .thumb .initials {
-  align-content: center;
+.author-card .thumb img {
+  width: 100%;
   height: 100%;
-  font-size: 24px;
-  font-weight: 700;
-  text-align: center;
+  border-radius: 50%;
 }
 
-.author-card .thumb img {
-  position: absolute;
-  top: 0;
+.author-card .thumb .initials {
+  background-color: #ECEEF2;
   width: 100%;
   height: 100%;
-  object-fit: cover;
   border-radius: 50%;
+  font-size: 20px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  align-content: center;
 }
 
-.author-card > .flex {
-  display: grid;
+.author-card > .article-details {
   grid-area: info;
-  justify-items: start;
+  font-size: 0.778em;
+  --link-color: var(--text-color);
+  --more-link-color: var(--blue);
 }
 
-.author-card .summary {
+.author-description {
   grid-area: bio;
-}
-
-.author-card .byline {
-  margin: 0;
+  font-size: 0.67em;
+  line-height: 1.5em;
 }
 
 /**
- * Bio version
+ * Author bio
+ *
  */
 .author-bio {
-  padding: 0 var(--page-padding);
-  grid-template-columns: auto 1fr;
-  grid-row-gap: var(--space-sm);
-  grid-template-areas: "thumb info" "bio bio" "contact contact";
-  --header-weight: 400;
+  padding: var(--space) var(--page-padding) 0;
 }
 
-.author-bio .a-details {
-  grid-area: info;
-}
-
-.author-bio .summary {
-  grid-area: bio;
-  align-self: start;
-  font-size: 0.89rem;
-}
-
-.author-bio .a-social {
-  grid-area: contact;
-}
-
-.author-bio .h6 {
-  color: var(--secondary-text-color);
+@media (min-width: 769px) {
+  .author-card.author-bio {
+    grid-template-areas: "thumb info" "thumb bio";
+  }
 }
-
 @media (min-width: 600px) {
   .author-bio {
-    padding: 0;
+    padding: var(--space) 0;
   }
 }
-@media (min-width: 768px) {
-  .author-bio {
-    grid-template-columns: auto 3fr 2fr;
-    grid-template-areas: "thumb info contact" "thumb bio contact";
-  }
-  .author-bio .a-details {
-    align-self: end;
-  }
-  .author-bio .thumb {
-    width: 160px;
-    height: 160px;
-  }
-  .author-bio .a-social {
-    justify-self: end;
-  }
+.author-bio .thumb {
+  width: 90px;
+  height: 90px;
 }
+
 /**
  * Author byline
  */
@@ -2489,8 +2464,7 @@ footer {
   color: var(--byline-color, var(--darkgray));
 }
 
-.author-name,
-.article-details .viafoura {
+.author-name {
   font-weight: bold;
 }
 
@@ -2500,7 +2474,6 @@ footer {
   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;
@@ -2509,6 +2482,9 @@ footer {
 .article-details > * {
   position: relative;
   line-height: normal;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .article-details > *::before {
@@ -2519,20 +2495,36 @@ footer {
   block-size: 100vh;
   inset-block-start: 0;
   inset-inline-start: calc(var(--line-offset) * -1);
+  height: 25px;
   z-index: 1;
 }
 
+.article-details svg {
+  align-self: center;
+  vertical-align: middle;
+  height: 1em;
+}
+
+.article-details .opinion {
+  color: var(--darkgray);
+}
+
+@media (max-width: 768px) {
+  .article-details .opinion svg {
+    display: none;
+  }
+}
+.article-details .social-media {
+  gap: var(--space-sm);
+}
+
 .article-details .comments {
-  display: inline-flex;
-  gap: 5px;
+  font-weight: bold;
+  --fill-color: var(--text-color);
 }
 
-.article-details .comments > svg {
-  display: inline-block;
-  align-self: center;
-  height: 1em;
-  padding-top: 2px;
-  --fill-color: var(--byline-color);
+.article-details .more-link {
+  font-size: 1em;
 }
 
 /**

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="impact">
+<footer>
   <section class="footer">
     <div class="package footer-connect">
       <h3>CONNECT</h3>

layouts/shortcodes/author-card.html

@@ -1,40 +1,60 @@
 {{ if eq ($.Get "version") "bio" }}
 
-<div class="author-card author-bio package">
+<div class="author-card author-bio">
   <div class="thumb">
-    <div class="initials">AM</div>
-    <!-- <img src="/img/aaron_moody.jpg" width="400" height="400" alt="Aaron Moody"> -->
+    <!-- <div class="initials">AM</div> -->
+    <img src="/img/aaron_moody.jpg" width="400" height="400" alt="Aaron Moody">
   </div>
-  <div class="a-details package">
-    <!-- <span class="h6 gray">SPORTS REPORTER</span> -->
-    <h3 class="name">Aaron Moody</h3>
-  </div>
-  <div class="summary">
-    <span>Aaron Moody is a sports and general reporter for the News &amp; Observer. Here is a second sentence for the bio because it will probably be longer than this. Maybe even longer I don't know.</span>
+  <div class="article-details">
+    <a class="author-name" href="mailto:[email protected]">Aaron Moody</a>
+    <!-- included if writer is an opinion contributor-->
+    <div class="opinion">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+      <path d="M0 2.50009C0 1.39691 0.896914 0.5 2.00009 0.5H14.0006C15.1038 0.5 16.0007 1.39691 16.0007 2.50009V11.5005C16.0007 12.6036 15.1038 13.5006 14.0006 13.5006H9.66604L5.80025 16.4007C5.65024 16.5132 5.44711 16.5319 5.27523 16.4476C5.10335 16.3632 5.00022 16.1913 5.00022 16.0007V13.5006H2.00009C0.896914 13.5006 0 12.6036 0 11.5005V2.50009ZM5.00022 4.00015C4.44707 4.00015 4.00017 4.44705 4.00017 5.00019V6.50026C4.00017 7.05341 4.44707 7.5003 5.00022 7.5003H6.00026V7.72844C6.00026 8.09408 5.73462 8.40659 5.37211 8.46909L5.12522 8.50972C4.71583 8.57847 4.44082 8.96286 4.50957 9.37226C4.57832 9.78165 4.96271 10.0567 5.37211 9.98791L5.61899 9.94728C6.70341 9.76602 7.50032 8.82848 7.50032 7.72844V6.50026V5.75023V5.00019C7.50032 4.44705 7.05343 4.00015 6.50028 4.00015H5.00022ZM12.0005 6.50026V5.75023V5.00019C12.0005 4.44705 11.5536 4.00015 11.0005 4.00015H9.50041C8.94726 4.00015 8.50037 4.44705 8.50037 5.00019V6.50026C8.50037 7.05341 8.94726 7.5003 9.50041 7.5003H10.5005V7.72844C10.5005 8.09408 10.2348 8.40659 9.8723 8.46909L9.62542 8.50972C9.21602 8.57847 8.94101 8.96286 9.00976 9.37226C9.07852 9.78165 9.46291 10.0567 9.8723 9.98791L10.1192 9.94728C11.2036 9.76602 12.0005 8.82848 12.0005 7.72844V6.50026Z"/>
+      </svg>
+      Opinion Contributor
+    </div>
+    {{ template "shortcodes/social-media-author.html" }}
+    <div class="author-phone">
+      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
+      <path d="M3.57394 1.02345L3.57415 1.02339C3.88722 0.937861 4.21269 1.08761 4.35239 1.37488L4.36952 1.41599L5.54139 4.22849L5.54148 4.22869C5.65551 4.50205 5.57699 4.81719 5.34662 5.00552L3.9023 6.18617L3.59958 6.43364L3.76676 6.78709C4.79181 8.95415 6.54591 10.7082 8.71296 11.7333L9.06597 11.9003L9.31349 11.5982L10.4971 10.1539L10.4971 10.1539L10.4988 10.1517C10.6831 9.92425 10.9997 9.84403 11.2743 9.95858L11.2745 9.95866L14.087 11.1305L14.088 11.131C14.3994 11.2599 14.5658 11.5996 14.4767 11.9259L14.4766 11.9261L13.7739 14.5028C13.7738 14.503 13.7738 14.5032 13.7737 14.5034C13.6923 14.7976 13.4255 15 13.125 15C6.1531 15 0.5 9.34695 0.5 2.37505C0.5 2.07454 0.702379 1.8078 0.996637 1.72635C0.996832 1.72629 0.997027 1.72624 0.997222 1.72619L3.57394 1.02345Z"/>
+      <path d="M3.57394 1.02345L3.57415 1.02339C3.88722 0.937861 4.21269 1.08761 4.35239 1.37488L4.36952 1.41599L5.54139 4.22849L5.54148 4.22869C5.65551 4.50205 5.57699 4.81719 5.34662 5.00552L3.9023 6.18617L3.59958 6.43364L3.76676 6.78709C4.79181 8.95415 6.54591 10.7082 8.71296 11.7333L9.06597 11.9003L9.31349 11.5982L10.4971 10.1539L10.4971 10.1539L10.4988 10.1517C10.6831 9.92425 10.9997 9.84403 11.2743 9.95858L11.2745 9.95866L14.087 11.1305L14.088 11.131C14.3994 11.2599 14.5658 11.5996 14.4767 11.9259L14.4766 11.9261L13.7739 14.5028C13.7738 14.503 13.7738 14.5032 13.7737 14.5034C13.6923 14.7976 13.4255 15 13.125 15C6.1531 15 0.5 9.34695 0.5 2.37505C0.5 2.07454 0.702379 1.8078 0.996637 1.72635C0.996832 1.72629 0.997027 1.72624 0.997222 1.72619L3.57394 1.02345Z"/>
+      <path d="M3.57394 1.02345L3.57415 1.02339C3.88722 0.937861 4.21269 1.08761 4.35239 1.37488L4.36952 1.41599L5.54139 4.22849L5.54148 4.22869C5.65551 4.50205 5.57699 4.81719 5.34662 5.00552L3.9023 6.18617L3.59958 6.43364L3.76676 6.78709C4.79181 8.95415 6.54591 10.7082 8.71296 11.7333L9.06597 11.9003L9.31349 11.5982L10.4971 10.1539L10.4971 10.1539L10.4988 10.1517C10.6831 9.92425 10.9997 9.84403 11.2743 9.95858L11.2745 9.95866L14.087 11.1305L14.088 11.131C14.3994 11.2599 14.5658 11.5996 14.4767 11.9259L14.4766 11.9261L13.7739 14.5028C13.7738 14.503 13.7738 14.5032 13.7737 14.5034C13.6923 14.7976 13.4255 15 13.125 15C6.1531 15 0.5 9.34695 0.5 2.37505C0.5 2.07454 0.702379 1.8078 0.996637 1.72635C0.996832 1.72629 0.997027 1.72624 0.997222 1.72619L3.57394 1.02345Z" />
+      </svg>
+       000-000-0000
+    </div>
   </div>
-  <div class="a-social package">
-    <span class="h6 connect">Connect with Aaron:</span>
-    {{ template "shortcodes/social-media.html" }}
+  <div class="author-description">
+    <span>Since 1989, David J. Neal’s domain at the Miami Herald has expanded to include writing about Panthers (NHL and FIU), Dolphins, old school animation, food safety, fraud, naughty lawyers, bad doctors and all manner of breaking news. He drinks coladas whole. He does not work Indianapolis 500 Race Day.</span>
+    <a href="#custom-url-from-cue">Support my work with a digital subscription</a>
   </div>
 </div>
 
 {{- else -}}
 
 <div class="story-module">
-  <div class="author-card package">
+  <div class="author-card">
     <div class="thumb">
-      <div class="initials">AM</div>
-      <!-- <img src="/img/aaron_moody.jpg" width="400" height="400" alt="Aaron Moody"> -->
+      <!-- <div class="initials">AM</div> -->
+      <img src="/img/aaron_moody.jpg" width="400" height="400" alt="Aaron Moody">
     </div>
-    <div class="flex">
-      <span class="h6 byline">
-        <a href="mailto:[email protected]">Aaron Moody</a>
-      </span>
+    <div class="article-details">
+      <a class="author-name" href="mailto:[email protected]">Aaron Moody</a>
+      <!-- included if writer is an opinion contributor-->
+      <div class="opinion">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+        <path d="M0 2.50009C0 1.39691 0.896914 0.5 2.00009 0.5H14.0006C15.1038 0.5 16.0007 1.39691 16.0007 2.50009V11.5005C16.0007 12.6036 15.1038 13.5006 14.0006 13.5006H9.66604L5.80025 16.4007C5.65024 16.5132 5.44711 16.5319 5.27523 16.4476C5.10335 16.3632 5.00022 16.1913 5.00022 16.0007V13.5006H2.00009C0.896914 13.5006 0 12.6036 0 11.5005V2.50009ZM5.00022 4.00015C4.44707 4.00015 4.00017 4.44705 4.00017 5.00019V6.50026C4.00017 7.05341 4.44707 7.5003 5.00022 7.5003H6.00026V7.72844C6.00026 8.09408 5.73462 8.40659 5.37211 8.46909L5.12522 8.50972C4.71583 8.57847 4.44082 8.96286 4.50957 9.37226C4.57832 9.78165 4.96271 10.0567 5.37211 9.98791L5.61899 9.94728C6.70341 9.76602 7.50032 8.82848 7.50032 7.72844V6.50026V5.75023V5.00019C7.50032 4.44705 7.05343 4.00015 6.50028 4.00015H5.00022ZM12.0005 6.50026V5.75023V5.00019C12.0005 4.44705 11.5536 4.00015 11.0005 4.00015H9.50041C8.94726 4.00015 8.50037 4.44705 8.50037 5.00019V6.50026C8.50037 7.05341 8.94726 7.5003 9.50041 7.5003H10.5005V7.72844C10.5005 8.09408 10.2348 8.40659 9.8723 8.46909L9.62542 8.50972C9.21602 8.57847 8.94101 8.96286 9.00976 9.37226C9.07852 9.78165 9.46291 10.0567 9.8723 9.98791L10.1192 9.94728C11.2036 9.76602 12.0005 8.82848 12.0005 7.72844V6.50026Z"/>
+        </svg>
+        Opinion Contributor
+      </div>
       {{ template "shortcodes/social-media-author.html" }}
+      <a class="more-link" href="#">Send me a news tip <svg xmlns="http://www.w3.org/2000/svg" width="11" height="9" viewBox="0 0 11 9" fill="none">
+        <path d="M10.8536 4.85355C11.0488 4.65829 11.0488 4.34171 10.8536 4.14645L7.67157 0.964467C7.47631 0.769205 7.15973 0.769204 6.96447 0.964467C6.7692 1.15973 6.7692 1.47631 6.96447 1.67157L9.79289 4.5L6.96447 7.32843C6.7692 7.52369 6.7692 7.84027 6.96447 8.03553C7.15973 8.2308 7.47631 8.2308 7.67157 8.03553L10.8536 4.85355ZM0.5 5L10.5 5L10.5 4L0.5 4L0.5 5Z"/>
+        </svg></a>
     </div>
-    <div class="summary package">
+    <div class="author-description">
       <span>Aaron Moody is a sports and general reporter for the News &amp; Observer. Here is a second sentence for the bio because it will probably be longer than this. Maybe even longer I don't know.</span>
-      <a class="h5" href="#custom-url-from-cue">Support my work with a digital subscription</a>
+      <a href="#custom-url-from-cue">Support my work with a digital subscription</a>
     </div>
   </div>
 </div>