From 686721510516e66bf7c0a4b1555baae361bbea29 Mon Sep 17 00:00:00 2001
From: Romain <romain.rousseau5@gmail.com>
Date: Sun, 14 Jun 2020 16:45:20 +0200
Subject: [PATCH] Finsishing CaseCard styling

---
 components/Avatar.js                      |  7 ++++++-
 components/CaseCard.js                    |  9 ++++++--
 components/HomeSection.js                 |  2 +-
 components/modules/Avatar.module.css      | 16 ++++++++++-----
 components/modules/CaseCard.module.css    | 25 +++++++++++++++++++++--
 components/modules/CaseSection.module.css |  2 +-
 6 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/components/Avatar.js b/components/Avatar.js
index f1f679d..0eaf883 100644
--- a/components/Avatar.js
+++ b/components/Avatar.js
@@ -1,12 +1,17 @@
 import React from "react";
 import styles from "./modules/Avatar.module.css";
+import PropTypes from "prop-types";
 
 export default function Avatar(props) {
   return (
     <img
-      className={`${styles.bordered} ${styles.absolute}`}
+      className={styles[props.size]}
       src="/images/bongo.png"
       alt="The one and only bongo cat!"
     />
   );
 }
+
+Avatar.propTypes = {
+  size: PropTypes.string.isRequired,
+};
diff --git a/components/CaseCard.js b/components/CaseCard.js
index 3185f1a..a5b2e19 100644
--- a/components/CaseCard.js
+++ b/components/CaseCard.js
@@ -1,23 +1,28 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styles from "./modules/CaseCard.module.css";
+import Avatar from "./Avatar";
 
 export default function CaseCard(props) {
   const study = props.study;
 
   return (
-    <div className={styles.container}>
+    <a className={styles.container}>
       <img
         className={`${styles.cover}`}
         src={props.study.cover}
         alt="The one and only bongo cat!"
       />
+      <div className={styles.avatarHolder}>
+        <Avatar size={"small"} />
+      </div>
+
       <div className={styles.cardInfo}>
         <b className={styles.title}>{study.title}</b>
         <p className={styles.description}>{study.short_description}</p>
         <b>{study.date}</b>
       </div>
-    </div>
+    </a>
   );
 }
 
diff --git a/components/HomeSection.js b/components/HomeSection.js
index 74be566..64ca8c8 100644
--- a/components/HomeSection.js
+++ b/components/HomeSection.js
@@ -21,7 +21,7 @@ export default function HomeSection(props) {
             lastName={person.lastName}
             description={person.description}
           />
-          <Avatar />
+          <Avatar size={"big"} />
 
           <Infos infos={person.infos} />
         </div>
diff --git a/components/modules/Avatar.module.css b/components/modules/Avatar.module.css
index 1fe07ea..5e2bc03 100644
--- a/components/modules/Avatar.module.css
+++ b/components/modules/Avatar.module.css
@@ -1,15 +1,21 @@
-.bordered {
+.big {
+  width: 256px;
+  height: 256px;
+
   border: 6px solid var(--dark);
   border-radius: 16px;
 }
 
-.absolute {
-  width: 256px;
-  height: 256px;
+.small {
+  width: 64px;
+  height: 64px;
+
+  border: 4px solid var(--lightDark);
+  border-radius: 8px;
 }
 
 @media screen and (max-width: 1440px) {
-  .absolute {
+  .big {
     display: none;
   }
 }
diff --git a/components/modules/CaseCard.module.css b/components/modules/CaseCard.module.css
index f4f621c..3561fd6 100644
--- a/components/modules/CaseCard.module.css
+++ b/components/modules/CaseCard.module.css
@@ -1,21 +1,36 @@
 .container {
   height: 100%;
+
   border-radius: 16px;
   background-color: var(--lightDark);
+
+  cursor: pointer;
   overflow: hidden;
+
+  transform: translateY(0);
+  transition: transform 0.3s ease-out;
+}
+
+.container:hover {
+  transform: translateY(-2%);
 }
 
 .cover {
-  height: 198px;
+  height: 256px;
   width: 100%;
 }
 
+.avatarHolder {
+  margin: -36px 0 0 2rem;
+}
+
 .cardInfo {
-  padding: 2rem;
+  padding: 0.5rem 2rem 2rem 2rem;
 }
 
 .title {
   font-size: 1.25em;
+  color: white;
 }
 
 .description {
@@ -23,3 +38,9 @@
   max-width: 320px;
   margin: 1rem 0;
 }
+
+@media screen and (max-width: 1440px) {
+  .container {
+    margin: 2rem 0;
+  }
+}
diff --git a/components/modules/CaseSection.module.css b/components/modules/CaseSection.module.css
index f1cdbbd..d3a03d4 100644
--- a/components/modules/CaseSection.module.css
+++ b/components/modules/CaseSection.module.css
@@ -27,7 +27,7 @@
   align-items: center;
 }
 
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: 1440px) {
   .cardRow {
     flex-direction: column;
   }