Difference between revisions of "Template:Hong Kong-CUHK"

Line 1: Line 1:
−
 
 
<html>
 
<html>
  
−
<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.
  
−
  <!-- External scripts -->
+
$(document).ready(function() {
−
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'
+
−
rel='stylesheet' type='text/css'>
+
−
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
−
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
+
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
  
−
  <!-- Functionallity and behaviour JS -->
+
$("#HQ_page").attr('id','');
−
  <script>
+
  
−
    $(document).ready(function(){
+
// call the functions that control the menu
 +
menu_functionality();
 +
hide_show_menu();
  
−
      //Loading screen functionallity
 
−
      $('.loading').animate(
 
−
          {opacity:0},
 
−
          500,
 
−
          function(){
 
−
            $('.loading').attr("style", "display:none");
 
−
          }
 
−
      );
 
  
−
      //Height responsiveness
 
−
      $(window).resize(function() {
 
−
          wheight = $(window).height();
 
−
          $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;");
 
−
          $('.team-member-container').attr("style","height:"+wheight/2.7+"px;");
 
−
      });
 
  
−
      $(window).trigger('resize');
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
  
−
      //Menu moveto container on item click functionallity
+
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
−
      $('.menu-item').on('click', function(){
+
$(".menu_button").click(function(){
−
          $('.menu-item').removeClass('subselected');
+
−
          $(this).addClass('subselected');
+
−
          if($(this).attr("data")=="#top"){
+
−
              $('html, body').animate({
+
−
                  scrollTop: 0
+
−
              }, 1000);
+
−
          }else{
+
−
              $('html, body').animate({
+
−
                  scrollTop: $($(this).attr("data")).offset().top-70
+
−
              }, 1000);
+
−
          }
+
−
      });
+
  
−
      //Hover of team members
+
// add or remove the class "open" , this class holds the "-"  
−
      $('.team-member-container').on('mouseenter', function(){
+
$(this).children().toggleClass("open");
−
        $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');");
+
// show or hide the submenu
−
        $(this).on('mouseleave', function(){
+
$(this).next('.submenu_wrapper').fadeToggle(400);
−
          $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');");
+
});
−
        });
+
−
      });
+
  
−
    });
+
// when the screen size is smaller than 100px, the display_menu_control button appears and will show/hide the whole menu
−
   
+
$("#display_menu_control").click(function(){
−
  </script>
+
$('#menu_content').fadeToggle(400);
 +
});
  
−
  <style>
+
// call the current page highlight function
 +
highlight_current_page();
 +
}
  
  
−
#sideMenu, #top_title {display:none;}
+
// call the highlight current page function to show it on the menu with a different background color
−
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
+
function highlight_current_page() {
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  
 +
// 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");
  
−
    body,
+
// now that the current_page class has been added to a menu item, make the submenu fade in
−
    html{
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
−
      margin: 0;
+
// change the +/- symbol of the corresponding menu button
−
      padding:0;
+
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
−
      font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
+
−
    }
+
}
  
−
    /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
 
−
    .firstHeading{
 
−
      display:none;
 
−
    }
 
−
    #top-section{
 
−
      background:#48af5d;
 
−
      margin-left:0 !important;
 
−
      width:100%;
 
−
      left:0;
 
−
    }
 
  
  
−
    /* LOADING SCREEN */
+
// allow button on the black menu bar to show/hide the side menu
−
    .loading{
+
function hide_show_menu() {
−
      position:fixed;
+
−
      width:100%;
+
// in case you preview mode is selected, the menu is hidden for better visibility
−
      height:100%;
+
if (window.location.href.indexOf("submit") >= 0) {
−
      top:0;
+
$(".igem_2017_menu_wrapper").hide();
−
      left:0;
+
}
  
−
      z-index:5;
+
// if the black menu bar has been loaded
 +
  if (document.getElementById('bars_item')) {
  
−
      background-color:#555;
+
// when the "bars_item" has been clicked
−
      color:#fff;
+
$("#bars_item").click(function() {
−
      text-align: center;
+
$("#sideMenu").hide();
−
    }
+
−
    .loading p{
+
−
      position: relative;
+
−
      width:100%;
+
−
      height:10%;
+
−
      top:45%;
+
−
      left:0;
+
−
    }
+
  
−
    /* MENU STYLING */
+
// show/hide the menu wrapper
−
    .menu{
+
$(".igem_2017_menu_wrapper").fadeToggle("100");
−
      position:fixed;
+
});
−
      width:100%;
+
  }
−
      height:56px;
+
−
      top:14px;
+
−
      background-color: #47a3da;
+
  
−
      z-index:4;
+
// 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);
 +
}
 +
}
  
