diff --git a/static/style.css b/static/style.css
index 46b0638f73828ee1cb47cc1f300d1840c0f09f8f..3b04db670c45c05d6a64a907ab4dbac8a198aa8b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -81,20 +81,45 @@ body { padding-top: 56px;
}
.sidebar {
- margin-right: 30px;
+ margin-right: 40px;
}
.sidebar-title {
font-size: 2.2vh;
+ font-weight: bold;
+ color: #19A6AB;
+}
+
+.sidebar-text {
+ font-size: 2vh;
+}
+
+.sidebar-text:hover {
+ border-bottom: 2px solid #19A6AB;
}
.sidebar-container{
top: 10vh;
+ background-color: #fff;
+ opacity: 100%;
+ padding: 20px;
+ margin-top: 16px;
+ border-radius: 5px;
}
.scroll-line{
z-index: 4;
- background:#ffffff;;
+ background:#ffffff;
+ top: 55px;
+ left: 0;
+ height: 7px;
+ position: fixed;
+ transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.scroll-line-2 {
+ z-index: 4;
+ background:#19A6AB;
top: 55px;
left: 0;
height: 7px;
@@ -104,9 +129,8 @@ body { padding-top: 56px;
.scroll-ball{
border-radius: 100%;
- background: linear-gradient(217deg, rgba(0, 251, 255, 0.8), rgba(255,0,0,0) 70.71%),
- linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
- linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+ background: white;
+ border: 2px solid #19A6AB;
transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 15px;
height: 15px;
@@ -114,20 +138,20 @@ body { padding-top: 56px;
.section-button{
border-radius: 30%;
- background: linear-gradient(217deg, rgba(0, 251, 255), rgba(255,0,0,0)),
- linear-gradient(127deg, rgba(0,255,0), rgba(0,255,0,0));
+ background: #19A6AB;
height: 8vh;
width: 10vh;
bottom: 10vh;
right: 5vh;
text-decoration: none;
- color: #343a40;
+ color: white;
font-size: 2vh;
}
.section-toggle{
border-radius: 10%;
- background-color: #5bc0de;
+ background-color: #19A6AB;
+ color: white;
bottom: 10vh;
right: 5vh;
width: 25vh;
@@ -253,8 +277,8 @@ footer a:hover {
/* carousel */
.carousel-btn {
- width: 12vh;
- height: 3.5vh;
+ width: 14vh;
+ height: 4vh;
background-color: #347794;
color: white;
font-size: 15px;
diff --git a/wiki/pages/implementation.html b/wiki/pages/implementation.html
index 6142d8ef88c3155bd1e517be8b4e5845f9f157d6..78fa49e1b150471d7a1f260561fb0d9a02b5df0b 100644
--- a/wiki/pages/implementation.html
+++ b/wiki/pages/implementation.html
@@ -5,45 +5,45 @@
{% block img_url %}https://static.igem.wiki/teams/4506/wiki/lab.jpg{% endblock %}
{% block page_content %}
-<div class="scroll-line"></div>
+<div class="scroll-line-2"></div>
<nav class="page-content mt-5">
<div class="container mt-3 mw-100">
<div class="row">
<div class="sidebar col-lg-2 d-none d-lg-block">
<div class="sticky-top sidebar-container">
- <h5 class="sidebar-title blue-text">Section Index</h5>
+ <h5 class="sidebar-title">Section Index</h5>
<!-- INDEX PANTALLAS GRANDES -->
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-1</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-2</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-3</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-4</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-5</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-6</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS GRANDES -->
@@ -59,32 +59,32 @@
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-1</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-2</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-3</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-4</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-5</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-6</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS CHICAS -->
@@ -165,7 +165,7 @@
}
});
- const scrollline = document.querySelector('.scroll-line');
+ const scrollline = document.querySelector('.scroll-line-2');
function fillscrollline(){
const windowHeight = window.innerHeight;
diff --git a/wiki/pages/template.html b/wiki/pages/template.html
index 34bfa7c3f83b8af593f8a703c7ed66f6a1fbaf24..78fa49e1b150471d7a1f260561fb0d9a02b5df0b 100644
--- a/wiki/pages/template.html
+++ b/wiki/pages/template.html
@@ -1,50 +1,49 @@
{% extends "layout.html" %}
-{% block title %}Implementation{% endblock %}
+{% block title %}Proposed Implementation{% endblock %}
{% block lead %}Explain how you would implement your project in the real world.{% endblock %}
{% block img_url %}https://static.igem.wiki/teams/4506/wiki/lab.jpg{% endblock %}
{% block page_content %}
-<div class="scroll-line"></div>
-<nav class="page-content">
+<div class="scroll-line-2"></div>
+<nav class="page-content mt-5">
<div class="container mt-3 mw-100">
<div class="row">
- <div class="sidebar col-lg d-none d-lg-block">
+ <div class="sidebar col-lg-2 d-none d-lg-block">
<div class="sticky-top sidebar-container">
- <h5 class="sidebar-title blue-text">Section Index</h5>
+ <h5 class="sidebar-title">Section Index</h5>
<!-- INDEX PANTALLAS GRANDES -->
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-1</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
-
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-2</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-3</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-4</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-5</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6 d-none"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-6</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS GRANDES -->
@@ -60,38 +59,38 @@
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-1</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-2</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-3</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-4</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-5</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6"></div>
- <h2 class="sidebar-title d-inline-block">Titulo-6</h2>
+ <h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS CHICAS -->
</div>
- <div class="content col-lg-10">
+ <div class="content col-lg-9">
<!-- CONTENIDO DE LA PAGINA -->
<section id="Titulo1" class="page-section">
<div class="row">
@@ -166,7 +165,7 @@
}
});
- const scrollline = document.querySelector('.scroll-line');
+ const scrollline = document.querySelector('.scroll-line-2');
function fillscrollline(){
const windowHeight = window.innerHeight;