Mobile layout improvements
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
01f5639055
commit
f8fbc04bbc
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
margin: calc(60rem / 16) 0;
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,18 +13,8 @@ interface Props {
|
|||
|
||||
export default function TechTalks({ talks }: Props) {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.headerContainer}>
|
||||
<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.page}>
|
||||
<Header />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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 } })),
|
||||
};
|
||||
};
|
Loading…
Reference in New Issue