diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css index c3c9e0bf..59e1bbec 100644 --- a/components/MiniEventCard.module.css +++ b/components/MiniEventCard.module.css @@ -48,3 +48,24 @@ .dropDownIcon { fill: var(--primary-accent); } + +@media only screen and (max-width: calc(768rem / 16)) { + .details { + bottom: 0; + left: 0; + top: unset; + right: unset; + } + + .dropDownIcon { + display: none; + } + + .card { + padding-bottom: calc(48rem / 16); + } + + .nameSpacer { + display: none; + } +} diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx index 79e41572..be2c7928 100644 --- a/components/MiniEventCard.tsx +++ b/components/MiniEventCard.tsx @@ -34,10 +34,8 @@ export const MiniEventCard: React.FC = ({

{short}

- -

View details {dropDownIcon}

+
View details {dropDownIcon}
-
{description}
); diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css index b2ff0b13..fd83dd67 100644 --- a/components/NewsCard.module.css +++ b/components/NewsCard.module.css @@ -5,6 +5,12 @@ border-radius: calc(20rem / 16); } +.fit.card { + max-width: unset; + padding: unset; + border-radius: unset; +} + .date { font-size: calc(18rem / 16); margin: 0; diff --git a/components/NewsCard.tsx b/components/NewsCard.tsx index 7b364fc7..16a31be3 100644 --- a/components/NewsCard.tsx +++ b/components/NewsCard.tsx @@ -6,15 +6,19 @@ interface NewsCardProps { date: Date; author: string; children: ReactNode; + fit?: boolean; } export const NewsCard: React.FC = ({ date, author, children, + fit = false, }) => { + const classes = fit ? [styles.card, styles.fit] : [styles.card]; + return ( -
+