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