Fix elliptical author image issue (#76)

* Fix author image styling to remove ellipses

- Update styling for author and avatar images
- Rename CSS file to follow convention
- Fix type in 'authors.yml'

* Update fix to use scss

_data/authors.yml

@@ -1281,7 +1281,7 @@ authors:
   acaulfield:
     name: "Anna Caulfield"
     author-summary: "I'm a Delivery Principal at Scott Logic. Ex- Virgin Money, Telegraph Media Group. Regular at Glastonbury Festival, Mum of two and a crazy sausage dog owner."
-    picture: picture.jpegs
+    picture: picture.jpeg
   colive:
     name: "Charlie Olive"
     feed-description: 'Write ups on technical topics learnt through my Consultant role at Scott Logic'

scss/_author.scss

@@ -27,8 +27,11 @@
     img {
         border-radius: 50%;
         filter: grayscale(100%);
-	max-height: 180px;
-	max-width: 180px;
+        max-height: 6.25rem;
+        max-width: 6.25rem;
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
     }
 
     .avatar {

scss/_default-post.scss

@@ -120,8 +120,12 @@
     img {
       border-radius: 50%;
       max-height: 3rem;
+      max-width: 3rem;
       margin-right: .25rem;
       filter: grayscale(100%);
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
     }
   }
 

scss/_featured-posts.scss

@@ -22,8 +22,12 @@
   img {
       border-radius: 50%;
       max-height: 3rem;
+      max-width: 3rem;
       margin-right: 0.25rem;
       filter: grayscale(100%);
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
   }
   @include breakpoint(large) {
     margin-right: -75%;