diff --git a/src/App/App.css b/src/App/App.css index 23501b64b60da57226ff92054b4eeae4b9775cb5..e7d7f28870d838d4a253bdfd28a7f2a385b0dc12 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -478,6 +478,9 @@ footer a:hover { /* * * * * * * * * */ /* * * IMAGES * * */ /* * * * * * * * * */ +.teamcolzwei{ + margin-top: 3rem !important; +} img, picture, svg { @@ -500,11 +503,27 @@ img .middle{ /* .sponsor-portrait{ border: 5px solid var(--accent-primary); } */ + +.team-name{ + font-size: large; + font-weight: bold; + text-align: left !important; + width: min-content; +} .socials{ height: 1.5rem; width: auto; margin: 0.5rem; } +.team-socials{ + height: 1rem; + width: auto; + margin-left: 0.2rem; +} +.steckbrief{ + margin-top: 2rem !important; +} + .spin { transition: transform 1s ease-in-out; } @@ -543,7 +562,7 @@ img .middle{ .img-round{ border-radius: 50%; - max-width: 80%; + max-width: 0%; } .img-cube{ max-width: 80%; @@ -1245,16 +1264,16 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before { display: block; margin-left: auto; margin-right: auto; - width: 16rem !important; + width: 8rem !important; max-width: 66% !important; transition: all 1s ease; border: 5px solid var(--text-primary); } .lnp:hover > img{ display: block; - margin-left: auto; - margin-right: auto; - width: 100% !important; + margin-left: none; + margin-right: none; + width: 25rem !important; max-width: 100% !important; } diff --git a/src/contents/team.tsx b/src/contents/team.tsx index c7816f4ac331f657ed37e18b85e87e636ce65697..d688e7516f67b08bfd7f1f4c4823af1c3df00f37 100644 --- a/src/contents/team.tsx +++ b/src/contents/team.tsx @@ -7,43 +7,207 @@ export function Team() { <> <br/> <br/> + <h2>Team</h2> <div className="row center"> <div className="col"> <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" - + name="Anna Baack" + job="Job" > . </Steckbrief> </div> <div className="col"> - <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Asal Sahami Moghaddam" + job="Job" + > + . </Steckbrief> </div> <div className="col"> - <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Christian Michalek" + job="Job" + > + . + </Steckbrief> + </div> + </div> + <div className="row center"> + <div className="col"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Isabell Guckes" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Kai Kanthak" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Kathleen Susat" + job="Job" + > + . + </Steckbrief> + </div> + </div> + <div className="row center"> + <div className="col"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Kaya Lange" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Liliana Sanfilippo" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Lisa Wiesner" + job="Job" + > . </Steckbrief> </div> </div> <div className="row center"> <div className="col"> - <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Malte Lenger" + job="Job" + > . </Steckbrief> </div> <div className="col"> - <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Michael Gröning" + job="Job" + > . </Steckbrief> </div> <div className="col"> - <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Philip Mundt" + job="Job" + > . </Steckbrief> </div> </div> + <div className="row center"> + <div className="col"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Vera Köhler" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Vincent Stöckl" + job="Job" + > + . + </Steckbrief> + + </div> + </div> + <h2>Instructor</h2> + <div className="row center"> + <div className="col"> + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Sinan Zimmermann" + job="Job" + > + . + </Steckbrief> + + </div> + <div className="col"> + + </div> + </div> + + <h2>Advisors</h2> + <div className="row center"> + <div className="col"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Felicitas Zimmer" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Lucas Krause" + job="Job" + > + . + </Steckbrief> + + </div> + </div> + <h2>Principal Investigators</h2> + <div className="row center"> + <div className="col"> + <Steckbrief + url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Jörn Kalinowski" + job="Job" + > + . + </Steckbrief> + </div> + <div className="col"> + + </div> + <div className="col"> + <Steckbrief url="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" + name="Kristian Müller" + job="Job" + > + . + </Steckbrief> + + </div> + </div> </> ); } @@ -53,19 +217,31 @@ interface SteckProps{ name?: string; url: string; children: React.ReactNode; + job: string, } -function Steckbrief({children, url, name}: SteckProps){ +function Steckbrief({children, url, name,job }: SteckProps){ return( <> - <div className="lnp center"> - <img src={url} className="img-round"></img> + <div className="row steckbrief"> + <div className="col-7 lnp center"> + <img src={url} className="img-round"></img> + </div> + <div className="col teamcolzwei"> + <div className="center"> + <p className="team-name">{name}</p> + <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png"/> + </div> + <div className="row"> + {job} + </div> </div> - <div className="center"> - <p>{name}</p> </div> + <div className="row" style={{marginTop: "1rem"}}> {children} + </div> + </> ) }