fix minor styling issues

This commit is contained in:
catherine-w 2021-07-08 18:28:46 -04:00
parent b5a6a50ddf
commit 498978b156
7 changed files with 13 additions and 15 deletions

View File

@ -11,7 +11,6 @@
.card aside { .card aside {
max-width: calc(142rem / 16); max-width: calc(142rem / 16);
margin-right: calc(45rem / 16); margin-right: calc(45rem / 16);
/* background-color: pink; */
} }
.card aside img { .card aside img {
@ -24,8 +23,10 @@
padding: calc(4rem / 16); padding: calc(4rem / 16);
} }
.content h3 { .content h1 {
margin-block-start: 4px; margin-block-start: 4px;
margin: 0;
font-size: calc(18rem / 16);
} }
.card section { .card section {

View File

@ -1,23 +1,19 @@
import React, { ReactNode } from "react"; import React from "react";
import { Image } from "./Image"; import { Image } from "./Image";
import styles from "./MiniTechTalkCard.module.css"; import styles from "./MiniTechTalkCard.module.css";
interface TechTalkProps { interface MiniTechTalkProps {
name: string; name: string;
short: string; short: string;
poster?: string; poster?: string;
children: ReactNode;
} }
export function MiniTechTalkCard({ name, poster, short }: TechTalkProps) { export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
return ( return (
<article className={styles.card}> <article className={styles.card}>
<aside> <aside>{poster && <Image alt={name} src={poster} />}</aside>
{poster && <Image alt={name} src={poster} />}
{!poster && <div className={styles.spacer}></div>}
</aside>
<section className={styles.content}> <section className={styles.content}>
<h3>{name}</h3> <h1>{name}</h1>
<p>{short}</p> <p>{short}</p>
</section> </section>
</article> </article>

View File

@ -20,7 +20,7 @@
margin-top: calc(76rem / 16); margin-top: calc(76rem / 16);
} }
.card h2 { .card h1 {
font-size: calc(24rem / 16); font-size: calc(24rem / 16);
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;

View File

@ -18,7 +18,7 @@ export function TechTalkCard({ name, poster, children }: TechTalkProps) {
{!poster && <div className={styles.spacer}></div>} {!poster && <div className={styles.spacer}></div>}
</aside> </aside>
<section className={styles.content}> <section className={styles.content}>
<h2>{name}</h2> <h1>{name}</h1>
<div>{children}</div> <div>{children}</div>
</section> </section>
</section> </section>

View File

@ -88,7 +88,7 @@
} }
.miniTechTalkDemo > *:nth-child(odd) { .miniTechTalkDemo > *:nth-child(odd) {
background: rgb(78, 212, 178, 0.3); background: var(--background-teal-2);
} }
@media only screen and (max-width: calc(768rem / 16)) { @media only screen and (max-width: calc(768rem / 16)) {

View File

@ -13,7 +13,7 @@ it was never meant for. This will be an unprepared, impromptu talk with no slide
into a little-heard-of technique, or an impenetrable mess of jargon and algorithms. Either way, it should be fun. Professor 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. Richards is the maintainer of the netplay infrastructure for RetroArch, a popular emulator frontend for multiple platforms.
## Download # Download
- BitTorrent:[Netplay in Emulators (mp4)] - BitTorrent:[Netplay in Emulators (mp4)]
- HTTP (web browser):[Netplay in Emulators (mp4)] - HTTP (web browser):[Netplay in Emulators (mp4)]

View File

@ -18,6 +18,7 @@ body {
#1481e3 -17.95%, #1481e3 -17.95%,
#4ed4b2 172.82% #4ed4b2 172.82%
); );
--background-teal-2: rgb(78, 212, 178, 0.2);
color: var(--black); color: var(--black);
font-family: "Poppins", "sans-serif"; font-family: "Poppins", "sans-serif";