@reuters-graphics/graphics-components 0.1.6 → 0.1.7--canary.99.331bdb0.0

package/dist/components/BodyText/BodyText.svelte

@@ -5,190 +5,15 @@
  * @required
  */
 export let text;
+/** Add a class to target with SCSS. */
+let cls = '';
+export { cls as class };
 import { marked } from 'marked';
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block cls="body-text">
+<Block class="body-text {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}
 </Block>
-
-<!-- svelte-ignore css-unused-selector -->
-<style global>:global(.paragraph-size), :global(div.article-block.body-text) :global(p), :global(div.article-block.body-text) :global(ul) :global(li), :global(div.article-block.body-text) :global(ul) :global(li) :global(p), :global(div.article-block.body-text) :global(ol) :global(li), :global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-:global(.paragraph-size.font-sans), :global(div.article-block.body-text) :global(p.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.font-sans) {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  :global(.paragraph-size), :global(div.article-block.body-text) :global(p), :global(div.article-block.body-text) :global(ul) :global(li), :global(div.article-block.body-text) :global(ul) :global(li) :global(p), :global(div.article-block.body-text) :global(ol) :global(li), :global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  :global(.paragraph-size.font-sans), :global(div.article-block.body-text) :global(p.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.font-sans) {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-:global(.paragraph-size.important), :global(div.article-block.body-text) :global(p.important), :global(div.article-block.body-text) :global(ul) :global(li.important), :global(div.article-block.body-text) :global(ol) :global(li.important) {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-:global(.paragraph-size.important.font-sans), :global(div.article-block.body-text) :global(p.important.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.important.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.important.font-sans) {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  :global(.paragraph-size.important), :global(div.article-block.body-text) :global(p.important), :global(div.article-block.body-text) :global(ul) :global(li.important), :global(div.article-block.body-text) :global(ol) :global(li.important) {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  :global(.paragraph-size.important.font-sans), :global(div.article-block.body-text) :global(p.important.font-sans), :global(div.article-block.body-text) :global(ul) :global(li.important.font-sans), :global(div.article-block.body-text) :global(ol) :global(li.important.font-sans) {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-:global(.small-size) {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  :global(.small-size) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-:global(.small-size.important) {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  :global(.small-size.important) {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-:global(.blockquote-size), :global(div.article-block.body-text) :global(blockquote) :global(p) {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  :global(.blockquote-size), :global(div.article-block.body-text) :global(blockquote) :global(p) {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-:global(.blockquote-size.important), :global(div.article-block.body-text) :global(blockquote) :global(p.important) {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  :global(.blockquote-size.important), :global(div.article-block.body-text) :global(blockquote) :global(p.important) {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-:global(div.article-block.body-text) :global(h2),
-:global(div.article-block.body-text) :global(h3),
-:global(div.article-block.body-text) :global(h4),
-:global(div.article-block.body-text) :global(h5),
-:global(div.article-block.body-text) :global(h6),
-:global(div.article-block.body-text) :global(p),
-:global(div.article-block.body-text) :global(li),
-:global(div.article-block.body-text) :global(blockquote) {
-  color: var(--theme-colour-text-primary, #404040);
-}
-:global(div.article-block.body-text) :global(p),
-:global(div.article-block.body-text) :global(ul) :global(li),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(p),
-:global(div.article-block.body-text) :global(ol) :global(li),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(p) {
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-  color: var(--theme-colour-text-primary, #404040);
-}
-:global(div.article-block.body-text) :global(p) :global(a),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(a),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(a),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
-  color: currentColor;
-  background-size: 1px 1px;
-  background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
-  background-position: 0 1.3rem;
-  background-repeat: repeat-x;
-  text-decoration: none;
-  text-shadow: 1px 1px var(--theme-colour-background, #ffffff), 1px -1px var(--theme-colour-background, #ffffff), -1px 1px var(--theme-colour-background, #ffffff), -1px -1px var(--theme-colour-background, #ffffff);
-}
-@media (max-width: 540px) {
-  :global(div.article-block.body-text) :global(p) :global(a),
-  :global(div.article-block.body-text) :global(ul) :global(li) :global(a),
-  :global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a),
-  :global(div.article-block.body-text) :global(ol) :global(li) :global(a),
-  :global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a) {
-    background-position: 0 1.1rem;
-  }
-}
-:global(div.article-block.body-text) :global(p) :global(a:hover),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(a:hover),
-:global(div.article-block.body-text) :global(ul) :global(li) :global(p) :global(a:hover),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(a:hover),
-:global(div.article-block.body-text) :global(ol) :global(li) :global(p) :global(a:hover) {
-  text-decoration: none;
-}
-:global(div.article-block.body-text) :global(h2) {
-  margin: 4rem 0 2rem;
-  text-align: center;
-  font-weight: 600;
-}
-:global(div.article-block.body-text) :global(h2::after) {
-  display: block;
-  content: "";
-  background: var(--theme-colour-text-secondary, #666666);
-  height: 3px;
-  width: 100px;
-  margin: 10px auto 2rem;
-}
-:global(div.article-block.body-text) :global(ul) {
-  padding-left: 1.75rem;
-  list-style-type: square;
-}
-:global(div.article-block.body-text) :global(p) + :global(ul) {
-  margin-top: -0.75rem;
-}
-:global(div.article-block.body-text) :global(blockquote) {
-  margin: 30px 0;
-  border-left: 2px solid var(--theme-colour-text-secondary, #666666);
-  padding-left: 15px;
-}
-:global(div.article-block.body-text) :global(blockquote) :global(p) {
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-}
-:global(div.article-block.body-text) :global(blockquote) :global(blockquote) {
-  border: 0;
-  padding: 0;
-  margin: -5px 0 0;
-}
-:global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(p) {
-  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
-  color: var(--theme-colour-text-primary, #404040);
-  font-size: 1rem;
-}
-@media (max-width: 540px) {
-  :global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(p) {
-    font-size: 0.9rem;
-  }
-}
-:global(div.article-block.body-text) :global(blockquote) :global(blockquote) :global(blockquote) {
-  display: none;
-}
-:global(div.article-block.body-text.font-sans) {
-  font-family: var(--theme-font-family-sans-serif, var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif)) !important;
-}</style>

package/dist/components/DocumentCloud/DocumentCloud.svelte

@@ -17,11 +17,12 @@ export let altText;
 /** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-export let cls = '';
+let cls = '';
+export { cls as class };
 import Block from '../Block/Block.svelte';
 </script>
 
-<Block width="{width}" id="{id}" cls="photo {cls}">
+<Block width="{width}" id="{id}" class="photo {cls}">
   <iframe
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
     title="{altText}"

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -14,6 +14,17 @@ export let src;
  * @required
  */
 export let altText;
+/**
+ * Add an id to target with custom CSS.
+ * @type {string}
+ */
+export let id = '';
+/**
+ * Add extra classes to target with custom CSS.
+ * @type {string}
+ */
+let cls = '';
+export { cls as class };
 /**
  * Caption below the photo
  * @type {string}
@@ -61,50 +72,37 @@ onMount(() => {
 });
 </script>
 
-<Block width="{width}" cls="photo">
-  <figure bind:this="{container}" aria-label="media">
+<Block width="{width}" class="photo {cls}" id="{id}">
+  <figure
+    bind:this="{container}"
+    aria-label="media"
+    class="w-full mt-0 mx-0 mb-6 flex flex-col relative"
+  >
     {#if !lazy || (intersectable && intersecting)}
-      <img src="{src}" alt="{altText}" />
+      <img class="w-full m-0" src="{src}" alt="{altText}" />
     {:else}
-      <div class="placeholder" height="{`${height}px`}"></div>
+      <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
     {/if}
     {#if caption}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <figcaption>{caption}</figcaption>
+        <figcaption class="font-note my-0 text-xs leading-tight">
+          {caption}
+        </figcaption>
       </PaddingReset>
     {/if}
     {#if !altText}
-      <div class="alt-warning">altText</div>
+      <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
     {/if}
   </figure>
 </Block>
 
-<style>figure {
-  width: 100%;
-  position: relative;
-}
-figure img {
-  width: 100%;
-  margin: 0;
-}
-figure .placeholder {
+<style>.placeholder {
   background-color: #ccc;
-  width: 100%;
 }
-figure div.alt-warning {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  padding: 5px 10px;
+
+div.alt-warning {
   background-color: red;
   color: white;
-  position: absolute;
   top: 0;
   right: 0;
-  font-size: 14px;
-  line-height: 16px;
-}
-figure figcaption {
-  font-weight: 400;
-  font-size: 0.8rem;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-secondary, #666666);
 }</style>

package/dist/components/Framer/Typeahead/index.svelte

@@ -188,7 +188,7 @@
     results.length > 0
       ? `${id}-result-${selectedIndex}`
       : null}"
-    bind:value
+    bind:value="{value}"
     on:type
     on:input
     on:change
@@ -289,7 +289,7 @@ ul {
 li,
 li.no-results {
   padding: 0.25rem 1rem;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
   color: #333;
 }
 
@@ -333,7 +333,7 @@ li:hover {
   display: inline-flex;
   font-size: 0.75rem;
   color: #aaa;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-family: var(--theme-font-family-sans-serif);
 }
 
 :global([data-svelte-search] input) {
@@ -345,7 +345,7 @@ li:hover {
   border-radius: 0 !important;
   background-color: #fff;
   border: 1px solid #ddd;
-  font-family: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
+  font-family: var(--theme-font-family-sans-serif);
 }
 
 :global([data-svelte-search] input:focus) {

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -13,7 +13,8 @@ export let id = '';
  * Add extra classes to the block tag to target it with custom CSS.
  * @type {string}
  */
-export let cls = '';
+let cls = '';
+export { cls as class };
 /** Snap block to column widths, rather than fluidly resizing them. */
 export let snap = false;
 /**
@@ -66,7 +67,7 @@ import { marked } from 'marked';
   role="{role}"
   width="{width}"
   ariaLabel="{ariaLabel}"
-  cls="graphic {cls}"
+  class="graphic {cls}"
 >
   <div>
     {#if $$slots.title}
@@ -79,7 +80,7 @@ import { marked } from 'marked';
     {:else if title}
       <PaddingReset containerIsFluid="{width === 'fluid'}">
         <TextBlock width="{textWidth}">
-          <h3>{title}</h3>
+          <h3 class="mt-0 fmb-1">{title}</h3>
           {#if description}
             {@html marked(description)}
           {/if}
@@ -120,151 +121,20 @@ import { marked } from 'marked';
 </Block>
 
 <!-- svelte-ignore css-unused-selector -->
-<style>.paragraph-size {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-}
-.paragraph-size.font-sans {
-  font-size: 1.1rem;
-  line-height: 1.75rem;
-}
-@media (max-width: 540px) {
-  .paragraph-size {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-  .paragraph-size.font-sans {
-    font-size: 1rem;
-    line-height: 1.6rem;
-  }
-}
-.paragraph-size.important {
-  font-size: 1.3rem !important;
-  line-height: 2.1rem !important;
-}
-.paragraph-size.important.font-sans {
-  font-size: 1.1rem !important;
-  line-height: 1.8rem !important;
-}
-@media (max-width: 540px) {
-  .paragraph-size.important {
-    font-size: 1.1rem !important;
-    line-height: 1.8rem !important;
-  }
-  .paragraph-size.important.font-sans {
-    font-size: 1rem !important;
-    line-height: 1.6rem !important;
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-@media (max-width: 540px) {
-  .small-size {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-.small-size.important {
-  font-size: 0.9rem !important;
-  line-height: 1.2rem !important;
-}
-@media (max-width: 540px) {
-  .small-size.important {
-    font-size: 0.8rem !important;
-    line-height: 1.1rem !important;
-  }
-}
-
-.blockquote-size {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-}
-@media (max-width: 540px) {
-  .blockquote-size {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-}
-.blockquote-size.important {
-  font-size: 1.6rem !important;
-  line-height: 2rem !important;
-}
-@media (max-width: 540px) {
-  .blockquote-size.important {
-    font-size: 1.3rem !important;
-    line-height: 1.8rem !important;
-  }
-}
-
-div :global(h3) {
-  margin-bottom: 0.5rem;
-  color: var(--theme-colour-text-primary, #404040);
-}
-div :global(p) {
-  -webkit-font-smoothing: antialiased;
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  font-size: 1.1rem;
-  line-height: 1.5rem;
-  color: var(--theme-colour-text-primary, #404040);
-  margin-bottom: 1rem;
-}
-div :global(p:last-of-type) {
-  margin-bottom: 1rem;
-}
-@media (max-width: 540px) {
-  div :global(p) {
-    font-size: 1rem;
-    line-height: 1.35rem;
-  }
-}
-div :global(p) :global(a) {
-  color: currentColor;
-  background-size: 1px 1px;
-  background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
-  background-position: 0 1.1rem;
-  background-repeat: repeat-x;
-  text-decoration: none;
-}
-div :global(p) :global(a:hover) {
-  text-decoration: none;
-}
-div :global(aside) :global(p) {
-  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
-  margin-bottom: 0;
-  color: var(--theme-colour-text-secondary, #666666);
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-div :global(aside) :global(p:last-of-type) {
-  margin-bottom: 0;
-}
-@media (max-width: 540px) {
-  div :global(aside) :global(p) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-}
-div :global(aside) :global(p) :global(a) {
-  color: currentColor;
-  text-decoration: underline;
-}
-div :global(aside) :global(p) :global(a:hover) {
-  text-decoration: underline;
+<style global>:global(div.article-block.graphic) :global(p:last-of-type) {
+  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }
 
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-          clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
-  white-space: nowrap !important;
-  border: 0 !important;
+:global(div.article-block.graphic) :global(p) {
+  font-family: var(--theme-font-family-note);
+  font-size: var(--theme-font-size-sm);
+  color: var(--theme-colour-text-primary);
+}
+:global(div.article-block.graphic) :global(aside) :global(p) {
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-xs);
+  line-height: 1.25;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
 }</style>

package/dist/components/GraphicBlock/TextBlock.svelte

@@ -4,7 +4,7 @@ import Block from '../Block/Block.svelte';
 </script>
 
 {#if width}
-  <Block width="{width}" cls="m-0">
+  <Block width="{width}" class="m-0">
     <slot />
   </Block>
 {:else}

package/dist/components/Headline/Headline.svelte

@@ -4,6 +4,11 @@
  * @type {string}
  */
 export let hed = 'Reuters Graphics Interactive';
+/**
+ * Headline size
+ * @type {string}
+ */
+export let hedSize = 'normal';
 /**
  * Dek, parsed as a markdown string.
  * @type {string}
@@ -16,25 +21,44 @@ export let dek = null;
 export let section = null;
 import Block from '../Block/Block.svelte';
 import { marked } from 'marked';
+let hedClass;
+$: {
+    switch (hedSize) {
+        case 'biggest':
+            hedClass = 'text-6xl';
+            break;
+        case 'bigger':
+            hedClass = 'text-5xl';
+            break;
+        case 'big':
+            hedClass = 'text-4xl';
+            break;
+        case 'small':
+            hedClass = 'text-2xl';
+            break;
+        default:
+            hedClass = 'text-3xl';
+    }
+}
 </script>
 
-<Block cls="mb-1">
-  <header class="headline">
+<Block class="mb-1">
+  <header class="headline text-center mb-0 my-16 text-primary">
     {#if $$slots.crown}
-      <div class="crown-container">
+      <div class="crown-container flex justify-center items-center">
         <!-- Crown named slot -->
         <slot name="crown" />
       </div>
     {/if}
     <div class="title">
       {#if section}
-        <p class="{'section-title'}">{section}</p>
+        <p class="section-title">{section}</p>
       {/if}
       {#if $$slots.hed}
         <!-- Headline named slot -->
         <slot name="hed" />
       {:else}
-        <h1>{@html marked.parseInline(hed)}</h1>
+        <h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
       {/if}
       {#if $$slots.dek}
         <!-- Dek named slot-->
@@ -44,7 +68,11 @@ import { marked } from 'marked';
       {/if}
     </div>
     {#if $$slots.byline || $$slots.dateline}
-      <aside class="article-metadata" class:pt-1="{!dek}">
+      <aside
+        class="article-metadata pb-0 font-not text-primary text-center leading-none"
+        class:pt-2="{!dek}"
+        class:pt-8="{dek}"
+      >
         {#if $$slots.byline}
           <div class="byline-container">
             <div class="byline">
@@ -54,7 +82,9 @@ import { marked } from 'marked';
           </div>
         {/if}
         {#if $$slots.dateline}
-          <div class="dateline-container">
+          <div
+            class="dateline-container text-xxs tracking-wide text-secondary uppercase"
+          >
             <div class="published">
               <!-- Dateline named slot -->
               <slot name="dateline" />
@@ -66,52 +96,33 @@ import { marked } from 'marked';
   </header>
 </Block>
 
-<style>header.headline {
-  text-align: center;
-  margin-top: 4rem;
-  margin-bottom: 0;
-  color: var(--theme-colour-text-primary, #404040);
+<style>header.headline .article-metadata .byline-container {
+  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }
+
 header.headline :global(h1) {
-  font-size: 4rem;
-  margin: 5px 0;
-  line-height: 1.1;
-  font-family: var(--theme-font-family-hed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
+  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }
+
+header.headline :global(h1) {
+  margin-right: auto;
+  margin-left: auto;
+}
+
 header.headline :global(p) {
-  font-family: var(--theme-font-family-subhed, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
+  font-family: var(--theme-font-family-sans-serif);
+  color: var(--theme-colour-text-primary);
+  line-height: 1.125;
   margin: 0;
-  font-weight: 200;
+  font-weight: 300;
 }
 header.headline :global(p.section-title) {
   font-size: 1rem;
   font-weight: 800;
-  color: var(--theme-colour-accent, #a00000);
-}
-header.headline .article-metadata {
-  padding: 40px 0;
-  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
-  color: var(--theme-colour-text-primary, #404040);
-  text-align: center;
-}
-header.headline .article-metadata .byline-container {
-  margin-bottom: 2px;
+  color: var(--theme-colour-accent);
 }
 header.headline .article-metadata .byline :global(a) {
-  color: var(--theme-colour-text-primary, #404040);
+  color: var(--theme-colour-text-primary);
   text-decoration: none;
-}
-header.headline .article-metadata .dateline-container {
-  text-transform: uppercase;
-  color: var(--theme-colour-text-secondary, #666666);
-  font-size: 0.8rem;
-  line-height: 1.2rem;
-  letter-spacing: 0.2px;
-}
-header.headline div.crown-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }</style>