diff --git a/src/App/App.css b/src/App/App.css
index ee8dacb2c2af4c2542ae5145d2839822efbc6553..ab92986fa48d9415d2e17f90787b85b3dea171c5 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -430,7 +430,7 @@ footer a:hover {
}
.bfh-more-button{
- margin-top: 10px;
+ margin-top: 20px;
padding: 5px;
border-radius: 10px;
padding-left: 10px;
@@ -3149,4 +3149,14 @@ a{
}
.bfh-menu svg a:hover > g circle{
fill: var(--accent-gradient-three-of-three) !important;
+}
+
+.vertical{
+ display:inline;
+ vertical-align: middle;
+}
+
+.text-1-bfh{
+ margin-top: auto !important;
+ margin-bottom: auto !important;
}
\ No newline at end of file
diff --git a/src/App/App.scss b/src/App/App.scss
index 23eeed6f09d424ab1c2ba455fd20adc28ef44ccd..e5d37f30dacc619f755218e6b22b86fb6322a0f2 100644
--- a/src/App/App.scss
+++ b/src/App/App.scss
@@ -562,4 +562,59 @@ $shadow: #bc15aa;
border-bottom-color: darken(#850F78, 0%);
border-left-color: darken(#850F78, 10%);
box-shadow: 2px 2px 4px rgba(0,0,0,.6);
-}
\ No newline at end of file
+}
+
+figure.snip1113 {
+ font-family: 'Raleway', Arial, sans-serif;
+ position: relative;
+ overflow: hidden;
+ min-width: 220px;
+ max-width: 310px;
+ width: 80%;
+ background: #ffffff;
+ text-align: center;
+}
+
+figure.snip1113 * {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+}
+
+figure.snip1113 img {
+ max-width: 65%;
+ margin: 40px auto;
+ display: block;
+ position: relative;
+ border: 3px solid #F59121;
+ padding: 15px 15px 85px 15px;
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+
+figure.snip1113 figcaption {
+ position: absolute;
+ height: 120px;
+ bottom: 0px;
+ left: 0;
+ right: 0;
+ display: block;
+}
+
+figure.snip1113 h3 {
+ background-color: #ffffff;
+ color: #000000;
+ font-size: 1.7em;
+ width: 100%;
+ padding: 5px 12px;
+ margin: 0;
+ text-transform: uppercase;
+ font-weight: 400;
+}
+
+figure.snip1113 h3 span {
+ font-weight: 800;
+}
+
+
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index d5945a2068f1a5cd8ce84e8dcc9f7c36295994bd..2627637eeec6562db7007cdecc0a9698bbe2444a 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -245,17 +245,20 @@ button.tabbutton:nth-child(1){
left: 5px;
letter-spacing: 1px;
padding: 5px;
+ margin-top: 5px;
+ margin-left: 5px;
position: absolute;
text-transform: uppercase;
}
.timeline-item:nth-child(odd) .timeline-item-content .tag {
left: auto;
right: 5px;
+ margin-right: 5px;
}
/* Title design */
.timeline-item-content time {
- color: var(--lightblue);
- font-size: 12px;
+ color: black;
+ font-size: 16px;
font-weight: bold;
}
diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx
index 60266cb2a91a5f44ced41f1660e8b7c57b597777..e0a96f37f622c0ab64b0cd4409165bc22c279a3f 100644
--- a/src/components/My-Timeline.tsx
+++ b/src/components/My-Timeline.tsx
@@ -4,6 +4,9 @@ import { BFHMoreButton } from "./Buttons";
interface ItemProps {
+ text?: string;
+ vorname?: string,
+ nachname?: string,
date: string ,
children: React.ReactNode;
tag: string,
@@ -13,7 +16,35 @@ interface ItemProps {
/* import ImageEvent from './ImageEvent.tsx';
import UrlButton from './UrlButton.tsx'; */
-
+export const TimelineItemPic = ({ text, vorname, nachname, date, tag, color, children, csstag }:ItemProps) => (
+ <div className="timeline-item">
+ <div className="timeline-item-content">
+ <span className="tag" style={{ background: color }}>
+ {tag}
+ </span>
+ <time>{date}</time>
+
+ <hr/>
+ <div className="row">
+ <div className="col">
+ <figure className="snip1113 red">
+ <img src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg" alt="pr-sample1" />
+ <figcaption>
+ <h3>{vorname} <span>{nachname}</span></h3>
+ </figcaption>
+ </figure>
+ </div>
+ <div className="col text-1-bfh">
+ <span className="">{text}</span>
+ </div>
+ {children}
+ </div>
+
+ <BFHMoreButton it={csstag}></BFHMoreButton>
+ <span className="circle" />
+ </div>
+ </div>
+);
export const TimelineItem = ({ date, tag, color, children, csstag }:ItemProps) => (
<div className="timeline-item">
@@ -22,8 +53,10 @@ export const TimelineItem = ({ date, tag, color, children, csstag }:ItemProps)
{tag}
</span>
<time>{date}</time>
+
<hr/>
{children}
+
<BFHMoreButton it={csstag}></BFHMoreButton>
<span className="circle" />
</div>
@@ -68,30 +101,33 @@ export function MyTimeline () {
</ImageEvent> */}
</TimelineItem>
- <TimelineItem
+ <TimelineItemPic
date='How to Wiki'
tag='Workshop Session I.'
color='var(--text-primary)'
csstag="wikiworkshop"
+ vorname="Christian"
+ nachname="Kolland"
+ text="Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki."
>
- <span>Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki.
- </span>
<div id="wikiworkshop" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
- <TimelineItem
+ </TimelineItemPic>
+ <TimelineItemPic
date='How to SynBio'
tag='Workshop Session I.'
color='var(--text-primary)'
csstag="synworkshop"
+ vorname="Traci"
+ nachname="Haddock"
+ text="Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
+ "
>
- <span>Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
- </span>
<div id="synworkshop" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
+ </TimelineItemPic>
<TimelineItem
date='How to use AI as a scientist'
tag='Workshop Session I.'
@@ -105,17 +141,19 @@ export function MyTimeline () {
So much more
</div>
</TimelineItem>
- <TimelineItem
+ <TimelineItemPic
date='Scientific Talk II.'
tag= 'Talks'
color='var(--lightblue)'
csstag="talktwo"
+ vorname="Karla"
+ nachname="Wagner"
+ text="Scientific Talk 2 by Karla Wagner"
>
- <span>Scientific Talk 2 by Karla Wagner</span>
<div id="talktwo" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
+ </TimelineItemPic>
<TimelineItem
date='Team project presentations'
tag= 'Team presentations'
@@ -144,11 +182,13 @@ export function MyTimeline () {
So much more
</div>
</TimelineItem>
- <TimelineItem
+ <TimelineItemPic
date='How to work safe'
tag='Workshop Session II.'
color='var(--text-primary)'
csstag="safeworkshop"
+ vorname="Svenja"
+ nachname="Vinke"
>
<h5>About Dual-use and Biosafety</h5>
<span>Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use.
@@ -156,18 +196,15 @@ export function MyTimeline () {
<div id="safeworkshop" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
- <TimelineItem
+ </TimelineItemPic>
+ <TimelineItemPic
date='How to Communicate Science'
tag='Workshop Session II.'
color='var(--text-primary)'
csstag="commworkshop"
+ text="Experience how science communication could be. Learn creative and funny ways to communicate difficult topics. Think outside the box and train your skills. "
>
- <span>
- Experience how science communication could be. Learn creative and funny ways to communicate difficult topics.
- </span>
<br></br>
- <span>Think outside the box and train your skills. </span>
<div id="commworkshop" style={{display: "none"}}>
<br></br>
@@ -200,34 +237,38 @@ export function MyTimeline () {
population with regional companies and institutes to inform them about their work - including our iGEM team!
</p>
</div>
- </TimelineItem>
- <TimelineItem
+ </TimelineItemPic>
+ <TimelineItemPic
date='How to Pitch Your Project'
tag='Workshop Session II.'
color='var(--text-primary)'
csstag="pitch"
- >
- <span>Image you have only three minutes with your boss to sell your idea...
+ vorname="Madeleine"
+ nachname="Mussgnug"
+ text="Image you have only three minutes with your boss to sell your idea...
After our workshop you learned techniques to sell every pen and even more to every boss on the planet.
- </span>
+ "
+ >
<div id="pitch" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
- <TimelineItem
+ </TimelineItemPic>
+ <TimelineItemPic
date='How to Multi Media'
tag='Workshop Session II.'
color='var(--text-primary)'
csstag="multimedia"
+ vorname="Michael"
+ nachname="Gröning"
+ text="Learn the basics of filmmaking and video production.
+ Look behind the scenes and get in touch with professionals.
+ Train your skills to direct iGEM-related videos and movies."
>
- <span>Learn the basics of filmmaking and video production.
- Look behind the scenes and get in touch with professionals.
- Train your skills to direct iGEM-related videos and movies.</span>
<div id="multimedia" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
+ </TimelineItemPic>
<TimelineItem
date='Panel Discussion'
tag= 'Talks'
@@ -239,28 +280,52 @@ export function MyTimeline () {
So much more
</div>
</TimelineItem>
- <TimelineItem
+ <TimelineItemPic
date='iGEMer Ted Talks'
tag= 'Talks'
color='var(--lightblue)'
- csstag="tedtalk"
+ csstag="tedtalk1"
>
- <span>iGEMer Ted Talks</span>
- <div id="tedtalk" style={{display: "none"}}>
+ <span>iGEMer Ted Talk 1</span>
+ <div id="tedtalk1" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
- <TimelineItem
+ </TimelineItemPic>
+ <TimelineItemPic
+ date='iGEMer Ted Talks'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ csstag="tedtalk2"
+ vorname=""
+ nachname=""
+ >
+ <span>Ted Talk 2</span>
+ <div id="tedtalk2" style={{display: "none"}}>
+ So much more
+ </div>
+ </TimelineItemPic>
+ <TimelineItemPic
date='Science Slam Session'
tag= 'Talks'
color='var(--lightblue)'
- csstag="slam"
+ csstag="slam1"
>
<span>Science Slam Session</span>
- <div id="slam" style={{display: "none"}}>
+ <div id="slam1" style={{display: "none"}}>
So much more
</div>
- </TimelineItem>
+ </TimelineItemPic>
+ <TimelineItemPic
+ date='Science Slam Session'
+ tag= 'Talks'
+ color='var(--lightblue)'
+ csstag="slam2"
+ >
+ <span>Science Slam Session</span>
+ <div id="slam2" style={{display: "none"}}>
+ So much more
+ </div>
+ </TimelineItemPic>
<div className='timeline-end'>
Award Ceremony
</div>