Mobile layout improvements

components/MiniTechTalkCard.module.css

@@ -10,7 +10,7 @@
 
 .card aside {
   max-width: calc(142rem / 16);
-  margin-right: calc(45rem / 16);
+  margin-right: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;

components/TechTalkCard.module.css

@@ -37,4 +37,18 @@
   .card {
     flex-direction: column;
   }
+
+  .card aside {
+    margin: 0;
+    margin-bottom: 1rem;
+    flex: unset;
+  }
+
+  .card aside img {
+    margin: 0;
+  }
+
+  .content ul {
+    padding-left: 1rem;
+  }
 }

pages/resources/tech-talks.module.css

@@ -1,8 +1,13 @@
+.page {
+  margin: calc(60rem / 16) 0;
+}
+
 .headerContainer {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   padding-bottom: 1rem;
+  margin-bottom: calc(40rem / 16);
   border-bottom: calc(1rem / 16) solid var(--primary-heading);
 }
 
@@ -12,7 +17,6 @@
 
 .header h1 {
   color: var(--primary-heading);
-  font-size: calc(48rem / 16);
   margin: 0 1rem 0 0;
   text-align: left;
 }
@@ -22,7 +26,6 @@
 }
 
 .image {
-  width: calc(260rem / 16);
   height: calc(165rem / 16);
   object-fit: cover;
 }
@@ -31,6 +34,33 @@
   background: var(--secondary-accent-light);
 }
 
-.miniCards {
+@media only screen and (max-width: calc(768rem / 16)) {
-  margin: calc(60rem / 16) 0;
+  .page {
+    margin-top: 0;
+    margin-bottom: calc(20rem / 16);
+  }
+
+  .headerContainer {
+    flex-direction: column-reverse;
+    margin-bottom: calc(20rem / 16);
+  }
+
+  .headerContent {
+    display: none;
+  }
+
+  .image {
+    margin: 0 auto;
+    height: calc(75rem / 16);
+  }
+
+  .header {
+    width: 100%;
+    padding: 0;
+  }
+
+  .header h1 {
+    text-align: center;
+    margin: 0;
+  }
 }

pages/resources/tech-talks.tsx

@@ -13,18 +13,8 @@ interface Props {
 
 export default function TechTalks({ talks }: Props) {
   return (
-    <>
+    <div className={styles.page}>
-      <div className={styles.headerContainer}>
+      <Header />
-        <section className={styles.header}>
-          <h1>Tech Talks</h1>
-          <p className={styles.headerContent}>
-            These are the audio and video recordings of past CSC and other
-            university-related talks. Our public events can also be found on our
-            YouTube channel.
-          </p>
-        </section>
-        <Image src="images/tech-talks.svg" className={styles.image} />
-      </div>
       <div className={styles.miniCards}>
         {talks.map((talk) => (
           <MiniTechTalkCard
@@ -34,7 +24,23 @@ export default function TechTalks({ talks }: Props) {
           />
         ))}
       </div>
-    </>
+    </div>
+  );
+}
+
+export function Header() {
+  return (
+    <header className={styles.headerContainer}>
+      <div className={styles.header}>
+        <h1>Tech Talks</h1>
+        <p className={styles.headerContent}>
+          These are the audio and video recordings of past CSC and other
+          university-related talks. Our public events can also be found on our
+          YouTube channel.
+        </p>
+      </div>
+      <Image src="images/tech-talks.svg" className={styles.image} />
+    </header>
   );
 }
 

pages/resources/tech-talks/[slug].tsx

@@ -0,0 +1,50 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { GetStaticPaths, GetStaticProps } from "next";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
+import React from "react";
+
+import { TechTalkCard } from "@/components/TechTalkCard";
+import { getTechTalk, getTechTalkNames, Metadata } from "@/lib/tech-talks";
+
+import { Header } from "../tech-talks";
+import styles from "../tech-talks.module.css";
+
+interface Props {
+  content: MDXRemoteSerializeResult;
+  metadata: Metadata;
+}
+
+export default function TechTalk({ content, metadata }: Props) {
+  return (
+    <div className={styles.page}>
+      <Header />
+      <TechTalkCard
+        {...metadata}
+        poster={metadata.thumbnails.large ?? metadata.thumbnails.small}
+      >
+        <MDXRemote {...content} />
+      </TechTalkCard>
+    </div>
+  );
+}
+
+export const getStaticProps: GetStaticProps<Props, Params> = async (
+  context
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const talk = await getTechTalk(context.params!.slug);
+
+  return { props: talk };
+};
+
+interface Params extends ParsedUrlQuery {
+  slug: string;
+}
+
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  return {
+    fallback: false,
+    paths: (await getTechTalkNames()).map((slug) => ({ params: { slug } })),
+  };
+};