Mobile EventDescriptionCard

components/EventDescriptionCard.module.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
   max-width: calc(540rem / 16);
   padding: calc(24rem / 16);
-  border-radius: calc(4rem / 16);
+  border-radius: calc(20rem / 16);
   background-color: white;
 }
 
@@ -22,7 +22,7 @@
   color: var(--purple-2);
   font-weight: bolder;
   font-size: calc(18rem / 16);
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
   margin: 0;
 }
 
@@ -42,7 +42,7 @@
 }
 
 .logo {
-  width: calc(30rem / 16);
+  width: calc(32rem / 16);
   position: absolute;
   bottom: 0;
   right: 0;
@@ -50,7 +50,7 @@
 
 .setting {
   margin: 0;
-  color: var(--blue-1);
+  color: var(--blue-2);
   font-weight: bolder;
   font-size: calc(14rem / 16);
 }
@@ -58,6 +58,34 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .card {
     padding: 0;
-    background-color: #e1eefa;
+    background-color: transparent;
+  }
+
+  .details {
+    min-width: calc(150rem / 16);
+  }
+
+  .name,
+  .setting {
+    font-size: calc(14rem / 16);
+    line-height: calc(21 / 14);
+  }
+
+  .poster {
+    width: calc(95rem / 16);
+    height: calc(95rem / 16);
+    border: 1px solid var(--purple-2);
+    box-sizing: border-box;
+    margin-right: calc(14rem / 16);
+  }
+
+  .desc {
+    font-size: calc(12rem / 16);
+    line-height: calc(18 / 12);
+  }
+
+  .logo,
+  .button {
+    display: none;
   }
 }

components/EventSetting.module.css

@@ -0,0 +1,9 @@
+@media only screen and (max-width: calc(768rem / 16)) {
+  .separator {
+    display: none;
+  }
+  
+  .setting {
+    display: block;
+  }
+}

components/EventSetting.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styles from "./EventSetting.module.css";
 
 interface Props {
   date: Date;
@@ -15,13 +16,20 @@ export function EventSetting(props: Props) {
   const time = props.date.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
+    timeZoneName: "short",
   });
   const location = props.online ? `Online - ${props.location}` : props.location;
+  const separator = <span className={styles.separator}> | </span>;
 
   return (
     <div>
-      <time dateTime={props.date.toISOString()}>{`${date} | ${time}`}</time>
-      {` | ${location}`}
+      <time className={styles.setting} dateTime={props.date.toISOString()}>
+        {date}
+      </time>
+      {separator}
+      <span className={styles.setting}>{time}</span>
+      {separator}
+      {location}
     </div>
   );
 }

components/NewsCard.module.css

@@ -8,19 +8,19 @@
   color: var(--purple-2);
   font-size: calc(18rem / 16);
   font-weight: bold;
-  line-height: calc(27rem / 16);
+  line-height: calc(27 / 18);
 }
 
 .author {
   color: var(--purple-1);
   font-style: normal;
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   font-size: calc(14rem / 16);
   margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
 }
 
 .content {
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 16);
   color: var(--purple-2);
 }
 

components/playground.module.css

@@ -13,7 +13,7 @@
   font-weight: bold;
   color: var(--purple-2);
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
   margin-bottom: calc(14rem / 16);
 }
 
@@ -21,7 +21,7 @@
   font-style: normal;
   font-weight: normal;
   font-size: calc(14rem / 16);
-  line-height: calc(21rem / 16);
+  line-height: calc(21 / 14);
   white-space: pre-line;
   color: var(--purple-2);
   vertical-align: baseline;
@@ -62,7 +62,7 @@
   color: var(--purple-2);
   font-weight: 600;
   font-size: calc(24rem / 16);
-  line-height: calc(36rem / 16);
+  line-height: calc(36 / 24);
 }
 
 .teamMemberDemo > hr {
@@ -84,7 +84,7 @@
 @media only screen and (max-width: calc(768rem / 16)) {
   .newsDemo,
   .eventDescriptionCardDemo {
-    background-color: #e1eefa;
+    background-color: var(--off-white);
   }
 
   .eventDescriptionCardDemo > * {

content/playground/after-hours.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Afterhours: Personal Relationships",
   short: "Learn how React works and make your own version!",
-  date: new Date("2021-03-02 2:00 PM"),
+  date: new Date("2021-03-02 2:00 PM GMT-4"),
   online: false,
   location: "MC",
   registerLink: "http://csclub.uwaterloo.ca/",

content/playground/alt-tab.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Alt-Tab",
   short: "CSC is proud to present to you Alt-Tab!",
-  date: new Date("March 25, 2021 19:00:00"),
+  date: new Date("March 25, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/alt-tab.jpg",

content/playground/ootb-react.event.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   name: "Out of the Box: React",
   short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.",
-  date: new Date("March 23, 2021 19:00:00"),
+  date: new Date("March 23, 2021 19:00:00 GMT-4"),
   online: true,
   location: "Twitch",
   poster: "/images/playground/intro-ootb.jpg",