Difference between revisions of "Template:NUS Singapore"

 
(276 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta charset="utf-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
</head>
 +
<script>
 +
 +
// This is the jquery part of your template. 
 +
// Try not modify any of this code too much since it makes your menu work.
 +
 +
$(document).ready(function() {
 +
 +
$("#HQ_page").attr('id','');
 +
 +
// call the functions that control the menu
 +
menu_functionality();
 +
hide_show_menu();
 +
 +
 +
 +
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
 +
 +
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
$(".menu_button").click(function(){
 +
 +
// add or remove the class "open" , this class holds the "-"
 +
$(this).children().toggleClass("open");
 +
// show or hide the submenu
 +
$(this).next('.submenu_wrapper').fadeToggle(400);
 +
});
 +
 +
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 +
$("#display_menu_control").click(function(){
 +
$('#menu_content').fadeToggle(400);
 +
});
 +
 +
// call the current page highlight function
 +
highlight_current_page();
 +
}
 +
 +
 +
// call the highlight current page function to show it on the menu with a different background color
 +
function highlight_current_page() {
 +
 +
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 +
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 +
 +
// now that the current_page class has been added to a menu item, make the submenu fade in
 +
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
// change the +/- symbol of the corresponding menu button
 +
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
 +
}
 +
 +
 +
 +
// allow button on the black menu bar to show/hide the side menu
 +
function hide_show_menu() {
 +
 +
// in case you preview mode is selected, the menu is hidden for better visibility
 +
if (window.location.href.indexOf("submit") >= 0) {
 +
$(".igem_2017_menu_wrapper").hide();
 +
}
 +
 +
// if the black menu bar has been loaded
 +
  if (document.getElementById('bars_item')) {
 +
 +
// when the "bars_item" has been clicked
 +
$("#bars_item").click(function() {
 +
$("#sideMenu").hide();
 +
 +
// show/hide the menu wrapper
 +
$(".igem_2017_menu_wrapper").fadeToggle("100");
 +
});
 +
  }
 +
 +
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 +
else {
 +
    setTimeout(hide_show_menu, 15);
 +
}
 +
}
 +
 +
 +
});
 +
 +
 +
</script>
 +
  
 
<style>
 
<style>
  
/*---------------------------------------
+
 
    Style.CSS       
+
 
-----------------------------------------*/
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
body {
+
/* Clear the default wiki settings */
background: #ffffff;
+
     
    font-family: 'Poppins', sans-serif;
+
#home_logo, #sideMenu { display:none; }
     font-style: normal;
+
#sideMenu, #top_title, .patrollink  {display:none;}
font-weight: 400;
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
/**************************************************************** MENU ***************************************************************/
 +
 
 +
 
 +
/********** Class for spliting different section = Clear content below while adds extra spacing when clearing content **********/
 +
.clear {
 +
     clear:both;
 +
    height: 50px;
 
}
 
}
  
 +
.clear-largespace{
 +
    clear:both;
 +
    height: 100px;
 +
}
  
/*---------------------------------------
+
/**********  Basic Content Class CSS Style  **********/
    Typorgraphy             
+
p {
-----------------------------------------*/
+
   font-family:"Montserrat", serif;
h1,h2,h3,h4,h5,h6 {
+
  font-size: 18px;
   font-weight: 600;
+
  line-height:150%;
   text-align:center
+
   text-align:justify;
 +
  color:#000000;
 
}
 
}
  
h3,h5 {
+
h1 {
   font-weight: 500;
+
  color: #b48608;
 +
  font-family: 'Bookman', serif;
 +
  font-size: 40px;
 +
  font-weight: 400;
 +
  line-height: 44px;
 +
  margin: 0 0 12px; 
 +
  text-align: center;
 +
  font-weight: 1500;
 +
  text-decoration: underline;
 +
  border-style: none;
 +
}
 +
 
 +
h2 {  
 +
  color: #2E86C1;
 +
  font-family:"Calibri", serif;
 +
  font-size: 30px;
 +
   font-weight: 200;
 +
  line-height: 44px;
 +
  margin: 0 0 12px; 
 +
  text-align: center;
 +
  font-weight: bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 
}
 
}
  
h1 {
+
#teamh2 {
    font-size: 40px;
+
  width:100%;
    letter-spacing: 2px;
+
  padding-left:0;
    text-align:center;
+
  padding-right:0;
 
}
 
}
  
h2 {
+
h3 {  
   font-size: 30px;
+
  color:#FAA403;
   text-transform: uppercase;
+
  font-family:"Calibri", serif;
 +
   font-size: 25px;
 +
  font-weight: 200;
 +
  line-height: 44px;
 +
  margin: 0 0 12px;  
 +
   text-align: left;
 +
  font-weight:bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 +
  }
 +
 
 +
h4 {
 +
  color:#b48608;
 +
  font-family:"Calibri", serif;
 +
  font-size: 20px;
 +
  font-weight: 180;
 +
  line-height: 44px;
 +
  margin: 0 0 12px;
 +
  text-align: center;
 +
  font-weight:bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 +
  }
 +
 
 +
.nus ul {
 +
  font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
  color:#000000;
 +
 
 
}
 
}
  
