Difference between revisions of "Template:Team:IngenuityLab Canada"

 
Line 2: Line 2:
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
<title>Ingenuity Lab - dNANO</title>  
 
<title>Ingenuity Lab - dNANO</title>  
 
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700,900" rel="stylesheet">
Line 92: Line 91:
 
   padding: 0;
 
   padding: 0;
 
   text-align: center;
 
   text-align: center;
−
   width: 90px;
+
   width: 110px;
 
   cursor: pointer;
 
   cursor: pointer;
−
}
 
−
.menu ul:nth-child(5) {
 
−
width: 120px;
 
 
}
 
}
 
.menu ul li {
 
.menu ul li {
Line 304: Line 300:
 
border: 1px solid #dddddd;
 
border: 1px solid #dddddd;
 
padding: 0.5em 1em;  
 
padding: 0.5em 1em;  
−
}
 
−
 
−
#btn-mobile-menu {
 
−
display: none;
 
 
}
 
}
  
 
/* MEDIA QUERY */
 
/* MEDIA QUERY */
−
/* 1040 */
 
 
@media only screen and (max-width: 65em) {
 
@media only screen and (max-width: 65em) {
 
.logo {
 
.logo {
 
margin-left: 10px;
 
margin-left: 10px;
−
}
 
−
.contents {
 
−
width: 100%;
 
 
}
 
}
 
}
 
}
−
/* 920 */
 
 
@media only screen and (max-width: 57.5em) {
 
@media only screen and (max-width: 57.5em) {
 
.menu ul {
 
.menu ul {
Line 326: Line 313:
 
}
 
}
 
}
 
}
−
/* 860 */
 
 
@media only screen and (max-width: 53.75em) {
 
@media only screen and (max-width: 53.75em) {
 
.article .wrapper {
 
.article .wrapper {
Line 337: Line 323:
 
margin-left: 10px;
 
margin-left: 10px;
 
}
 
}
 +
}
 +
@media only screen and (max-width: 46.875em) {
 
.menu ul {
 
.menu ul {
 
width: 75px;
 
width: 75px;
−
}
 
−
}
 
−
/* 790 */
 
−
@media only screen and (max-width: 49.375em) {
 
−
.il_header {
 
−
height: 50px;
 
−
/* position: relative; */
 
−
}
 
−
.contents {
 
−
  margin-top: 0;
 
−
}
 
−
#btn-mobile-menu {
 
−
display: block;
 
−
float: right;
 
−
clear: right;
 
−
}
 
−
.main-image img {
 
−
width: 100%;
 
−
}
 
−
.menu {
 
−
  float: left;
 
−
  width: 100%;
 
−
  display: none;
 
−
}
 
−
.menu ul {
 
−
  border-top: 1px solid #cccccc;
 
−
  width: 100%;
 
−
  float: none;
 
−
  height: auto;
 
−
  line-height: 2.5em;
 
−
}
 
−
.menu ul:nth-child(5) {
 
−
  width: 100%;
 
−
}
 
−
.menu ul:last-child {
 
−
border-bottom: 1px solid #cccccc;
 
−
box-shadow: 0 5px 5px rgba(0,0,0,0.3);
 
−
}
 
−
.menu ul:hover {
 
−
  background-color: #ffffff;
 
−
  color: #405e88;
 
−
}
 
−
.menu ul li {
 
−
border-top: 1px solid #cccccc;
 
−
display: block;
 
−
    background-color: #eeeeee;
 
−
    width: 100%;
 
−
    height: 50px;
 
−
}
 
−
.menu ul li:last-child {
 
−
border-radius: 0;
 
−
}
 
−
.menu ul li:hover {
 
−
    background-color: #eeeeee;
 
−
    color: #405e88;
 
−
}
 
−
.menu ul a:hover {
 
−
    color: #405e88;
 
−
}
 
−
.menu ul:nth-child(4) li:nth-child(3) {
 
−
border-bottom: 1px solid #cccccc;
 
−
}
 
−
#btn-mobile-menu {
 
−
  color: #405e88;
 
−
  background: #eeeeee none repeat scroll 0 0;
 
−
  font-family: 'Titillium Web', Helvetica, Arial, sans-serif;
 
−
  font-weight: 600;
 
−
  font-size: 1.2em;
 
−
  clear: right;
 
−
  display: block;
 
−
  float: right;
 
−
  height: 50px;
 
−
  line-height: 2.8em;
 
−
  text-align: center;
 
−
  width: 24%;
 
−
  cursor: default;
 
−
}
 
−
.logo {
 
−
height: 50px;
 
−
margin-left: 2%;
 
−
width: 74%;
 
−
margin-top: 0;
 
−
}
 
−
.logo img {
 
−
max-width: 250px;
 
−
width: 98%;
 
−
margin-top: 4px;
 
−
}
 
−
.menu ul {
 
−
float: left;
 
−
width: 100%;
 
−
display: block;
 
−
clear: right;
 
−
line-height: 2em;
 
−
}
 
−
.menu ul li {
 
−
  border-right: 1px solid #cccccc;
 
−
  box-shadow: none;
 
−
  float: left;
 
−
  height: 35px;
 
−
  width: 50%;
 
−
  box-sizing: border-box;
 
−
}
 
−
.menu span, .menu a {
 
−
width: 100%;
 
−
display: block;
 
−
height: 35px;
 
−
line-height: 2em;
 
 
}
 
}
 
}
 
}
Line 482: Line 362:
 
});
 
});
 
}  
 
}  
−
 
−
// mobile menu on/off
 
−
var btnMobileMenu = document.getElementById("btn-mobile-menu");
 
−
var mainMenu = document.getElementById("main_menu");
 
−
btnMobileMenu.addEventListener("mousedown",function(){
 
−
if(mainMenu.style.display === "none"){
 
−
mainMenu.style.display = "block";
 
−
}else{
 
−
mainMenu.style.display = "none";
 
−
}
 
−
});
 
−
window.addEventListener('resize', function(){
 
−
console.log("window.innerWidth " + window.innerWidth);
 
−
if(window.innerWidth > 790){
 
−
mainMenu.style.display = "block";
 
−
btnMobileMenu.style.display = "none";
 
−
}else{
 
−
mainMenu.style.display = "none";
 
−
btnMobileMenu.style.display = "block";
 
−
}
 
−
}, true);
 
 
});
 
});
 
</script>
 
</script>
Line 512: Line 371:
 
<div class="wrapper">
 
<div class="wrapper">
 
<div class="logo"><a href="http://ingenuitylab.ca"><img src="https://static.igem.org/mediawiki/2016/8/87/T--IngenuityLab_Canada--il_logo_img.png" /></a></div>
 
<div class="logo"><a href="http://ingenuitylab.ca"><img src="https://static.igem.org/mediawiki/2016/8/87/T--IngenuityLab_Canada--il_logo_img.png" /></a></div>
−
                        <div id="btn-mobile-menu">MENU</div>
+
<div class="menu">
−
<div class="menu"  id="main_menu">
+
 
<ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul>
 
<ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul>
−
<ul onclick=""><span>Project</span>
+
<ul>Project
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li>
Line 522: Line 380:
 
                                                 <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li>
 
                                                 <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li>
 
</ul>
 
</ul>
−
<ul onclick=""><span>Practices</span>
+
<ul>Practices
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li>
 
</ul>
 
</ul>
−
<ul onclick=""><span>Team</span>
+
<ul>Team
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li>
 
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li>

Latest revision as of 23:44, 19 October 2016

Ingenuity Lab - dNANO