Difference between revisions of "Template:NUS Singapore-A"

Line 102: Line 102:
 
   width: 150px;
 
   width: 150px;
 
}
 
}
−
 
−
 
−
 
−
/************** NavBar ****************/
 
−
 
 
/* The wrapper for the nav menu*/
 
/* The wrapper for the nav menu*/
 
.nav {
 
.nav {
Line 120: Line 115:
 
   position: relative;
 
   position: relative;
 
   z-index: 3;
 
   z-index: 3;
−
}
 
−
 
−
.nav a {
 
−
  font-family: "Montserrat";
 
−
  font-weight: 400;
 
−
  font-size: 1.1em;
 
−
  letter-spacing: 0.2em;
 
−
  margin: auto 10px;
 
−
  padding: 10px 5px;
 
−
  height: 100%;
 
−
  border: none;
 
−
  outline: none;
 
−
  background-color: transparent;
 
−
  display: flex;
 
−
}
 
−
 
−
/* Add an active class to highlight the current page */
 
−
.active {
 
−
    background-color:rgba(255, 255, 255, 0.82);
 
−
}
 
−
 
−
/* Hide the link that should open and close the topnav on small screens */
 
−
.nav .icon {
 
−
    display: none;
 
 
}
 
}
  
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
−
.nav .dropdown{
+
.nav .dropdwn{
 
   display: inline-block;
 
   display: inline-block;
 
   overflow: hidden;
 
   overflow: hidden;
Line 153: Line 124:
 
}
 
}
  
 +
/* The dropdwn-content class contains the hidden content (sub-menu) */
 +
.nav .dropdwn .dropdwn-content{
 +
  display: none;
 +
  position: absolute;
 +
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 +
  background-color: rgba(255, 255, 255, 0.9);
 +
  text-align: left;
 +
  max-width: 250px;
 +
  z-index: 3;
 +
}
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
−
.nav .dropbtn{
+
 
 +
.nav .dropdwn button{
 
   font-family: "Montserrat";
 
   font-family: "Montserrat";
 
   font-weight: 400;
 
   font-weight: 400;
Line 167: Line 149:
 
   display: flex;
 
   display: flex;
 
}
 
}
−
 
−
/* The dropdwn-content class contains the hidden content (sub-menu) */
 
−
.nav .dropdown .dropdown-content{
 
−
  display: none;
 
−
  position: absolute;
 
−
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 
−
  background-color: rgba(255, 255, 255, 0.9);
 
−
  text-align: left;
 
−
  max-width: 250px;
 
−
  z-index: 3;
 
−
}
 
−
 
 
/* This styles the links within the dropdwn-content */
 
/* This styles the links within the dropdwn-content */
−
.nav .dropdown .dropdown-content a{
+
.nav .dropdwn .dropdwn-content a{
 
   float: none;
 
   float: none;
 
   padding: 5px; auto;
 
   padding: 5px; auto;
Line 193: Line 163:
 
   letter-spacing: 0.2em;
 
   letter-spacing: 0.2em;
 
}
 
}
−
 
−
/* Add a dark background on topnav links and the dropdown button on hover */
 
−
.nav a:hover, .dropdown:hover .dropbtn {
 
−
    background-color: #dddddd;
 
−
}
 
−
 
 
/* Add the hover colors and the reveal of the menu */
 