h3 {
+
.nus ol {
  line-height: 36px;
+
font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
        color:#000000;
 +
}
 +
.nus {
 +
font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
        color:#000000;
 
}
 
}
  
h5 {
+
ul.nus {
    letter-spacing: 1px;
+
  font-family:"Montserrat", serif;
    padding-top: 10px;
+
  font-size: 18px;
 +
  line-height:150%;
 +
  color:#000000;
 +
 
 
}
 
}
  
p {
+
ol.nus  {
    color: #707070;
+
font-family:"Montserrat", serif;
    font-size: 14px;
+
  font-size: 18px;
    line-height: 24px;
+
  line-height:150%;
 +
        color:#000000;
 +
}
 +
 
 +
 
 +
/******************  image description subline  ****************/
 +
#imgdescription {
 +
        font-size:15px;
 +
        width:60%;
 +
        padding-left:20%;
 +
        padding-right:20%;
 +
        font-style:oblique;
 +
        text-align:center;
 +
}
 +
 
 +
/******************  Reference  ****************/
 +
#Ref {
 +
        font-size:15px;
 
}
 
}
  
a {
+
/************************************************** Back to top button style **************************************************/
   text-decoration: none !important;
+
#BacktoTopBtn {
 +
   display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  border: none;
 
   outline: none;
 
   outline: none;
 +
  background-color: #F5B041;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 20px;
 
}
 
}
  
 +
#BacktoTopBtn:hover {
 +
  background-color: #2980B9;
 +
}
  
/*---------------------------------------
+
/************************************************** Top menu and Dropdown list **************************************************/
     General             
+
 
-----------------------------------------*/
+
.team-logo {
#overview {
+
     width:20%;
  padding-top: 8rem;
+
    height:140px;
  padding-bottom: 8rem;
+
    margin-left:20px;
 +
    padding-top:5px;
 +
    position:absolute;
 
}
 
}
  
#detail,
+
.topmenu-container {
#sponsors, footer {
+
    overflow: hidden;
     padding-top: 5rem;
+
    background-color: #F8F9F9;
     padding-bottom: 5rem;
+
     padding-top:100px;
 +
    margin:0;
 +
    }
 +
 
 +
.topmenu-container a {
 +
    float: right;
 +
    font-family:"Comic Sans MS", sans-serif;
 +
    font-size: 18px;
 +
    color: #566573;
 +
    text-align: center;
 +
     padding: 19px 16px;
 +
    text-decoration: none;
 +
    border: none;
 +
   
 
}
 
}
  
#detail, #sponsors,
+
.dropdown {
footer {
+
    float: right;
 +
    overflow: hidden;
 +
}
 +
 
 +
.dropdown  .dropbtn {
 +
    font-family:"Comic Sans MS", sans-serif;
 +
    font-size: 18px;
 +
    border: none;
 +
    text-align: center;
 +
    outline: none;
 +
    color:  #566573;
 +
    padding: 14px 16px;
 +
    background-color: inherit;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color:#FFFFFF;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 
 +
.dropdown-content a {
 +
    float: none;
 +
    color: #566573;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
/***************************************************    Hover effect of Top menu  ***************************************/
 +
.topmenucontainer a:hover, .dropdown:hover .dropbtn {
 +
    background-color: #AED6F1;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: inline-block;
 +
}
 +
 
 +
 
 +
/***************************  Social contact link *************************/
 +
.fa {
 +
  padding: 20px;
 +
  font-size: 30px;
 +
  width: 30px;
 
   text-align: center;
 
   text-align: center;
 +
  text-decoration: none;
 +
  border-radius: 50%;
 
}
 
}
  
#overview h3,
+
.fa:hover {
#detail h3,
+
     opacity: 0.7;
{
+
     padding-bottom: 6px;
+
 
}
 
}
  
#intro{
+
.fa-facebook {
    background: #f2545f;
+
  background: #3B5998;
    border-color: transparent;
+
  color: #FFFFFF;
 
}
 
}
.parallax-section {
+
 
   background-attachment: fixed !important;
+
.fa-instagram {
   background-size: cover !important;
+
   background: #125688;
  text-align:center;
+
   color: #FFFFFF;
 
}
 
}
  
 +
.fa-google {
 +
  background: #dd4b39;
 +
  color: #FFFFFF;
 +
}
  
/*---------------------------------------
+
/************************  Quick Link Footer  **************************/
    Intro section             
+
.quicklink p {
-----------------------------------------*/
+
background-color:#F0F3F4;  
#intro {
+
width:100%;
    background: url('https://static.igem.org/mediawiki/2017/2/27/NUS_IGEM_Logo.jpeg') 1% 0 repeat-y fixed;
+
text-align: center;
    -webkit-background-size: cover;
+
height:60px;
    background-size: cover;
+
padding:10px;
    background-position: center center;
+
margin:0px;
    color: #ffffff;
+
font-weight: bold;
    display: -webkit-box;
+
font-size: 20px;
    display: -webkit-flex;
+
}
    display: -ms-flexbox;
+
    display: flex;
+
    -webkit-box-align: center;
+
    -webkit-align-items: center;
+
      -ms-flex-align: center;
+
          align-items: center;
+
    height: 80vh;
+
  
 +
.quicklink-container {
 +
      background-color:#F0F3F4;
 +
      width:100%;
 +
      height:200px;
 +
      position:absolute;
 
}
 
}
 +