−
      border-collapse: collapse;
 
−
      text-align:center;
 
−
    }
 
−
    .menu tr td{
 
−
      text-align: center;
 
−
      vertical-align: middle;
 
  
−
      font-weight: 700;
+
});
−
      font-size:16px;
+
−
      color:#fff;
+
−
      width:7%;
+
−
    }
+
−
    .menu tr td.menu-item:hover{
+
−
      background-color:#258ecd;
+
−
      cursor: pointer;
+
−
    }
+
−
    .subselected{
+
−
      background-color: #258ecd;
+
−
    }
+
  
−
    /* CONTAINERS STYLING */
 
−
    .container{
 
−
      position:relative;
 
−
      width:100%;
 
−
      top:50px;
 
−
    }
 
−
    .container .subcontainer{
 
−
      position:absolute;
 
−
      width:95%;
 
−
      height:90%;
 
−
      top:5%;
 
−
      left:2.5%;
 
−
    }
 
−
    #top{
 
−
      background-size: cover;
 
−
   
 
−
      overflow:hidden;
 
−
    }
 
  
−
    /* TEAM MEMBERS CARDS STYLING */
+
</script>
−
    .team-member-container{
+
−
      position:relative;
+
−
      width:14%;
+
−
      margin-left:2.28%;
+
  
−
      float:left;
 
−
    }
 
−
    .team-member-container:hover{
 
−
      cursor:pointer;
 
−
    }
 
−
    .row2{
 
−
      top:4%;
 
−
    }
 
−
    .team-member-container .team-member-photo{
 
−
      position:relative;
 
−
      width:100%;
 
−
      height:85%;
 
−
      top:0;
 
−
      left:0;
 
−
      background-size: cover;
 
−
    }
 
−
    .team-member-container .team-member-footer{
 
−
      position:relative;
 
−
      width:100%;
 
−
      height:15%;
 
−
      top:0;
 
−
      left:0;
 
  
−
      border:none;
 
−
      border-collapse: collapse;
 
−
      background-color: #47a3da;
 
−
      color:#fff;
 
  
−
      text-align: center;
 
−
      vertical-align: middle;
 
−
    }
 
  
−
body {
 
−
    padding-top: 110px;
 
−
}
 
  
−
.center-block {
+
<style>
−
  display: block;
+
−
  margin-left: auto;
+
−
  margin-right: auto;
+
−
}
+
  
 +
 +
/**************************************************************** MENU ***************************************************************/
 +
/* Wrapper for the menu */
 +
