fixes #35 and #34 - extra padding below poster image Co-authored-by: catherine-w <37776108+catherine-w@users.noreply.github.com> Co-authored-by: c29wan <c29wan@localhost> Reviewed-on: #71 Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca> Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca> Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
This commit is contained in:
parent
6a64013e5c
commit
1fb308327f
|
@ -0,0 +1,40 @@
|
|||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
padding: calc(16rem / 16);
|
||||
color: var(--purple-2);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card aside {
|
||||
max-width: calc(142rem / 16);
|
||||
margin-right: calc(45rem / 16);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card aside img {
|
||||
max-width: calc(142rem / 16);
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: calc(4rem / 16);
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin: 0;
|
||||
margin-top: calc(4rem / 16);
|
||||
font-size: calc(18rem / 16);
|
||||
}
|
||||
|
||||
.card section {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin-top: calc(76rem / 16);
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
import { DEFAULT_MIN_VERSION } from "node:tls";
|
||||
import React from "react";
|
||||
import { Image } from "./Image";
|
||||
import styles from "./MiniTechTalkCard.module.css";
|
||||
|
||||
interface MiniTechTalkProps {
|
||||
name: string;
|
||||
short: string;
|
||||
poster?: string;
|
||||
}
|
||||
|
||||
export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<aside>{poster && <Image alt={name} src={poster} />}</aside>
|
||||
<div className={styles.content}>
|
||||
<h1>{name}</h1>
|
||||
<p>{short}</p>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card aside {
|
||||
flex: 0 0 calc(287rem / 16);
|
||||
margin-right: calc(24rem / 16);
|
||||
}
|
||||
|
||||
.card aside img {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
margin-top: calc(76rem / 16);
|
||||
}
|
||||
|
||||
.card h1 {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.card {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import { Image } from "./Image";
|
||||
import styles from "./TechTalkCard.module.css";
|
||||
|
||||
interface TechTalkProps {
|
||||
name: string;
|
||||
poster?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function TechTalkCard({ name, poster, children }: TechTalkProps) {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<aside>
|
||||
{poster && <Image alt={name} src={poster} />}
|
||||
{!poster && <div className={styles.spacer}></div>}
|
||||
</aside>
|
||||
<section className={styles.content}>
|
||||
<h1>{name}</h1>
|
||||
<div>{children}</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
}
|
|
@ -87,6 +87,10 @@
|
|||
font-size: calc(24rem / 16);
|
||||
}
|
||||
|
||||
.miniTechTalkDemo > *:nth-child(odd) {
|
||||
background: var(--background-teal-2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.newsDemo,
|
||||
.eventDescriptionCardDemo {
|
||||
|
|
|
@ -38,6 +38,10 @@ import CodeyInfo, {
|
|||
metadata as codeyMetadata,
|
||||
} from "../content/playground/codey.team-member.mdx";
|
||||
|
||||
import TempTechTalk, {
|
||||
metadata as tempTechTalkMetadata,
|
||||
} from "../content/playground/temp.talk.mdx";
|
||||
|
||||
import { MiniEventCard } from "./MiniEventCard";
|
||||
import { NewsCard } from "./NewsCard";
|
||||
import { Link } from "./Link";
|
||||
|
@ -47,6 +51,9 @@ import { TeamMember } from "./TeamMember";
|
|||
import { TeamMemberCard } from "./TeamMemberCard";
|
||||
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
||||
import { Button } from "./Button";
|
||||
import { Footer } from "./Footer";
|
||||
import { TechTalkCard } from "./TechTalkCard";
|
||||
import { MiniTechTalkCard } from "./MiniTechTalkCard";
|
||||
|
||||
const events = [
|
||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
||||
|
@ -217,3 +224,29 @@ export function OrganizedContentDemo() {
|
|||
<OrganizedContent sections={sections} currentId={id} link={FakeLink} />
|
||||
);
|
||||
}
|
||||
|
||||
export function TechTalkDemo() {
|
||||
return (
|
||||
<div>
|
||||
<TechTalkCard {...tempTechTalkMetadata}>
|
||||
<TempTechTalk />
|
||||
</TechTalkCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MiniTechTalkDemo() {
|
||||
return (
|
||||
<div className={styles.miniTechTalkDemo}>
|
||||
<MiniTechTalkCard {...tempTechTalkMetadata}>
|
||||
<TempTechTalk />
|
||||
</MiniTechTalkCard>
|
||||
<MiniTechTalkCard {...tempTechTalkMetadata}>
|
||||
<TempTechTalk />
|
||||
</MiniTechTalkCard>
|
||||
<MiniTechTalkCard {...tempTechTalkMetadata}>
|
||||
<TempTechTalk />
|
||||
</MiniTechTalkCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
export const metadata = {
|
||||
name: "Tech Talk Title",
|
||||
short: "Learn how React works and make your own version!",
|
||||
poster: "/images/playground/alt-tab.jpg",
|
||||
};
|
||||
|
||||
You've got a game, but you didn't write it. You're running it by emulating the machine it was meant to run on, and the machine it was
|
||||
meant to run on never had support for networking. Now, you want to play with your friend, over the Internet. Oh, and it's not
|
||||
acceptable to incur any latency between your controller and the game while we're at it. Surely that can't be possible, right?
|
||||
Wrong. This talk will discuss the re-emulation technique for netplay used commercially by a system called GGPO and freely in
|
||||
an emulator frontend called RetroArch, and how similar techniques can be applied to make networking work in other scenarios
|
||||
it was never meant for. This will be an unprepared, impromptu talk with no slides, so it should either be a fascinating dive
|
||||
into a little-heard-of technique, or an impenetrable mess of jargon and algorithms. Either way, it should be fun. Professor
|
||||
Richards is the maintainer of the netplay infrastructure for RetroArch, a popular emulator frontend for multiple platforms.
|
||||
|
||||
# Download
|
||||
|
||||
- BitTorrent:[Netplay in Emulators (mp4)]
|
||||
- HTTP (web browser):[Netplay in Emulators (mp4)]
|
|
@ -63,6 +63,20 @@ declare module "*.section.mdx" {
|
|||
export default ReactComponent;
|
||||
}
|
||||
|
||||
declare module "*.talk.mdx" {
|
||||
import { ComponentType } from "react";
|
||||
|
||||
interface TalkMetadata {
|
||||
name: string;
|
||||
short: string;
|
||||
poster?: string;
|
||||
}
|
||||
|
||||
const ReactComponent: ComponentType;
|
||||
|
||||
export const metadata: TalkMetadata;
|
||||
export default ReactComponent;
|
||||
}
|
||||
declare module "*.mdx" {
|
||||
import { ComponentType } from "react";
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@ body {
|
|||
#1481e3 -17.95%,
|
||||
#4ed4b2 172.82%
|
||||
);
|
||||
--background-teal-2: rgb(78, 212, 178, 0.2);
|
||||
/* used in mobile navbar background */
|
||||
--navbar-gray: #787878b2;
|
||||
/* used in home page */
|
||||
|
|
|
@ -8,9 +8,11 @@ import {
|
|||
TeamMemberCardDemo,
|
||||
OrganizedContentDemo,
|
||||
ButtonDemo,
|
||||
TechTalkDemo,
|
||||
MiniTechTalkDemo,
|
||||
} from "../components/playground";
|
||||
import { ConnectWithUs } from "../components/ConnectWithUs"
|
||||
import { EmailSignup } from "../components/EmailSignup"
|
||||
import { ConnectWithUs } from "../components/ConnectWithUs";
|
||||
import { EmailSignup } from "../components/EmailSignup";
|
||||
|
||||
import { TeamMemberCard } from "../components/TeamMemberCard";
|
||||
|
||||
|
@ -93,6 +95,21 @@ The `<Link />` component is used on various pages such as Meet the Team! and Our
|
|||
|
||||
---
|
||||
|
||||
## `<TechTalkCard />`
|
||||
|
||||
The `<TechTalkCard />` component is used on the Resources page to display information
|
||||
about Tech Talks.
|
||||
|
||||
<TechTalkDemo />
|
||||
|
||||
---
|
||||
|
||||
## `<MiniTechTalkCard />`
|
||||
|
||||
The `<MiniTechTalkCard />` component is used on the Resources page to display condensed
|
||||
information about Tech Talks.
|
||||
|
||||
<MiniTechTalkDemo />
|
||||
## `<ConnectWithUs />`
|
||||
|
||||
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
|
||||
|
|
Loading…
Reference in New Issue