Update from Capgemini/blog-private@f583ac9

Capgemini · Jun 27, 2024 · 0c8c007 · 0c8c007
1 parent 67d86eb
commit 0c8c007
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 35 deletions.
diff --git a/_includes/author-info.html b/_includes/author-info.html
@@ -1,8 +1,10 @@
 {% assign author_classes = 'author-info columns' %}
 <div class="author-info-wrapper clearfix">
   {% if author.avatar %}
-    {% assign author_classes = author_classes | append: ' medium-9' %}
-    <img itemprop="image" src="{{ author.avatar }}" class="notepad-post-author-avatar medium-3 columns" alt="">
+    {% assign author_classes = author_classes | append: ' small-8 medium-9' %}
+    <div class="notepad-post-author-avatar small-4 medium-3 columns">
+      <img itemprop="image" src="{{ author.avatar }}" class="author-avatar" alt="{{ author.name }}">
+    </div>
   {% endif %}
 
   <div class="{{ author_classes }}">

diff --git a/assets/css/components/_author.scss b/assets/css/components/_author.scss
@@ -1,10 +1,10 @@
 
 .notepad-author-info {
-  padding: 2rem 1rem;
   background: $grey-lighter;
+  padding: 2rem 0;
 
   @include breakpoint(tablet) {
-    padding: 2rem;
+    padding: 2rem 1rem;
   }
 
   h2 {
@@ -15,12 +15,15 @@
 .notepad-post-author {
   @extend %notepad-clearfix;
   padding: 0 1.875rem;
-  text-align: center;
 
   @include breakpoint(mobileonly) {
     padding: 0 0.75rem;
   }
 
+  .row-even & {
+    text-align: right;
+  }
+
   h1 {
     margin: 0 0 1rem;
     padding: 0;
@@ -49,16 +52,19 @@
 }
 
 .notepad-post-author-avatar {
-  max-width: 50%;
-  float: none;
-  margin-right: 0;
-  margin-bottom: 1rem;
-  border-radius: 50%;
+  .row-odd & {
+    float: left;
+  }
 
-  @include breakpoint(mobileonly) {
-    width: 7.5rem;
-    height: 7.5rem;
-    padding: 0;
+  .row-even & {
+    float: right;
+  }
+
+  img {
+    float: none;
+    display: block;
+    margin: 1rem auto;
+    border-radius: 50%;
   }
 }
 
@@ -85,24 +91,3 @@
   padding-left: 0;
   margin-bottom: 1rem;
 }
-
-@include breakpoint(tablet) {
-  .notepad-post-author-avatar {
-    .row-odd & {
-      float: left;
-    }
-
-    .row-even & {
-      float: right;
-    }
-  }
-
-  .notepad-post-author {
-    text-align: left;
-
-    .row-even & {
-      text-align: right;
-    }
-  }
-}
-