.igem_2017_menu_wrapper {
 +
width: 0%;
 +
height:100vh;
 +
position:fixed;
 +
right:0%;
 +
padding:0px;
 +
float:right;
 +
border-left: 1px solid #d3d3d3;
 +
background-color:#dddddd;
 +
text-align:left;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
  
−
.navbar-fixed-top {
+
/* this hides the scrollbar to keep view consistency */
−
background: #fff;
+
.igem_2017_menu_wrappe::-webkit-scrollbar {  
−
filter: none !important;
+
display: none;  
−
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
}
−
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
−
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
+
−
        border-bottom: 1px solid rgba(0,0,0,0.2);
+
/* styling for links in the menu, removes the line under text */
 +
.igem_2017_menu_wrapper a { 
 +
text-decoration: none;  
 +
}
  
−
}
 
  
 +
/* styling for the images in the menu */
 +
.igem_2017_menu_wrapper img {
 +
width: 100%;
 +
}
  
−
.dropdown-submenu {
+
/* styling for the menu buttons */
−
    position: relative;
+
.igem_2017_menu_wrapper .menu_button {  
−
}
+
width: 100%;
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
font-weight: bold;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
  
−
.dropdown-submenu>.dropdown-menu {
 
−
    top: 0;
 
−
    left: 100%;
 
−
    margin-top: -6px;
 
−
    margin-left: -1px;
 
−
    -webkit-border-radius: 0 6px 6px 6px;
 
−
    -moz-border-radius: 0 6px 6px;
 
−
    border-radius: 0 6px 6px 6px;
 
−
}
 
  
−
.dropdown-submenu:hover>.dropdown-menu {
+
.igem_2017_menu_wrapper .menu_bottom_padding {  
−
    display: block;
+
width: 100%;
−
}
+
height: 30px;
 +
float:left;
 +
}
  
−
.dropdown-submenu>a:after {
+
.menu_button.direct_to_page {  
−
    display: block;
+
padding-left: 36px;
−
    content: " ";
+
}
−
    float: right;
+
−
    width: 0;
+
−
    height: 0;
+
−
    border-color: transparent;
+
−
    border-style: solid;
+
−
    border-width: 5px 0 5px 5px;
+
−
    border-left-color: #ccc;
+
−
    margin-top: 5px;
+
−
    margin-right: -10px;
+
−
}
+
  
−
.dropdown-submenu:hover>a:after {
 
−
    border-left-color: #fff;
 
−
}
 
  
−
.dropdown-submenu.pull-left {
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
−
    float: none;
+
width:10%;
−
}
+
float:left;
 +
}
  
−
.dropdown-submenu.pull-left>.dropdown-menu {
+
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
−
    left: -100%;
+
content: "+";
−
    margin-left: 10px;
+
}
−
    -webkit-border-radius: 6px 0 6px 6px;
+
−
    -moz-border-radius: 6px 0 6px 6px;
+
.open::before {
−
    border-radius: 6px 0 6px 6px;
+
content: "-" !important;
 +
}
 +
 +
 +
 +
/* styling for the menu buttons on hover */
 +
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
color:#ffffff;  
 +
}
  
 +
/* styling for the menu button when it is the current page */
 +
.current_page {
 +
background-color:#7fc1f7  !important;
 +
color:#5e5f5f !important;
 +
}
  
  
−
.faceBot{
+
/* styling for the submenu buttons */
−
  background: #202020;
+
.igem_2017_menu_wrapper .submenu_button {  
−
}
+
width: 100%;
 +
padding: 10px 0px 10px 34px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
  
−
@font-face {
+
/* wrapper for the submenu items, they are hidden by default*/
−
  font-family: 'Open Sans', Arial;;
+
.igem_2017_menu_wrapper .submenu_wrapper {  
−
}
+
display:none;
 +
}
  
−
body
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
−
{
+
.igem_2017_menu_wrapper #display_menu_control {
−
    font-family: 'Open Sans', Arial;
+
display:none;
−
}
+
text-align:center;
 +
}
  
−
ul.nav a{
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
  color: gray;
+
−
  background-color: transparent;
+
/* Clear the default wiki settings */
−
  height: 100%;
+
−
  position: relative;
+
#home_logo, #sideMenu { display:none; }
−
}
+
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#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; }
  
−
ul.nav a:hover{
+
−
  color: gray;
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
−
  background-color: transparent;
+
−
  height: 100%;
+
−
  position: relative;
+
−
}
+
  
−
h2 {
+
/* Wrapper for the content */
−
  color:green;
+
.igem_2017_content_wrapper {
−
}
+
width: 81%;
 +
margin: 2%;
 +
display:block;
 +
float:left;
 +
background-color:white;  
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
  
−
h4 {
 
−
    font-weight: bold;
 
−
}
 
  
−
.menu-item{
 
−
  height: 75px;
 
−
}
 
  
−
li.menu-item{
 
−
  background: transparent !important;
 
−
}
 
  
  
 +
/********************************* HTML STYLING  *********************************/
  
−
.green-effect{
+
/* styling for the titles h1 h2 */
−
  display: none;
+
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
−
  background-color: #4AAF51;
+
padding:5px 15px;  
−
  opacity: 1;
+
border-bottom: 0px;  
−
  color: #FFF;
+
color: #3399ff;
−
  transition-property: all;
+
}
−
  transition-duration: 0.3s;
+
−
  transition-timing-function: ease-out;
+
−
  transition-delay: 0s;
+
−
  border-color: #288D30;
+
−
  position: absolute;
+
−
  bottom: 0px;
+
−
  width: 100%;
+
−
  height: 2px;
+
−
  right: 0px;
+
−
}
+
  
