Merge pull request #313 from reuters-graphics/heapile-pkd

edits headpile

src/components/Headpile/Headpile.svelte

@@ -62,7 +62,7 @@
   }: Props = $props();
 </script>
 
-<Block class={cls} {id} {width}>
+<Block class="fmy-6 {cls} {id} {width}">
   <div class="figures">
     {#each figures as figure}
       <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
@@ -76,11 +76,6 @@
   div.figures {
     display: flex;
     flex-direction: column;
-    gap: 40px;
-    @include mixins.fpt-4;
-    @media (max-width: 600px) {
-      gap: 0px;
-      padding-block-start: 0;
-    }
+    gap: 2rem;
   }
 </style>

src/components/Headpile/Headshot.svelte

@@ -9,22 +9,22 @@
 
 <style lang="scss">
   .headshot-wrapper {
-    width: 100px;
-    height: 120px;
+    width: 7rem;
+    height: 6.75rem;
     position: relative;
-    margin-top: -46px;
-    margin-bottom: -46px;
-    border-radius: 4px;
+    margin-block-start: -1.75rem;
+    margin-block-end: -1.75rem;
+    border-radius: 0.25rem;
     overflow: hidden;
   }
   .background {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100px;
-    height: 70px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    width: 7rem;
+    height: 4.75rem;
     display: inline-block;
-    border-radius: 4px;
+    border-radius: 0.25rem;
   }
   .headshot {
     display: inline-block;
@@ -34,8 +34,8 @@
     background-position: center bottom;
     background-repeat: no-repeat;
     position: absolute;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     overflow: hidden;
   }
 </style>

src/components/Headpile/KeyFigure.svelte

@@ -23,7 +23,9 @@
     </div>
     <div class="text">
       <div class="title">{name}</div>
-      <div class="role">{role || ''}</div>
+      <div class="role">
+        {role || ''}
+      </div>
       {#if !mobile.current}
         <div class="description desktop">
           <Markdown source={text} />
@@ -46,57 +48,53 @@
     display: flex;
     align-items: flex-start;
     justify-content: start;
-    gap: 20px;
+    gap: 1rem;
     width: 100%;
-    min-height: 100px;
-    @media (max-width: 600px) {
-      align-items: center;
-      margin-bottom: 10px;
-      .text {
-        flex-grow: 1;
-        margin-top: 20px;
-      }
-    }
+    min-height: 5.5rem;
   }
 
   .title {
     @include mixins.font-bold;
     @include mixins.text-base;
-    line-height: 1.125;
+    @include mixins.leading-none;
+
+    @media (max-width: 450px) {
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+    }
   }
 
   .role {
-    border-top: 1px solid #dedede;
-    margin-top: 5px;
-    padding-top: 5px;
-    margin-left: -10px;
-    padding-left: 10px;
-    @include mixins.fmb-2;
+    border-block-start: 0.5px solid var(--tr-muted-grey);
+    margin-inline-start: -0.75rem;
+    padding-inline-start: 0.75rem;
+    margin-block-start: 0.25rem;
+    padding-block-start: 0.25rem;
+
     @include mixins.font-note;
-    @include mixins.text-sm;
     @include mixins.text-secondary;
-    font-weight: 300;
-    line-height: 1.25;
-    @media (max-width: 600px) {
-      margin-left: 0px;
-      padding-left: 0;
-      @include mixins.fmb-4;
+    @include mixins.text-sm;
+    @include mixins.font-light;
+    @include mixins.leading-tighter;
+    @include mixins.fmb-4;
+
+    @media (max-width: 450px) {
+      @include mixins.text-xs;
     }
   }
 
   .description {
-    @include mixins.fmb-3;
     :global(p) {
       @include mixins.font-note;
-      font-size: calc(0.925 * var(--theme-font-size-base, 1rem));
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
       font-weight: 300;
+      @include mixins.fmb-0;
+      text-wrap: pretty;
     }
     &.desktop {
       display: block;
     }
     &.mobile {
       display: none;
-      @include mixins.fmt-2;
     }
     @media (max-width: 600px) {
       &.desktop {
@@ -107,8 +105,4 @@
       }
     }
   }
-
-  .text {
-    margin-bottom: -20px;
-  }
 </style>