diff --git a/.DS_Store b/.DS_Store
index dc4ad5eaaaa4a513adf8c2676713d0c4be95dbde..70dda267302cb0572fd034e23df25077c504f247 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/src/App/App.css b/src/App/App.css
index 6097ba798f0d28ddb073182783b47b0e91dec177..0026faea443fad5d7f28e03dc50df70c4ab52855 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -844,14 +844,24 @@ img .middle{
max-height: 70% !important;
}
+
.img-round{
border-radius: 50%;
width: 120px;
height: 120px;
- max-height: 13vh;
+ max-height: 13vh;
max-width: 13vh;
object-fit: cover !important;
}
+
+.img-round-panel{
+ border-radius: 50%;
+ width: 100px;
+ height: 100px;
+ max-height: 10vh;
+ max-width: 10vh;
+ object-fit: cover !important;
+}
.img-cube{
max-width: 80%;
}
@@ -1123,12 +1133,13 @@ svg{
max-width: 1100px !important;
}
.one-pdf-line{ /* @media fertig */
- height: 1450px !important;
+ max-height: 650px !important;
+ height: 100vh !important;
+ max-width: 40% !important;
}
.two-pdf-line{ /* @media fertig */
- max-height: 650px !important;
- height: 35vh !important;
- max-width: 50%;
+ min-height: 650px !important;
+ height: 100vh !important;
}
/* SHAPES */
@@ -4141,4 +4152,11 @@ figure img{
.timelinetab{
border-radius: 20px;
padding: 20px;
+}
+
+
+.iframe-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
\ No newline at end of file
diff --git a/src/App/Timelines.css b/src/App/Timelines.css
index ba3f6cf3270d20ad62269684eedb0d723dd2d03b..2b2ad3acde52553767b7303143d961c1a64aeb9e 100644
--- a/src/App/Timelines.css
+++ b/src/App/Timelines.css
@@ -223,7 +223,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
- background-color: var(--ourbeige);
+ background-color: white; /* Soll white bleiben! */
display: flex;
flex-direction: column;
align-items: flex-end;
@@ -275,7 +275,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
-background-color: var(--ourbeige);
+background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
@@ -285,7 +285,7 @@ margin-top: 8vw;
.timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
-background-color: var(--ourbeige);
+background-color: white; /* soll white bleiben */
padding: 15px;
position: relative;
text-align: center;
@@ -362,4 +362,9 @@ display: flex;
.timeline-item figcaption{
background-color: var(--ourbeige) !important;
+}
+
+
+.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
+ background-color: white !important;
}
\ No newline at end of file
diff --git a/src/components/BFH-Timeline.tsx b/src/components/BFH-Timeline.tsx
index f6cbbffa06221b6a0f3cfb807c81c7901aeafe46..0a9e027c2ce8ea1b97202411130922d26099f4fd 100644
--- a/src/components/BFH-Timeline.tsx
+++ b/src/components/BFH-Timeline.tsx
@@ -191,9 +191,14 @@ export function BFHTimeline () {
<h5>Team project presentations</h5>
<div className="col bfh-slider">
<SimpleSlider>
- <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
- <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
- <img className="" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7428-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7430-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7485-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7498-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7506-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7524-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7532-enhanced-nr.webp"/>
+ <img className="" src="https://static.igem.wiki/teams/5247/photos/meetup/team-presentations/anyconv-com-dscf7548-enhanced-nr.webp"/>
</SimpleSlider>
</div>
<span>
diff --git a/src/components/Pdfs.tsx b/src/components/Pdfs.tsx
index c324859aa9e25635e1371720898c091bec8eaf66..f6340892926d88d50004e0f0239ff88a82b64c89 100644
--- a/src/components/Pdfs.tsx
+++ b/src/components/Pdfs.tsx
@@ -3,13 +3,20 @@ import { ButtonOne, DownloadLink } from "./Buttons"
export function PDF({link, name}: {link: string, name:string}){
return(
- <div className='row align-items-center'>
- <iframe src={link} width="100%" title="title" className='one-pdf-line small-i'>
- </iframe>
- <div className='row download-col'>
- <DownloadLink url={link} fileName={name} ></DownloadLink>
- </div>
- </div>
+
+ <div className="col">
+ <div className='align-items-center'>
+ <div className="iframe-container">
+ <iframe src={link} title="title" className='one-pdf-line small-i'>
+ </iframe>
+ </div>
+ </div>
+ <div className='row download-col'>
+ <DownloadLink url={link} fileName={name} ></DownloadLink>
+ </div>
+ </div>
+
+
)
}
export function TwoLinePDF({link, name}: {link: string, name:string}){
diff --git a/src/components/VerticalTimeline.tsx b/src/components/VerticalTimeline.tsx
index 7288796d43c60b56fdee3e4facb697f618d9a7e1..31d411f3e6b206e68966163d0541dc826ea853df 100644
--- a/src/components/VerticalTimeline.tsx
+++ b/src/components/VerticalTimeline.tsx
@@ -146,23 +146,23 @@ export const PanelTimelineItem = () => (
<time>Panel Discussion</time>
<div className="row align-items-center panel-talk-gallery">
<div className="col">
- <img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
+ <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
<div className="small middle">Taci <br/> Haddock</div>
</div>
<div className="col">
- <img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
+ <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
<div className="small middle">Ana <br/> Sifuentes</div>
</div>
<div className="col">
- <img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
+ <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
<div className="small middle">Olivia <br/> Mozolewska</div>
</div>
<div className="col">
- <img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
+ <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
<div className="small middle">Lasse <br/> Middendorf</div>
</div>
<div className="col">
- <img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
+ <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
<div className="small middle">Nemanja <br/> Stijepovic</div>
</div>
</div>
diff --git a/src/contents/Contribution/contribution.tsx b/src/contents/Contribution/contribution.tsx
index f7b7913377be08bb7e4b28a9f37dd55e8c762c45..21f1a0d3bae3be27933195ba5ef1b23260115df9 100644
--- a/src/contents/Contribution/contribution.tsx
+++ b/src/contents/Contribution/contribution.tsx
@@ -1,6 +1,7 @@
import { useTabNavigation } from "../../utils/TabNavigation";
import { MeetUP } from "./BFH/bfh";
import { CollabContribution } from "./collabs";
+import { PatientContribution } from "./patient-contribution";
import { SafetyContribution } from "./safety-contribution";
import { Wiki } from "./Wiki/wiki";
@@ -11,6 +12,7 @@ export function Contribution() {
<MeetUP/>
<SafetyContribution/>
<CollabContribution/>
+ <PatientContribution/>
<Wiki/>
</>
);
diff --git a/src/contents/Contribution/patient-contribution.tsx b/src/contents/Contribution/patient-contribution.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d323bf8da27d7ef3e4210c8cdc1cea01835dda5c
--- /dev/null
+++ b/src/contents/Contribution/patient-contribution.tsx
@@ -0,0 +1,26 @@
+
+import { TwoLinePDF } from "../../components/Pdfs";
+import { Section } from "../../components/sections";
+
+
+export function PatientContribution(){
+
+ return(
+ <>
+ <Section title="Patient Matters" id="Patient Matters" >
+ <div className='row align-items-center'>
+ <div className='col '>
+ <TwoLinePDF link="https://static.igem.wiki/teams/5247/pdfs/patienteneinwilligung-mustervorlage-igem.pdf" name="patienteneinwilligung-mustervorlage-igem.pdf"/>
+ </div>
+ <div className='seperator-2 col-2'>
+ </div>
+ <div className='col '>
+ <TwoLinePDF link="https://static.igem.wiki/teams/5247/pdfs/augearbeitetes-hygienekonzept.pdf" name="augearbeitetes-hygienekonzept.pdf"/>
+ </div>
+ </div>
+ </Section>
+
+ </>
+
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Contribution/safety-contribution.tsx b/src/contents/Contribution/safety-contribution.tsx
index 8b9fd7115db47413986c438aa79c97aa3b494e25..cb5a85c1066bdbc278a33a1e77d0e4f75d71634c 100644
--- a/src/contents/Contribution/safety-contribution.tsx
+++ b/src/contents/Contribution/safety-contribution.tsx
@@ -6,12 +6,9 @@ export function SafetyContribution(){
return(
<>
- <Section title="Patient Consent Form" id="Patient Consent Form" >
- <PDF link="https://static.igem.wiki/teams/5247/pdfs/patienteneinwilligung-mustervorlage-igem.pdf" name="patienteneinwilligung-mustervorlage-igem.pdf"/>
+ <Section title="Primary Culture Safety Guideline" id="Safety Guideline" >
+ <PDF link="https://static.igem.wiki/teams/5247/pdfs/primary-culture-guideline.pdf" name="primary-culture-guideline.pdf"/>
</Section>
- <Section title="Primary Culture Safety Guidelines" id="Safety Guidelines">
- <PDF link="https://static.igem.wiki/teams/5247/pdfs/primary-culture-guideline.pdf" name="primary-culture-guideline.pdf"/>
- </Section>
</>
)
diff --git a/src/contents/engineering.tsx b/src/contents/engineering.tsx
index 6f4917a7dcc6ce77baa518d53cf09fef39611730..4002aa8998bbc58f2be311f4c617ab0eca289b0c 100644
--- a/src/contents/engineering.tsx
+++ b/src/contents/engineering.tsx
@@ -2,7 +2,7 @@
import { ButtonOneEngineering } from "../components/Buttons";
import { LoremShort } from "../components/Loremipsum";
import { openElement } from "../utils/openElement";
-import { H3, H4, H5 } from "../components/Headings";
+import { H2, H3, H4, H5 } from "../components/Headings";
import { useTabNavigation } from "../utils/TabNavigation";
import { Collapsible } from "../components/Collapsible";
import { useNavigation } from "../utils";
@@ -31,7 +31,7 @@ export function Engineering() {
<div id="tab-our-cycle" className="enginneeringtab" style={{display: "block"}}>
<section > <br id="obenengineering"/>
<div className="eng-box box" >
- <H3 text="Our cycle" id="our-cycle-header"></H3>
+ <H4 text="Our cycle" id="our-cycle-header"></H4>
<p>Hallo Prime Editing diesdas</p>
</div>
@@ -50,7 +50,7 @@ export function Engineering() {
<div className="enginneeringtab" id="tab-reporter" style={{display: "none"}}>
<section id="reporter sec" >
<div className="eng-box box" >
- <H3 id="reporter-header" text="Prime Editing Reporter"></H3>
+ <H2 id="reporter-header" text="Prime Editing Reporter"></H2>
<p>Prime editing is a is a very precise and safe method. However, depending on the genomic locus targeted, the editing efficiency can be very low. The cystic fibrosis causing CFTR F508del mutation is, as Mattijs Bulcaen[link] stated in our interview, one of, if not the most obvious application of prime editing, considering the large amount of people affected. The lack of publications addressing CFTR target implied, that the mutation might be particularly hard to edit. At low editing efficiency, successful edits are hard, if not impossible to distinguish from the background noise using conventional methods like sanger sequencing or qPCR. As a basis to effectively test our approach and screen for working pegRNAs, we needed a highly sensitive method of detection with as little noise as possible to optimize our prime editing approach for genomic CFTR targeting.</p>
</div>
<div className="box" >
@@ -209,7 +209,7 @@ export function Engineering() {
<div id="tab-transfection" className="enginneeringtab" style={{display: "none"}}>
<section >
<div className="eng-box box" >
- <H3 id="transfection-header" text="Optimization of Transfection"></H3>
+ <H2 id="transfection-header" text="Optimization of Transfection"></H2>
<p>
To test prime editors, a reliable model system is required. HEK293 cells are a human derived cell line and widely used in a variety of fields in biology<TabScrollLink tab="tab-transfection" num="1" scrollId="desc-1"/>. Apart from easy handling and comparatively easy transfection, they have, as we found out in our exchange with <a onClick={() => goToPagesAndOpenTab('mattijsinv', '/human-practices')}>Mattijs Bulcaen</a>, one advantage over other models: They are naturally impaired in DNA repair mechanisms and therefore easier to edit. To properly compare editing efficiencies, a high transfection efficiency is of utmost importance. This engineering cycle focuses on our work in simulating prime editing using the PEAR reporter system<TabScrollLink tab="tab-transfection" num="2" scrollId="desc-2"/> and optimizing transfection protocols.
</p>
@@ -326,7 +326,7 @@ export function Engineering() {
<div id="tab-pe-systems" className="enginneeringtab" style={{display: "none"}}>
<section id="PE Systems sec" >
<div className="eng-box box" >
- <H3 id="pe-systems-header" text="Prime Editing Systems"></H3>
+ <H2 id="pe-systems-header" text="Prime Editing Systems"></H2>
<p>Different versions of the original prime editing system have been developed since its initial introduction. Deciding on what system to use for the application in therapeutic human gene editing, especially concerning the correction of F508del, was the goal of this engineering cycle.</p>
<p>
Since we aim to develop a therapy delivered to the human body, we wanted to obtain high editing efficiency while risking as little off-targets as possible and also reducing the size for improved packability.
@@ -503,7 +503,7 @@ export function Engineering() {
<div className="enginneeringtab" id="tab-pegrna" style={{display: "none"}}>
<section id="pegRNA sec" >
<div className="eng-box box" >
- <H3 id="pegrna-header" text="pegRNA"></H3>
+ <H2 id="pegrna-header" text="pegRNA"></H2>
<p><LoremShort></LoremShort></p>
</div>
<div className="box" >
@@ -628,7 +628,7 @@ export function Engineering() {
<div className="enginneeringtab" id="tab-nickase" style={{display: "none"}}>
<section id="Nickase sec" >
<div className="eng-box box" >
- <H3 id="nickase-header" text="Alternative Nickases"></H3>
+ <H2 id="nickase-header" text="Alternative Nickases"></H2>
<p><LoremShort></LoremShort></p>
<img src="https://static.igem.wiki/teams/5247/fanzor/movie4-ezgif-com-video-to-gif-converter.gif"></img>
<img src="https://static.igem.wiki/teams/5247/fanzor/movie5-ezgif-com-video-to-gif-converter-2.gif"></img>
@@ -770,7 +770,7 @@ export function Engineering() {
<div className="enginneeringtab" id="tab-delivery" style={{display: "none"}}>
<section id="Delivery sec" >
<div className="eng-box box" >
- <H3 id="delivery-header" text="Delivery"></H3>
+ <H2 id="delivery-header" text="Delivery"></H2>
<p>The design path of our lipid nanoparticle (LNP) for mRNA delivery underwent multiple cycles of research and discussion, marked by important decision points and learnings along the way. By ongoing further improvement, we designed our lungs-specific LNP called AirBuddy with improved stability aspects, becoming more precise in the delivery of our therapeutic cargo LNP by LNP.</p>
<img src="https://static.igem.wiki/teams/5247/delivery/airbuddy.webp" style={{maxHeight: "80pt"}}/>
</div>
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index f4c820df9aab01730fcedb30e1cfc1bcb4c51635..0dba96b2f622ada1b06255394def1273aba878ac 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -16,7 +16,7 @@ export function Notebook() {
<p></p>
<div className='row'>
<div className="col">
- <DownloadImageButton url="" fileName="">
+ <DownloadImageButton url="https://static.igem.wiki/teams/5247/pdfs/laboratory-notebook-1-proof-of-concept-for-pe.pdf" fileName="laboratory-notebook-1-proof-of-concept-for-pe.pdf">
<img src="https://static.igem.wiki/teams/5247/lab-journals/titelseite-lab-book-1-proof-of-concept-pe.webp" style={{height: "75%", width: "auto"}}/>
</DownloadImageButton>
</div>
diff --git a/src/pages.ts b/src/pages.ts
index 0fc08e120f5c9b3b553f536e9378fcd6cba943fe..d5ed3061471a96c3dd044621bf12a490e1ab40fd 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -490,7 +490,27 @@ export const NavPages: (Page | PageRef | Folder)[] = [
name: "BFH European MeetUp",
title: "MeetUp",
path: "contribution/?scrollTo=BFH European MeetUp"
- }
+ },
+ {
+ name: "Safety Guideline",
+ title: "Safety Guideline",
+ path: "contribution/?scrollTo=primary-culture-safety-guideline"
+ },
+ {
+ name: "Collaborations",
+ title: "Collaborations",
+ path: "contribution/?scrollTo=collaborations"
+ },
+ {
+ name: "Patient Matters",
+ title: "Patient Matters",
+ path: "contribution/?scrollTo=patient-matters"
+ },
+ {
+ name: "Wiki",
+ title: "Wiki",
+ path: "contribution/?scrollTo=wiki"
+ },
]
},
];
diff --git a/src/sidebars/conS.tsx b/src/sidebars/conS.tsx
index 428699632e6c778459503d6a703e2ab6deb9e83a..10d61ddbf4bf1b161554497da5d58a0c3f6db887 100644
--- a/src/sidebars/conS.tsx
+++ b/src/sidebars/conS.tsx
@@ -12,7 +12,8 @@ export function ConSidebar(){
const tabs = [
{ tab: "BFH European MeetUp", subtabs: ["Aftervideo", "Timeline", "About", "Posters", "Guideline", "Gallery", "Downloads"]},
- {tab: "Safety Guidelines"},
+ {tab: "Safety Guideline"},
{tab: "Collaborations"},
+ {tab: "Patient Matters"},
{tab: "Wiki"}
];