fix: arreglo de estilos en la seccion eventos

Author: cesardlinx

src/components/UI/card/card.js

@@ -1,23 +1,50 @@
-import React from 'react';
-import PropTypes from 'prop-types'
-import './card.css';
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./card.module.css";
 import { Link } from "gatsby";
 
-
-const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMoreColor, topicFontSize }) => (
-  <div className="card">
-    <div className="card-header">
-      <div className="img-viewport">
+const Card = ({
+  imgURL,
+  topic,
+  dateTime,
+  descriptionTitle,
+  description,
+  link,
+  readMoreColor,
+  topicFontSize,
+  viewportHeight,
+  textSpacing,
+  lineHeight,
+}) => (
+  <div className={styles.card}>
+    <div className={styles.card__header}>
+      <div className={styles.card__imgViewport} style={{ height: viewportHeight }}>
         <img src={imgURL} />
       </div>
     </div>
-    <div className="card-body">
-      <h5 className="topic" style={{fontSize: topicFontSize}}>{topic}</h5>
-      <p className="date">{date}</p>
-      <div className="description">
-        <p className="description-text">
-          <strong className="description-title">{descriptionTitle}:</strong>
-          {description} <Link to={link} className="read-more" style={{color: readMoreColor}}>Leer más</Link>
+    <div className={styles.card__body}>
+      <h5
+        className={styles.card__topic}
+        style={{
+          fontSize: topicFontSize,
+          marginBottom: textSpacing,
+          lineHeight,
+        }}>
+        {topic}
+      </h5>
+      <p className={styles.card__date} style={{ lineHeight }}>
+        {dateTime}
+      </p>
+      <div className={styles.card__description} style={{ marginTop: textSpacing }}>
+        <p className={styles.card__descriptionText}>
+          <strong className={styles.card__descriptionTitle}>{descriptionTitle}:</strong>
+          {description}{" "}
+          <Link
+            to={link}
+            className={styles.card_readmore}
+            style={{ color: readMoreColor }}>
+            Leer más
+          </Link>
         </p>
       </div>
     </div>
@@ -27,18 +54,24 @@ const Card = ({ imgURL, topic, date, descriptionTitle, description, link, readMo
 Card.propTypes = {
   imgURL: PropTypes.string,
   topic: PropTypes.string,
-  date: PropTypes.string,
+  dateTime: PropTypes.string,
   descriptionTitle: PropTypes.string,
   description: PropTypes.string,
   link: PropTypes.string,
   readMoreColor: PropTypes.string,
-}
+  viewportHeight: PropTypes.string,
+  textSpacing: PropTypes.string,
+  lineHeight: PropTypes.string,
+};
 
 Card.defaultProps = {
   date: null,
-  descriptionTitle: 'Descripción',
+  descriptionTitle: "Descripción",
   readMoreColor: "#27ae60",
-  topicFontSize: "2rem"
-}
+  topicFontSize: "2rem",
+  viewportHeight: "136.13px",
+  textSpacing: "0.5em",
+  lineHeight: "auto",
+};
 
 export default Card;

src/components/UI/card/card.css src/components/UI/card/card.module.csssrc/components/UI/card/card.css renamed to src/components/UI/card/card.module.css

@@ -8,55 +8,57 @@
     user-select: none;
 }
 
-.card-header {
+.card__header {
     width: 100%;
     padding: 24px 24px 15px;
 }
 
-.card .img-viewport {
+.card__img--viewport {
     width: 100%;
     height: 136.13px;
     overflow: hidden;
     border-radius: 15px;
 }
 
-.card img {
+.card__img {
     width: 100%;
     display: block;
 }
 
-.card-body {
+.card__body {
     padding: 0 24px 24px 24px;
 }
 
-.card-body .topic {
+.card__topic {
     font-weight: bold;
-    margin-bottom: .5em;
     font-family: "Roboto", sans-serif;
 }
 
-.card-body .date {
+.card__date {
     color: #666363;
+    font-weight: bold;
 }
 
-.description-title {
+.card__description--title {
     margin-right: .5em;
 }
 
-.description {
+.card__description {
     overflow: hidden;
     max-height: 140px;
-    margin-top: .5em;
 }
 
-.description-text {
+.card__description--text {
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.1;
     font-family: "Roboto", sans-serif;
 }
 
-.read-more {
-    font-weight: bold;
+.card__readmore {
     margin-left: .3em;
 }
+
+.card__description--text a {
+    font-weight: bold;
+}

src/components/events-section/Events.js

@@ -1,33 +1,39 @@
 import React from "react";
-import './events.css';
+import styles from './events.module.css';
 import Carousel from '../UI/carousel/carousel';
 import Card from '../UI/card/card';
 import eventos from "../../constants/eventos";
-import triagle from "../../images/widgets/triangle.svg"
-import bracketsWidget from '../../images/widgets/brackets.svg'
+import triangle from "../../images/widgets/triangle.svg"
+import bracketsWidget from '../../images/widgets/brackets2.svg'
 
 const Events = () => {
   return (
-    <section className="events-section ec-container">
-      <h2 className= "section-title" >Eventos</h2>
+    <section className={`${styles.events} ec-container`}>
+      <h2 className={styles.events__title}>Eventos</h2>
       <Carousel>
-        {eventos.map(({ id, imagen, titulo, fechaHora, disertantes, resumen, url }) => (
-          <Card 
-            imgURL={imagen}
-            topic={titulo}
-            date={fechaHora}
-            description={resumen}
-            link={url}
-            topicFontSize="1rem"
-            readMoreColor="#046294"
-            key={id}
-          />
-        ))}
+        {eventos.map(
+          ({ id, imagen, titulo, fechaHora, disertantes, resumen, url }) => (
+            <Card
+              imgURL={imagen}
+              topic={titulo}
+              dateTime={fechaHora}
+              description={resumen}
+              descriptionTitle="Disertantes"
+              link={url}
+              topicFontSize="1rem"
+              readMoreColor="#046294"
+              viewportHeight="246px"
+              textSpacing="0"
+              lineHeight="1.1"
+              key={id}
+            />
+          )
+        )}
       </Carousel>
-      <img className="small-widget triangle" src={triagle} />
-      <img className="small-widget event-bracket" src={bracketsWidget} />
-    </section >
-  )
+      <img className={`small-widget ${styles.events__triangle}`} src={triangle} />
+      <img className={`small-widget ${styles.events__bracket}`} src={bracketsWidget} />
+    </section>
+  );
 }
 
 export default Events

src/components/events-section/events.css

@@ -0,0 +1,41 @@
+.events {
+  background: #F2F2F2;
+  height: 840px;
+  padding-top: 10em;
+  position: relative;
+}
+
+.events__title{
+  margin-bottom: 1em;
+  padding-right: 1em;
+  text-align: right;
+  font-size: 50px;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif;
+}
+
+/* Widgets */
+
+.events__triangle {
+  top: 2em;
+  left: 12em;
+  display: none;
+}
+
+@media only screen and (min-width: 567px) {
+  .events__triangle {
+    display: block;
+  }
+}
+
+.events__bracket {
+    bottom: -.6em;
+    right: 15em;
+    display: none;
+}
+
+@media only screen and (min-width: 567px) {
+  .events__bracket {
+    display: block;
+  }
+}