mobile styling
This commit is contained in:
parent
639725f3a4
commit
ccdac0c194
|
@ -6,9 +6,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 100%;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width: calc(110rem / 16);
|
||||||
|
height: calc(110rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium {
|
||||||
|
width: calc(130rem / 16);
|
||||||
|
height: calc(130rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
|
@ -25,3 +35,19 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.container {
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width: calc(85rem / 16);
|
||||||
|
height: calc(85rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.role {
|
||||||
|
font-size: calc(11rem / 16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -6,17 +6,20 @@ interface TeamMemberProps {
|
||||||
name: string;
|
name: string;
|
||||||
role: string;
|
role: string;
|
||||||
image?: string;
|
image?: string;
|
||||||
|
size?: "small" | "medium";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TeamMember: React.FC<TeamMemberProps> = ({
|
export const TeamMember: React.FC<TeamMemberProps> = ({
|
||||||
name,
|
name,
|
||||||
role,
|
role,
|
||||||
image,
|
image,
|
||||||
|
size,
|
||||||
}) => {
|
}) => {
|
||||||
|
const imgSize = size ? size : "small";
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<Image
|
<Image
|
||||||
className={styles.img}
|
className={styles.img + " " + styles[imgSize]}
|
||||||
src={image ?? "/images/team-member-placeholder.svg"}
|
src={image ?? "/images/team-member-placeholder.svg"}
|
||||||
alt={`Picture of ${name}`}
|
alt={`Picture of ${name}`}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* Default is light theme */
|
/* Default is light theme */
|
||||||
--white: #ffffff;
|
--white: #ffffff;
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
.headerContainer {
|
.headerContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
padding-bottom: calc(24rem / 16);
|
padding-bottom: calc(24rem / 16);
|
||||||
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
||||||
margin-bottom: calc(46rem / 16);
|
margin-bottom: calc(46rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.headerTextContainer {
|
.headerTextContainer {
|
||||||
margin: auto 0 0 0;
|
margin: auto 0 0 0;
|
||||||
}
|
}
|
||||||
|
@ -30,7 +33,11 @@
|
||||||
width: calc(360rem / 16);
|
width: calc(360rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.execs {
|
.execsMobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.execsDesktop {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: calc(26rem / 16);
|
gap: calc(26rem / 16);
|
||||||
|
@ -42,6 +49,7 @@
|
||||||
grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
|
||||||
row-gap: calc(43rem / 16);
|
row-gap: calc(43rem / 16);
|
||||||
column-gap: calc(53rem / 16);
|
column-gap: calc(53rem / 16);
|
||||||
|
justify-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.members:last-child {
|
.members:last-child {
|
||||||
|
@ -62,3 +70,60 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.875;
|
line-height: 1.875;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.headerContainer {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
margin-top: calc(24rem / 16);
|
||||||
|
margin-bottom: calc(46rem / 16);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codey {
|
||||||
|
width: calc(140rem / 16);
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: calc(24rem / 16);
|
||||||
|
margin: calc(10rem / 16) 0 0 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheading {
|
||||||
|
font-size: calc(24rem / 16);
|
||||||
|
padding-bottom: calc(15rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.execsMobile {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(calc(100rem / 16), 1fr));
|
||||||
|
row-gap: calc(24rem / 16);
|
||||||
|
column-gap: calc(24rem / 16);
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.execsDesktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members {
|
||||||
|
row-gap: calc(24rem / 16);
|
||||||
|
column-gap: calc(1rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.elections {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.electionSubheading {
|
||||||
|
font-size: calc(24rem / 16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -24,6 +24,7 @@ import NeilParikh, {
|
||||||
import MaxErenberg, {
|
import MaxErenberg, {
|
||||||
metadata as MaxMetadata,
|
metadata as MaxMetadata,
|
||||||
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
|
} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx";
|
||||||
|
import { Link } from "../../components/Link";
|
||||||
|
|
||||||
// TODO: get hotdog for elections
|
// TODO: get hotdog for elections
|
||||||
// add member info
|
// add member info
|
||||||
|
@ -37,6 +38,12 @@ export default function MeetTheTeam() {
|
||||||
<div className={styles.headerContainer}>
|
<div className={styles.headerContainer}>
|
||||||
<div className={styles.headerTextContainer}>
|
<div className={styles.headerTextContainer}>
|
||||||
<h1 className={styles.header}>Meet the Team!</h1>
|
<h1 className={styles.header}>Meet the Team!</h1>
|
||||||
|
<div className={styles.nav}>
|
||||||
|
<Link href="#execs">The Executives</Link>
|
||||||
|
<Link href="#programme">Programme Committee</Link>
|
||||||
|
<Link href="#website">Website Committee</Link>
|
||||||
|
<Link href="#system">Systems Committee</Link>
|
||||||
|
</div>
|
||||||
<h2
|
<h2
|
||||||
className={styles.subheading}
|
className={styles.subheading}
|
||||||
style={{ borderBottom: "none", margin: 0, padding: 0 }}
|
style={{ borderBottom: "none", margin: 0, padding: 0 }}
|
||||||
|
@ -46,7 +53,7 @@ export default function MeetTheTeam() {
|
||||||
</div>
|
</div>
|
||||||
<Image src="images/team/team-codey.svg" className={styles.codey} />
|
<Image src="images/team/team-codey.svg" className={styles.codey} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.execs}>
|
<div className={styles.execsDesktop} id="execs">
|
||||||
{/* {props.execs.map((exec) => {
|
{/* {props.execs.map((exec) => {
|
||||||
return (
|
return (
|
||||||
<div key={exec.metadata.name}>
|
<div key={exec.metadata.name}>
|
||||||
|
@ -72,15 +79,22 @@ export default function MeetTheTeam() {
|
||||||
<MaxErenberg />
|
<MaxErenberg />
|
||||||
</TeamMemberCard>
|
</TeamMemberCard>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.programme}>
|
<div className={styles.execsMobile} id="execs">
|
||||||
|
<TeamMember {...KallenMetadata} size="medium" />
|
||||||
|
<TeamMember {...GordonMetadata} size="medium" />
|
||||||
|
<TeamMember {...RavinduMetadata} size="medium" />
|
||||||
|
<TeamMember {...NeilMetadata} size="medium" />
|
||||||
|
<TeamMember {...MaxMetadata} size="medium" />
|
||||||
|
</div>
|
||||||
|
<div className={styles.programme} id="programme">
|
||||||
<h2 className={styles.subheading}>Programme Committee</h2>
|
<h2 className={styles.subheading}>Programme Committee</h2>
|
||||||
<MembersList team={programme} />
|
<MembersList team={programme} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.website}>
|
<div className={styles.website} id="website">
|
||||||
<h2 className={styles.subheading}>Website Committee</h2>
|
<h2 className={styles.subheading}>Website Committee</h2>
|
||||||
<MembersList team={website} />
|
<MembersList team={website} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.system}>
|
<div className={styles.system} id="system">
|
||||||
<h2 className={styles.subheading}>Systems Committee</h2>
|
<h2 className={styles.subheading}>Systems Committee</h2>
|
||||||
<MembersList team={systems} />
|
<MembersList team={systems} />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue