From d0fc7b10037d6cdda0e83e2df4e91eae5e660be5 Mon Sep 17 00:00:00 2001
From: LBlend <lblend@protonmail.com>
Date: Thu, 29 Jul 2021 00:27:53 +0200
Subject: [PATCH] add and utilize global circular image css utility class

---
 src/components/sections/blog.js               | 12 ++++++-----
 src/components/sections/blog.module.css       |  1 -
 src/components/sections/boardMembers.js       |  6 ++++--
 .../sections/boardMembers.module.css          | 20 +++----------------
 src/index.css                                 | 17 ++++++++++++++++
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/sections/blog.js b/src/components/sections/blog.js
index 89677a4..ecdab3d 100644
--- a/src/components/sections/blog.js
+++ b/src/components/sections/blog.js
@@ -50,11 +50,13 @@ const Blog = () => {
             </h3>
             <p>{post.excerpt}</p>
             <div className={styles.author}>
-              <GatsbyImage
-                image={post.author.image.asset.gatsbyImageData}
-                className={styles.authorImage}
-                alt={"Forfatteren av innlegget, " + post.author.name}
-              />
+              <div className="circular-container">
+                <GatsbyImage
+                  image={post.author.image.asset.gatsbyImageData}
+                  className={`circular ${styles.authorImage}`}
+                  alt={"Forfatteren av innlegget, " + post.author.name}
+                />
+              </div>
               <p>{post.author.name}</p>
             </div>
           </div>
diff --git a/src/components/sections/blog.module.css b/src/components/sections/blog.module.css
index 58d812b..bc7601a 100644
--- a/src/components/sections/blog.module.css
+++ b/src/components/sections/blog.module.css
@@ -25,7 +25,6 @@
   font-weight: 100;
 }
 .authorImage {
-  border-radius: 50%;
   border: 2px solid white;
 }
 
diff --git a/src/components/sections/boardMembers.js b/src/components/sections/boardMembers.js
index 32b5928..bbebcee 100644
--- a/src/components/sections/boardMembers.js
+++ b/src/components/sections/boardMembers.js
@@ -37,10 +37,12 @@ const BoardMembers = () => {
         {data.allSanityAuthor.edges.map(({ node: member }) => (
           <article key={member._id} className={styles.card}>
             <div className={styles.header}>
-              <div className={styles.headerImageContainer}>
+              <div
+                className={`circular-container ${styles.headerImageContainer}`}
+              >
                 <GatsbyImage
                   image={member.image.asset.gatsbyImageData}
-                  className={styles.headerImage}
+                  className="circular"
                   alt={"Bilde av styemedlem, " + member.name}
                   roundedCircle
                 />
diff --git a/src/components/sections/boardMembers.module.css b/src/components/sections/boardMembers.module.css
index f0f6b4f..dc75b1d 100644
--- a/src/components/sections/boardMembers.module.css
+++ b/src/components/sections/boardMembers.module.css
@@ -40,24 +40,10 @@
 .headerImageContainer {
   border: 5px solid white;
   display: inline-block;
-
-  /* Fuck webkit */
-  overflow: hidden;
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -khtml-border-radius: 50%;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
-}
-.headerImage {
-  /* Fuck webkit */
-  border-radius: 50%;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  -khtml-border-radius: 50%;
-
-  /* box-shadow: inset 0 0 10px #000000; */
 }
+/* .headerImage {
+  box-shadow: inset 0 0 10px #000000;
+} */
 
 .info {
   border-bottom: var(--card-section-divider);
diff --git a/src/index.css b/src/index.css
index 4afe382..b0f5f6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -210,6 +210,23 @@ section h2 {
 .no-mobile {
   display: none;
 }
+.circular-container {
+  /* Fuck webkit */
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+}
+.circular {
+  /* Fuck webkit */
+  overflow: hidden;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -khtml-border-radius: 50%;
+  mask-image: radial-gradient(white, black);
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+}
 @media (min-width: 60em) {
   .no-mobile {
     display: block;