−
.logo {
 
−
margin-top: 100px;
 
  
−
}
+
/* styling for the titles  h3 h4 h5 h6*/
 +
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000; 
 +
}
  
−
a:hover .green-effect{
 
−
  display: inherit;
 
−
}
 
  
−
.invertir:hover {
+
/* font and text */
−
  -webkit-filter: invert(100%);
+
.igem_2017_content_wrapper p {  
−
}
+
padding: 0px 15px;
 +
font-size: 13px;
 +
}
  
−
dropdown-toggle {
+
/* Links */
−
width: 10%;
+
.igem_2017_content_wrapper a {  
 +
font-weight: bold;  
 +
text-decoration: underline;
 +
text-decoration-color: #3399ff;
 +
color:  #3399ff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
  
 +
/* hover for the links */
 +
.igem_2017_content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
  
−
 
+
/* non numbered lists */
−
}
+
.igem_2017_content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
  
 +
/* numbered lists */
 +
.igem_2017_content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
  
−
</style>
+
/* Table */
 +
.igem_2017_content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
  
 +
/* table cells */
 +
.igem_2017_content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
  
−
</head>
+
/* table headers */
 +
.igem_2017_content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
  
−
<body>
 
  
 +
/**********************************LAYOUT CLASSES **********************************/
  
−
<div class="navbar navbar-fixed-top" style="margin-top:15px">
+
/* general class for column divs */
−
  <nav class="navbar-inner">
+
.igem_2017_content_wrapper .column  {
−
 
+
padding: 10px 0px;
−
  <div class="row-sm-height">
+
float:left;
−
 
+
}
−
  <div class="col-sm-2"><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/"><img class="logo" src="https://static.igem.org/mediawiki/2017/c/cf/CUHKteamlogo.jpg" height="60"  width="auto" ></a></div>
+
  
 +
/* class for a full width column */
 +
.column .full_size {
 +
width:100%;
 +
}
  
 +
/* styling for images in a full width column*/
 +
.column.full_size img {
 +
width:97%;
 +
padding: 10px 15px;
 +
}
  
 +
/* class for a half width column */
 +
.column.half_size {
 +
width: 50%;
 +
}
 +
/* styling for images in a half width column*/
 +
.column.half_size img {
 +
width: 94.5%;
 +
padding: 10px 15px;
 +
}
  
  
−
 
  
−
  <div class="col-md-10" >
 
−
      <ul class="nav navbar-nav" style="margin-top:10px">
 
−
    <li>
 
−
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
  
−
                Team<b class="caret"></b>           
+
/********************************* SUPPORT CLASSES ********************************/
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Team">About Us </a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Attributions">Attributions </a></li>
+
−
                   
+
−
                    </ul>
+
−
                </li>
+
  
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 +
}
 +
 +
 +
/* adds extra spacing when clearing content */
 +
.igem_2017_content_wrapper  .clear.extra_space {
 +
height: 30px;
 +
}
  
  
−
<li>
+
/* highlight class, makes content slightly smaller */
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
.igem_2017_content_wrapper .highlight {
−
                    <ul class="dropdown-menu multi-level"  >
+
margin: 0px 15px;
−
+
padding: 15px 0px;
−
<li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Project">Project</a></li>
+
}
−
<li class="divider"></li>
+
−
              <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Description">Description</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Experiments">Experiments</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Results">Results</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Notebook">Notebook</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Interlab">Interlab</a></li>
+
−
<li><a href=" https://2017.igem.org/Team:Hong_Kong-CUHK/Protocols">Protocols</a></li>
+
−
                    </ul>
