working on blog patterns

docs/docs/patterns/news.md

@@ -88,6 +88,15 @@ TODO Page Description
       <li><a href="#">Pop Culture</a></li>
     </ul>
     </section>
+    <section>
+      <h4 style="--wa-space-xl: 0;">Contact</h4>
+      <ul>
+      <li><a href="#">Help Center</a></li>
+      <li><a href="#">Contact Us</a></li>
+      <li><a href="#">Press</a></li>
+      <li><a href="#">Partners</a></li>
+    </ul>
+    </section>
     <section>
       <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
       <ul class="list">
@@ -97,22 +106,24 @@ TODO Page Description
     </ul>
     </section>
   </div>
-  <div class="social">
-    <a href="">
+  <div class="social" style="margin-bottom: 1rem;">
+    <span style="display: inline-block; margin-right: 0.5rem;">Follow us</span>
+    <a style="color: var(--wa-color-text-normal);" href="">
       <wa-icon family="brands" name="bluesky"></wa-icon> 
     </a>
-    <a href="">
+    <a style="color: var(--wa-color-text-normal);" href="">
       <wa-icon family="brands" name="instagram"></wa-icon> 
     </a>
-    <a href="">
+    <a style="color: var(--wa-color-text-normal);" href="">
       <wa-icon family="brands" name="facebook"></wa-icon> 
     </a>
-    <a href="">
+    <a style="color: var(--wa-color-text-normal);" href="">
       <wa-icon family="brands" name="mastodon"></wa-icon> 
     </a>
   </div>
-  <div>
-    <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
+  <div style="display: flex; align-items: center;">
+    <span style="display: inline-block; margin-right: 0.5rem;">Get the app</span>
+    <img style="margin-right: .5rem;" src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
     <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
   </div>
   <div class="legal">&#169 2024 All rights reserved.</div>
@@ -131,7 +142,7 @@ TODO Page Description
     }
     .nav {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 
     .nav ul {
@@ -149,12 +160,106 @@ TODO Page Description
       display: flex;
       align-items: center;
       text-decoration: none;
-      --wa-color-text-link: var(--wa-color-gray-20);
+      --wa-color-text-link: var(--wa-color-text-normal);
 
       wa-icon {
         margin-right: .5rem;
       }
     }
+
+    .legal {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--wa-color-surface-border);
+    }
   }
 </style>
+```
+
+## Related articles
+```html{.example}
+  <div class="related-articles">
+    <div class="container">
+      <h4>More From...</h4>
+      <div class="article-list">
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+        <wa-card with-image with-footer class="related-article">
+          <img slot="image" src="https://img.fortawesome.com/cfa83f3c/scott-graham-5fnmwej4taa-unsplash2.jpg" alt="A kitten sits patiently between a terracotta pot and decorative grasses."/>
+          <span style="align-items: center; display: inline-block; margin-bottom: 1rem;">
+            <wa-tooltip for="avatar">This is a tooltip</wa-tooltip>
+            <wa-avatar style="--size: 2rem;" id="avatar" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down"></wa-avatar> 
+            <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Andy Kaufman</a> in <a href="#" style="text-decoration: none; color: var(--wa-color-text-normal)">Design Theory</a>
+          </span>
+          <div><strong>How to make Twitter a real super app without breaking its UX</strong></div>
+          <p style="margin-bottom: 0">The buzz around the X super app is deafening. Elon Musk wants to dominate the market with WeChat’s “everything app” strategy.</p>
+          <div slot="footer" style="display: flex; align-items: center; ">
+            <span style="margin-right: 1rem;">Jan 30</span>
+            <span style="margin-right: 1rem;"><wa-icon style="margin-right: .25rem;" fixed-width name="hands-clapping"></wa-icon>394</span>
+            <span><wa-icon style="margin-right: .25rem;" fixed-width name="comment"></wa-icon>394</span>
+            <wa-icon style="margin-left: auto" fixed-width  name="bookmark"></wa-icon>
+          </div>
+        </wa-card>
+      </div>
+    </div>
+  </div>
+  <style>
+    .related-articles {
+      .article-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
+        gap: 1rem;
+      }
+      .container {
+        max-width: 960px;
+        margin: auto;
+      }
+    }
+  </style>
 ```