(139 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<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"> | ||
+ | <script> | ||
+ | document.addEventListener("touchstart", function(){}, true); | ||
+ | </script> | ||
<style> | <style> | ||
+ | #globalWrapper { | ||
+ | font-size: 100%; | ||
+ | } | ||
body { | body { | ||
margin: 0; | margin: 0; | ||
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; | ||
− | font-family: 'Titillium Web', | + | font-family: 'Titillium Web', Helvetica, Arial, sans-serif; |
} | } | ||
− | h1 { | + | #HQ_page { |
+ | font-size: 16px; | ||
+ | } | ||
+ | #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; | ||
+ | overflow: visible; | ||
+ | } | ||
+ | #HQ_page h1 { | ||
color: #ce559f; | color: #ce559f; | ||
font-weight: 700; | font-weight: 700; | ||
− | font-size: | + | font-size: 2em; |
+ | line-height: 1em; | ||
} | } | ||
− | h2 { | + | #HQ_page h2 { |
color: #405e88; | color: #405e88; | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 1.6em; | font-size: 1.6em; | ||
− | margin: | + | margin: 1em 0 0; |
+ | line-height: 1.2em; | ||
} | } | ||
− | h3 { | + | #HQ_page h3 { |
color: #595959; | color: #595959; | ||
margin: 1em 0 0; | margin: 1em 0 0; | ||
} | } | ||
− | ol h3 { | + | #HQ_page ol h3 { |
margin: 1em 0 0 -1.5em; | margin: 1em 0 0 -1.5em; | ||
} | } | ||
− | em { | + | #HQ_page em { |
color: #00c2f4; | color: #00c2f4; | ||
font-weight: 700; | font-weight: 700; | ||
Line 37: | Line 54: | ||
font-size: 1.2em; | font-size: 1.2em; | ||
} | } | ||
− | p { | + | #HQ_page p { |
font-size: 1.1em; | font-size: 1.1em; | ||
} | } | ||
− | . | + | .il_header { |
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); | ||
Line 46: | Line 63: | ||
height: 70px; | height: 70px; | ||
width: 100%; | width: 100%; | ||
− | top: 0; | + | top: 18px; |
+ | left: 0; | ||
+ | } | ||
+ | .firstHeading, .logo_2016, #toc { | ||
+ | display: none; | ||
} | } | ||
.logo { | .logo { | ||
Line 53: | Line 74: | ||
float: left; | float: left; | ||
} | } | ||
+ | #sideMenu { display: none; } | ||
.menu { | .menu { | ||
color: #405e88; | color: #405e88; | ||
Line 85: | 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 104: | 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 118: | Line 156: | ||
#content { | #content { | ||
background-color: rgba(0,0,0,0); | background-color: rgba(0,0,0,0); | ||
− | margin: 0 | + | margin: 0; |
+ | padding: 0; | ||
+ | width:100%; | ||
} | } | ||
.contents { | .contents { | ||
Line 129: | 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: | + | 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 { |
width: 100%; | width: 100%; | ||
max-width: 1020px; | max-width: 1020px; | ||
Line 141: | 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 147: | Line 215: | ||
.members figure { | .members figure { | ||
margin: 5em 0 1em; | margin: 5em 0 1em; | ||
− | |||
− | |||
− | |||
} | } | ||
.members figcaption { | .members figcaption { | ||
Line 163: | Line 228: | ||
.members figure { | .members figure { | ||
margin: 5em 0 1em; | margin: 5em 0 1em; | ||
− | |||
− | |||
− | |||
} | } | ||
.members figcaption { | .members figcaption { | ||
Line 177: | 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 192: | 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 222: | 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: 60px 0 -20px; | ||
width: 100%; | width: 100%; | ||
} | } | ||
Line 232: | 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> | ||
<body> | <body> | ||
− | <div class=" | + | <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=" | + | <ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul> |
− | + | ||
<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