Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Commits on Source (866)
766 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 893 additions and 654 deletions
.gitignore
View file @ 3fd292fd
...@@ -15,3 +15,8 @@ other ...@@ -15,3 +15,8 @@ other
dist dist
src/components/resources src/components/resources
code/test.bib code/test.bib
.DS_Store
code/test file gitignore.txt
src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
src/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.tsx
View file @ 3fd292fd
...@@ -81,10 +81,10 @@ const App = () => { ...@@ -81,10 +81,10 @@ const App = () => {
<> <>
<Header /> <Header />
{/* Page content */} {/* Page content */}
<div className="container-fluid"> <div className="container-fluid" >
<div className="row"> <div className="row">
<Sidebar /> <Sidebar/>
<div className="col-9"> <div className="full-col-phone col-9 max-1240">
<Component /> <Component />
<Villbuttonrow /> <Villbuttonrow />
</div> </div>
......
src/App/LandingPage.css
View file @ 3fd292fd
...@@ -46,4 +46,27 @@ ...@@ -46,4 +46,27 @@
/* .header-button-row .h5 { /* .header-button-row .h5 {
} */ } */
\ No newline at end of file
#landing-page-header-2{
margin-top: 5rem;
background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
background-size: 100% auto;
background-repeat: no-repeat;
padding: 0 !important;
}
.button-x{
align-items: center;
display: flex;
align-self: center;
}
.button-x button{
margin: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--text-primary);
color: var(--ourbeige)
}
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
...@@ -7,10 +7,11 @@ ...@@ -7,10 +7,11 @@
white-space: nowrap; white-space: nowrap;
min-height: 700px; min-height: 700px;
width: 75vw; width: 75vw;
overflow-x: auto; overflow-x: auto !important;
overflow-y: hidden; max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit; background-color: inherit;
font-size: 1rem;
/* align items center */ /* align items center */
align-items: center !important; align-items: center !important;
/* row */ /* row */
...@@ -34,7 +35,7 @@ ...@@ -34,7 +35,7 @@
.timeline ol li:nth-child(2n+1) .time-meta::before{ .timeline ol li:nth-child(2n+1) .time-meta::before{
top: 100%; top: 100%;
left: 8px !important; left: 8px !important;
border-color: #f6faf6 transparent transparent transparent !important; border-color: white transparent transparent transparent !important;
} }
.timeline ol li:nth-child(2n+1) .moretop{ .timeline ol li:nth-child(2n+1) .moretop{
top: -40px !important; top: -40px !important;
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
.timeline ol li:nth-child(2n) .time-meta::before{ .timeline ol li:nth-child(2n) .time-meta::before{
top: 100%; top: 100%;
left: 8px !important; left: 8px !important;
border-color: transparent transparent transparent #f6faf6 !important; border-color: transparent transparent transparent white !important;
} }
.timeline ol li:nth-child(2n) .moretop{ .timeline ol li:nth-child(2n) .moretop{
top: 50px !important; top: 50px !important;
...@@ -155,9 +156,7 @@ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{ ...@@ -155,9 +156,7 @@ button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
border-color: var(--offblack); border-color: var(--offblack);
} }
.colour-meta-tag{
background-color: var(--igemlightgreen);
}
/* and buttons */ /* and buttons */
button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: white; /* soll whit ebleiben! */ background-color: white; /* soll whit ebleiben! */
...@@ -178,11 +177,15 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){ ...@@ -178,11 +177,15 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.Industry, button.tabbutton:nth-child(5){ .Industry, button.tabbutton:nth-child(5){
background-color: var(--mediumpurple); background-color: var(--mediumpurple);
} }
.Activist{ .Activist, .Milestone{
background-color: var(--igemmediumgreen) !important;
}
.Education, .Outreach{
background-color: var(--igemlightgreen); background-color: var(--igemlightgreen);
} }
.Ethics{ .Other{
background-color: var(--offblack); background-color: var(--offblack);
} }
...@@ -223,7 +226,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){ ...@@ -223,7 +226,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-item-content { .timeline-item-content {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: var(--ourbeige); background-color: white; /* Soll white bleiben! */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
...@@ -275,7 +278,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){ ...@@ -275,7 +278,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
.timeline-end{ .timeline-end{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: var(--ourbeige); background-color: white; /* soll white bleiben */
padding: 15px; padding: 15px;
position: relative; position: relative;
text-align: center; text-align: center;
...@@ -285,7 +288,7 @@ margin-top: 8vw; ...@@ -285,7 +288,7 @@ margin-top: 8vw;
.timeline-begin{ .timeline-begin{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
background-color: var(--ourbeige); background-color: white; /* soll white bleiben */
padding: 15px; padding: 15px;
position: relative; position: relative;
text-align: center; text-align: center;
...@@ -362,4 +365,18 @@ display: flex; ...@@ -362,4 +365,18 @@ display: flex;
.timeline-item figcaption{ .timeline-item figcaption{
background-color: var(--ourbeige) !important; background-color: var(--ourbeige) !important;
}
.timeline-item figcaption, .timeline-item figure, .timeline-item figcaption h3 {
background-color: white !important;
}
.timeline-item .img-cube{
height: 120px;
max-height: 13vh;
object-fit: cover !important;
} }
\ No newline at end of file
src/App/mediarules.css
View file @ 3fd292fd
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
align-items: center; align-items: center;
} }
h1 {
font-size: 2rem;
}
.col-6 { .col-6 {
width: 100%; /* Full width on tablets */ width: 100%; /* Full width on tablets */
...@@ -50,42 +47,81 @@ ...@@ -50,42 +47,81 @@
max-width: 100% !important; max-width: 100% !important;
} }
.col-6 { .col-6 {
width: 100%; /* Full width for smartphone */ width: 100% ;
} }
.container-fluid { .container-fluid {
min-height: 100vh; /* Füllt den gesamten Bildschirm aus */ min-height: 100vh;
} }
/***heading***/
.header-title{
min-height: 400px;
text-align: center;
align-items: center;
margin: auto !important;
padding: 0 30px;
font-size: 130px;
font-weight: 900;
line-height: 130px;
}
.header-container{
padding-top: 170px !important;
padding-bottom: 0px !important;
background-color: var(--ourbeige);
}
.base {
width: 100%;
background-color: var(--lightblue);
padding: 0px;
}
/***footer***/ /***footer***/
footer { footer {
padding: 10px; width: 100% !important;
box-sizing: border-box !important;
padding: 15px !important;
}
.col {
width: 100% !important;
margin-bottom: 20px;
}
.col-sm-4, .col-sm-8, .col-6 {
width: 100%;
} }
footer a, footer p { footer a, footer p {
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: 1.4;
} }
footer .social-icons { footer .socials {
display: flex; display: flex;
justify-content: center; justify-content: center !important;
margin-bottom: 10px; margin-bottom: 10px;
} }
footer .contact-info { .contact-info {
font-size: 12px; font-size: 14px;
text-align: center;
} }
footer img { .img-sponsor {
width: 100px; width: 100px;
height: auto; height: auto;
margin: 0 auto;
}
.footer-slider {
width: 100%;
margin-top: 20px;
} }
footer a { footer a {
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
hr {
margin: 20px 0;
}
/***gif***/ /***gif***/
.CFTR-gif { .CFTR-gif {
...@@ -93,39 +129,96 @@ ...@@ -93,39 +129,96 @@
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
/***Description***/ }
#Cystic\ Fibrosis6 h2 { /*#breatht1 {
font-size: 1.5em !important; left: 0 !important;
} position:initial!important;
#Our\ Vision h2 { font-size: 0.5em !important;
font-size: 1 em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
background-position: center 25%; /* Push the image down for better visibility */
height: 10px; /* Adjust the height for mobile screens */
} }
/***contribution***/
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
.col-2{
width: 50% !important;
}
/***Description***/
.pie-chart-container-small { .pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */ width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */ height: 300px !important; /* Adjust height accordingly */
} }
.quiz-wrapper { .quiz-wrapper {
flex-direction: column; flex-direction: column;
padding: 10px; padding: 10px;
width: 100% !important; /* Set width to 100% for mobile screens */ width: 100% !important; /* Set width to 100% for mobile screens */
} }
.quiz-front, .quiz-back { .quiz-front, .quiz-back {
padding: 10px !important; padding: 10px !important;
} }
.quiz-heading { .quiz-heading {
font-size: 1.2em; font-size: 1.2em;
} }
.quiz-text { .quiz-text {
font-size: 1em; font-size: 1em;
margin-bottom: 10px !important; margin-bottom: 10px !important;
word-wrap: break-word; /* Keep word breaking for mobile */ word-wrap: break-word; /* Keep word breaking for mobile */
} }
.quiz-button-box { .quiz-button-box {
margin-top: 5px !important; margin-top: 5px !important;
justify-content: space-evenly; justify-content: space-evenly;
} }
...@@ -180,9 +273,6 @@ ...@@ -180,9 +273,6 @@
.winner{ .winner{
font-size: x-large; font-size: x-large;
} }
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{ .small-only{
display: block !important; display: block !important;
} }
...@@ -222,27 +312,24 @@ svg text{ ...@@ -222,27 +312,24 @@ svg text{
padding-top: 10px; padding-top: 10px;
padding-bottom: 5px; padding-bottom: 5px;
} }
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle { .bigtitle {
width: 450px !important; width: 450px !important;
height: 200px !important; height: 200px !important;
word-wrap: break-word; word-wrap: break-word;
} }
.framecycletab{
margin-left: 0 !important;
}
body { body {
padding: 10px !important; /* padding: 10px !important; */
width: 202% ; width: 202% !important;
overflow-x: hidden; /* Prevents horizontal scrolling */ overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0; margin: 0;
padding: 0; padding: 0;
background-size: cover; /* Ensures the background scales to cover the entire screen */ background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center; /* Keeps the background centered */ background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat; background-repeat: no-repeat;
} }
...@@ -251,17 +338,34 @@ body { ...@@ -251,17 +338,34 @@ body {
max-width: 100% !important; max-width: 100% !important;
height: auto !important; height: auto !important;
} }
.container { /*.container {
padding: 10px; padding: 10px;
} }*/
.row{ .row{
display: grid !important; display: grid !important;
} }
.full-col-phone{
width: 100vw !important;
} }
}
/*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
/*For small Smartphones*/
@media screen and (max-width: 750px){
} }
/* Big computer screens */ /* Big computer screens */
......
src/components/.DS_Store 0 → 100644
View file @ 3fd292fd
File added
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
...@@ -43,11 +43,13 @@ export function BFHTimeline () { ...@@ -43,11 +43,13 @@ export function BFHTimeline () {
csstag="talkonek" csstag="talkonek"
vorname="Kristian" vorname="Kristian"
nachname="Müller" nachname="Müller"
heading="" heading="Gene Therapy, AAVs and Innovations in Synthetic Biology"
text="" text="Prof. Dr. Kristian Müller from Bielefeld University reflects on his long-term involvement with the iGEM competition, emphasizing advancements in gene therapy, particularly using adeno-associated viruses (AAVs) as viral vectors for gene delivery. He discusses innovations in virus production and targeting, while acknowledging ongoing challenges such as product purity, production efficiency, and side effects. Additionally, he addresses recent developments in nanopore sequencing for quality control and the use of non-natural nucleotides and methylation to improve therapeutic outcomes."
> >
<div id="talkonek" style={{display: "none"}}> <div id="talkonek" style={{display: "none"}}>
Ask Sinan <p>Prof. Dr. Kristian Müller from Research Group Cellular and Molecular Biotechnology at the Technical Faculty of Bielefeld University, delivered an insightful presentation on the integration of AI and advanced biotechnology, focusing on the production and refinement of AAV vectors. The presentation highlighted how AI-driven innovations are transforming research methodologies, especially in areas such as AAV production, genetic targeting, and quality control. Prof. Dr. Müller showcased practical applications of AI in optimizing these biotechnological processes, making them more efficient, scalable, and precise, particularly in therapeutic applications.</p>
<p>The speaker began by drawing parallels between technological advancements in fields like space exploration and breakthroughs in genetic research, emphasizing the rapid progression within a short span of time. This context set the stage for discussing recent developments in AAV technology, where the application of AI has been pivotal. A key takeaway was how AI is being used to enhance the stability of viral vectors and optimize gene delivery, allowing for the production of high-quality AAV vectors with improved precision. Real-world examples, such as the use of AI to monitor genetic purity during nanopore sequencing and to streamline plasmid engineering processes, showcased the tangible impact of these technologies on therapeutic research. The discussion also highlighted the importance of collaborations between academia and industry, drawing parallels to the historic partnership that sparked the recombinant DNA revolution.</p>
<p>The presentation provided attendees with a deeper understanding of how AI can significantly enhance lab work, particularly in scaling up AAV production and ensuring the quality of therapeutic vectors. Participants left with valuable insights on leveraging AI and advanced technologies to drive their own research projects forward, especially in fields like gene therapy, plasmid engineering, and synthetic biology.</p>
</div> </div>
</TimelineItemPic> </TimelineItemPic>
...@@ -191,9 +193,14 @@ export function BFHTimeline () { ...@@ -191,9 +193,14 @@ export function BFHTimeline () {
<h5>Team project presentations</h5> <h5>Team project presentations</h5>
<div className="col bfh-slider"> <div className="col bfh-slider">
<SimpleSlider> <SimpleSlider>
<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/placeholders/placehilderperson.jpeg"/> <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/placeholders/placehilderperson.jpeg"/> <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> </SimpleSlider>
</div> </div>
<span> <span>
...@@ -319,7 +326,7 @@ export function BFHTimeline () { ...@@ -319,7 +326,7 @@ export function BFHTimeline () {
<p> <p>
Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them
using the skills learned in this workshop. Our team revised their plans for explaining gene editing to using the skills learned in this workshop. Our team revised their plans for explaining gene editing to
children and started developing experiments to help them better understand cystic fibrosis, which we children and started developing experiments to help them better understand Cystic Fibrosis, which we
presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local
population with regional companies and institutes to inform them about their work - including our iGEM team! population with regional companies and institutes to inform them about their work - including our iGEM team!
</p> </p>
......
src/components/Breathe.tsx
View file @ 3fd292fd
...@@ -94,13 +94,13 @@ export function Breathe(){ ...@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`, 'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}` 'visibility': `${isVisible ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img> </img>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}> <div style={{ 'height': '100vh'}} ref={domRef2}>
<p style={{'fontSize' : '2.5em'}}>Take a moment to</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -111,13 +111,13 @@ export function Breathe(){ ...@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`, 'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}` 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}> <div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
'top': '20vh', 'top': '20vh',
...@@ -128,17 +128,17 @@ export function Breathe(){ ...@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`, 'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}` 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p> <p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p> <p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}> <div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{ <img style={{
'position': 'fixed', 'position': 'fixed',
...@@ -150,7 +150,7 @@ export function Breathe(){ ...@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`, 'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}` 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div> </div>
</div> </div>
{/* black */} {/* black */}
...@@ -168,7 +168,7 @@ export function Breathe(){ ...@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`, 'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}` 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp"> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img> </img>
<div style={{ 'height': '100vh'}} ref={domRef6}> <div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{ <img style={{
...@@ -179,10 +179,10 @@ export function Breathe(){ ...@@ -179,10 +179,10 @@ export function Breathe(){
'height': '60vh', 'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}` 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p> {/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p> <p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */} <p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
...@@ -196,13 +196,13 @@ export function Breathe(){ ...@@ -196,13 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`, 'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}` 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img> id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div> </div>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p> <p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> <p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div> </div>
{/* grey */} {/* grey */}
<div <div
...@@ -219,14 +219,14 @@ export function Breathe(){ ...@@ -219,14 +219,14 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`, 'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}` 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}} }}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp"> id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img> </img>
</div> </div>
<p style={{'fontSize' : '2.5em'}}>texttexttext</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p> <p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p> <p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p> <p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */} {/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div> <div className='col' style={{ 'height': '100vh' }}></div>
</> </>
......
src/components/Buttons.tsx
View file @ 3fd292fd
...@@ -31,7 +31,7 @@ export function Villbuttonrow(){ ...@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<div className="small-row align-items-center bottom-buttons"> <div className="small-row align-items-center bottom-buttons">
<Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton> <Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
<Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton> <Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton> <Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton> <Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton> <Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton> <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
...@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps ...@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){ if (!classy){
classy = "" classy = ""
} }
let classname = "tabbutton " + type + " " + classy; let classname = "btn1 tabbutton " + type + " " + classy;
return( return(
<> <>
<button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button> <button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
...@@ -144,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps ...@@ -144,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
) )
} }
export function HPMoreButton({name}: {name: string}){
let c = "timelinepersontabs"
export function BFHMoreButton({it}: {it: string}){
return( return(
<button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button> <button className="tablinks btn1" onClick={expandIt({it})}> More</button>
) )
} }
export function BFHMoreButton({it}: {it: string}){ export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
const {goToPageWithTabAndScroll} = useNavigation();
return( return(
<button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button> <button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
) )
} }
...@@ -173,48 +175,17 @@ function expandIt({it}: {it: string}){ ...@@ -173,48 +175,17 @@ function expandIt({it}: {it: string}){
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){ export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
const { goToPagesAndOpenTab } = useNavigation(); const { goToPagesAndOpenTab } = useNavigation();
if (openclass) { if (openclass) {
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
) )
} }
else{ else{
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
) )
} }
} }
...@@ -223,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str ...@@ -223,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation(); const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) { if (openclass) {
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
<a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
) )
} }
else{ else{
...@@ -247,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str ...@@ -247,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){ export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return( return(
<div className="boxy-1"> <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
) )
} }
......
src/components/Calendar/Calendar.tsx
View file @ 3fd292fd
...@@ -115,7 +115,6 @@ function switchTo(month: string){ ...@@ -115,7 +115,6 @@ function switchTo(month: string){
console.log("new month is: " + month + " and we are calling " + `${month}-name`) console.log("new month is: " + month + " and we are calling " + `${month}-name`)
if (document.getElementById(`${month}-dates`)) { if (document.getElementById(`${month}-dates`)) {
console.info("document.getElementById(`${month}-dates`); exists")
let newdates = document.getElementById(`${month}-dates`); let newdates = document.getElementById(`${month}-dates`);
(newdates as HTMLElement).style.display = "block"; (newdates as HTMLElement).style.display = "block";
} }
...@@ -270,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none" ...@@ -270,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none"
<li>19</li> <li>19</li>
<li>20</li> <li>20</li>
<li>21</li> <li>21</li>
<li>22</li> <li><a onClick={showEntry("may22")}><span className="active">22</span></a></li>
<li>23</li> <li>23</li>
<li>24</li> <li>24</li>
<li>25</li> <li>25</li>
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
...@@ -32,7 +32,7 @@ let tabs = [ ...@@ -32,7 +32,7 @@ let tabs = [
<h2>Public Outreach</h2> <h2>Public Outreach</h2>
<p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p> <p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p>
<h2>Jamboree & MeetUps</h2> <h2>Jamboree & MeetUps</h2>
<p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p> <p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p>
...@@ -171,7 +171,7 @@ let tabs = [ ...@@ -171,7 +171,7 @@ let tabs = [
<p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p> <p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p>
<h3>Fourth Presentation: Cystic Fibrosis</h3> <h3>Fourth Presentation: Cystic Fibrosis</h3>
<p>Cystic fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p> <p>Cystic Fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p>
<h3>Further Presentations</h3> <h3>Further Presentations</h3>
<p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p> <p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p>
...@@ -285,7 +285,7 @@ let tabs = [ ...@@ -285,7 +285,7 @@ let tabs = [
<p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p> <p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p>
<h2>Mechanism</h2> <h2>Mechanism</h2>
<p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in cystic fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p> <p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in Cystic Fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p>
<h2>Delivery</h2> <h2>Delivery</h2>
<p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p> <p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p>
...@@ -447,7 +447,7 @@ let tabs = [ ...@@ -447,7 +447,7 @@ let tabs = [
<p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p> <p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p>
<h2>Human Practices</h2> <h2>Human Practices</h2>
<p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with cystic fibrosis.</p> <p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with Cystic Fibrosis.</p>
<h2>Sponsoring</h2> <h2>Sponsoring</h2>
<p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p> <p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p>
......
src/components/Complex-svg.tsx
View file @ 3fd292fd
...@@ -2,13 +2,15 @@ import { useNavigation } from "../utils"; ...@@ -2,13 +2,15 @@ import { useNavigation } from "../utils";
export default function SVG(){ export default function SVG(){
const { goToPageWithTabAndScroll /* , goToTextsAndOpenCollapsible */ } = useNavigation(); const { goToPageWithTabAndScroll/* , goToTextsAndOpenCollapsible */ } = useNavigation();
return( return(
<svg <svg
viewBox="0 0 1000 500" viewBox="0 0 1000 500"
overflow="hidden" overflow="hidden"
version="1.1" version="1.1"
id="svg367" id="svg367"
width={"500"}
height={"100%"}
inkscape:export-ydpi="9.5955524" inkscape:export-ydpi="9.5955524"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<defs <defs
...@@ -1201,7 +1203,7 @@ export default function SVG(){ ...@@ -1201,7 +1203,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path149" /> id="path149" />
{/* nSpuFz1 */} {/* nSpuFz1 */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nic1head"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2807,7 +2809,7 @@ export default function SVG(){ ...@@ -2807,7 +2809,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path351" /> id="path351" />
{/* MLH1dn */} {/* MLH1dn */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2828,7 +2830,7 @@ export default function SVG(){ ...@@ -2828,7 +2830,7 @@ export default function SVG(){
transform="matrix(1,0,0,-1,16740.5,9532.5)" transform="matrix(1,0,0,-1,16740.5,9532.5)"
id="path352" /> id="path352" />
{/* La(1-194) */} {/* La(1-194) */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2859,7 +2861,7 @@ export default function SVG(){ ...@@ -2859,7 +2861,7 @@ export default function SVG(){
fillRule="evenodd" fillRule="evenodd"
id="path354" /> id="path354" />
{/* PE6c reverse transcriptase */} {/* PE6c reverse transcriptase */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2885,14 +2887,14 @@ export default function SVG(){ ...@@ -2885,14 +2887,14 @@ export default function SVG(){
transform="matrix(-1,0,0,1,10490.8,8509.5)" transform="matrix(-1,0,0,1,10490.8,8509.5)"
id="path356" /> id="path356" />
{/* PCS/RTT */} {/* PCS/RTT */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pegrna', path: '/engineering', scrollToId: "pegrna-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
fontWeight="400" fontWeight="400"
fontSize="440px" fontSize="440px"
transform="translate(7802.59,8667)" transform="translate(7802.59,8667)"
id="text357">PCS/RTT</text> id="text357">PVS/RTT</text>
</a> </a>
<path <path
d="M 0,0 4324.02,3.60892e-4" d="M 0,0 4324.02,3.60892e-4"
...@@ -2931,7 +2933,7 @@ export default function SVG(){ ...@@ -2931,7 +2933,7 @@ export default function SVG(){
transform="matrix(-1,0,0,1,13708.3,11011.5)" transform="matrix(-1,0,0,1,13708.3,11011.5)"
id="spacerline" /> id="spacerline" />
{/* Spacer */} {/* Spacer */}
<a>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
...@@ -2939,9 +2941,9 @@ export default function SVG(){ ...@@ -2939,9 +2941,9 @@ export default function SVG(){
fontSize="440px" fontSize="440px"
transform="translate(8283.81,11166)" transform="translate(8283.81,11166)"
id="text360">Spacer</text> id="text360">Spacer</text>
</a>
{/* nPlmCasX */} {/* nPlmCasX */}
<a> <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nickase-header"})}>
<text <text
fill="#32232c" fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif" fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......
src/components/FadeIn.tsx
View file @ 3fd292fd
...@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){ ...@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
<div className='col' style={{ 'height': '95vh' }}></div> <div className='col' style={{ 'height': '95vh' }}></div>
</> </>
); );
} }
\ No newline at end of file
src/components/Figures.tsx 0 → 100644
View file @ 3fd292fd
interface FigureProps{
pic1: string,
pic2?: string,
pic3?: string,
pic4?: string,
pic5?: string,
pic6?: string,
alt1: string,
description: React.ReactNode | string,
description2?: React.ReactNode | string,
num: string |number;
num2?: string |number;
bg?: string;
}
export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<img src={pic3} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoHorizontal({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2}className="responsive-image"/>
</div>
<div className="col">
<img src={pic3} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} />
</div>
<div className="col">
<img src={pic2}/>
</div>
</div>
<figcaption>
<div className="row align-items-center">
<div className="col">
<b>Figure {num}:</b> {description}.
</div>
<div className="col">
<b>Figure {num2}:</b> {description2}.
</div>
</div>
</figcaption>
</figure>
</div>
)
}
src/components/Footer.tsx
View file @ 3fd292fd
...@@ -56,12 +56,12 @@ export function Footer() { ...@@ -56,12 +56,12 @@ export function Footer() {
<div className="small-row align-items-center"> <div className="small-row align-items-center">
<div className="col-sm-4"> <div className="col-sm-4">
<div className="col"> <div className="col">
info@igem-bielefeld.de info[at]igem-bielefeld[dot]de
</div> </div>
<div className="col"> </div> <div className="col"> </div>
<div className="col"> <div className="col">
iGEM2024 iGEM2024
Universitätsstraße 25, 33613 Bielefeld Universitätsstraße 25, 33615 Bielefeld
Centrum für Biotechnologie (CeBiTec) Centrum für Biotechnologie (CeBiTec)
Universität Bielefeld Universität Bielefeld
</div> </div>
...@@ -70,37 +70,40 @@ export function Footer() { ...@@ -70,37 +70,40 @@ export function Footer() {
<div className="col-4 footer-slider"> <div className="col-4 footer-slider">
<SimpleSlider> <SimpleSlider>
<a className="sponsor-container" href="https://www.plasmidfactory.com/"> <a className="sponsor-container" href="https://www.plasmidfactory.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
</a> </a>
<a className="sponsor-container" href="https://bio.nrw.de/">
<img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
</a>
<a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften"> <a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
</a> </a>
<a className="sponsor-container" href="https://www.jenabioscience.com/"> <a className="sponsor-container" href="https://www.jenabioscience.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.gip.com/home/"> <a className="sponsor-container" href="https://www.gip.com/home/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
</a> </a>
<a className="sponsor-container" href="https://www.integra-biosciences.com"> <a className="sponsor-container" href="https://www.integra-biosciences.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" /> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
</a> </a>
<a className="sponsor-container" href="www.snapgene.com"> <a className="sponsor-container" href="www.snapgene.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
</a> </a>
<a className="sponsor-container" href="https://bts-ev.de/"> <a className="sponsor-container" href="https://bts-ev.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
</a> </a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/"> <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
</a> </a>
<a className="sponsor-container" href="www.idtdna.com"> <a className="sponsor-container" href="www.idtdna.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
</a> </a>
<a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/"> <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/> <img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
</a> </a>
</SimpleSlider> </SimpleSlider>
</div> </div>
......
src/components/Graph.tsx
View file @ 3fd292fd
...@@ -57,7 +57,7 @@ const PieChart: React.FC = () => { ...@@ -57,7 +57,7 @@ const PieChart: React.FC = () => {
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
legend: { legend: {
display: true, display: true, // possible to blend out legend
position: 'bottom' as const, // Puts labels below the chart position: 'bottom' as const, // Puts labels below the chart
labels: { labels: {
boxWidth: 20, // Controls the size of the color box next to the labels boxWidth: 20, // Controls the size of the color box next to the labels
...@@ -65,6 +65,10 @@ const PieChart: React.FC = () => { ...@@ -65,6 +65,10 @@ const PieChart: React.FC = () => {
usePointStyle: true, usePointStyle: true,
}, },
}, },
title: {
display: true,
text: 'Types of mutations',
},
}, },
}; };
...@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => { ...@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => {
title: { title: {
display: true, display: true,
text: [ text: [
'Are you affected by cystic fibrosis yourself ', 'or are you related to someone with cystic fibrosis?' 'Are you affected by Cystic Fibrosis yourself ', 'or are you related to someone with Cystic Fibrosis?'
], ],
}, },
} }
...@@ -248,6 +252,22 @@ export const HowOftenTreatmentatients: React.FC = () => { ...@@ -248,6 +252,22 @@ export const HowOftenTreatmentatients: React.FC = () => {
display: true, display: true,
text: 'How often do you or your relative need medical treatment or therapy?', text: 'How often do you or your relative need medical treatment or therapy?',
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
}, },
}; };
...@@ -288,6 +308,14 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => { ...@@ -288,6 +308,14 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
text: 'What concerns do you have about gene therapy?', text: 'What concerns do you have about gene therapy?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -324,7 +352,15 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => { ...@@ -324,7 +352,15 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: ["How much does cystic fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"] text: ["How much does Cystic Fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"]
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
}, },
}, },
}; };
...@@ -368,6 +404,14 @@ export const WhichTherapyDoYouUseatients: React.FC = () => { ...@@ -368,6 +404,14 @@ export const WhichTherapyDoYouUseatients: React.FC = () => {
text: 'Which form(s) of therapy do you or your relative use?', text: 'Which form(s) of therapy do you or your relative use?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -411,6 +455,14 @@ export const WhichSymptomsatients: React.FC = () => { ...@@ -411,6 +455,14 @@ export const WhichSymptomsatients: React.FC = () => {
text: 'Which symptoms do you or your relative have most frequently?', text: 'Which symptoms do you or your relative have most frequently?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -450,6 +502,14 @@ export const BasicPositionatients: React.FC = () => { ...@@ -450,6 +502,14 @@ export const BasicPositionatients: React.FC = () => {
text: ['What is your basic position on gene therapy?',' (1=Very negative, 5=Very positive)'] text: ['What is your basic position on gene therapy?',' (1=Very negative, 5=Very positive)']
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -487,7 +547,15 @@ export const AgeDiagnosisatients: React.FC = () => { ...@@ -487,7 +547,15 @@ export const AgeDiagnosisatients: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'At what age were you or your relative diagnosed with cystic fibrosis?', text: 'At what age were you or your relative diagnosed with Cystic Fibrosis?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
}, },
}, },
}; };
...@@ -571,6 +639,14 @@ export const MoreInfoOnTherapyBoth: React.FC = () => { ...@@ -571,6 +639,14 @@ export const MoreInfoOnTherapyBoth: React.FC = () => {
text: 'Would you like to see more information on the subject of gene therapy?', text: 'Would you like to see more information on the subject of gene therapy?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -603,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => { ...@@ -603,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Have you heard of cystic fibrosis?', text: 'Have you heard of Cystic Fibrosis?',
}, },
} }
}; };
...@@ -679,7 +755,7 @@ export const HowDidYouLearnPublic: React.FC = () => { ...@@ -679,7 +755,7 @@ export const HowDidYouLearnPublic: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'How did you mainly learn about cystic fibrosis? ', text: 'How did you mainly learn about Cystic Fibrosis? ',
}, },
}, },
scales: { scales: {
...@@ -690,6 +766,10 @@ export const HowDidYouLearnPublic: React.FC = () => { ...@@ -690,6 +766,10 @@ export const HowDidYouLearnPublic: React.FC = () => {
}, },
y: { y: {
beginAtZero: true, beginAtZero: true,
title: {
display: true,
text: '%', // This is the label for the y-axis
},
}, },
}, },
}; };
...@@ -760,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => { ...@@ -760,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { title: { plugins: { title: {
display: true, display: true,
text: 'How well informed are you about cystic fibrosis?', text: 'How well informed are you about Cystic Fibrosis?',
}, },
} }
}; };
...@@ -837,7 +917,15 @@ export const WhatMeasuresPublic: React.FC = () => { ...@@ -837,7 +917,15 @@ export const WhatMeasuresPublic: React.FC = () => {
}, },
title: { title: {
display: true, display: true,
text: 'What measures do you think could be taken to raise awareness of cystic fibrosis?', text: 'What measures do you think could be taken to raise awareness of Cystic Fibrosis?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
}, },
}, },
}; };
...@@ -917,6 +1005,14 @@ export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => { ...@@ -917,6 +1005,14 @@ export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
text: 'What concerns do you have about gene therapy?', text: 'What concerns do you have about gene therapy?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
...@@ -960,6 +1056,14 @@ export const WhatFormMoreInfoPublic: React.FC = () => { ...@@ -960,6 +1056,14 @@ export const WhatFormMoreInfoPublic: React.FC = () => {
text: 'In what form would you like to see more information?', text: 'In what form would you like to see more information?',
}, },
}, },
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
}; };
return ( return (
......
src/components/HP-timeline.tsx
View file @ 3fd292fd
import { TabButtonRow } from "./Buttons"; import { TabButtonRow } from "./Buttons";
import TimeHori from "./HorizontalTimeline"; import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs"; import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "../data/hptimelinedata"; import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){ export function HPTimeline(){
return( return(
<section id="Timeline" className="section"> <section id="Timeline" className="section">
<p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
<div className="center"> <div className="center">
</div> </div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" /> <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
...@@ -41,7 +42,23 @@ export function HPTimeline(){ ...@@ -41,7 +42,23 @@ export function HPTimeline(){
node: <TimeHori tab="Industry" ></TimeHori>, node: <TimeHori tab="Industry" ></TimeHori>,
buttonname: "Industry", buttonname: "Industry",
cssname: "Industry" cssname: "Industry"
} },
{
node: <TimeHori tab="Milestone" ></TimeHori>,
buttonname: "Milestones",
cssname: "Milestone"
},
{
node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
buttonname: "Education & Outreach",
cssname: "Education"
},
/*
{
node: <TimeHori tab="Outreach" ></TimeHori>,
buttonname: "Outreach",
cssname: "Outreach"
} */
] ]
......
src/components/Headings.tsx
View file @ 3fd292fd
...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){ ...@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h2-box"> <div>
<h2 className="h2" id={idtext}>{text}</h2> <h1 id={idtext}>{text}</h1>
</div> </div>
) )
...@@ -89,7 +89,15 @@ export function H3({text, id}:{text: string, id?: string}){ ...@@ -89,7 +89,15 @@ export function H3({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h3 className="h3" id={idtext}> {text} </h3> <h2 id={idtext}> {text} </h2>
</div>
)
}
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return(
<div>
<h2 id={id}> {children} </h2>
</div> </div>
) )
...@@ -104,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){ ...@@ -104,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){
} }
return( return(
<div> <div>
<h4 className="h4" id={idtext}> {text} </h4> <h3 id={idtext}> {text} </h3>
</div> </div>
) )
...@@ -118,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){ ...@@ -118,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text); idtext = stringToSlug(text);
} }
return( return(
<div className="h5-box"> <h4 id={idtext}> {text} </h4>
<h5 className="h5" id={idtext}> {text} </h5>
</div>
) )
} }
......