Finsishing CaseCard styling
This commit is contained in:
parent
250c8c2d6b
commit
6867215105
@ -1,12 +1,17 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import styles from "./modules/Avatar.module.css";
|
import styles from "./modules/Avatar.module.css";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
export default function Avatar(props) {
|
export default function Avatar(props) {
|
||||||
return (
|
return (
|
||||||
<img
|
<img
|
||||||
className={`${styles.bordered} ${styles.absolute}`}
|
className={styles[props.size]}
|
||||||
src="/images/bongo.png"
|
src="/images/bongo.png"
|
||||||
alt="The one and only bongo cat!"
|
alt="The one and only bongo cat!"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Avatar.propTypes = {
|
||||||
|
size: PropTypes.string.isRequired,
|
||||||
|
};
|
||||||
|
@ -1,23 +1,28 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import styles from "./modules/CaseCard.module.css";
|
import styles from "./modules/CaseCard.module.css";
|
||||||
|
import Avatar from "./Avatar";
|
||||||
|
|
||||||
export default function CaseCard(props) {
|
export default function CaseCard(props) {
|
||||||
const study = props.study;
|
const study = props.study;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<a className={styles.container}>
|
||||||
<img
|
<img
|
||||||
className={`${styles.cover}`}
|
className={`${styles.cover}`}
|
||||||
src={props.study.cover}
|
src={props.study.cover}
|
||||||
alt="The one and only bongo cat!"
|
alt="The one and only bongo cat!"
|
||||||
/>
|
/>
|
||||||
|
<div className={styles.avatarHolder}>
|
||||||
|
<Avatar size={"small"} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.cardInfo}>
|
<div className={styles.cardInfo}>
|
||||||
<b className={styles.title}>{study.title}</b>
|
<b className={styles.title}>{study.title}</b>
|
||||||
<p className={styles.description}>{study.short_description}</p>
|
<p className={styles.description}>{study.short_description}</p>
|
||||||
<b>{study.date}</b>
|
<b>{study.date}</b>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@ export default function HomeSection(props) {
|
|||||||
lastName={person.lastName}
|
lastName={person.lastName}
|
||||||
description={person.description}
|
description={person.description}
|
||||||
/>
|
/>
|
||||||
<Avatar />
|
<Avatar size={"big"} />
|
||||||
|
|
||||||
<Infos infos={person.infos} />
|
<Infos infos={person.infos} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,15 +1,21 @@
|
|||||||
.bordered {
|
.big {
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
|
||||||
border: 6px solid var(--dark);
|
border: 6px solid var(--dark);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute {
|
.small {
|
||||||
width: 256px;
|
width: 64px;
|
||||||
height: 256px;
|
height: 64px;
|
||||||
|
|
||||||
|
border: 4px solid var(--lightDark);
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1440px) {
|
@media screen and (max-width: 1440px) {
|
||||||
.absolute {
|
.big {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,21 +1,36 @@
|
|||||||
.container {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
background-color: var(--lightDark);
|
background-color: var(--lightDark);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:hover {
|
||||||
|
transform: translateY(-2%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
height: 198px;
|
height: 256px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatarHolder {
|
||||||
|
margin: -36px 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.cardInfo {
|
.cardInfo {
|
||||||
padding: 2rem;
|
padding: 0.5rem 2rem 2rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
@ -23,3 +38,9 @@
|
|||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1440px) {
|
||||||
|
.container {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1280px) {
|
@media screen and (max-width: 1440px) {
|
||||||
.cardRow {
|
.cardRow {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user