.quicklink-1 {
 +
background-color:#F0F3F4;
 +
width:25%;
 +
height:300px;
 +
padding-left:7%;
 +
padding-right:7%;
 +
position:relative;
 +
float:left;
 +
text-align: center;
 +
text-decoration: none;
  
#intro h3 {
+
}
  letter-spacing: 2px;
+
.quicklink-2 {
 +
background-color:#F0F3F4;
 +
width:25%;
 +
height:300px;
 +
padding-left:7%;
 +
padding-right:7%;
 +
position:relative;
 +
float:left;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
.quicklink-3 {
 +
background-color:#F0F3F4;
 +
width:25%;
 +
height:300px;
 +
padding-left:7%;
 +
padding-right:7%;
 +
position:relative;
 +
float:left;
 +
text-align: center;
 +
text-decoration: none;
 +
}
 +
.quicklink-4 {
 +
background-color:#F0F3F4;
 +
width:25%;
 +
height:300px;
 +
padding-left:7%;
 +
padding-right:7%;
 +
position:relative;
 +
float:left;
 +
text-align: center;
 +
text-decoration: none;
 
}
 
}
  
 +
.quicklink-4 a {
 +
        color:#808B96;
 +
          font-size:15px;
 +
}
 +
.quicklink-3 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
 +
.quicklink-2 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
 +
.quicklink-1 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
  
 +
/**************************************** Sponsor and Social Connact Link Cover  ****************************************/
 +
.footer-container{
 +
  width:100%;
 +
  height:300px;
 +
  background-color:#F0F3F4 ;
 +
  position:absolute;
 +
}
  
/*---------------------------------------
+
.footer-sponsor-container{
  Overview  section             
+
  width:70%; /*split the sponsor container from the full footer-container */
-----------------------------------------*/
+
   background-color:inherit;
#overview img {
+
padding:20px;
   position: relative;
+
   padding-top:30px;
   padding-bottom: 22px;
+
  float:left;
 
}
 
}
  
 +
.footer-contact-container{
 +
  width:30%; /*split the sponsor container from the full footer-container */
 +
  padding-top:20px;
 +
  background-color:inherit;
 +
  float:right;
 +
}
  
 +
img.social-icon {
 +
    margin:2%;
 +
    position:relative;
 +
    float:left;
  
/*---------------------------------------
 
    Detail section             
 
-----------------------------------------*/
 
#detail {
 
    background: #222;
 
    color: #ffffff;
 
 
}
 
}
  
#detail .fa {
+
 
   color: #f2545f;
+
/*Responsive Deisgn*/
   font-size: 48px;
+
 
 +
 
 +
/*********************  Responsive Design  *********************/
 +
 
 +
/*
 +
   ##Device = Tablets, Ipads (landscape)
 +
   ##Screen = B/w 768px to 1024px
 +
*/
 +
 
 +
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 +
 
 
}
 
}
  
/*---------------------------------------
+
/*  
   Sponsors section             
+
  ##Device = Most of the Smartphones Mobiles (Portrait)
-----------------------------------------*/
+
  ##Screen = B/w 320px to 479px
#sponsors img {
+
  ##Device = Tablets, Ipads (portrait)
   margin-top: 18px;
+
  ##Screen = B/w 768px to 1024px
 +
*/
 +
 
 +
@media (min-width: 0px) and (max-width: 1024px) {
 +
 
 +
/*Basics*/
 +
  p {
 +
      font-size: 13px;
 +
      }
 +
 
 +
.nus ul{
 +
  font-size: 10px;
 +
}
 +
 
 +
.nus ol {
 +
  font-size: 10px;
 +
}
 +
 
 +
ol.nus {
 +
  font-size: 10px;
 +
}
 +
 
 +
ul.nus {
 +
  font-size: 10px;
 +
}
 +
 
 +
.nus {
 +
  font-size: 10px;
 +
}
 +
 
 +
h1 {
 +
  font-size: 28px;
 +
}
 +
 
 +
h2 {
 +
  font-size: 20px;
 +
}
 +
 
 +
h3 {
 +
  font-size: 15px;
 +
}
 +
 
 +
#imgdescription {
 +
        font-size:8px;
 +
}
 +
 
 +
