Merge pull request #41 from mcclatchy/2.8.1

SDS 2.8.1

Author: gabrielakhanna

builds/saratoga.scss

@@ -44,6 +44,7 @@
 @use '../static/css/cards/utilities';
 @use '../static/css/cards/promo-banner';
 @use '../static/css/cards/breaking-news-banner';
+@use '../static/css/cards/ai-summary';
 
 // Decks
 @use '../static/css/decks/fixes';

content/decks/section.html

@@ -47,7 +47,7 @@
   {{< card >}}
 
   <div class="zone" data-type="ad">
-    <fake-ad data-zone="5"></fake-ad>
+    <fake-ad data-zone="5" class="htlad-web-native"></fake-ad>
   </div>
 
   {{< card >}}

content/decks/story.md

@@ -10,6 +10,7 @@ aliases:
 {{% header %}}
 <!-- {{< figure >}} -->
 {{< ai-video-player >}}
+{{< ai-summary >}}
 {{< series-nav >}}
 
 {{< correction >}}

dist/saratoga.css

@@ -2066,6 +2066,10 @@ html.msb .masthead {
   padding: 0;
 }
 
+[data-type=ad]:has(> .htlad-web-native) {
+  --zone-background-color: var(--paper-color);
+}
+
 .htlad-web-native {
   padding: 0;
 }
@@ -2075,6 +2079,32 @@ html.msb .masthead {
   top: 70px; /* flag height - padding */
 }
 
+#zoneContainer:has(.sticky-leaderboard) {
+  height: 106px;
+}
+
+#zone-el-2.sticky-leaderboard {
+  position: fixed;
+  top: 90px;
+  z-index: 98;
+  width: 100vw;
+  height: 106px;
+  overflow: hidden;
+}
+
+#zone-el-2.sticky-leaderboard > * {
+  padding: 8px 0;
+}
+
+@media (max-width: 767px) {
+  #zoneContainer:has(.sticky-leaderboard),
+  #zone-el-2.sticky-leaderboard {
+    height: 66px;
+  }
+  #zone-el-2.sticky-leaderboard {
+    top: 45px;
+  }
+}
 /**
  * Digests
  */
