soften team portrait styling

Author: alandefreitas

_layouts/post.html

@@ -29,22 +29,28 @@ <h2 class='text-l news-title no-border'>{{ page.title }}</h2>
                 {% endfor %}
         {% endif %}
 
+        {% assign formatted_date = page.date | date: "%b %-d, %Y" %}
+
         {% if author_name %}
           <div class='author d-iblock'>
-            <span class='text-xxs author-name'>By
+            <a class='link author-img-link' href="{{ site.baseurl }}/people/{{page.author-id}}">
+              <img class='author-img' src='{{ site.baseurl }}/images/people/{{page.author-id}}.jpg' alt='Portrait of {{author_name}}' />
+            </a>
+            <span class='text-xxs author-name'>
                 <a class='link' href="{{ site.baseurl }}/people/{{page.author-id}}">
                   {{author_name}}
-                </a> on
+                </a> &middot; {{ formatted_date }}
             </span>
           </div>
         {% elsif page.author-name %}
           <div class='author d-iblock'>
-            <span class='text-xxs author-name'>By
-              {{page.author-name}} on
-            </span>
+            <span class='text-xxs author-name'>{{page.author-name}} &middot; {{ formatted_date }}</span>
+          </div>
+        {% else %}
+          <div class='author d-iblock'>
+            <span class='text-xxs author-name'>{{ formatted_date }}</span>
           </div>
         {% endif %}
-        <span class='center'>{{ page.date | date: "%b %-d, %Y"}}</span>
       </div>
         <div class='text-xxs content-text generated-content'>
           {{ content }}

_sass/pages/post.scss

@@ -216,14 +216,19 @@
 
   .author {
     // margin-bottom: $spacing--m;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+    gap: $spacing--xxs;
     margin-top: -25px;
   }
 
   .author-img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
+    object-fit: cover;
     vertical-align: middle;
 
     @include breakpoint($desktop-small) {

_sass/pages/team.scss

@@ -32,15 +32,22 @@
   }
 
   .team-member-img {
-    height: 325px;
-    margin-bottom: 40px;
+    display: block;
+    width: 100%;
+    max-width: 360px;
+    height: auto;
+    margin: 0 auto 40px;
     object-fit: cover;
-
+    border-radius: 32px;
+    box-shadow: 0 14px 32px rgba(31, 41, 55, 0.18);
 
     @include breakpoint($desktop-small) {
       position: absolute;
-      height: 100%;
       width: 100%;
+      max-width: 360px;
+      height: auto;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
 
@@ -60,6 +67,12 @@
     }
   }
 
+  .generated-content {
+    p {
+      text-align: justify;
+    }
+  }
+
   .social-icons {
     display: flex;
     align-items: center;