diff --git a/static/css/awards/education.css b/static/css/awards/education.css
index e34fee66e16ce80789ce2bc1b0d75b962499c844..fe31fb2e5d66ee9ffe0bff49aee8e003c8f1b685 100644
--- a/static/css/awards/education.css
+++ b/static/css/awards/education.css
@@ -1,6 +1,7 @@
.container_page {
position: relative;
width: 100%;
+ overflow: hidden;
}
.content_page {
diff --git a/static/css/awards/inclusivity.css b/static/css/awards/inclusivity.css
index 84dc9b84e93bffc78ceeea4315a3300403d3b37e..8dd671a0d6cb61ce79971c13c5a00f215bceeec8 100644
--- a/static/css/awards/inclusivity.css
+++ b/static/css/awards/inclusivity.css
@@ -109,7 +109,7 @@
.card__impact-inclusivity{
width: 32%;
- min-width: 320px;
+ min-width: 300px;
max-width: 350px;
border: 1px solid var(--border-color);
border-radius: 10px;
diff --git a/static/css/biosafety/biosafety.css b/static/css/biosafety/biosafety.css
index b932f311522f84a2b0998f4e97e5b5a64a469422..9f18becdbcabfabccb2a0765ab82948f3ebf6387 100644
--- a/static/css/biosafety/biosafety.css
+++ b/static/css/biosafety/biosafety.css
@@ -90,7 +90,7 @@
}
.card__objetive {
- min-width: 320px;
+ min-width: 300px;
max-width: 360px;
width: 32%;
border: 1px solid var(--border-color);
@@ -149,7 +149,7 @@ ul li span {
}
.content__biosafety table {
- min-width: 320px;
+ min-width: 300px;
width: 50%;
border-collapse: collapse;
}
@@ -185,7 +185,7 @@ td {
.card__step-disinfection {
width: 40%;
- min-width: 320px;
+ min-width: 300px;
max-width: 380px;
border: 1px solid var(--border-color);
border-radius: 15px;
diff --git a/static/css/home/home.css b/static/css/home/home.css
index 70cee5d030e8e84f7dd52a65f9d4f9c1f62f62da..ac1ca411988782551441a0ab1778952f4f1f5dbb 100644
--- a/static/css/home/home.css
+++ b/static/css/home/home.css
@@ -450,13 +450,30 @@
/* style history mercury*/
-.content__history-mercury {
+.content__history-mercury{
width: 100%;
position: relative;
background-color: var(--color-white);
bottom: 0;
left: 0;
z-index: 1;
+ overflow: hidden;
+}
+
+.content__history-mercury-movile {
+ width: 100%;
+ position: relative;
+ background-color: var(--color-white);
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ display: none;
+ overflow: hidden;
+}
+
+.content__history-mercury-movile img {
+ width: 100%;
+ height: auto;
}
.content__mercurito-capibara {
@@ -465,6 +482,7 @@
display: flex;
justify-content: space-evenly;
background-color: black;
+ overflow: hidden;
}
.content__mercurito-capibara img {
@@ -756,18 +774,23 @@
}
.content__products-oferts {
+ position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
-
+ background-color: var(--color-white) !important;
+ z-index: 1;
+ overflow: hidden;
}
.content__products-oferts>img {
width: 40%;
- max-width: 300px;
- min-width: 250px;
+ max-width: 300px !important;
+ min-width: 250px !important;
+
+
}
.cards__products-oferts {
@@ -776,15 +799,17 @@
justify-content: center;
flex-wrap: wrap;
gap: 20px;
- padding: 5%;
+ padding: 4%;
+ min-width: 500px;
}
.card__product-ofert {
- min-width: 300px;
+ min-width: 270px;
+ max-width: 320px;
+ width: 40%;
background-color: var(--color-white);
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
- width: 40%;
text-decoration: none;
color: var(--color-black);
padding: 20px;
@@ -958,4 +983,16 @@
.text__problem-18 {
left: 25%;
}
+}
+
+
+
+@media (width < 1000px) {
+ .content__history-mercury-movile {
+ display: block !important;
+ }
+
+ .content__history-mercury {
+ display: none;
+ }
}
\ No newline at end of file
diff --git a/static/css/human_practices/human_practices.css b/static/css/human_practices/human_practices.css
index 7906af7f91342e4cf94fb3ab415eb57037930a74..23e2ef18335c0604eba6d565c696077f201a9ea0 100644
--- a/static/css/human_practices/human_practices.css
+++ b/static/css/human_practices/human_practices.css
@@ -59,12 +59,12 @@
.img-text-content img {
width: 45%;
max-width: 400px;
- min-width: 320px;
+ min-width: 300px;
}
.img-text-content>p {
width: 45%;
- min-width: 320px;
+ min-width: 300px;
text-align: start;
/* font-style: italic; */
}
@@ -148,6 +148,7 @@
}
.imgs__moment-inspiration {
+ min-width: 300px;
width: 100%;
display: flex;
justify-content: space-evenly;
@@ -159,14 +160,14 @@
.content__moment-inspiration>img {
width: 90%;
max-width: 800px;
- min-width: 460px;
+ min-width: 300px;
}
.content__moment-inspiration>img,
.img__bolivia {
width: 80%;
max-width: 600px;
- min-width: 400px;
+ min-width: 300px;
}
.img__bolivia>p {
@@ -191,7 +192,7 @@
.content_human-practices>img {
max-width: 800px;
width: 72%;
- min-width: 540px;
+ min-width: 300px;
}
.content_human-practices>p>img {
diff --git a/static/css/lab/experiments.css b/static/css/lab/experiments.css
index 9ae992abd38e8a04b7f1018b4676c8e46f6f315c..bef7c9fabbb084f574355291f9d672bd7bc2b961 100644
--- a/static/css/lab/experiments.css
+++ b/static/css/lab/experiments.css
@@ -55,7 +55,7 @@
.card__competent-protocol {
max-width: 300px;
- min-width: 320px;
+ min-width: 28cards__objetives0px;
width: 30%;
border: 1px solid var(--border-color);
border-radius: 10px;
@@ -86,7 +86,7 @@
}
.content_experiments>.table__experiments {
- min-width: 320px;
+ min-width: 280px;
max-width: 600px;
border-collapse: separate;
border-spacing: 0;
diff --git a/static/css/proyect/description.css b/static/css/proyect/description.css
index cdec039577f3e78b9d925caf11f3a04ac5a2fe9e..ff2647f427c4955aa54eeb3dde25d25de8f71224 100644
--- a/static/css/proyect/description.css
+++ b/static/css/proyect/description.css
@@ -32,7 +32,7 @@
.content__text-section>p {
width: 48%;
- min-width: 300px;
+ min-width: 280px;
max-width: 500px;
margin: 0;
}
@@ -48,7 +48,7 @@
.content__text-section .text__section {
width: 48%;
- min-width: 300px;
+ min-width: 280px;
max-width: 600px;
}
@@ -59,7 +59,7 @@
.content__text-section>img {
width: 48%;
- min-width: 300px;
+ min-width: 280px;
max-width: 500px;
}
@@ -80,7 +80,7 @@
}
.content__img-mercury img{
- max-width: 360px;
+ max-width: 300px;
}
.card__consecuenceMercury-1 {
@@ -107,6 +107,8 @@
background-color: var(--color-warn);
border-radius: 10px;
color: var(--color-white);
+ max-width: 400px;
+ min-width: 300px;
}
.card__consecuence>img {
@@ -145,7 +147,7 @@
text-align: center;
border: 1px solid var(--border-color);
padding: 15px;
- min-width: 320px;
+ min-width: 280px;
}
.content__table-description table tr th{
@@ -188,7 +190,7 @@
.content__imgs-expect-impact img {
width: 32%;
- min-width: 300px;
+ min-width: 280px;
max-width: 400px;
margin-bottom: 20px;
border-radius: 1rem;
diff --git a/static/css/proyect/engineering.css b/static/css/proyect/engineering.css
index f6d410351e959f847969ae51f6de43f55c5423cf..774e113158d0d4c5878d061e3b9c32d7ef2a796f 100644
--- a/static/css/proyect/engineering.css
+++ b/static/css/proyect/engineering.css
@@ -63,7 +63,6 @@
}
.content_strategy {
-
width: 100%;
}
@@ -72,11 +71,11 @@
}
.content_strategy .selective__detection {
- width: 50%;
+ width: 65%;
}
.selective__detection {
- max-width: 1000px;
+ /* max-width: 1600px !important; */
min-width: 300px;
width: 100%;
margin: 0 auto 20px;
@@ -279,7 +278,7 @@
.card__biosensor-characterization {
flex-grow: 1;
max-width: 450px;
- min-width: 320px;
+ min-width: 300px;
width: 49%;
display: flex;
flex-direction: column;
@@ -323,7 +322,7 @@
.card__enzymatic-activity {
flex-grow: 1;
max-width: 450px;
- min-width: 320px;
+ min-width: 300px;
width: 49%;
border: 1px solid var(--border-color);
border-radius: 15px;
diff --git a/static/css/proyect/parts.css b/static/css/proyect/parts.css
index ade83a5bddfcffaff48493e44b0d59d78748fb2c..ea8a404115151dc877783b42988f0015eee78694 100644
--- a/static/css/proyect/parts.css
+++ b/static/css/proyect/parts.css
@@ -25,6 +25,7 @@
width: 100%;
position: relative;
padding: 3% 10%;
+ overflow: hidden;
}
.content__parts h2 {
diff --git a/static/css/proyect/results.css b/static/css/proyect/results.css
index bb38b6b61fa5af4f5eb214b54be02c7832ea558b..b7d28a6f78d78ee3e9b56e70ac01085d36bb41f0 100644
--- a/static/css/proyect/results.css
+++ b/static/css/proyect/results.css
@@ -67,7 +67,7 @@
.card-result-magenta-reporter{
width: 40%;
max-width: 400px;
- min-width: 320px;
+ min-width: 300px;
height: auto;
border: 1px solid var(--border-color);
}
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index a357967a38b9e05902abafe9be459d10db9e6f4b..8de4b564ffe9e48b0c2640fe9b95866c8dcd4c2e 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -75,7 +75,8 @@ endblock %}
</section>
<section class="content__text-fish">
<div class="section__content">
- <p>This invisible contaminant puts the <span class="fw-bold">health</span> of entire <span class="fw-bold">communities</span> at risk.</p>
+ <p>This invisible contaminant puts the <span class="fw-bold">health</span> of entire <span
+ class="fw-bold">communities</span> at risk.</p>
</div>
</section>
<section class="content__text-fish">
@@ -85,7 +86,8 @@ endblock %}
</section>
<section class="content__text-fish">
<div class="section__content">
- <p>Discover how we are <span class="fw-bold">fighting</span> this crisis and <span class="fw-bold">saving</span> our home.</p>
+ <p>Discover how we are <span class="fw-bold">fighting</span> this crisis and <span
+ class="fw-bold">saving</span> our home.</p>
</div>
</section>
</div>
@@ -96,17 +98,34 @@ endblock %}
<img src="https://static.igem.wiki/teams/5257/project/home/1-mercurito.webp" alt="mercurito">
<img src="https://static.igem.wiki/teams/5257/project/home/1-capibara.webp" alt="capibara">
</div>
+
+<div class="content__history-mercury-movile content__history-mercury">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena1-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena2-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena3-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena4-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena5-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena6-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena7-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena8-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena9-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena10-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena11-mobile.webp" alt="">
+ <img src="https://static.igem.wiki/teams/5257/project/home/mobile/escena12-mobile.webp" alt="">
+</div>
+
+
<div class="content__history-mercury">
<!-- section 1 -->
<div class="content__problem-contamination">
- <img class="img__problem-contamination-large" data-aos="zoom-in-down" data-aos-duration="1500"
+ <img class="img__problem-contamination-large" data-aos="zoom-in-down" data-aos-duration="1500"
src="https://static.igem.wiki/teams/5257/project/home/2-backgroundv2.webp" alt="">
<div class="text__problem-1" data-aos="zoom-out-right" data-aos-duration="1500">
<h1>The Problem <br>
The Invisible Contamination</h1>
<p>The Amazon faces a <span>major challenge</span> due to mercury released by artisanal mining.</p>
</div>
- <p class="text__problem-2 text__problem" data-aos="zoom-out-right" data-aos-duration="1500">
+ <p class="text__problem-2 text__problem" data-aos="zoom-out-right" data-aos-duration="1500">
Mercury seeps into <span>rivers</span> and the <span>air</span>, contaminating the water that many people
drink.
</p>
@@ -115,9 +134,9 @@ endblock %}
<!-- section 2 -->
<div class="content__problem-contamination reduce-padding-top">
<img class="img__problen-section-2" data-aos="zoom-in-down" data-aos-duration="1500"
- src="https://static.igem.wiki/teams/5257/project/home/3-biosensorv2.webp"
- alt="">
- <p class="text__problem-4 text__problem" data-aos="fade-up-right" data-aos-duration="1500">But not all is lost. Amid this crisis, a tool has emerged that can help
+ src="https://static.igem.wiki/teams/5257/project/home/3-biosensorv2.webp" alt="">
+ <p class="text__problem-4 text__problem" data-aos="fade-up-right" data-aos-duration="1500">But not all is lost.
+ Amid this crisis, a tool has emerged that can help
us identify
which waters are safe and which are <span>contaminated.</span></p>
<!-- <p class="text__problem-5 text__problem" >This is extremely dangerous, especially for children and pregnant
@@ -127,13 +146,11 @@ endblock %}
<!-- section 3 -->
<div class="content__problem-contamination">
- <img class="img__problem-section-3-1" data-aos="fade-right" data-aos-duration="1500"
- src="https://static.igem.wiki/teams/5257/project/home/4-mercurito.webp"
- alt="">
- <img class="img__problem-section-3-2" data-aos="fade-left" data-aos-duration="1500"
- src="https://static.igem.wiki/teams/5257/project/home/4-capibarav2.webp"
- alt="">
- <p class="text__problem-6 text__problem" >
+ <img class="img__problem-section-3-1" data-aos="fade-right" data-aos-duration="1500"
+ src="https://static.igem.wiki/teams/5257/project/home/4-mercurito.webp" alt="">
+ <img class="img__problem-section-3-2" data-aos="fade-left" data-aos-duration="1500"
+ src="https://static.igem.wiki/teams/5257/project/home/4-capibarav2.webp" alt="">
+ <p class="text__problem-6 text__problem">
Hello! I’m <span>Mercurito</span>, the mercury detective. Along with my friend, the
capybara, we’ll show you how we’re fighting mercury contamination in the Amazon.
</p>
@@ -144,14 +161,14 @@ endblock %}
<div class="content__problem-contamination">
<img class="img__problem-contamination-large" data-aos="zoom-in-down" data-aos-duration="1500"
src="https://static.igem.wiki/teams/5257/project/home/5-backgroundv2.webp" alt="">
- <div class="text__problem-1" data-aos="fade-up-right" data-aos-duration="1500">
+ <div class="text__problem-1" data-aos="fade-up-right" data-aos-duration="1500">
<h1>How We Defeat Mercury
Identifying Mercury in Water</h1>
<p>
Our biosensor is like a game of billiards... but with <span>science!</span>
</p>
</div>
- <p class="text__problem-9 text__problem" >
+ <p class="text__problem-9 text__problem">
We use <span>two key strategies </span>to detect mercury in rivers.
It’s like playing
a game of
@@ -176,7 +193,8 @@ endblock %}
</p>
</div>
<div class="content__problem-contamination">
- <img class="img__problem-contamination-large" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine" data-aos-duration="500"
+ <img class="img__problem-contamination-large" data-aos="fade-right" data-aos-offset="300"
+ data-aos-easing="ease-in-sine" data-aos-duration="500"
src="https://static.igem.wiki/teams/5257/project/home/7-backgroundv2.webp" alt="">
<p class="text__problem-14 text__problem">If the white ball hits <span>inorganic mercury (Hg²âº)</span> first,
the table turns
@@ -188,7 +206,8 @@ endblock %}
up in green.</p>
</div>
<div class="content__problem-contamination">
- <img class="img__problem-contamination-large" data-aos="fade-left" data-aos-offset="300" data-aos-easing="ease-in-sine" data-aos-duration="500"
+ <img class="img__problem-contamination-large" data-aos="fade-left" data-aos-offset="300"
+ data-aos-easing="ease-in-sine" data-aos-duration="500"
src="https://static.igem.wiki/teams/5257/project/home/8-backgroundv2.webp" alt="">
<div class="text__problem-1">
<h1>Strategy 2<br> The master stroke</h1>
@@ -207,7 +226,8 @@ endblock %}
</div>
<div class="content__problem-contamination">
<img class="img__problem-contamination-large"
- src="https://static.igem.wiki/teams/5257/project/home/9-backgroundv2.webp" alt="" data-aos="zoom-in-right" data-aos-duration="1200">
+ src="https://static.igem.wiki/teams/5257/project/home/9-backgroundv2.webp" alt="" data-aos="zoom-in-right"
+ data-aos-duration="1200">
<div class="text__problem-1">
<h1>Another Way to Play<br> Detecting Organic Mercury</h1>
<p>
@@ -226,10 +246,10 @@ endblock %}
src="https://static.igem.wiki/teams/5257/project/home/10-backgroundv2.webp" alt="">
</div>
<div class="content__problem-contamination">
- <img class="img__problem-section-9-1" src="https://static.igem.wiki/teams/5257/project/home/11-mercurito.webp" data-aos="fade-right" data-aos-duration="1500"
- alt="">
- <img class="img__problem-section-9-2" src="https://static.igem.wiki/teams/5257/project/home/11-capibarav2.webp" data-aos="fade-left" data-aos-duration="1500"
- alt="">
+ <img class="img__problem-section-9-1" src="https://static.igem.wiki/teams/5257/project/home/11-mercurito.webp"
+ data-aos="fade-right" data-aos-duration="1500" alt="">
+ <img class="img__problem-section-9-2" src="https://static.igem.wiki/teams/5257/project/home/11-capibarav2.webp"
+ data-aos="fade-left" data-aos-duration="1500" alt="">
<p class="text__problem-21 text__problem">
With this <span>master move</span>, we eliminate the inorganic mercury and ensure that the green signal
means all organic
@@ -238,7 +258,8 @@ endblock %}
</div>
<div class="content__problem-contamination">
<img class="img__problem-contamination-large"
- src="https://static.igem.wiki/teams/5257/project/home/12-backgroundv2.webp" alt="" data-aos="zoom-in-up" data-aos="fade-left" data-aos-duration="1500" >
+ src="https://static.igem.wiki/teams/5257/project/home/12-backgroundv2.webp" alt="" data-aos="zoom-in-up"
+ data-aos="fade-left" data-aos-duration="1500">
<div class="text__problem-1">
<h1>A Brilliant Future<br> Together, We Can Save the Amazon</h1>
<p>
@@ -250,31 +271,32 @@ endblock %}
Join our mission and help us protect the health of communities and the environment.
</p>
</div>
- <div class="content__products-oferts">
- <img src="https://static.igem.wiki/teams/5257/project/home/products-oferts.png" alt="" data-aos="fade-right" data-aos-duration="1500">
- <div class="cards__products-oferts" data-aos="fade-left" data-aos-duration="1500">
- <a href="{{ url_for('pages', page='description') }}" class="card__product-ofert">
- <h1><img src="https://static.igem.wiki/teams/5257/project/home/project.svg" alt=""> Project</h1>
- <p>Explore our efforts to combat mercury contamination in Bolivia through innovative biosensor
- technology.</p>
- </a>
- <a href="{{ url_for('pages', page='hardware') }}" class="card__product-ofert">
- <h1><img src="https://static.igem.wiki/teams/5257/project/home/hardware.svg" alt=""> Hardware</h1>
- <p>Dive into the technology behind our portable device that detects mercury levels in water with ease
- and precision.</p>
- </a>
- <a href="{{ url_for('pages', page='human-practices') }}" class="card__product-ofert">
- <h1><img src="https://static.igem.wiki/teams/5257/project/home/human-practices.svg" alt=""> Humans
- Practices</h1>
- <p>Learn about our ethical approach to creating solutions that benefit communities and ensure social
- responsibility.</p>
- </a>
- <a href="{{ url_for('pages', page='education') }}" class="card__product-ofert">
- <h1><img src="https://static.igem.wiki/teams/5257/project/home/education.svg" alt=""> Education</h1>
- <p>Discover how we teach Synthetic Biology and Biotechnology through interactive workshops and
- real-world applications.</p>
- </a>
- </div>
+</div>
+<div class="content__products-oferts">
+ <img src="https://static.igem.wiki/teams/5257/project/home/products-oferts.png" alt="" data-aos="fade-right"
+ data-aos-duration="1500">
+ <div class="cards__products-oferts" data-aos="fade-left" data-aos-duration="1500">
+ <a href="{{ url_for('pages', page='description') }}" class="card__product-ofert">
+ <h1><img src="https://static.igem.wiki/teams/5257/project/home/project.svg" alt=""> Project</h1>
+ <p>Explore our efforts to combat mercury contamination in Bolivia through innovative biosensor
+ technology.</p>
+ </a>
+ <a href="{{ url_for('pages', page='hardware') }}" class="card__product-ofert">
+ <h1><img src="https://static.igem.wiki/teams/5257/project/home/hardware.svg" alt=""> Hardware</h1>
+ <p>Dive into the technology behind our portable device that detects mercury levels in water with ease
+ and precision.</p>
+ </a>
+ <a href="{{ url_for('pages', page='human-practices') }}" class="card__product-ofert">
+ <h1><img src="https://static.igem.wiki/teams/5257/project/home/human-practices.svg" alt=""> Humans
+ Practices</h1>
+ <p>Learn about our ethical approach to creating solutions that benefit communities and ensure social
+ responsibility.</p>
+ </a>
+ <a href="{{ url_for('pages', page='education') }}" class="card__product-ofert">
+ <h1><img src="https://static.igem.wiki/teams/5257/project/home/education.svg" alt=""> Education</h1>
+ <p>Discover how we teach Synthetic Biology and Biotechnology through interactive workshops and
+ real-world applications.</p>
+ </a>
</div>
</div>