+
  
  
−
                </li>
+
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 +
}
  
 +
/* highlight with decoration blue line on top */
 +
.igem_2017_content_wrapper .highlight.blue_top {
 +
    border-top: 4px solid #3399ff;
 +
}
  
 +
/* highlight with a full blue border decoration */
 +
.igem_2017_content_wrapper .highlight.blue_border {
 +
    border: 4px solid  #3399ff;
 +
}
  
  
 +
/* button class */
 +
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #ffffff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
  
−
     
+
/* styling for button on hover */
 +
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 +
    color: #000000;
 +
}
  
  
−
        <li>
 
−
    <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Human_Practices" class="dropdown-toggle" data-toggle="dropdown">
 
  
−
                Human Practices<b class="caret"></b>           
 
−
</a>
 
−
                    <ul class="dropdown-menu multi-level">
 
−
<li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Human_Practices">Human Practices - Summary</a></li>
 
−
<li class="divider"></li>
 
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Integrated_Practices">Integrated Human Practices</a></li>
 
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Engagement">Outreach</a></li>
 
−
<li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/">Theory of Knowledge</a></li>
 
−
                     
 
−
                    </ul>
 
−
                </li>
 
  
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
  
−
        <li class="menu-item">
+
/* IF THE SCREEN IS LESS THAN 1200PX */
−
          <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Collaboration">
+
@media only screen and (max-width: 1200px) {
−
            <span>Collaboration</span>
+
−
            <span class="green-effect"></span>
+
−
          </a>
+
−
</li>
+
  
−
   
+
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
  
−
+
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
  
−
                <li>
+
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
−
             
+
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size  {width:100%; }
 +
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
.highlight {padding:15px 5px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
#menu_content { display:none;}
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 +
}
  
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
  
−
                Modelling <b class="caret"></b>           
+
−
</a>
+
−
                    <ul class="dropdown-menu multi-level">
+
/* special class that the system uses to make sure the team wants a page to be evaluated */
−
                          <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Model">Modelling - Home</a></li>
+
.judges-will-not-evaluate {
−
<li class="divider"></li>
+
    width: 96.6%;
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/ProteinModel1">Protein Modelling <br> Etnr1</a></li>
+
  margin: 5px 15px;
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/oteinModel2">Protein Modelling <br> Etnr2</a></li>
+
  display: block;
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/InternalCellular">Internal Cellular Model</a></li>
+
border: 4px solid #3399ff;
−
                       
+
    font-weight: bold;
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/MacroscopicDiffusion">Macroscopic Diffusion Model</a></li>
+
}
−
                     
+
−
                     
+
</style>
−
                    </ul>
+
−
                </li>
+
  
−
      <li>
 
  
−
  <li>
+
<!--- THIS IS WHERE THE HTML BEGINS --->
−
             
+
  
−
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
  
−
                Software <b class="caret"></b>           
 
−
</a>
 
−
                    <ul class="dropdown-menu multi-level">
 
−
                      <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Software">Software - Home</a></li>
 
−
<li class="divider"></li>
 
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Primers">Primer Design App</a></li>
 
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/SmartPhone">SmartPhone App </a></li>
 
−
                     
 
−
                     
 
−
                     
 
−
                    </ul>
 
−
                </li>
 
  
−
  <li>
+
<head>  
−
    <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Achievements" class="dropdown-toggle" data-toggle="dropdown">
+
  
−
                Achievements<b class="caret"></b>           
+
<!-- This tells the browser that your page is responsive -->
−
</a>
+
<meta name="viewport" content="width=device-width, initial-scale=1">  
−
                    <ul class="dropdown-menu multi-level">
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Parts"> Parts</a></li>
+
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Medals">Medals</a></li>
+
  
−
                   
+
</head>
−
                    </ul>
+
−
                </li>
+
  
  
  
−
      </ul>
 
−
</div>
 
−
  </nav>
 
−
</div>
 
  
  
−
<html>
+
 
 +
<!-- start of content -->
 +
<div class="igem_2017_content_wrapper">

Revision as of 07:19, 5 August 2017