/* Add the hover colors and the reveal of the menu */
−
.dropdown:hover {
+
.dropdwn:hover {
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
−
 
+
.dropdwn:hover .dropdwn-content {
−
.dropdown:hover .dropdown-content {
+
 
   display: block;
 
   display: block;
−
}
+
  }
−
 
+
.dropdwn-content a:hover{
−
.dropdown-content a:hover{
+
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
−
 
 
/* A sticky class cause this fking mediawiki doesn't have one */
 
/* A sticky class cause this fking mediawiki doesn't have one */
 
.sticky{
 
.sticky{
Line 218: Line 179:
 
   left: 0;
 
   left: 0;
 
}
 
}
−
 
−
 
−
/* 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: 800px) {
 
−
  .nav a:not(:first-child), .dropdown .dropbtn {
 
−
    display: none;
 
−
  }
 
−
  .nav 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: 800px) {
 
−
  .nav.responsive {position: relative;}
 
−
  .nav.responsive a.icon {
 
−
    position: absolute;
 
−
    right: 0;
 
−
    top: 0;
 
−
  }
 
−
  .nav.responsive a {
 
−
    float: none;
 
−
    display: block;
 
−
    text-align: left;
 
−
  }
 
−
  .nav.responsive .dropdown {float: none;}
 
−
  .nav.responsive .dropdown-content {position: relative;}
 
−
  .nav.responsive .dropdown .dropbtn {
 
−
    display: block;
 
−
    width: 100%;
 
−
    text-align: left;
 
−
  }
 
−
}
 
−
 
−
 
 
/* Positioning and sizing of the social media icons */
 
/* Positioning and sizing of the social media icons */
 
.instalogo{
 
.instalogo{
Line 293: Line 218:
 
   color: black;
 
   color: black;
 
}
 
}
−
 
  
 
/*Responsive Design*/
 
/*Responsive Design*/
Line 302: Line 226:
 
   ##Screen = B/w 768px to 1024px
 
   ##Screen = B/w 768px to 1024px
 
*/
 
*/
−
/*
+
 
 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 
    
 
    
 
}
 
}
−
*/
+
 
 
/*  
 
/*  
 
   ##Device = Most of the Smartphones Mobiles (Portrait)
 
   ##Device = Most of the Smartphones Mobiles (Portrait)
Line 313: Line 237:
 
   ##Screen = B/w 768px to 1024px
 
   ##Screen = B/w 768px to 1024px
 
*/
 
*/
−
/*
+
 
 
@media (min-width: 0px) and (max-width: 1024px) {
 
@media (min-width: 0px) and (max-width: 1024px) {
 
/*
 
/*
 
  /*Basics*/
 
  /*Basics*/
−
/*  p {
+
  p {
 
       font-size: 13px;
 
       font-size: 13px;
 
       }
 
       }
Line 327: Line 251:
 
   }
 
   }
 
*/
 
*/
−
/*  .dropdown-content {
+
  .dropdown-content {
 
     min-width: 10px;
 
     min-width: 10px;
 
     box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
 
     box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
Line 335: Line 259:
 
     padding: 8px;
 
     padding: 8px;
 
   }
 
   }
−
*/
 
  
 
/************************************************** Back to top button style **************************************************/
 
/************************************************** Back to top button style **************************************************/
−
 
 
#BacktoTopBtn {
 
#BacktoTopBtn {
 
   display: none;
 
   display: none;
Line 409: Line 331:
 
</script>
 
</script>
 
</head>
 
</head>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
Line 428: Line 371:
 
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
 
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
 
     </div>
 
     </div>
−
   
+
     <div class="nav">
−
     <div class="nav" id="myNav">
+
       <div class="dropdwn">
−
      <a href="https://2018.igem.org/Team:NUS_Singapore-A" clas="active">HOME</a>
+
      <button>PROJECT</button>
−
 
+
         <div class="dropdwn-content">
−
       <div class="dropdown">
+
−
        <button class="dropdown">PROJECT</button>
+
−
         <div class="dropdown-content">
+
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
Line 441: Line 381:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdown">
+
       <div class="dropdwn">
−
        <button class="dropdown">LAB</button>
+
      <button>LAB</button>
−
        <div class="dropdown-content">
+
      <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
−
        </div>
+
      </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <div class="dropdwn">
−
        <button class="dropdown">PARTS</button>
+
      <button>PARTS</button>
−
        <div class="dropdown-content">
+
      <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Basic_Part">Basic Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Basic_Part">Basic Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
−
        </div>
+
      </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <div class="dropdwn">
−
        <button class="dropdown">MODELLING</button>
+
      <button>MODELLING</button>
−
         <div class="dropdown-content">
+
         <div class="dropdwn-content">
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model">Modelling</a>
 
         <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
 
         <!-- <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model/Data">Data</a> -->
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
       <div class="dropdwn">
−
       <div class="dropdown">
+
      <button>HARDWARE</button>
−
        <button class="dropdown">HARDWARE</button>
+
         <div class="dropdwn-content">
−
         <div class="dropdown-content">
+
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>         
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>         
Line 478: Line 417:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
       <div class="dropdwn">
−
       <div class="dropdown">
+
      <button>HUMAN PRACTICES</button>
−
        <button class="dropdown">HUMAN PRACTICES</button>
+
         <div class="dropdwn-content">
−
         <div class="dropdown-content">
+
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
Line 487: Line 425:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
       <div class="dropdwn">
−
       <div class="dropdown">
+
         <button>TEAM</button>
−
         <button class="dropdown">TEAM</button>
+
         <div class="dropdwn-content">
−
         <div class="dropdown-content">
+
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">Members</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">Members</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
Line 499: Line 436:
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
       <div class="dropdwn">
−
       <div class="dropdown">
+
      <button>AWARDS</button>
−
        <button class="dropdown">AWARDS</button>
+
      <div class="dropdwn-content">
−
        <div class="dropdown-content">
+
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals">Medals</a>
 
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals">Medals</a>
−
        </div>
 
 
       </div>
 
       </div>
−
     
+
    </div>
−
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
+
 
   </div>  
 
   </div>  
 
</div>
 
</div>
Line 526: Line 460:
 
   }
 
   }
 
});
 
});
−
 
−
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 
−
function myFunction() {
 
−
    var x = document.getElementById("myNav");
 
−
    if (x.className === "nav") {
 
−
        x.className += " responsive";
 
−
    } else {
 
−
        x.className = "nav";
 
−
    }
 
−
}
 
  
 
</script>
 
</script>

Revision as of 21:31, 15 October 2018

CONNECT WITH US
Description Design Results Demonstrate
Notebook Safety InterLab Study Measurement
Basic Parts Composite Parts Improved Parts
Modelling
Overview PDF-LA! Light Wait - 2-in-1 Sensor Light Wait - Peristaltic Pump Light Wait - Fermentation Chamber
Integrated Human Practices Education & Public Engagement Collaborative Report
Members Supervisors Sponsors Attributions Collaborations Gallery
Medals