collective page update: border radius, css refactoring

pages/collective.tsx

@@ -48,7 +48,7 @@ const Page: NextPage<Props> = props => {
                 <CollectiveImage
                     data={props.image}
                     style={{
-                        marginBottom: 'var(--double-margin)',
+                        marginBottom: 'var(--size-l)',
                     }}
                 />
             )}

src/components/CollectiveImage.jsx

@@ -15,7 +15,7 @@ export const CollectiveImage = (props) => (
             }}
             imgStyle={{
                 width: '100%',
-                borderRadius: '10px',
+                borderRadius: 'var(--radius)',
             }}
         />
     </div>

src/components/PersonCard/index.tsx

@@ -1,95 +1,12 @@
+import './styles.css'
+
 import cx from 'classnames'
 import { Image } from '../Image'
 
 export const PersonCard = ({ picture, name, url, profile }) => (
-    <div className="PersonCard">
-        <style jsx>{`
-            .PersonCard {
-                --person-card-width: 30%;
-                --person-card-height: 24em;
-
-                display: flex;
-                flex-direction: column;
-
-                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;
-            }
-
-            .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 {
-                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: 31.25em) {
-                .PersonCard {
-                    --person-card-width: 100%;
-                }
-            }
-        `}</style>
-
-        <a className="invisible" href={url}>
-            <div className="PersonCard-Picture">
+    <div className={'personCard'}>
+        <a className={'invisible'} href={url}>
+            <div className={'personCard-Picture'}>
                 <picture>
                     <img
                         className={cx({ opa: false })}
@@ -97,14 +14,14 @@ export const PersonCard = ({ picture, name, url, profile }) => (
                         src={picture.src}
                         srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
                     />
-                </picture >
+                </picture>
             </div>
 
-            <div className="PersonCard-Title">
+            <div className={'personCard-Title'}>
                 {name[0]} {name[1]} {name[2]}
             </div>
 
-            <div className="PersonCard-Body">
+            <div className={'personCard-Body'}>
                 {profile.position}
             </div>
         </a>

src/components/PersonCard/styles.css

@@ -0,0 +1,81 @@
+.personCard {
+    --person-card-width: 30%;
+    --person-card-height: 24em;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 10em;
+    max-width: 30em;
+}
+
+.personCard > a {
+    display: block;
+    position: relative;
+}
+
+.personCard-Picture {
+    position: relative;
+    border-radius: var(--radius);
+
+    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;
+}
+
+.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 {
+    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: 31.25em) {
+    .personCard {
+        --person-card-width: 100%;
+    }
+}