Fix font-size, line-height, and some other smaller changes
This commit is contained in:
Adi Thakral
parent
48056ca82e
commit
93ede558a4
|
|
@ -1,7 +1,6 @@
|
|||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: calc(1000rem / 16);
|
||||
box-sizing: border-box;
|
||||
padding: calc(24rem / 16);
|
||||
}
|
||||
|
|
@ -35,7 +34,6 @@
|
|||
|
||||
.content,
|
||||
.content > h2 {
|
||||
color: var(--purple-2);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin-top: 0;
|
||||
|
|
@ -43,6 +41,7 @@
|
|||
}
|
||||
|
||||
.content > h2 {
|
||||
color: var(--purple-2);
|
||||
font-size: 1rem;
|
||||
margin-bottom: calc(14rem / 16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,16 +20,12 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
color: var(--purple-2);
|
||||
font-weight: bolder;
|
||||
font-size: calc(18rem / 16);
|
||||
line-height: calc(27 / 18);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: var(--purple-2);
|
||||
margin-top: calc(12rem / 16);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -40,8 +36,8 @@
|
|||
.setting {
|
||||
margin: 0;
|
||||
color: var(--blue-2);
|
||||
font-weight: bolder;
|
||||
font-size: calc(14rem / 16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.details > footer {
|
||||
|
|
@ -64,8 +60,7 @@
|
|||
|
||||
.name,
|
||||
.setting {
|
||||
font-size: calc(14rem / 16);
|
||||
line-height: calc(21 / 14);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.poster {
|
||||
|
|
@ -77,8 +72,7 @@
|
|||
}
|
||||
|
||||
.desc {
|
||||
font-size: calc(12rem / 16);
|
||||
line-height: calc(18 / 12);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logo,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import React from "react";
|
||||
import { Button } from "./Button";
|
||||
import { Image } from "./Image";
|
||||
import { EventSetting } from "./EventSetting";
|
||||
|
|
@ -7,12 +7,12 @@ import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
|
|||
|
||||
interface Props {
|
||||
name: string;
|
||||
short: string;
|
||||
online: boolean;
|
||||
location: string;
|
||||
date: Date;
|
||||
poster?: string;
|
||||
registerLink?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -29,10 +29,10 @@ export function EventDescriptionCard({
|
|||
location,
|
||||
poster,
|
||||
name,
|
||||
short,
|
||||
date,
|
||||
online,
|
||||
registerLink,
|
||||
children,
|
||||
}: Props) {
|
||||
const Icon = getIcon(location);
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export function EventDescriptionCard({
|
|||
<h2 className={styles.setting}>
|
||||
<EventSetting date={date} online={online} location={location} />
|
||||
</h2>
|
||||
<div className={styles.desc}>{children}</div>
|
||||
<p className={styles.desc}>{short}</p>
|
||||
|
||||
<footer>
|
||||
{registerLink && (
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
color: var(--white);
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.miniEventCard {
|
||||
max-width: calc(936rem / 16);
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: var(--purple-2);
|
||||
padding: calc(20rem / 16);
|
||||
/* FIXME: Check figma for updated size */
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.card:nth-child(odd) {
|
||||
background-color: var(--teal-2-20);
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
color: var(--purple-2);
|
||||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
|
|
@ -27,19 +28,20 @@
|
|||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
color: var(--blue-2);
|
||||
margin: calc(20rem / 16);
|
||||
color: var(--blue-2);
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
|
||||
.miniEventCard[open] .shortDescription {
|
||||
.card[open] .shortDescription {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.miniEventCard[open] .dropDownIcon {
|
||||
.card[open] .dropDownIcon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.miniEventCard > summary {
|
||||
.card > summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,18 +11,6 @@ interface Props {
|
|||
date: Date;
|
||||
}
|
||||
|
||||
const dropDownIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
className={styles.dropDownIcon}
|
||||
>
|
||||
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const MiniEventCard: React.FC<Props> = ({
|
||||
name,
|
||||
short,
|
||||
|
|
@ -32,7 +20,7 @@ export const MiniEventCard: React.FC<Props> = ({
|
|||
online,
|
||||
}) => {
|
||||
return (
|
||||
<details className={styles.miniEventCard}>
|
||||
<details className={styles.card}>
|
||||
<summary>
|
||||
<div onClick={(event) => event.preventDefault()}>
|
||||
<h2 className={styles.name}>
|
||||
|
|
@ -52,3 +40,15 @@ export const MiniEventCard: React.FC<Props> = ({
|
|||
</details>
|
||||
);
|
||||
};
|
||||
|
||||
const dropDownIcon = (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
className={styles.dropDownIcon}
|
||||
>
|
||||
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,27 +1,22 @@
|
|||
.card {
|
||||
padding: calc(27rem / 16) calc(39rem / 16);
|
||||
padding: calc(30rem / 16) calc(40rem / 16);
|
||||
max-width: calc(524rem / 16);
|
||||
background-color: white;
|
||||
background-color: var(--white);
|
||||
border-radius: calc(20rem / 16);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: var(--purple-2);
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: bold;
|
||||
line-height: calc(27 / 18);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: var(--purple-1);
|
||||
font-style: normal;
|
||||
line-height: calc(21 / 16);
|
||||
font-size: calc(14rem / 16);
|
||||
margin: calc(5rem / 16) 0 calc(7rem / 16) 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
line-height: calc(21 / 16);
|
||||
color: var(--purple-2);
|
||||
.content > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
|
|
@ -29,4 +24,13 @@
|
|||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.content > *:first-child {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content ul,
|
||||
.content ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ export const NewsCard: React.FC<NewsCardProps> = ({
|
|||
}) => {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<h3>
|
||||
<time className={styles.date} dateTime={date.toISOString()}>
|
||||
<h1 className={styles.date}>
|
||||
<time dateTime={date.toISOString()}>
|
||||
{date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</time>
|
||||
</h3>
|
||||
</h1>
|
||||
<address className={styles.author}>{author}</address>
|
||||
<div className={styles.content}>{children}</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
line-height: calc(24 / 16);
|
||||
}
|
||||
|
||||
.wrapper h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: calc(24rem / 16);
|
||||
margin: 1rem 0 1rem 0;
|
||||
font-weight: 600;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
|
|
@ -43,11 +43,11 @@
|
|||
.selected {
|
||||
background-color: var(--blue-1-05);
|
||||
color: var(--blue-2);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.readAll {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.marker {
|
||||
|
|
@ -73,7 +73,6 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
color: var(--purple-2);
|
||||
font-size: calc(12rem / 16);
|
||||
}
|
||||
|
|
@ -84,7 +83,6 @@
|
|||
|
||||
.next {
|
||||
justify-content: flex-end;
|
||||
justify-self: flex-end;
|
||||
text-align: end;
|
||||
margin-left: calc(8rem / 16);
|
||||
}
|
||||
|
|
@ -92,7 +90,7 @@
|
|||
.arrowHeading {
|
||||
color: var(--blue-2);
|
||||
font-size: calc(14rem / 16);
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
border-bottom: calc(2rem / 16) solid var(--blue-2);
|
||||
padding-bottom: calc(4rem / 16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,11 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
color: var(--blue-1);
|
||||
font-weight: 700;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.role {
|
||||
font-weight: 600;
|
||||
color: var(--purple-2);
|
||||
line-height: 1.875;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
row-gap: 0;
|
||||
justify-items: start;
|
||||
align-items: start;
|
||||
|
||||
max-width: calc(847rem / 16);
|
||||
}
|
||||
|
||||
.picture {
|
||||
|
|
@ -31,47 +29,26 @@
|
|||
grid-area: name;
|
||||
margin: 0;
|
||||
|
||||
color: var(--blue-1);
|
||||
color: var(--blue-2);
|
||||
font-size: calc(36rem / 16);
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.role {
|
||||
grid-area: role;
|
||||
margin: 0;
|
||||
|
||||
color: var(--purple-2);
|
||||
font-size: calc(24rem / 16);
|
||||
line-height: 1.7;
|
||||
line-height: calc(40 / 24);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: description;
|
||||
margin: 0;
|
||||
|
||||
line-height: 1.875;
|
||||
}
|
||||
|
||||
@media screen and (max-width: calc(768rem / 16)) {
|
||||
.card {
|
||||
grid-template-columns: calc(90rem / 16) auto;
|
||||
column-gap: calc(22rem / 16);
|
||||
|
||||
max-width: calc(460rem / 16);
|
||||
}
|
||||
|
||||
.picture {
|
||||
max-width: calc(90rem / 16);
|
||||
max-height: calc(90rem / 16);
|
||||
}
|
||||
|
||||
.name,
|
||||
.role,
|
||||
.description {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.description > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* TODO: Use the correct mobile styles from figma
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
.miniEventCardDemo > *:nth-child(odd) {
|
||||
background: #e1eefa;
|
||||
}
|
||||
|
||||
.newsDemo {
|
||||
padding: calc(50rem / 16);
|
||||
background-color: var(--off-white);
|
||||
|
|
@ -53,7 +49,6 @@
|
|||
}
|
||||
|
||||
.teamMemberDemo {
|
||||
padding: calc(10rem / 16) calc(50rem / 16) calc(30rem / 16) calc(50rem / 16);
|
||||
max-width: calc(847rem / 16);
|
||||
}
|
||||
|
||||
|
|
@ -81,17 +76,6 @@
|
|||
column-gap: calc(53rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.newsDemo,
|
||||
.eventDescriptionCardDemo {
|
||||
background-color: var(--off-white);
|
||||
}
|
||||
|
||||
.eventDescriptionCardDemo > * {
|
||||
margin: calc(50rem / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.linkDemo {
|
||||
padding: calc(50rem / 16);
|
||||
background-color: var(--off-white);
|
||||
|
|
@ -102,3 +86,15 @@
|
|||
color: var(--purple-2);
|
||||
font-size: calc(24rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.newsDemo,
|
||||
.eventDescriptionCardDemo {
|
||||
padding: calc(20rem / 16);
|
||||
background-color: var(--off-white);
|
||||
}
|
||||
|
||||
.eventDescriptionCardDemo > * {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ import { TeamMember } from "./TeamMember";
|
|||
import { TeamMemberCard } from "./TeamMemberCard";
|
||||
import { OrganizedContent, LinkProps } from "./OrganizedContent";
|
||||
import { Button } from "./Button";
|
||||
import { Footer } from "./Footer";
|
||||
|
||||
const events = [
|
||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
|
||||
|
|
@ -130,9 +129,7 @@ export function EventDescriptionCardDemo() {
|
|||
<EventDescriptionCard
|
||||
{...metadata}
|
||||
key={metadata.name + metadata.date.toString()}
|
||||
>
|
||||
{metadata.short}
|
||||
</EventDescriptionCard>
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
body {
|
||||
font-family: "Poppins", "sans-serif";
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
|
||||
/* Default is light theme */
|
||||
--white: #ffffff;
|
||||
--off-white: #fdf8f5;
|
||||
--teal-1: #76ffdc;
|
||||
--teal-2: #4ed4b2;
|
||||
--teal-2-20: #4ed4b234;
|
||||
--blue-1: #5caff9;
|
||||
--blue-1-05: #5caff90d;
|
||||
--blue-1-20: #5caff934;
|
||||
|
|
@ -15,11 +12,20 @@ body {
|
|||
--blue-2-25: #1482e340;
|
||||
--purple-1: #525284;
|
||||
--purple-2: #2a2a62;
|
||||
--black: #000000;
|
||||
--gradient-blue-green: linear-gradient(
|
||||
99.94deg,
|
||||
#1481e3 -17.95%,
|
||||
#4ed4b2 172.82%
|
||||
);
|
||||
|
||||
color: var(--black);
|
||||
font-family: "Poppins", "sans-serif";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: calc(30 / 16);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* FIXME: Dark theme is the same as light theme right now */
|
||||
|
|
@ -41,8 +47,33 @@ body {
|
|||
);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(425rem / 16)) {
|
||||
body {
|
||||
font-size: calc(14rem / 16);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
color: var(--purple-2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(48rem / 16);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(36rem / 16);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,3 +10,10 @@
|
|||
.contentContainer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.defaultLayout {
|
||||
margin: 0 auto;
|
||||
max-width: calc(800rem / 16);
|
||||
padding: 0 calc(20rem / 16);
|
||||
padding-bottom: calc(20rem / 16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from "react";
|
||||
import { AppProps } from "next/app";
|
||||
import React, { ComponentType, ReactNode } from "react";
|
||||
import { NextComponentType, NextPageContext } from "next";
|
||||
import { AppProps as DefaultAppProps } from "next/app";
|
||||
import { MDXProvider } from "@mdx-js/react";
|
||||
import { ThemeProvider } from "../components/theme";
|
||||
import { Navbar } from "../components/Navbar";
|
||||
|
|
@ -11,6 +12,8 @@ import "./_app.css";
|
|||
import "./font.css";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||
const Layout = Component.Layout ?? DefaultLayout;
|
||||
|
||||
return (
|
||||
<ThemeProvider theme="light">
|
||||
<MDXProvider components={{ a: Link }}>
|
||||
|
|
@ -18,7 +21,9 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
|||
<Navbar />
|
||||
{/* Wrapping content with a div to allow for a display: block parent */}
|
||||
<div className={styles.contentContainer}>
|
||||
<Component {...pageProps} />
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
|
@ -26,3 +31,19 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
|||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function DefaultLayout(props: { children: React.ReactNode }) {
|
||||
return <div className={styles.defaultLayout}>{props.children}</div>;
|
||||
}
|
||||
|
||||
type PageComponent = NextComponentType<
|
||||
NextPageContext,
|
||||
unknown,
|
||||
Record<string, unknown>
|
||||
> & {
|
||||
Layout?: ComponentType<{ children: ReactNode }>;
|
||||
};
|
||||
|
||||
type AppProps = DefaultAppProps & {
|
||||
Component: PageComponent;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: calc(806rem / 16);
|
||||
padding: 0 calc(60rem / 16);
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -19,23 +13,14 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
.content h2 {
|
||||
font-weight: 600;
|
||||
font-size: calc(24rem / 16);
|
||||
line-height: calc(36 / 24);
|
||||
color: var(--blue-2);
|
||||
margin-top: calc(35rem / 16);
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: calc(24 / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.container {
|
||||
padding: 0 calc(45rem / 16);
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
|
|
@ -50,7 +35,8 @@
|
|||
width: calc(100rem / 16);
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 calc(18rem / 16);
|
||||
.content ol,
|
||||
.content ul {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,21 @@
|
|||
import { MDXProvider } from "@mdx-js/react";
|
||||
import React, { HTMLAttributes } from "react";
|
||||
import React from "react";
|
||||
import { Image } from "../../components/Image";
|
||||
import Content from "../../content/our-supporters.mdx";
|
||||
import styles from "./our-supporters.module.css";
|
||||
|
||||
export default function OurSupporters() {
|
||||
return (
|
||||
<MDXProvider components={{ h2: H2, p: Text, ul: UL }}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.headerContainer}>
|
||||
<h1 className={styles.header}>Our Supporters</h1>
|
||||
<Image
|
||||
src="our-supporters/supporters-codey.svg"
|
||||
className={styles.codey}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className={styles.headerContainer}>
|
||||
<h1 className={styles.header}>Our Supporters</h1>
|
||||
<Image
|
||||
src="our-supporters/supporters-codey.svg"
|
||||
className={styles.codey}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<Content />
|
||||
</div>
|
||||
</MDXProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function H2(props: HTMLAttributes<HTMLHeadingElement>) {
|
||||
return <h2 {...props} className={styles.title} />;
|
||||
}
|
||||
|
||||
function Text(props: HTMLAttributes<HTMLParagraphElement>) {
|
||||
return <p {...props} className={styles.text} />;
|
||||
}
|
||||
|
||||
function UL(props: HTMLAttributes<HTMLUListElement>) {
|
||||
return <ul {...props} className={styles.list} />;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue