From 4b5053070ad5d8b0ca47601366779151e84fff58 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 10:40:01 +0200
Subject: [PATCH] timeline css fix
---
src/App/Timelines.css | 515 ++++++++++++++++----------------
src/components/BFH-Timeline.tsx | 3 +
2 files changed, 259 insertions(+), 259 deletions(-)
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index 38f0fcc3..a9f3fdcb 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -4,45 +4,45 @@
/* This is the timeline container */
.timeline {
- white-space: nowrap;
- min-height: 700px;
- width: 75vw;
- overflow-x: auto;
- overflow-y: hidden;
- background-color: inherit;
- font-size: 1rem;
- /* align items center */
- align-items: center !important;
- /* row */
- --bs-gutter-x: 1.5rem;
- --bs-gutter-y: 0;
- display: flex;
- flex-wrap: wrap;
- margin-top: calc(-1 * var(--bs-gutter-y));
- margin-right: calc(-.5 * var(--bs-gutter-x));
- margin-left: calc(-.5 * var(--bs-gutter-x));
+ white-space: nowrap;
+ min-height: 700px;
+ width: 75vw;
+ overflow-x: auto;
+ overflow-y: hidden;
+ background-color: inherit;
+ font-size: 1rem;
+ /* align items center */
+ align-items: center !important;
+ /* row */
+ --bs-gutter-x: 1.5rem;
+ --bs-gutter-y: 0;
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: calc(-1 * var(--bs-gutter-y));
+ margin-right: calc(-.5 * var(--bs-gutter-x));
+ margin-left: calc(-.5 * var(--bs-gutter-x));
}
/* This is the timeline list container */
- .timelineol {
- font-size: 0;
- width: 100vw;
- padding: 250px 0;
- transition: all 1s;
+.timelineol {
+ font-size: 0;
+ width: 100vw;
+ padding: 250px 0;
+ transition: all 1s;
}
/* Positioning of the upper timeline cards */
.timeline ol li:nth-child(2n+1) .time-meta::before{
- top: 100%;
- left: 8px !important;
- border-color: #f6faf6 transparent transparent transparent !important;
+ top: 100%;
+ left: 8px !important;
+ border-color: #f6faf6 transparent transparent transparent !important;
}
.timeline ol li:nth-child(2n+1) .moretop{
- top: -40px !important;
+ top: -40px !important;
}
.timeline ol li:nth-child(odd) .timeline-item {
- top: -16px;
- transform: translateY(-100%);
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ top: -16px;
+ transform: translateY(-100%);
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
@@ -56,11 +56,11 @@ border-color: transparent transparent transparent #f6faf6 !important;
top: 50px !important;
}
.timeline ol li:nth-child(even) .timeline-item {
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- top: calc(100% + 16px);
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ top: calc(100% + 16px);
}
-
+
/* The DNA Strang of the timeline */
.timelineolli {
position: relative;
@@ -71,16 +71,16 @@ height: 20px;
background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg");
background-size: 100% 120%;
}
-
+
/* Timeline Pointers outline and form */
.timeline ol li .timeline-item::before {
- content: '';
- position: absolute;
- top: 100%;
- left: 0;
- width: 0;
- height: 0;
- border-style: solid;
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
}
.timeline ol li:nth-child(odd) .timeline-item::before {
top: 100%;
@@ -95,182 +95,181 @@ border-color: transparent transparent transparent white;
/* To extend the line at the end */
.timelineolli:last-child{
- background-size: 65% 120%;
+background-size: 65% 120%;
}
.timeline ol li:last-child {
- width: 300px;
+ width: 300px;
}
-
+
/* For the points */
.timeline ol li:not(:last-child)::after {
- content: '';
- position: absolute;
- top: 50%;
- left: calc(98%);
- bottom: 0;
- z-index: 4;
- width: 40px;
- height: 40px;
- transform: translateY(-50%);
- border-radius: 50%;
- background: var(--text-primary);
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: calc(98%);
+ bottom: 0;
+ z-index: 4;
+ width: 40px;
+ height: 40px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background: var(--text-primary);
}
-
+
/* Card layout */
.timeline ol li .timeline-item {
- height: 250px;
- min-height: 310%;
- position: absolute;
- left: calc(100% + 7px);
- width: 350px;
- padding: 15px;
- font-size: 0.9rem;
- white-space: normal;
- color: black;
- background: white;
+ height: 250px;
+ min-height: 310%;
+ position: absolute;
+ left: calc(100% + 7px);
+ width: 350px;
+ padding: 15px;
+ font-size: 0.9rem;
+ white-space: normal;
+ color: black;
+ background: white;
}
-
+
/* Layout for meta timeline cards */
.time-meta{
-
- border-radius: 10px;
+ border-radius: 10px;
}
/* Tags */
.t-tag{
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- letter-spacing: 1px;
- padding: 5px;
- margin-bottom: 10px;
- text-transform: uppercase;
- width: fit-content !important;
- }
-
- button.tabbutton.Patient.active, button.tabbutton.All.active,
- button.tabbutton.Industry.active, button.tabbutton.Academia.active,
- button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
- border-color: black;
- }
+ box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 1px;
+ padding: 5px;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ width: fit-content !important;
+}
+
+button.tabbutton.Patient.active, button.tabbutton.All.active,
+button.tabbutton.Industry.active, button.tabbutton.Academia.active,
+button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
+ border-color: black;
+}
.colour-meta-tag{
- background-color: var(--igemlightgreen);
+background-color: var(--igemlightgreen);
}
/* and buttons */
button.tabbutton:nth-child(1){
- background-color: white;
- }
-
+ background-color: white;
+}
+
.Patient, button.tabbutton:nth-child(2){
- background-color: var(--accen-secondary);
- }
-
- .Medical, button.tabbutton:nth-child(3){
- background-color: var(--accent-primary);
- }
-
- .Academia, .Research, button.tabbutton:nth-child(4){
- background-color: var(--lightblue);
- }
-
- .Industry, button.tabbutton:nth-child(5){
- background-color: var(--mediumpurple);
- }
- .Activist, button.tabbutton:nth-child(6){
- background-color: var(--igemlightgreen);
- }
-
- .Ethics{
- background-color: var(--offblack);
- }
+ background-color: var(--accen-secondary);
+}
+
+.Medical, button.tabbutton:nth-child(3){
+ background-color: var(--accent-primary);
+}
+
+.Academia, .Research, button.tabbutton:nth-child(4){
+ background-color: var(--lightblue);
+}
+
+.Industry, button.tabbutton:nth-child(5){
+ background-color: var(--mediumpurple);
+}
+.Activist, button.tabbutton:nth-child(6){
+ background-color: var(--igemlightgreen);
+}
+
+.Ethics{
+ background-color: var(--offblack);
+}
+
-
/* * * * * * * */
/* TIMELINE BFH*/
/* * * * * * * */
/* Container */
.timeline-container {
- display: flex;
+ display: flex;
- flex-direction: column;
- position: relative;
- margin: 40px 0;
+ flex-direction: column;
+ position: relative;
+ margin: 40px 0;
}
/* Line */
.timeline-container::after {
- background-color: var(--text-primary);
- position: absolute;
- left: calc(50% - 2px);
- content: "";
- width: 4px;
- height: 100%;
- z-index: 0;
- }
-
+ background-color: var(--text-primary);
+ position: absolute;
+ left: calc(50% - 2px);
+ content: "";
+ width: 4px;
+ height: 100%;
+ z-index: 0;
+}
+
/* Cards */
.timeline-item {
- display: flex;
- flex-direction: column; /* Vertikale Anordnung der Inhalte */
- height: 250px; /* Höhe des Timeline-Items */
+ min-width: 100px;
+ /* display: flex; */
+ justify-content: flex-end;
+ padding-right: 30px;
position: relative;
- padding: 15px;
+ margin: 10px 0;
+ width: 50%;
+}
+.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- background: white;
+ border-radius: 5px;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ padding: 15px;
+ position: relative;
+ text-align: right;
}
- .timeline-item-content {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- border-radius: 5px;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding: 15px;
- position: relative;
- text-align: right;
- }
/* Accomodate for alteration in card design */
.timeline-item:nth-child(odd) .timeline-item-content {
- text-align: left;
- align-items: flex-start;
- }
+ text-align: left;
+ align-items: flex-start;
+}
/* Tags */
.timeline-item-content .tag {
- color: #fff;
- font-size: 12px;
- font-weight: bold;
- top: 5px;
- 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;
+ color: #fff;
+ font-size: 12px;
+ font-weight: bold;
+ top: 5px;
+ 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: black;
- font-size: 16px;
- font-weight: bold;
- }
-
+ color: black;
+ font-size: 16px;
+ font-weight: bold;
+}
+
/* To create alternation */
.timeline-item:nth-child(odd) {
- align-self: flex-end;
- justify-content: flex-start;
- padding-left: 30px;
- padding-right: 0;
- }
+ align-self: flex-end;
+ justify-content: flex-start;
+ padding-left: 30px;
+ padding-right: 0;
+}
/* To create bigger first and final cards */
.timeline-end{
@@ -296,13 +295,13 @@ margin-bottom: 8vw;
/* Make short description on card bigger */
.timeline-item-content span{
- font-size: 18px;
- }
+ font-size: 18px;
+}
/* Make links on Cards fat */
- .timeline-item-content a {
- font-weight: bold;
- }
-
+.timeline-item-content a {
+ font-weight: bold;
+}
+
/* Circle */
.timeline-item-content .circle {
background-color: #fff !important;
@@ -316,112 +315,110 @@ height: 20px;
z-index: 100;
}
.timeline-item:nth-child(odd) .timeline-item-content .circle {
- right: auto;
- left: -53px;
+ right: auto;
+ left: -53px;
}
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
/* Checken ob wir das echt brauchen */
/* .timeline ol li:not(:first-child) {
- margin-left: 14px;
- }
- .timeline-item-content::after {
- background-color: #fff;
- box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
- position: absolute;
- right: -7.5px;
- top: calc(50% - 7.5px);
- transform: rotate(45deg);
- width: 15px;
- height: 15px;
- }
- .timeline-item:nth-child(odd) .timeline-item-content::after {
- right: auto;
- left: -7.5px;
- box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
- }
- .timeline-item-content p {
- font-size: 16px;
- line-height: 24px;
- margin: 15px 0;
- }
- .timeline-item-content a::after {
- font-size: 12px;
- }
- .card {
- border-radius: 4px;
+ margin-left: 14px;
+}
+.timeline-item-content::after {
background-color: #fff;
- color: #333;
- padding: 10px;
- box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
- width: 100%;
- max-width: 560px;
-
+ box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+ position: absolute;
+ right: -7.5px;
+ top: calc(50% - 7.5px);
+ transform: rotate(45deg);
+ width: 15px;
+ height: 15px;
+}
+.timeline-item:nth-child(odd) .timeline-item-content::after {
+ right: auto;
+ left: -7.5px;
+ box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+}
+.timeline-item-content p {
+ font-size: 16px;
+ line-height: 24px;
+ margin: 15px 0;
+}
+.timeline-item-content a::after {
+ font-size: 12px;
+}
+.card {
+border-radius: 4px;
+background-color: #fff;
+color: #333;
+padding: 10px;
+box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+width: 100%;
+max-width: 560px;
+
}
.date {
- background-color: var(--text-primary) !important;
- padding: 4px !important;
- color: #fff !important;
- border-radius: 4px !important;
- font-weight: 500;
- font-size: .85rem;
-}
- .date-col{
- position: relative;
- background-color: #fff ;
- padding: 10px;
- width: 10%;
- border-right: #000;
- border-right-width: 2px;
-}
- .imageAtom{
- object-fit: cover;
- overflow: hidden;
- width: 100%;
- max-height: 400px;
+background-color: var(--text-primary) !important;
+padding: 4px !important;
+color: #fff !important;
+border-radius: 4px !important;
+font-weight: 500;
+font-size: .85rem;
+}
+.date-col{
+position: relative;
+ background-color: #fff ;
+ padding: 10px;
+ width: 10%;
+ border-right: #000;
+ border-right-width: 2px;
+}
+ .imageAtom{
+object-fit: cover;
+overflow: hidden;
+width: 100%;
+max-height: 400px;
}
- */
-
-
- .hpbuttonrow {
- display: flex; /* Flex-Layout für die untere Reihe */
- margin-top: auto; /* Schiebt diese Reihe nach unten */
- align-items: center; /* Vertikale Zentrierung */
+*/
+.hpbuttonrow {
+ display: flex; /* Flex-Layout für die untere Reihe */
+ margin-top: auto; /* Schiebt diese Reihe nach unten */
+ align-items: center; /* Vertikale Zentrierung */
}
.fillup {
- flex: 1;
- display: flex; /* Flex-Layout aktivieren */
- align-items: center; /* Vertikale Zentrierung */
- justify-content: center; /* Horizontale Zentrierung */
+flex: 1;
+display: flex; /* Flex-Layout aktivieren */
+align-items: center; /* Vertikale Zentrierung */
+justify-content: center; /* Horizontale Zentrierung */
}
- .timeline-item .row:first-child {
- flex: 1; /* Füllt den verbleibenden Raum aus */
- display: flex; /* Flex-Layout aktivieren */
- align-items: center; /* Vertikale Zentrierung */
+.timeline-item .row:first-child {
+ flex: 1; /* Füllt den verbleibenden Raum aus */
+ display: flex; /* Flex-Layout aktivieren */
+ align-items: center; /* Vertikale Zentrierung */
}
/* Untere Reihe */
.timeline-item .row:last-child {
- margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+ margin-top: auto; /* Schiebt die letzte Reihe nach unten */
}
.fillup-wrapper{
- display: flex;
+display: flex;
}
\ No newline at end of file
diff --git a/src/components/BFH-Timeline.tsx b/src/components/BFH-Timeline.tsx
index c422283c..06c992d2 100644
--- a/src/components/BFH-Timeline.tsx
+++ b/src/components/BFH-Timeline.tsx
@@ -387,6 +387,9 @@ export function BFHTimeline () {
<div id="multimedia" style={{display: "none"}}>
<p>Michael Gröning, who has many years of experience in a range of multimedia disciplines, including 3D animation, video and cinematography, film and audio production, post-production, voiceover and media design, held the practical workshop on multimedia. Firstly, the significance of the Promotion Video was elucidated, and the paramount importance of the general external representation was clarified. Questions and tricks provided the participants a basis for finding ideas for their videos, which were combined with story and mood boards and the reasonable use of AI.</p>
+ <div className="col">
+ <img src="https://static.igem.wiki/teams/5247/photos/meetup/workshop-multimedia-exposure-triangle.webp"/>
+ </div>
<p>A wide-ranging overview of various camera shots, lighting techniques and transitions was presented to the participants, equipping them with a useful toolkit for the production of cinematographic videos. Illustrative graphics, such as the Exposure Triangle, helped them to experiment with professional camera settings on their mobile phones. Through the implementation of voice warm-up exercises, the workshop participants were able to gain insights into the preparation of voice-overs. An introduction to various microphones and audio editing software enabled them to learn how voice recording is converted to studio quality.</p>
<p>The participants were able to gain valuable practical insights into the world of multimedia and thus prepare themselves to produce breathtaking videos. </p>
</div>
--
GitLab