(124 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
<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"> | ||
+ | <script> | ||
+ | document.addEventListener("touchstart", function(){}, true); | ||
+ | </script> | ||
<style> | <style> | ||
#globalWrapper { | #globalWrapper { | ||
Line 12: | Line 15: | ||
padding: 0; | padding: 0; | ||
position: relative; | position: relative; | ||
− | background: url( | + | background-color: #ffffff; |
+ | /*background: url(https://static.igem.org/mediawiki/2016/4/4e/T--IngenuityLab_Canada--il_nano_bg.jpg) no-repeat fixed center;*/ | ||
background-size: cover; | background-size: cover; | ||
font-size: 16px; | font-size: 16px; | ||
Line 22: | Line 26: | ||
#HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5 { | #HQ_page p, #HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5 { | ||
font-family: 'Titillium Web', helvetica, Arial, sans-serif !important; | font-family: 'Titillium Web', helvetica, Arial, sans-serif !important; | ||
+ | overflow: visible; | ||
} | } | ||
#HQ_page h1 { | #HQ_page h1 { | ||
color: #ce559f; | color: #ce559f; | ||
font-weight: 700; | font-weight: 700; | ||
− | font-size: | + | font-size: 2em; |
+ | line-height: 1em; | ||
} | } | ||
#HQ_page h2 { | #HQ_page h2 { | ||
Line 32: | Line 38: | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 1.6em; | font-size: 1.6em; | ||
− | margin: | + | margin: 1em 0 0; |
+ | line-height: 1.2em; | ||
} | } | ||
#HQ_page h3 { | #HQ_page h3 { | ||
Line 59: | Line 66: | ||
left: 0; | left: 0; | ||
} | } | ||
− | .firstHeading, .logo_2016 { | + | .firstHeading, .logo_2016, #toc { |
display: none; | display: none; | ||
} | } | ||
Line 100: | Line 107: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
− | .menu ul:hover { | + | .menu ul:hover, |
+ | .menu ul:focus, | ||
+ | .menu ul:active { | ||
color: #ffffff; | color: #ffffff; | ||
background-color: #405e88; | background-color: #405e88; | ||
} | } | ||
− | .menu ul:hover > li { | + | .menu ul:hover > li, |
+ | .menu ul:focus > li, | ||
+ | .menu ul:active > li { | ||
display: block; | display: block; | ||
} | } | ||
− | .menu ul li:hover { | + | .menu ul li:hover, |
+ | .menu ul li:focus, | ||
+ | .menu ul li:active { | ||
color: #ffffff; | color: #ffffff; | ||
background-color: #405e88; | background-color: #405e88; | ||
Line 119: | Line 132: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
− | .menu ul a:hover { | + | .menu ul a:hover, |
+ | .menu ul a:focus, | ||
+ | .menu ul a:active { | ||
color: #ffffff; | color: #ffffff; | ||
+ | } | ||
+ | element:hover, element:active { | ||
+ | -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
+ | -webkit-user-select: none; | ||
+ | -webkit-touch-callout: none | ||
} | } | ||
.main-image { | .main-image { | ||
+ | background: url(https://static.igem.org/mediawiki/2016/4/4e/T--IngenuityLab_Canada--il_nano_bg.jpg) no-repeat fixed center; | ||
+ | background-size: cover; | ||
text-align: center; | text-align: center; | ||
width: 100%; | width: 100%; | ||
− | padding: | + | padding: 45px 0 60px; |
+ | opacity:0; | ||
} | } | ||
.main-image img { | .main-image img { | ||
Line 146: | Line 169: | ||
background-color: #fff; | background-color: #fff; | ||
box-shadow: 0 0 10px rgba(0,0,0,0.3); | box-shadow: 0 0 10px rgba(0,0,0,0.3); | ||
− | padding-top: | + | padding-top: 20px; |
+ | } | ||
+ | .article-img { | ||
+ | margin: 0 auto; | ||
+ | max-width: 800px; | ||
+ | } | ||
+ | .article-cap { | ||
+ | font-family: Arial,Helvetica,sans-serif; | ||
+ | font-size: 0.9em; | ||
+ | line-height: 1.2em; | ||
+ | margin-top: 1em; | ||
+ | } | ||
+ | .members .article-img { | ||
+ | max-width: 500px; | ||
+ | width: 100%; | ||
+ | margin: 30px auto 0; | ||
+ | } | ||
+ | .members .article-cap { | ||
+ | text-align: center; | ||
} | } | ||
.il_header .wrapper { | .il_header .wrapper { | ||
Line 158: | Line 199: | ||
padding: 0.5em 2% 2em; | padding: 0.5em 2% 2em; | ||
max-width: 800px; | max-width: 800px; | ||
+ | } | ||
+ | #HQ_page .article .wrapper-title { | ||
+ | display: block; | ||
+ | max-width: 800px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | #HQ_page .article .wrapper-title h1 { | ||
+ | color: #405e88; | ||
+ | font-size: 2.2em; | ||
+ | margin-top: 0; | ||
} | } | ||
.article img { | .article img { | ||
Line 164: | Line 215: | ||
.members figure { | .members figure { | ||
margin: 5em 0 1em; | margin: 5em 0 1em; | ||
− | |||
− | |||
− | |||
} | } | ||
.members figcaption { | .members figcaption { | ||
Line 180: | Line 228: | ||
.members figure { | .members figure { | ||
margin: 5em 0 1em; | margin: 5em 0 1em; | ||
− | |||
− | |||
− | |||
} | } | ||
.members figcaption { | .members figcaption { | ||
Line 194: | Line 239: | ||
margin: 0 auto; | margin: 0 auto; | ||
max-width: 800px; | max-width: 800px; | ||
− | padding: 0 2% 0. | + | padding: 0 2% 0.89em; |
width: 100%; | width: 100%; | ||
} | } | ||
Line 209: | Line 254: | ||
float: left; | float: left; | ||
margin: 0 0 0 1px; | margin: 0 0 0 1px; | ||
− | padding: 0. | + | padding: 0.6em 1em; |
cursor: pointer; | cursor: pointer; | ||
} | } | ||
− | .buttons-tabs div:hover > em { | + | .buttons-tabs.protocols { |
+ | padding: 0 1em 2.4em; | ||
+ | } | ||
+ | .buttons-tabs div:hover > em, | ||
+ | .buttons-tabs div:focus > em, | ||
+ | .buttons-tabs div:active > em { | ||
color: #ff7000; | color: #ff7000; | ||
} | } | ||
Line 239: | Line 289: | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
height: 70px; | height: 70px; | ||
− | margin | + | margin: 60px 0 -20px; |
width: 100%; | width: 100%; | ||
} | } | ||
Line 250: | Line 300: | ||
border: 1px solid #dddddd; | border: 1px solid #dddddd; | ||
padding: 0.5em 1em; | padding: 0.5em 1em; | ||
+ | } | ||
+ | |||
+ | /* MEDIA QUERY */ | ||
+ | @media only screen and (max-width: 65em) { | ||
+ | .logo { | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 57.5em) { | ||
+ | .menu ul { | ||
+ | width: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 53.75em) { | ||
+ | .article .wrapper { | ||
+ | margin: 0 10px; | ||
+ | } | ||
+ | .buttons-tabs { | ||
+ | margin: 0 0 0 20px; | ||
+ | } | ||
+ | #HQ_page .article .wrapper-title h1 { | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 46.875em) { | ||
+ | .menu ul { | ||
+ | width: 75px; | ||
+ | } | ||
} | } | ||
</style> | </style> | ||
+ | |||
+ | <script> | ||
+ | document.addEventListener("DOMContentLoaded", function(){ | ||
+ | try{ | ||
+ | var pd_button_tab1 = document.getElementById("pd_button_tab1"); | ||
+ | var pd_tab1 = document.getElementById("pd_tab1"); | ||
+ | pd_button_tab1.addEventListener("click", function(){ pd_tab1.style.display = "block"; pd_tab2.style.display = "none"; pd_tab3.style.display = "none"; }); | ||
+ | } catch(e){} | ||
+ | try{ | ||
+ | var pd_button_tab2 = document.getElementById("pd_button_tab2"); | ||
+ | var pd_tab2 = document.getElementById("pd_tab2"); | ||
+ | pd_button_tab2.addEventListener("click", function(){ pd_tab1.style.display = "none"; pd_tab2.style.display = "block"; pd_tab3.style.display = "none"; }); | ||
+ | } catch(e){} | ||
+ | try{ | ||
+ | var pd_button_tab3 = document.getElementById("pd_button_tab3"); | ||
+ | var pd_tab3 = document.getElementById("pd_tab3"); | ||
+ | pd_button_tab3.addEventListener("click", function(){ pd_tab1.style.display = "none"; pd_tab2.style.display = "none"; pd_tab3.style.display = "block"; }); | ||
+ | } catch(e){} | ||
+ | |||
+ | var home; | ||
+ | try{ | ||
+ | home = document.getElementById("home"); | ||
+ | }catch(e){} | ||
+ | if(home){ | ||
+ | jQuery(".main-image").css({ opacity: 0 }); | ||
+ | jQuery(".main-image").animate({ opacity: 1 },500); | ||
+ | }else{ | ||
+ | jQuery(".main-image").css({ opacity: 0 }); | ||
+ | jQuery(".main-image").animate({ opacity: 1 },500,function(){ | ||
+ | setTimeout(function(){ jQuery("html, body").animate({ scrollTop: "575px" },800); }, 800); | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</head> | </head> | ||
Line 257: | Line 370: | ||
<div class="il_header"> | <div class="il_header"> | ||
<div class="wrapper"> | <div class="wrapper"> | ||
− | <div class="logo"><a href="http://ingenuitylab.ca"><img src=" | + | <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="menu"> | <div class="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/ | + | |
<ul>Project | <ul>Project | ||
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Results">Results</a></li> |
+ | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Protocols">Protocols</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li> | ||
</ul> | </ul> | ||
<ul>Practices | <ul>Practices | ||
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li> |
</ul> | </ul> | ||
<ul>Team | <ul>Team | ||
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li> |
− | <li><a href=" | + | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li> |
+ | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Blog">Blog</a></li> | ||
</ul> | </ul> | ||
− | + | <ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Achievements">Achievements</a></ul> | |
+ | <ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Safety">Safety</a></ul> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="contents"> | <div class="contents"> | ||
− | <div class="main-image"><div class="wrapper"><img src=" | + | <div class="main-image"><div class="wrapper"><img src="https://static.igem.org/mediawiki/2016/2/25/T--IngenuityLab_Canada--il_icons_img.jpg" /></div></div> |
− | + | <div class="article"> |
Latest revision as of 23:44, 19 October 2016
![](https://static.igem.org/mediawiki/2016/2/25/T--IngenuityLab_Canada--il_icons_img.jpg)