@@ -2399,6 +2429,7 @@ html.msb .masthead {
  */
 .author-card {
   display: grid;
+  align-content: start;
   gap: var(--space-sm) var(--space);
   grid-template-columns: auto;
   grid-template-areas: "thumb" "info" "bio";
@@ -2425,6 +2456,7 @@ html.msb .masthead {
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  object-fit: cover;
 }
 
 .author-card .thumb .initials {
@@ -2456,6 +2488,11 @@ html.msb .masthead {
   display: inline-block;
 }
 
+@media (max-width: 600px) {
+  .grid:has(.author-card) {
+    --grid-row-gap: var(--space);
+  }
+}
 /**
  * Author bio
  *
@@ -2492,6 +2529,7 @@ html.msb .masthead {
 
 .author-name {
   font-weight: bold;
+  --link-color: var(--byline-color);
 }
 
 .article-details {
@@ -2531,10 +2569,6 @@ html.msb .masthead {
   height: 1em;
 }
 
-.article-details .opinion {
-  color: var(--darkgray);
-}
-
 @media (max-width: 768px) {
   .article-details .opinion svg {
     display: none;
@@ -3225,6 +3259,7 @@ section.big-news {
   flex-direction: row;
   font-family: var(--sans);
   font-size: 20px;
+  line-height: 1;
   max-width: var(--section-width);
   padding: 15px;
   margin: 0 auto;
@@ -3234,11 +3269,6 @@ section.big-news {
   margin: 0;
 }
 
-@media (min-width: 690px) {
-  div.breaking-news-macro {
-    padding: 15px;
-  }
-}
 .breaking-news-macro div.breaking-title {
   font-weight: bold;
 }
@@ -3257,6 +3287,61 @@ section.big-news {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="9" viewBox="0 0 8 9" fill="none"%3E%3Cpath d="M7.59049 1.05497C7.81823 0.781777 7.78195 0.376006 7.50786 0.149016C7.23376 -0.0779743 6.82664 -0.0418166 6.5989 0.231375L3.87 3.49562L1.1411 0.231375C0.91336 -0.0418166 0.506242 -0.0779743 0.232143 0.149016C-0.0419554 0.376006 -0.0782332 0.781777 0.149511 1.05497L3.02956 4.5L0.149511 7.94503C-0.0782332 8.21822 -0.0419554 8.62399 0.232143 8.85098C0.506242 9.07797 0.91336 9.04182 1.1411 8.76862L3.87 5.50438L6.5989 8.76862C6.82664 9.04182 7.23376 9.07797 7.50786 8.85098C7.78195 8.62399 7.81823 8.21822 7.59049 7.94503L4.71044 4.5L7.59049 1.05497Z" fill="white"/%3E%3C/svg%3E');
 }
 
+/**
+ * AI Summary/Key Takeaways
+ */
+.ai-summary-wrapper {
+  padding: 2px;
+  position: relative;
+  border-radius: 3px;
+  background: linear-gradient(0deg, #BD56FF, #0FB7FF);
+}
+
+@media (max-width: 800px) {
+  .story-body .ai-summary-wrapper {
+    margin: var(--space);
+  }
+}
+.ai-summary {
+  font-family: var(--sans);
+  background-color: var(--paper-color);
+  padding: var(--space);
+  --grid-row-gap: 5px;
+  --columns: auto;
+  --secondary-text-color: var(--lightgray);
+  --link-color: var(--text-color);
+}
+
+@media (min-width: 630px) {
+  .ai-summary .grid {
+    grid-auto-flow: column;
+    align-items: baseline;
+  }
+}
+.ai-summary .expander {
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.ai-summary-header {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.ai-summary p {
+  font-size: 0.677em;
+  color: var(--darkgray);
+  margin: 0;
+}
+
+.ai-summary ul {
+  list-style-type: square;
+  font-size: 0.78em;
+  line-height: 1.5em;
+  margin-bottom: 0;
+}
+
 /**
  * Purple Tuesdays
  *

layouts/_default/baseof.html

@@ -66,6 +66,7 @@
     <link rel="stylesheet" href="/css/cards/utilities.css">
     <link rel="stylesheet" href="/css/cards/promo-banner.css">
     <link rel="stylesheet" href="/css/cards/breaking-news-banner.css">
+    <link rel="stylesheet" href="/css/cards/ai-summary.css">
 
     <!-- decks/themes -->
     <link rel="stylesheet" href="/css/decks/fixes.css">

layouts/_default/story.html

@@ -8,8 +8,8 @@
 
 {{ define "content" -}}
   {{ partial "masthead" . }}
-  <!-- {{ partial "breaking-news-banner" . }} -->
-  {{ partial "promo-banner" . }}
+  {{ partial "breaking-news-banner" . }}
+  <!-- {{ partial "promo-banner" . }} -->
 
   <div class="zone" id="zone-el-2" data-type="ad">
     <fake-ad size="[970,250]"></fake-ad>

layouts/partials/breaking-news-banner.html

@@ -2,7 +2,7 @@
 <div class="breaking-news-organism impact" id="primary-content">
   <div class="breaking-news-macro">
       <div>
-          <h3><span class="breaking-title">BREAKING NEWS:  </span> <a href="https://alpha.montrealgazette.com/site-services/Newsletters/montreal-sports-newsletter/article54991.html"> Cricket is treated as the celebration in India </a></h3>
+          <h3 class="h4"><span class="breaking-title">BREAKING NEWS:  </span> <a href="https://alpha.montrealgazette.com/site-services/Newsletters/montreal-sports-newsletter/article54991.html"> Cricket is treated as the celebration in India </a></h3>
       </div>
       <div class="close-breaking-news">
         <div class="icon-wrap">

layouts/shortcodes/ai-summary.html

@@ -0,0 +1,29 @@
+<div class="ai-summary-wrapper">
+  <div class="ai-summary">
+    <a class="expander" onclick="this.classList.toggle('open');">
+      <div class="grid">
+        <div class="ai-summary-header">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none"><title>Key Takeaways</title>
+            <path d="M9.59473 2.63611C9.46289 2.68591 9.375 2.81189 9.375 2.95251C9.375 3.09314 9.46289 3.21912 9.59473 3.26892L11.25 3.89001L11.8711 5.54529C11.9209 5.67712 12.0469 5.76501 12.1875 5.76501C12.3281 5.76501 12.4541 5.67712 12.5039 5.54529L13.125 3.89001L14.7803 3.26892C14.9121 3.21912 15 3.09314 15 2.95251C15 2.81189 14.9121 2.68591 14.7803 2.63611L13.125 2.01501L12.5039 0.359741C12.4541 0.227905 12.3281 0.140015 12.1875 0.140015C12.0469 0.140015 11.9209 0.227905 11.8711 0.359741L11.25 2.01501L9.59473 2.63611ZM6.00879 2.28748C5.93262 2.12048 5.76562 2.01501 5.58398 2.01501C5.40234 2.01501 5.23535 2.12048 5.15918 2.28748L3.6123 5.62732L0.272461 7.17126C0.105469 7.24744 0 7.41443 0 7.599C0 7.78357 0.105469 7.94763 0.272461 8.0238L3.61523 9.56775L5.15625 12.9076C5.23242 13.0746 5.39941 13.1801 5.58105 13.1801C5.7627 13.1801 5.92969 13.0746 6.00586 12.9076L7.54981 9.56482L10.8926 8.02087C11.0596 7.9447 11.165 7.77771 11.165 7.59607C11.165 7.41443 11.0596 7.24744 10.8926 7.17126L7.55273 5.63025L6.00879 2.28748ZM11.25 11.39L9.59473 12.0111C9.46289 12.0609 9.375 12.1869 9.375 12.3275C9.375 12.4681 9.46289 12.5941 9.59473 12.6439L11.25 13.265L11.8711 14.9203C11.9209 15.0521 12.0469 15.14 12.1875 15.14C12.3281 15.14 12.4541 15.0521 12.5039 14.9203L13.125 13.265L14.7803 12.6439C14.9121 12.5941 15 12.4681 15 12.3275C15 12.1869 14.9121 12.0609 14.7803 12.0111L13.125 11.39L12.5039 9.73474C12.4541 9.60291 12.3281 9.51501 12.1875 9.51501C12.0469 9.51501 11.9209 9.60291 11.8711 9.73474L11.25 11.39Z" fill="url(#paint0_linear_11194_6459)"/>
+            <defs>
+            <linearGradient id="paint0_linear_11194_6459" x1="7.5" y1="0.140015" x2="7.5" y2="15.14" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#0FB7FF"/>
+            <stop offset="1" stop-color="#BD56FF"/>
+            </linearGradient>
+            </defs>
+            </svg>
+            <div class="h3">Key Takeaways</div>
+          </div>
+          <p class="summary">AI generated summary reviewed by our newsroom</p>
+      </div>
+    </a>
+    <hr>
+    <ul>
+      <li>Kevin Wang, a New College professor, was fired under Florida's SB 846 law.</li>
+      <li>Wang, a Chinese asylum seeker, taught for nearly two years before his dismissal.</li>
+      <li>His firing sparked student outrage and concerns about academic freedom.</li>
+      <li>The law faces criticism and legal challenges for potential discrimination.</li>
+      <li>Wang plans to leave Florida but will continue seeking asylum in the U.S.</li>
+    </ul>
+  </div>
+</div>

layouts/shortcodes/author-card.html

@@ -40,17 +40,31 @@
     </div>
     <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>
+        <!-- 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>
+        <span class="credit">The Fresno Bee</span>
       </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">
+      <div class="author-phone">
+        <a href="tel:305-376-2664" class="telephone flex flex-amp">
+        <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>
+            <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>
+            <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>
+        </svg>
+        305-376-2664
+        </a>
+      </div>
+      <!-- <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>
+        </svg>
+      </a> -->
     </div>
     <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>

layouts/shortcodes/header.html

@@ -4,12 +4,12 @@
   <h1 class="h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus lorem amet.</h1>
   <div class="author-byline">
     <div>
-      By <span class="author-name">John Doe</span> and <span class="author-name">Jane Doe</span>
+      By <a href="#" class="author-name">John Doe</a> and <a href="#" class="author-name">Jane Doe</a>
       <span class="credit">Sample Newspaper</span>
     </div>
     <div class="article-details">
-      <time datetime="">Updated August 13, 2018 3:19 PM</time>
-      <span class="comments"> <!--comments DOM added for demo purposes only -->
+      <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>