Misc css fixes
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Aditya Thakral 2021-08-27 20:38:11 -04:00
parent 5933dd03b8
commit 0008d9e914
7 changed files with 41 additions and 18 deletions

View File

@ -2,5 +2,5 @@
padding: 0 calc(4rem / 16);
background: var(--code-background);
border-radius: calc(5rem / 16);
word-wrap: break-word;
overflow-wrap: break-word;
}

View File

@ -15,13 +15,12 @@
margin-bottom: 1rem;
}
.spacer {
margin-top: calc(76rem / 16);
.registerButton {
font-weight: bold;
}
.registerButton {
.registerButtonWithPoster {
display: block;
font-weight: bold;
}
.content > h1 {

View File

@ -28,10 +28,28 @@ export function EventCard({
}: EventCardProps) {
return (
<article className={styles.card}>
{poster && (
<aside>
{poster && <Image alt={name} src={poster} />}
{!poster && <div className={styles.spacer}></div>}
<Image alt={name} src={poster} />
{registerLink && (
<Button
isLink={true}
href={registerLink}
size="small"
className={`${styles.registerButton} ${styles.registerButtonWithPoster}`}
>
Register
</Button>
)}
</aside>
)}
<section className={styles.content}>
<h1>{name}</h1>
<h2>
<EventSetting date={date} online={online} location={location} />
</h2>
<div>{children}</div>
{!poster && registerLink && (
<Button
isLink={true}
href={registerLink}
@ -41,13 +59,6 @@ export function EventCard({
Register
</Button>
)}
</aside>
<section className={styles.content}>
<h1>{name}</h1>
<h2>
<EventSetting date={date} online={online} location={location} />
</h2>
<div>{children}</div>
</section>
</article>
);

View File

@ -0,0 +1,4 @@
.image {
/* So that image doesn't overflow on mobile screens */
max-width: 100%;
}

View File

@ -1,8 +1,14 @@
import React, { ImgHTMLAttributes } from "react";
import styles from "./Image.module.css";
export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
const classes = props.className
? [props.className, styles.image]
: [styles.image];
if (props.src?.startsWith("http://") || props.src?.startsWith("https://")) {
return <img {...props} />;
return <img {...props} className={classes.join(" ")} />;
}
const { src: relativeSrc = "" } = props;
@ -16,5 +22,5 @@ export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
absoluteSrc += "/" + relativeSrc;
}
return <img {...props} src={absoluteSrc} />;
return <img {...props} src={absoluteSrc} className={classes.join(" ")} />;
}

View File

@ -3,6 +3,7 @@
transition-duration: 0.3s;
text-decoration: none;
white-space: normal;
overflow-wrap: anywhere;
}
.link:hover {

View File

@ -8,6 +8,7 @@ import { Code } from "@/components/Code";
import { DefaultLayout } from "@/components/DefaultLayout";
import { Footer } from "@/components/Footer";
import { HorizontalLine } from "@/components/HorizontalLine";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { Navbar } from "@/components/Navbar";
import { Pre } from "@/components/Pre";
@ -35,6 +36,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
button: Button,
pre: Pre,
inlineCode: Code,
img: Image,
}}
>
<div className={styles.appContainer}>