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 (
);
}
+
+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 (
-
+
);
}
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}
/>
-
+
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;
}