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);
|
font-size: calc(24rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.miniTechTalkDemo > *:nth-child(odd) {
|
||||||
|
background: var(--background-teal-2);
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.newsDemo,
|
.newsDemo,
|
||||||
.eventDescriptionCardDemo {
|
.eventDescriptionCardDemo {
|
||||||
|
|
|
@ -38,6 +38,10 @@ import CodeyInfo, {
|
||||||
metadata as codeyMetadata,
|
metadata as codeyMetadata,
|
||||||
} from "../content/playground/codey.team-member.mdx";
|
} from "../content/playground/codey.team-member.mdx";
|
||||||
|
|
||||||
|
import TempTechTalk, {
|
||||||
|
metadata as tempTechTalkMetadata,
|
||||||
|
} from "../content/playground/temp.talk.mdx";
|
||||||
|
|
||||||
import { MiniEventCard } from "./MiniEventCard";
|
import { MiniEventCard } from "./MiniEventCard";
|
||||||
import { NewsCard } from "./NewsCard";
|
import { NewsCard } from "./NewsCard";
|
||||||
import { Link } from "./Link";
|
import { Link } from "./Link";
|
||||||
|
@ -47,6 +51,9 @@ import { TeamMember } from "./TeamMember";
|
||||||
import { TeamMemberCard } from "./TeamMemberCard";
|
import { TeamMemberCard } from "./TeamMemberCard";
|
||||||
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
||||||
import { Button } from "./Button";
|
import { Button } from "./Button";
|
||||||
|
import { Footer } from "./Footer";
|
||||||
|
import { TechTalkCard } from "./TechTalkCard";
|
||||||
|
import { MiniTechTalkCard } from "./MiniTechTalkCard";
|
||||||
|
|
||||||
const events = [
|
const events = [
|
||||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
||||||
|
@ -217,3 +224,29 @@ export function OrganizedContentDemo() {
|
||||||
<OrganizedContent sections={sections} currentId={id} link={FakeLink} />
|
<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;
|
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" {
|
declare module "*.mdx" {
|
||||||
import { ComponentType } from "react";
|
import { ComponentType } from "react";
|
||||||
|
|
||||||
|
|
|
@ -23,6 +23,7 @@ body {
|
||||||
#1481e3 -17.95%,
|
#1481e3 -17.95%,
|
||||||
#4ed4b2 172.82%
|
#4ed4b2 172.82%
|
||||||
);
|
);
|
||||||
|
--background-teal-2: rgb(78, 212, 178, 0.2);
|
||||||
/* used in mobile navbar background */
|
/* used in mobile navbar background */
|
||||||
--navbar-gray: #787878b2;
|
--navbar-gray: #787878b2;
|
||||||
/* used in home page */
|
/* used in home page */
|
||||||
|
|
|
@ -8,9 +8,11 @@ import {
|
||||||
TeamMemberCardDemo,
|
TeamMemberCardDemo,
|
||||||
OrganizedContentDemo,
|
OrganizedContentDemo,
|
||||||
ButtonDemo,
|
ButtonDemo,
|
||||||
|
TechTalkDemo,
|
||||||
|
MiniTechTalkDemo,
|
||||||
} from "../components/playground";
|
} from "../components/playground";
|
||||||
import { ConnectWithUs } from "../components/ConnectWithUs"
|
import { ConnectWithUs } from "../components/ConnectWithUs";
|
||||||
import { EmailSignup } from "../components/EmailSignup"
|
import { EmailSignup } from "../components/EmailSignup";
|
||||||
|
|
||||||
import { TeamMemberCard } from "../components/TeamMemberCard";
|
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 />`
|
## `<ConnectWithUs />`
|
||||||
|
|
||||||
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
|
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!
|
||||||
|
|
Loading…
Reference in New Issue