Fix font-size, line-height, and some other smaller changes

components/EventCard.module.css

@@ -1,7 +1,6 @@
 .card {
   display: flex;
   flex-direction: row;
-  max-width: calc(1000rem / 16);
   box-sizing: border-box;
   padding: calc(24rem / 16);
 }
@@ -35,7 +34,6 @@
 
 .content,
 .content > h2 {
-  color: var(--purple-2);
   font-weight: 400;
   font-style: normal;
   margin-top: 0;
@@ -43,6 +41,7 @@
 }
 
 .content > h2 {
+  color: var(--purple-2);
   font-size: 1rem;
   margin-bottom: calc(14rem / 16);
 }

components/EventDescriptionCard.module.css

@@ -20,16 +20,12 @@
 }
 
 .name {
-  color: var(--purple-2);
-  font-weight: bolder;
   font-size: calc(18rem / 16);
-  line-height: calc(27 / 18);
   margin: 0;
 }
 
 .desc {
-  color: var(--purple-2);
-  margin-top: calc(12rem / 16);
+  margin: 1rem 0;
 }
 
 .logo {
@@ -40,8 +36,8 @@
 .setting {
   margin: 0;
   color: var(--blue-2);
-  font-weight: bolder;
   font-size: calc(14rem / 16);
+  font-weight: 600;
 }
 
 .details > footer {
@@ -64,8 +60,7 @@
 
   .name,
   .setting {
-    font-size: calc(14rem / 16);
-    line-height: calc(21 / 14);
+    font-size: 1rem;
   }
 
   .poster {
@@ -77,8 +72,7 @@
   }
 
   .desc {
-    font-size: calc(12rem / 16);
-    line-height: calc(18 / 12);
+    margin: 0;
   }
 
   .logo,

components/EventDescriptionCard.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
@@ -7,12 +7,12 @@ import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 interface Props {
   name: string;
+  short: string;
   online: boolean;
   location: string;
   date: Date;
   poster?: string;
   registerLink?: string;
-  children: ReactNode;
 }
 
 /**
@@ -29,10 +29,10 @@ export function EventDescriptionCard({
   location,
   poster,
   name,
+  short,
   date,
   online,
   registerLink,
-  children,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -45,7 +45,7 @@ export function EventDescriptionCard({
         <h2 className={styles.setting}>
           <EventSetting date={date} online={online} location={location} />
         </h2>
-        <div className={styles.desc}>{children}</div>
+        <p className={styles.desc}>{short}</p>
 
         <footer>
           {registerLink && (

components/Footer.module.css

@@ -18,7 +18,7 @@
 }
 
 .text {
-  color: white;
+  color: var(--white);
   font-style: normal;
   text-align: center;
 }

components/MiniEventCard.module.css

@@ -1,11 +1,11 @@
-.miniEventCard {
-  max-width: calc(936rem / 16);
+.card {
   box-sizing: border-box;
   position: relative;
-  color: var(--purple-2);
   padding: calc(20rem / 16);
-  /* FIXME: Check figma for updated size */
-  font-size: calc(14rem / 16);
+}
+
+.card:nth-child(odd) {
+  background-color: var(--teal-2-20);
 }
 
 .name {
@@ -19,6 +19,7 @@
 }
 
 .info {
+  color: var(--purple-2);
   margin-bottom: calc(12rem / 16);
 }
 
@@ -27,19 +28,20 @@
   top: 0;
   right: 0;
   cursor: pointer;
-  color: var(--blue-2);
   margin: calc(20rem / 16);
+  color: var(--blue-2);
+  font-size: calc(14rem / 16);
 }
 
