From b1afd6153a4242ed351626ec86215d300e4d1332 Mon Sep 17 00:00:00 2001
From: LBlend <lblend@protonmail.com>
Date: Wed, 28 Jul 2021 00:07:32 +0200
Subject: [PATCH] fuck webkit

---
 src/components/sections/boardMembers.js       | 13 +++++++-----
 .../sections/boardMembers.module.css          | 21 ++++++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/boardMembers.js b/src/components/sections/boardMembers.js
index 080ceda..32b5928 100644
--- a/src/components/sections/boardMembers.js
+++ b/src/components/sections/boardMembers.js
@@ -37,11 +37,14 @@ const BoardMembers = () => {
         {data.allSanityAuthor.edges.map(({ node: member }) => (
           <article key={member._id} className={styles.card}>
             <div className={styles.header}>
-              <GatsbyImage
-                image={member.image.asset.gatsbyImageData}
-                className={styles.headerImage}
-                alt={"Bilde av styemedlem, " + member.name}
-              />
+              <div className={styles.headerImageContainer}>
+                <GatsbyImage
+                  image={member.image.asset.gatsbyImageData}
+                  className={styles.headerImage}
+                  alt={"Bilde av styemedlem, " + member.name}
+                  roundedCircle
+                />
+              </div>
               <div className={styles.info}>
                 <h3>{member.name}</h3>
                 <p>{member.role}</p>
diff --git a/src/components/sections/boardMembers.module.css b/src/components/sections/boardMembers.module.css
index 52b3525..f0f6b4f 100644
--- a/src/components/sections/boardMembers.module.css
+++ b/src/components/sections/boardMembers.module.css
@@ -37,10 +37,25 @@
   align-items: center;
   justify-content: space-evenly;
 }
-.headerImage {
-  border-radius: 50%;
+.headerImageContainer {
   border: 5px solid white;
-  overflow: hidden; /* Fuck webkit and apple for not following web standards */
+  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; */
 }