/*drop down menu*/
 +
.team-logo {
 +
      margin:0px;
 +
      width:100%;
 +
      height:200px;
 +
      position:relative;
 +
  }
 +
 
 +
  .topmenu-container {
 +
      padding:10px;
 +
      }
 +
 
 +
  .topmenu-container a{
 +
      font-size: 18px;
 +
      padding: 8px 5px;
 +
      font-weight:1000;
 +
  }
 +
 
 +
  .dropdown .dropbtn {
 +
      font-size: 18px;
 +
      padding: 7px 4px;
 +
      font-weight:1000;
 +
    display: inline-block; 
 +
  }
 +
 
 +
  .dropdown-content {
 +
    min-width: 10px;
 +
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
 +
    }
 +
 
 +
  .dropdown-content a{
 +
    padding: 8px;
 +
  }
 +
 
 +
.social-icon img {
 +
    width:25%;
 +
    display:block;
 +
    padding:5px;
 +
    position:relative;
 +
    float:left;
 +
  }
 +
 
 +
  #Ref {
 +
font-size:8px;
 +
   }
 +
 
 +
/******************  image description subline  ****************/
 +
#imgdescription {
 +
        font-size:8px;
 +
        width:80%;
 +
        padding-left:10%;
 +
        padding-right:10%;
 +
        font-style:oblique;
 +
        text-align:center;
 +
}
 +
 
 +
/************************************************** Back to top button style **************************************************/
 +
#BacktoTopBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 3px;
 +
  right: 5px;
 +
  z-index: 99;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #F5B041;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 5px;
 +
  border-radius: 20px;
 +
}
 +
 
 +
#BacktoTopBtn:hover {
 +
   background-color: #2980B9;
 
}
 
}
  
/*---------------------------------------
 
  Footer section           
 
-----------------------------------------*/
 
footer {
 
  background-attachment: fixed;
 
 
}
 
}
  
 
</style>
 
</style>
 +
 +
 +
 +
<!--******************************************  Here is where the main content starts ******************************************-->
 +
<body>
 +
 +
<!--  IGEM NUS LOGO  -->
 +
<div><a href="https://2017.igem.org/Team:NUS_Singapore" ><img class="team-logo" src="https://static.igem.org/mediawiki/2017/0/0c/NUS_2017_IGEM_Logo3.png"></a></div>
 +
 +
<!-- Top Menu -->
 +
<div class="topmenu-container">
 +
 +
<div class="dropdown">
 +
    <button class="dropbtn">Awards Check </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Measurement">Measurement</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Model">Modelling</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Medal Check List">Medal Check List</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
      <button class="dropbtn">Team</button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2017.igem.org/Team:NUS_Singapore/Team">Team Member</a>
 +
        <a href="https://2017.igem.org/Team:NUS_Singapore/Attributions">Attributions</a>
 +
      </div>
 +
  </div>
 +
 +
<div class="dropdown">
 +
    <button class="dropbtn">Collaboration</button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Collaborations">Collaboration</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
      <button class="dropbtn">Human Practice</button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2017.igem.org/Team:NUS_Singapore/HP/Silver">Silver Up</a>
 +
        <a href="https://2017.igem.org/Team:NUS_Singapore/HP/Gold_Integrated">Gold Integrated</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
    <button class="dropbtn">Modelling</button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Overview">Overview</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Methodology">Methodology</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Model_P">Kill Switch for Probiotics</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Model_B">Kill Switch for BeeT</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
    <button class="dropbtn">Projects</button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Description">Description</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/InterLab">Interlab Study</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Parts">Parts</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Experiments">Experiment</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Notebook">Documentation</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Improvement">Improvement</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Demonstrate">Demonstrate</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Safety">Safety</a>
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore/Future Work">Future Works</a>
 +
   
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
      <a href="https://2017.igem.org/Team:NUS_Singapore">Home</a>
 +
  </div>
 +
</div>
 +
 +
<!--***********************************************  Back to top button ***********************************************-->
 +
<button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button>
 +
 +
 +
<script>
 +
//**************************************** Back to top button Javascript ****************************************//
 +
// When the user scrolls down 50px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
 +
        document.getElementById("BacktoTopBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("BacktoTopBtn").style.display = "none";
 +
    }
 +
}
 +
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 +
 +
</body>
 +
</html>

Latest revision as of 16:54, 1 November 2017