PersonCard refactoring

src/components/PersonCard.js

@@ -1,26 +0,0 @@
-const React = require('react')
-const Image = require('./Image')
-
-const Link = ({href, children}) => (
-	<a className="invisible" href={href}>
-		{children}
-	</a>
-)
-
-module.exports = ({picture, name, url, profile}) => (
-	<div className="PersonCard">
-		<Link href={url}>
-			<div className="PersonCard-Picture">
-				<Image data={picture}/>
-			</div>
-
-			<div className="PersonCard-Title">
-				{name[0]} {name[1]} {name[2]}
-			</div>
-
-			<div className="PersonCard-Body">
-				{profile.position}
-			</div>
-		</Link>
-	</div>
-)

src/components/PersonCard.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { Image } from './Image'
+
+module.exports = ({ picture, name, url, profile }) => (
+    <div className="PersonCard">
+        <style jsx>{`
+            .PersonCard {
+                --person-card-width: 30%;
+                --person-card-height: 24em;
+
+                display: flex;
+                flex-direction: column;
+
+                margin-bottom: var(--double-margin);
+
+                width: var(--person-card-width);
+                min-width: 10em;
+                max-width: 30em;
+            }
+
+            .PersonCard > a {
+                display: block;
+                position: relative;
+            }
+
+            .PersonCard-Picture {
+                position: relative;
+                border-radius: 10px;
+
+                width: 100%;
+                height: var(--person-card-height);
+
+                overflow: hidden;
+            }
+
+            .PersonCard-Picture img {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+
+                object-fit: cover;
+                transition: all 150ms ease-out;
+                //transform: scale(1.05);
+            }
+
+            .PersonCard-Title, .PersonCard-Body  {
+                position: absolute;
+                width: 100%;
+                padding: var(--single-margin);
+                box-sizing: border-box;
+                color: white;
+                text-align: center;
+                text-shadow: 0 0 3px #000;
+            }
+
+            .PersonCard-Title {
+                top: 0;
+            }
+
+            .PersonCard-Body {
+                bottom: 0;
+            }
+
+            .PersonCard:hover img {
+                //transform: scale(1.05);
+                width: 105%;
+                height: 105%;
+                top: -2.5%;
+                left: -2.5%;
+            }
+
+
+            // Tablet
+
+            @media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
+                .PersonCard {
+                    --person-card-height: 20em;
+                }
+
+                @media screen and (orientation: portrait) {
+                }
+            }
+
+
+            // Mobile
+
+            @media (max-width: var(--mobile-width)) {
+                .PersonCard {
+                    --person-card-width: 100%;
+                }
+            }
+        `}</style>
+
+        <a className="invisible" href={url}>
+            <div className="PersonCard-Picture">
+                <Image
+                    data={picture}
+                    opa={false}
+                />
+            </div>
+
+            <div className="PersonCard-Title">
+                {name[0]} {name[1]} {name[2]}
+            </div>
+
+            <div className="PersonCard-Body">
+                {profile.position}
+            </div>
+        </a>
+    </div>
+)

src/style/components/PersonCard.scss

@@ -1,95 +0,0 @@
-.PersonCard {
-  --person-card-width: 30%;
-  --person-card-height: 24em;
-
-  display: flex;
-  flex-direction: column;
-
-  margin: var(--single-margin) 0;
-
-  width: var(--person-card-width);
-  min-width: 10em;
-  max-width: 30em;
-
-  //border: 1px solid #ccc;
-  //border-radius: 3px;
-
-  & > a {
-    display: block;
-    position: relative;
-  //  height: 100%;
-  }
-}
-
-.PersonCard-Picture {
-  border-radius: 3px;
-
-  width: 100%;
-  height: var(--person-card-height);
-
-  img {
-    width: 100%;
-    height: var(--person-card-height);
-
-    object-fit: cover;
-  }
-}
-
-.PersonCard-Title, .PersonCard-Body  {
-  position: absolute;
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  color: white;
-  text-align: center;
-  text-shadow: 0 0 3px #000;
-  border-radius: 3px;
-}
-
-.PersonCard-Title {
-  top: 0;
-}
-
-.PersonCard-Body {
-  bottom: 0;
-}
-
-
-//Animation
-
-.PersonCard-Picture {
-  overflow: hidden;
-
-  img {
-    transition: transform 150ms ease-out;
-  }
-}
-
-.PersonCard {
-  &:hover {
-    img {
-      transform: scale(1.05);
-    }
-  }
-}
-
-
-// Tablet
-
-@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
-  .PersonCard {
-    --person-card-height: 20em;
-  }
-
-  @media screen and (orientation: portrait) {
-  }
-}
-
-
-// Mobile
-
-@media (max-width: var(--mobile-width)) {
-  .PersonCard {
-    --person-card-width: 100%;
-  }
-}

src/style/style.scss

@@ -23,7 +23,6 @@
 @import "components/ArticleCardList";
 @import "components/ArticleTags";
 @import "components/CollectiveImage";
-@import "components/PersonCard";
 @import "components/PersonCardList";
 
 @import "main";