-.miniEventCard[open] .shortDescription {
+.card[open] .shortDescription {
   display: none;
 }
 
-.miniEventCard[open] .dropDownIcon {
+.card[open] .dropDownIcon {
   transform: rotate(180deg);
 }
 
-.miniEventCard > summary {
+.card > summary {
   list-style: none;
 }
 

components/MiniEventCard.tsx

@@ -11,18 +11,6 @@ interface Props {
   date: Date;
 }
 
-const dropDownIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="9"
-    viewBox="0 0 14 9"
-    className={styles.dropDownIcon}
-  >
-    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
-  </svg>
-);
-
 export const MiniEventCard: React.FC<Props> = ({
   name,
   short,
@@ -32,7 +20,7 @@ export const MiniEventCard: React.FC<Props> = ({
   online,
 }) => {
   return (
-    <details className={styles.miniEventCard}>
+    <details className={styles.card}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
@@ -52,3 +40,15 @@ export const MiniEventCard: React.FC<Props> = ({
     </details>
   );
 };
+
+const dropDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="9"
+    viewBox="0 0 14 9"
+    className={styles.dropDownIcon}
+  >
+    <path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
+  </svg>
+);

components/NewsCard.module.css

@@ -1,27 +1,22 @@
 .card {
-  padding: calc(27rem / 16) calc(39rem / 16);
+  padding: calc(30rem / 16) calc(40rem / 16);
   max-width: calc(524rem / 16);
-  background-color: white;
+  background-color: var(--white);
+  border-radius: calc(20rem / 16);
 }
 
 .date {
-  color: var(--purple-2);
   font-size: calc(18rem / 16);
-  font-weight: bold;
-  line-height: calc(27 / 18);
+  margin: 0;
 }
 
 .author {
   color: var(--purple-1);
   font-style: normal;
-  line-height: calc(21 / 16);
-  font-size: calc(14rem / 16);
-  margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
 }
 
-.content {
-  line-height: calc(21 / 16);
-  color: var(--purple-2);
+.content > *:first-child {
+  margin-top: 0;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
@@ -29,4 +24,13 @@
     padding: 0;
     background-color: transparent;
   }
+
+  .content > *:first-child {
+    margin-top: 1rem;
+  }
+
+  .content ul,
+  .content ol {
+    padding: 0 1rem;
+  }
 }

components/NewsCard.tsx

@@ -14,15 +14,15 @@ export const NewsCard: React.FC<NewsCardProps> = ({
 }) => {
   return (
     <article className={styles.card}>
-      <h3>
-        <time className={styles.date} dateTime={date.toISOString()}>
+      <h1 className={styles.date}>
+        <time dateTime={date.toISOString()}>
           {date.toLocaleDateString("en-US", {
             year: "numeric",
             month: "long",
             day: "numeric",
           })}
         </time>
-      </h3>
+      </h1>
       <address className={styles.author}>{author}</address>
       <div className={styles.content}>{children}</div>
     </article>

components/OrganizedContent.module.css

@@ -1,11 +1,11 @@
 .wrapper {
   display: flex;
-  line-height: calc(24 / 16);
 }
 
 .wrapper h1 {
+  margin: 1rem 0;
   font-size: calc(24rem / 16);
-  margin: 1rem 0 1rem 0;
+  font-weight: 600;
   color: var(--blue-2);
 }
 
@@ -43,11 +43,11 @@
 .selected {
   background-color: var(--blue-1-05);
   color: var(--blue-2);
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .readAll {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .marker {
@@ -73,7 +73,6 @@
   flex: 1;
   display: flex;
   cursor: pointer;
-  display: flex;
   color: var(--purple-2);
   font-size: calc(12rem / 16);
 }
@@ -84,7 +83,6 @@
 
 .next {
   justify-content: flex-end;
-  justify-self: flex-end;
   text-align: end;
   margin-left: calc(8rem / 16);
 }
@@ -92,7 +90,7 @@
 .arrowHeading {
   color: var(--blue-2);
   font-size: calc(14rem / 16);
-  font-weight: bold;
+  font-weight: 700;
   border-bottom: calc(2rem / 16) solid var(--blue-2);
   padding-bottom: calc(4rem / 16);
 }

components/TeamMember.module.css

@@ -17,12 +17,11 @@
 }
 
 .name {
-  font-weight: bold;
-  color: var(--blue-1);
+  font-weight: 700;
+  color: var(--blue-2);
 }
 
 .role {
   font-weight: 600;
   color: var(--purple-2);
-  line-height: 1.875;
 }

components/TeamMemberCard.module.css

@@ -9,8 +9,6 @@
   row-gap: 0;
   justify-items: start;
   align-items: start;
-
-  max-width: calc(847rem / 16);
 }
 
 .picture {
@@ -31,47 +29,26 @@
   grid-area: name;
   margin: 0;
 
-  color: var(--blue-1);
+  color: var(--blue-2);
   font-size: calc(36rem / 16);
-  line-height: 1.1;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .role {
   grid-area: role;
   margin: 0;
 
-  color: var(--purple-2);
   font-size: calc(24rem / 16);
-  line-height: 1.7;
+  line-height: calc(40 / 24);
   font-weight: 600;
 }
 
 .description {
   grid-area: description;
-  margin: 0;
-
-  line-height: 1.875;
 }
 
-@media screen and (max-width: calc(768rem / 16)) {
-  .card {
-    grid-template-columns: calc(90rem / 16) auto;
-    column-gap: calc(22rem / 16);
-
-    max-width: calc(460rem / 16);
-  }
-
-  .picture {
-    max-width: calc(90rem / 16);
-    max-height: calc(90rem / 16);
-  }
-
-  .name,
-  .role,
-  .description {
-    line-height: 1.5;
-  }
+.description > *:first-child {
+  margin-top: 0;
 }
 
 /* TODO: Use the correct mobile styles from figma

components/playground.module.css

@@ -1,7 +1,3 @@
-.miniEventCardDemo > *:nth-child(odd) {
-  background: #e1eefa;
-}
-
 .newsDemo {
   padding: calc(50rem / 16);
   background-color: var(--off-white);
@@ -53,7 +49,6 @@
 }
 
 .teamMemberDemo {
-  padding: calc(10rem / 16) calc(50rem / 16) calc(30rem / 16) calc(50rem / 16);
   max-width: calc(847rem / 16);
 }
 
@@ -81,17 +76,6 @@
   column-gap: calc(53rem / 16);
 }
 
-@media only screen and (max-width: calc(768rem / 16)) {
-  .newsDemo,
-  .eventDescriptionCardDemo {
-    background-color: var(--off-white);
-  }
-
-  .eventDescriptionCardDemo > * {
-    margin: calc(50rem / 16);
-  }
-}
-
 .linkDemo {
   padding: calc(50rem / 16);
   background-color: var(--off-white);
@@ -102,3 +86,15 @@
   color: var(--purple-2);
   font-size: calc(24rem / 16);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .newsDemo,
+  .eventDescriptionCardDemo {
+    padding: calc(20rem / 16);
+    background-color: var(--off-white);
+  }
+
+  .eventDescriptionCardDemo > * {
+    margin: 0;
+  }
+}

components/playground.tsx

@@ -47,7 +47,6 @@ import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
 import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { Button } from "./Button";
-import { Footer } from "./Footer";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -130,9 +129,7 @@ export function EventDescriptionCardDemo() {
         <EventDescriptionCard
           {...metadata}
           key={metadata.name + metadata.date.toString()}
-        >
-          {metadata.short}
-        </EventDescriptionCard>
+        />
       ))}
     </div>
   );

pages/_app.css

@@ -1,13 +1,10 @@
 body {
-  font-family: "Poppins", "sans-serif";
-  font-size: 1rem;
-  margin: 0;
-
   /* Default is light theme */
   --white: #ffffff;
   --off-white: #fdf8f5;
   --teal-1: #76ffdc;
   --teal-2: #4ed4b2;
+  --teal-2-20: #4ed4b234;
   --blue-1: #5caff9;
   --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
@@ -15,11 +12,20 @@ body {
   --blue-2-25: #1482e340;
   --purple-1: #525284;
   --purple-2: #2a2a62;
+  --black: #000000;
   --gradient-blue-green: linear-gradient(
     99.94deg,
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+
+  color: var(--black);
+  font-family: "Poppins", "sans-serif";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: calc(30 / 16);
+
+  margin: 0;
 }
 
 /* FIXME: Dark theme is the same as light theme right now */
@@ -41,8 +47,33 @@ body {
   );
 }
 
-@media only screen and (max-width: calc(425rem / 16)) {
-  body {
-    font-size: calc(14rem / 16);
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-style: normal;
+  line-height: 1.5;
+  color: var(--purple-2);
+}
+
+h1 {
+  font-size: calc(48rem / 16);
+  font-weight: 700;
+}
+
+h2 {
+  font-size: calc(36rem / 16);
+  font-weight: 700;
+}
+
+h3 {
+  font-size: calc(24rem / 16);
+  font-weight: 600;
+}
+
+h4 {
+  font-size: calc(18rem / 16);
+  font-weight: 600;
 }

pages/_app.module.css

@@ -10,3 +10,10 @@
 .contentContainer {
   flex-grow: 1;
 }
+
+.defaultLayout {
+  margin: 0 auto;
+  max-width: calc(800rem / 16);
+  padding: 0 calc(20rem / 16);
+  padding-bottom: calc(20rem / 16);
+}

pages/_app.tsx

@@ -1,5 +1,6 @@
-import React from "react";
-import { AppProps } from "next/app";
+import React, { ComponentType, ReactNode } from "react";
+import { NextComponentType, NextPageContext } from "next";
+import { AppProps as DefaultAppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
@@ -11,6 +12,8 @@ import "./_app.css";
 import "./font.css";
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
+  const Layout = Component.Layout ?? DefaultLayout;
+
   return (
     <ThemeProvider theme="light">
       <MDXProvider components={{ a: Link }}>
@@ -18,7 +21,9 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}
           <div className={styles.contentContainer}>
-            <Component {...pageProps} />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
           </div>
           <Footer />
         </div>
@@ -26,3 +31,19 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
     </ThemeProvider>
   );
 }
+
+function DefaultLayout(props: { children: React.ReactNode }) {
+  return <div className={styles.defaultLayout}>{props.children}</div>;
+}
+
+type PageComponent = NextComponentType<
+  NextPageContext,
+  unknown,
+  Record<string, unknown>
+> & {
+  Layout?: ComponentType<{ children: ReactNode }>;
+};
+
+type AppProps = DefaultAppProps & {
+  Component: PageComponent;
+};

pages/about/our-supporters.module.css

@@ -1,9 +1,3 @@
-.container {
-  margin: 0 auto;
-  max-width: calc(806rem / 16);
-  padding: 0 calc(60rem / 16);
-}
-
 .headerContainer {
   display: flex;
   flex-direction: row;
@@ -19,23 +13,14 @@
   text-align: center;
 }
 
-.title {
+.content h2 {
   font-weight: 600;
   font-size: calc(24rem / 16);
-  line-height: calc(36 / 24);
   color: var(--blue-2);
   margin-top: calc(35rem / 16);
 }
 
-.text {
-  line-height: calc(24 / 16);
-}
-
 @media only screen and (max-width: calc(768rem / 16)) {
-  .container {
-    padding: 0 calc(45rem / 16);
-  }
-
   .headerContainer {
     flex-direction: column-reverse;
     align-items: center;
@@ -50,7 +35,8 @@
     width: calc(100rem / 16);
   }
 
-  .list {
-    padding: 0 calc(18rem / 16);
+  .content ol,
+  .content ul {
+    padding: 0 1rem;
   }
 }

pages/about/our-supporters.tsx

@@ -1,34 +1,21 @@
-import { MDXProvider } from "@mdx-js/react";
-import React, { HTMLAttributes } from "react";
+import React from "react";
 import { Image } from "../../components/Image";
 import Content from "../../content/our-supporters.mdx";
 import styles from "./our-supporters.module.css";
 
 export default function OurSupporters() {
   return (
-    <MDXProvider components={{ h2: H2, p: Text, ul: UL }}>
-      <div className={styles.container}>
-        <div className={styles.headerContainer}>
-          <h1 className={styles.header}>Our Supporters</h1>
-          <Image
-            src="our-supporters/supporters-codey.svg"
-            className={styles.codey}
-          />
-        </div>
+    <>
+      <div className={styles.headerContainer}>
+        <h1 className={styles.header}>Our Supporters</h1>
+        <Image
+          src="our-supporters/supporters-codey.svg"
+          className={styles.codey}
+        />
+      </div>
+      <div className={styles.content}>
         <Content />
       </div>
-    </MDXProvider>
+    </>
   );
 }
-
-function H2(props: HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 {...props} className={styles.title} />;
-}
-
-function Text(props: HTMLAttributes<HTMLParagraphElement>) {
-  return <p {...props} className={styles.text} />;
-}
-
-function UL(props: HTMLAttributes<HTMLUListElement>) {
-  return <ul {...props} className={styles.list} />;
-}