@@ Line 82: / Line 82: @@
    var i;
    var slides = document.getElementsByClassName("mySlides");
-   var dots = document.getElementsByClassName("demo");
+   var dots = document.getElementsByClassName("dot");
-  var captionText = document.getElementById("caption");
+   if (n > slides.length) {slideIndex = 1}
-   if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
-    slides[i].style.display = "none";
+      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
-    dots[i].className = dots[i].className.replace(" active", "");
+      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
-  captionText.innerHTML = dots[slideIndex-1].alt;
 }
@@ Line 126: / Line 124: @@
 .navbar a {
      float: left;
-     font-size: 24px;
+     font-size: 18px;
      font-family: Arial;
      font-weight: bold;
      color: #2F4641;
      text-align: center;
-     padding: 46px 16px;
+     padding: 45px 16px;
      text-decoration: none;
 }
@@ Line 150: / Line 148: @@
 .dropdown .dropbtn {
      cursor: pointer;
-     font-size: 24px;
+     font-size: 18px;
      border: none;
      outline: none;
@@ Line 188: / Line 186: @@
 .show {
      display: block;
+}
+/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+@media screen and (max-width: 600px) {
+  .navbar a:not(:first-child) {display: none;}
+  .navbar a.icon {
+    float: right;
+    display: block;
+  }
+}
+/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
+@media screen and (max-width: 600px) {
+  .navbar.responsive {position: relative;}
+  .navbar.responsive a.icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .navbar.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
 }
@@ Line 208: / Line 230: @@
      text-align: center;
      padding: 0 0 0 0;
-}
-/* SLIDESHOW GALERY */
-/* Slideshow container */
-.slideshow-container {
-  max-width: 1000px;
-  position: relative;
-  margin: auto;
-}
-.mySlides {
-    display: none;
-}
-/* Next & previous buttons */
-.prev, .next {
-  cursor: pointer;
-  position: absolute;
-  top: 50%;
-  width: auto;
-  margin-top: -22px;
-  padding: 16px;
-  color: white;
-  font-weight: bold;
-  font-size: 18px;
-  transition: 0.6s ease;
-  border-radius: 0 3px 3px 0;
-}
-/* Position the "next button" to the right */
-.next {
-  right: 0;
-  border-radius: 3px 0 0 3px;
-}
-/* On hover, add a black background color with a little bit see-through */
-.prev:hover, .next:hover {
-  background-color: rgba(0,0,0,0.8);
-}
-/* Caption text */
-.text {
-  color: #f2f2f2;
-  font-size: 15px;
-  padding: 8px 12px;
-  position: absolute;
-  bottom: 8px;
-  width: 100%;
-  text-align: center;
-}
-/* Number text (1/3 etc) */
-.numbertext {
-  color: #f2f2f2;
-  font-size: 12px;
-  padding: 8px 12px;
-  position: absolute;
-  top: 0;
-}
-/* The dots/bullets/indicators */
-.dot {
-  cursor:pointer;
-  height: 15px;
-  width: 15px;
-  margin: 0 2px;
-  background-color: #bbb;
-  border-radius: 50%;
-  display: inline-block;
-  transition: background-color 0.6s ease;
-}
-.active, .dot:hover {
-  background-color: #CA6065;
-}
-/* Fading animation */
-.fade {
-  -webkit-animation-name: fade;
-  -webkit-animation-duration: 1.5s;
-  animation-name: fade;
-  animation-duration: 1.5s;
-}
-@-webkit-keyframes fade {
-  from {opacity: .4}
-  to {opacity: 1}
-}
-@keyframes fade {
-  from {opacity: .4}
-  to {opacity: 1}
 }
@@ Line 308: / Line 237: @@
 	.igem_2017_content_wrapper {
 		width: 86%;
-		padding-top:11%;
+		padding-top:8%;
 		padding-left:7%;
-		padding-bottom:16%;
+		padding-bottom:20%;
 		padding-right:7%;
 		display:block;
@@ Line 327: / Line 256: @@
 	/* styling for the titles h1 */
 	.igem_2017_content_wrapper h1 {
-		padding:20px 15px 20px !important;
+		padding:15px 15px 20px !important;
 		border-bottom: 0px;
 		color: #CC6666;
@@ Line 335: / Line 264: @@
 	/* styling for the titles h2 */
 	.igem_2017_content_wrapper h2 {
-		padding:20px 24px 15px !important;
+		padding:15px 24px 15px !important;
 		border-bottom: 0px;
 		color: #CE6161;
@@ Line 402: / Line 331: @@
 	.igem_2017_content_wrapper ul {
 		padding:0px 20px;
-		font-size: 13px;
+		font-size: 18px !important;
 		font-family:Tahoma, Geneva, sans-serif;
 	}
@@ Line 409: / Line 338: @@
 	.igem_2017_content_wrapper ol {
 		padding:0px;
-		font-size: 13px;
+		font-size: 18px !important;
 		font-family:Tahoma, Geneva, sans-serif;
 	}
@@ Line 533: / Line 462: @@
 <head>
-<div class="navbar">
+<div class="navbar" id="myTopnav">
    <img src="https://static.igem.org/mediawiki/2017/1/13/T--Uchile_Biotec--LogoFull.jpg" style="width:100px;height:100px;margin: 0px 0px 0px 10px"></img>
@@ Line 546: / Line 475: @@
      <div class="dropdown-content" id="1">
        <a href="https://2017.igem.org/Team:UChile_Biotec/Team">Team</a>
-      <a href="https://2017.igem.org/Team:UChile_Biotec/Collaborations">Collaborations</a>
-      <a href="https://2017.igem.org/Team:UChile_Biotec/igem_latam">iGEM Latam</a>
        <a href="https://2017.igem.org/Team:UChile_Biotec/Sponsors">Sponsors</a>
        <a href="https://2017.igem.org/Team:UChile_Biotec/Attributions">Attributions</a>
      </div>
    </div>
+  <a href="https://2017.igem.org/Team:UChile_Biotec/igem_latam">iGEM LATAM</a>
    <div class="dropdown">
@@ Line 572: / Line 501: @@
        <a href="https://2017.igem.org/Team:UChile_Biotec/Model">Model</a>
        <a href="https://2017.igem.org/Team:UChile_Biotec/Results">Results</a>
-      <a href="https://2017.igem.org/Team:UChile_Biotec/Demonstrate">Demonstrate</a>
      </div>
    </div>

Difference between revisions of "Template:BIMATOX Project"

Latest revision as of 03:44, 2 November 2017