Difference between revisions of "Template:Marburg"

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
+
<html lang="en">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
 
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<style>
+
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:Marburg/style?action=raw&ctype=text/css" />
/*        DEFAULT OVERRIDES                */
+
<script type="text/javascript" src="https://2018.igem.org/Template:Marburg/javascript?action=raw&ctype=text/javascript"></script>
#top_title {
+
display:none;
+
}
+
html {
+
height:100%;
+
}
+
body {
+
height:100%;
+
background-color: white;
+
}
+
ul{
+
list-style-type:none;
+
list-style-image:none;
+
line-height: unset;
+
}
+
li {
+
margin-bottom: 0 !important;
+
}
+
#globalWrapper {
+
height:100%;
+
padding:0;
+
}
+
#content {
+
position:absolute;
+
top:18px;
+
height:calc(100% - 18px);
+
width:100%;
+
margin:0;
+
padding:0;
+
}
+
#HQ_page {
+
height:100%;
+
}
+
#HQ_page h1, h2, h3, h4, h5, h6 {
+
font-family: unset;
+
}
+
h1 { font-size: 2em; }
+
h2 { font-size: 1.5em; }
+
h3 { font-size: 1.17em; }
+
h4 { font-size: 1.12em; }
+
h5 { font-size: .83em; }
+
h6 { font-size: .75em; }
+
#HQ_page p {
+
margin-top:18px;
+
margin-bottom:18px;
+
border: 0;
+
font-size: 100%;
+
font: inherit;
+
}
+
#bodyContent {
+
height:100%;
+
}
+
#mw-content-text {
+
position:absolute;
+
top:0;
+
height:100%;
+
width:100%;
+
font-family: Roboto;
+
line-height: normal;
+
}
+
#mw-content-text ul {
+
margin:0;
+
}
+
a {
+
text-decoration: none;
+
padding-right: 0px !important;
+
}
+
a:hover {
+
text-decoration: none;
+
}
+
#canvas {
+
position: fixed;
+
top:0;
+
left:0;
+
z-index:-1;
+
}
+
/* - - - - - - -  HEADER - - - - - - - */
+
header {
+
position: fixed;
+
top:18px;
+
min-width: 300px;
+
width: 100%;
+
height: 80px;
+
line-height: 80px;
+
font-size: 18px;
+
text-align: center;
+
background-color:rgba(170,170,170,0.9);
+
box-shadow: 0 0 50px 0 rgba(0,0,0,0.35);
+
text-align: center;
+
z-index: 10;
+
transition: height 0.5s ease-in-out, line-height 0.5s ease-in-out, font-size 0.5s ease-in-out;
+
}
+
.header_wrapper {
+
display: inline-block;
+
height: 100%;
+
text-align: left;
+
}
+
.shrink {
+
height: 60px;
+
line-height: 60px;
+
font-size: 16px;
+
}
+
.header_logo {
+
position: absolute;
+
height: 100%;
+
color:white;
+
font-weight: bold;
+
font-size:32px;
+
animation: logo_fadeIn 1.0s ease-in-out;
+
z-index: 1;
+
}
+
.burger {
+
display: none;
+
position: absolute;
+
width: 23px;
+
height: 23px;
+
  top: calc(100% / 2 - 11.5px);
+
left: 15px;
+
opacity: 0.65;
+
background-repeat: no-repeat;
+
background-size: contain;
+
background-position: center;
+
background-image: url(img/burger.svg);
+
cursor:pointer;
+
}
+
  
.menu_wrapper {
 
opacity: 1;
 
animation: menu_fadeIn 1s ease-in-out;
 
}
 
 
@keyframes logo_fadeIn { from { opacity: 0; margin-left: -50px; } to { opacity: 1; margin-left: 0px; }}
 
@keyframes menu_fadeIn { from { opacity: 0; } to { opacity: 1.0; } }
 
/* - - - - - - -  DROP DOWN - - - - - - - */
 
 
.menu {
 
position: relative;
 
margin: 0;
 
padding: 0;
 
height: 100%;
 
font-weight: bold;
 
}
 
.menu::before {
 
float:left;
 
position: relative;
 
content:"";
 
width: 250px;
 
height: 100px;
 
}
 
/* Button */
 
.menu li {
 
position: relative;
 
float: left;
 
height: 100%;
 
list-style-type: none;
 
transition: background-color 0.2s ease-in-out;
 
}
 
.menu li a {
 
display: block;
 
color:#3b3b3b;
 
  text-decoration: none;
 
padding: 0 15px 0 15px !important;
 
}
 
.menu li:hover {
 
background-color: rgba(165,255,55,0.5);
 
 
}
 
 
.menu li:focus-within ul {
 
visibility: visible;
 
  max-height: 700px;
 
opacity: 1.0;
 
}
 
.menu li:hover ul {
 
visibility: visible;
 
  max-height: 700px;
 
opacity: 1.0;
 
}
 
 
/* Container */
 
.menu li ul {
 
visibility: hidden;
 
max-height: 0;
 
opacity: 0.0;
 
font-weight: normal;
 
position: absolute;
 
left:0;
 
padding:0;
 
background-color: rgba(200,200,200, 0.87);
 
text-align: left;
 
overflow:hidden;
 
box-shadow: 0px 9px 20px 0px rgba(0,0,0,0.2), inset 0px 35px 45px -35px rgba(0,0,0,0.5);
 
transition: all 0.3s ease-in-out;
 
}
 
 
/* Element */
 
.menu li ul li {
 
display: block;
 
padding: 0;
 
width: 100%;
 
min-width: 250px;
 
line-height: 55px;
 
white-space: nowrap;
 
}
 
.menu li ul li:hover {
 
background-color:unset;
 
}
 
.menu li ul li a {
 
transition: background-color 0.17s ease-in-out;
 
}
 
.menu li ul li a:hover {
 
background-color: rgba(165,255,55,0.5);
 
}
 
 
/* - - - - - - -  MAIN - - - - - - - */
 
main {
 
width: 100%;
 
min-height: 100%;
 
}
 
/*
 
main h1,h2,h3,h4,h5,h6 {
 
  font-weight: normal;
 
  font-style: normal;
 
}*/
 
 
article {
 
max-width: 900px;
 
margin: 120px auto 120px auto;
 
font-size: 1.9em;
 
padding: 10px;
 
}
 
 
section:first-child {
 
 
}
 
 
section {
 
width: 100%;margin-top: 190px;
 
text-align: center;
 
}
 
 
section:not(:last-child) {
 
border-bottom:10px solid rgb(220,220,220);
 
}
 
.m_wrapper {
 
max-width: 900px;
 
display:inline-block;
 
}
 
.m_logo {
 
position: relative;
 
width: 100%;
 
height: 0;
 
padding-bottom: 57%;
 
margin-left: auto;
 
margin-right: auto;
 
margin-top: -80px;
 
margin-bottom: 50px;
 
background-position: center;
 
background-size: 100%;
 
background-repeat: no-repeat;
 
background-image: url(https://static.igem.org/mediawiki/2018/b/b5/T--Marburg--m_logo.png);
 
  animation: ml_fadeIn 1.5s ease-in-out;
 
text-align: center;
 
}
 
 
.m_team {
 
background-position: center;
 
width: 100%;
 
height: 0;
 
padding-bottom:71%;
 
border-radius: 30px 30px 30px 30px;
 
background-size: 100%;
 
background-repeat: no-repeat;
 
background-image: url(https://static.igem.org/mediawiki/2018/b/b4/T--Marburg--team_0.png);
 
animation: ml_fadeIn 1.0s ease-in-out;
 
}
 
@keyframes ml_fadeIn { from { opacity: 0; } to { opacity: 1; }}
 
 
.m_txt {
 
display: inline-block;
 
width: calc(100% - 20px);
 
font-size: 24px;
 
text-align: left;
 
margin-bottom: 40px;
 
padding:10px;
 
}
 
 
/* - - - - - - -  SCROLL - - - - - - - */
 
.btn_scroll_top {
 
position: fixed;
 
font-weight: bold;
 
color:darkgray;
 
width: 45px;
 
height: 45px;
 
right: 40px;
 
bottom: 115px;
 
background-image: url("img/icon/scroll_up.png");
 
background-position: center;
 
background-size: contain;
 
cursor:pointer;
 
transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
 
transition-timing-function: ease-in-out;
 
z-index: 10;
 
}
 
 
.btn_scroll_enabled {
 
opacity: 0.5;
 
visibility: visible;
 
transform: translateY(10px);
 
}
 
.btn_scroll_enabled:hover {
 
opacity: 0.35;
 
transform:scale(1.05) translateY(10px);
 
}
 
.btn_scroll_disabled {
 
opacity: 0;
 
visibility: hidden;
 
transform: translateY(-10px);
 
}
 
 
/* - - - - - - -  FOOTER - - - - - - - */
 
footer {
 
width: 100%;
 
height: 100px;
 
background-color:rgb(180,180,180);
 
margin-bottom: -19px;
 
text-align: center;
 
}
 
.footer_wrapper {
 
position: relative;
 
display:inline-block;
 
  max-width: 900px;
 
height: 100px;
 
margin-bottom: -4px;
 
text-align: left;
 
}
 
.footer_social {
 
float:right;
 
}
 
footer img {
 
float:left;
 
width: 50px;
 
opacity: 0.5;
 
margin: 27px 8px 0 8px;
 
transition: all 0.2s ease-in-out;
 
}
 
footer img:hover {
 
margin: 22px 8px 0 8px;
 
opacity: 1.0;
 
}
 
 
/* - - - - - - -  MOBILE - - - - - - - */
 
@media only screen and (max-width: 1100px) {
 
.menu::before {
 
content: unset;
 
}
 
.menu {
 
display: inline-block;
 
margin: 0 0 0 0;
 
height: unset;
 
}
 
.menu li {
 
width: 100%;
 
}
 
.menu >li>a{
 
background-color: rgba(150,150,150, 0.9);
 
    line-height: 2.85em;
 
}
 
.menu>li>ul{}
 
.menu >li>a{
 
background-color: rgba(150,150,150, 0.9);
 
    line-height: 2.85em;
 
}
 
.menu li ul {
 
position: relative;
 
visibility: visible;
 
max-height: unset;
 
box-shadow: none;
 
opacity: 1.0;
 
}
 
.menu li ul a {
 
line-height: 2.5em;
 
}
 
.menu li:hover {
 
background-color: unset;
 
}
 
.menu li ul li a:hover {
 
background-color:unset;
 
}
 
.menu_wrapper {
 
display: none;
 
position: absolute;
 
left:0;
 
top:40px;
 
height: calc(100vh - 40px);
 
width: 100%;
 
overflow-y: auto;
 
font-size:1.1em;
 
animation: none;
 
}
 
  header {
 
height: 40px;
 
}
 
.header_logo {
 
transform: translateX(-50%);
 
font-size:27px;
 
line-height: 40px;
 
}
 
.header_logo {
 
animation: none;
 
top:0;
 
left:50%;
 
}
 
.header_wrapper {
 
width: 100%;
 
}
 
}
 
/* - - - - - - - - - - - - - - - */
 
 
</style>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
// MOBILE
 
var mobile = false;
 
var burger = $(".burger");
 
var header = $("header");
 
var menu = $(".menu_wrapper");
 
 
const media = window.matchMedia("(max-width: 1100px)");
 
if(media.matches){
 
burger.show();
 
mobile = true;
 
}
 
 
media.addListener(function(e){
 
if (e.matches) {
 
burger.show();
 
mobile = true;
 
ResetParallax();
 
$(header).removeClass("shrink");
 
if(menu.is(":visible")) menu.hide();
 
} else {
 
burger.hide();
 
mobile = false;
 
if(!menu.is(":visible")) menu.show();
 
else $('body').css('overflow-y', 'auto');
 
}
 
});
 
 
$(window).resize(function(){
 
    if(!mobile){
 
    Update($(document).scrollTop());
 
    }
 
});
 
 
burger.click(function(){
 
if(menu.is(":visible")){
 
menu.hide();
 
$('body').css('overflow-y', 'auto');
 
} else {
 
$('body').css('overflow-y', 'hidden');
 
menu.show().css("display", "inline-block");
 
}
 
});
 
 
// SCROLL STUFF
 
var btn_scroll = $(".btn_scroll_top");
 
var btn_scroll_visible = false;
 
$(btn_scroll).click(function(e){
 
    $('html, body').stop().animate({ scrollTop: 0 }, 500);
 
    e.preventDefault();
 
});
 
 
 
var isScrolling = false;
 
var lastY = -1;
 
 
$(window).scroll(function() { isScrolling = true; });
 
 
window.requestAnimationFrame(Render);
 
function Render(){
 
    var y = $(document).scrollTop();
 
    if(lastY != y && isScrolling){
 
        lastY = y;
 
        isScrolling = false;
 
        Update(lastY);
 
    }
 
    window.requestAnimationFrame(Render);
 
}
 
/*for(var i = 0; i < sections.length; i++){
 
var section = sections[i];
 
section.hole.element = $("#hole_"+i);
 
for(var j = 0; j < 5; j++){
 
var layer = $("#layer_"+i+"_"+j);
 
layer.css({'background-image':'url('+'img/layers/1/'+(4-j)+'.png)'});
 
section.hole.layers.push({element:layer});
 
}
 
}*/
 
// init cutout elements
 
var cutouts = [];
 
 
$(".cutout").each(function(index) {
 
  var cutout = {element:$(this), inside:false, dir:$(this).attr('dir'), aspect:$(this).attr('aspect'), layers:[], offset:$(this).attr('offset')};
 
  $(this).children('.layer').each(function(i) {
 
  $(this).css({'background-image':'url('+'img/layers/'+cutout.dir+'/'+(i)+'.png)'});
 
    cutout.layers.push({element:$(this)});
 
});
 
cutout.element.css({"padding-bottom":(cutout.aspect*100)+"%"});
 
cutouts.push(cutout);
 
});
 
 
// header state
 
var shrinkHeader = true;
 
 
// parallax backgrounds
 
//var logoWrapper = $(".logo_wrapper");
 
 
function ResetParallax(){
 
for(var i = 0; i < cutouts.length; i++){
 
var cutout = cutouts[i];
 
cutout.element.find('img').removeClass("select");
 
for(var j = 0; j < cutout.layers.length-1; j++){
 
var layer = cutout.layers[j];
 
layer.element.css({"transform":"translateY(0px)"});
 
}
 
}
 
}
 
 
function Update(y){
 
if(lastY > 400){
 
if(!btn_scroll_visible){
 
btn_scroll.removeClass('btn_scroll_disabled').addClass('btn_scroll_enabled');
 
btn_scroll_visible = true;
 
}
 
} else {
 
if(btn_scroll_visible){
 
btn_scroll.removeClass('btn_scroll_enabled').addClass('btn_scroll_disabled');
 
btn_scroll_visible = false;
 
}
 
}
 
 
if(!mobile && lastY < 612){
 
//logoWrapper.css({'background-position':'center '+y*0.2+'px'});
 
}
 
 
if(y > 0 && !mobile){
 
    if(shrinkHeader){
 
shrinkHeader = false;
 
    $(header).addClass("shrink");
 
}
 
}
 
else {
 
shrinkHeader = true;
 
$(header).removeClass("shrink");
 
}
 
var mid = y + window.innerHeight / 2;
 
for(var i = 0; i < cutouts.length; i++){
 
var cutout = cutouts[i];
 
if(isVisible(cutout.element)){
 
var pos = cutout.element.position();
 
if(mid > pos.top && mid < (pos.top + cutout.element.outerHeight())){
 
if(!cutout.inside){
 
cutout.element.find('img').addClass("select");
 
cutout.inside = true;
 
}
 
} else {
 
if(cutout.inside){
 
cutout.element.find('img').removeClass("select");
 
cutout.inside = false;
 
}
 
}
 
if(!mobile){
 
for(var j = 0; j < cutout.layers.length-1; j++){
 
var layer = cutout.layers[j];
 
var scale = layer.element.outerHeight() / 951.5;
 
var strength = 1-((j-1) / 5.0);
 
var _y = ((y+cutout.offset*scale)*0.2) * strength;
 
layer.element.css({"transform":"translateY("+_y+"px)"});
 
}
 
}
 
}
 
}
 
}
 
 
function isVisible(e){
 
var etop = e.offset().top;
 
var ebottom = etop + e.outerHeight();
 
var vbottom = lastY + $(window).height();
 
return ebottom > lastY && etop < vbottom;
 
}
 
 
});
 
</script>
 
 
<header>
 
<header>
 
<div class="header_wrapper">
 
<div class="header_wrapper">
<a href="#" class="header_logo">
+
<a href="https://2018.igem.org/Team:Marburg" class="header_logo">
<span style="color:#3b3b3b">VIBRI</span><span style="color:rgb(155,255,0)">GENS</span>
+
<img src="https://static.igem.org/mediawiki/2018/3/3f/T--Marburg--header_logo.svg">
 
</a>
 
</a>
 
<div class="burger"></div>
 
<div class="burger"></div>
Line 608: Line 17:
 
<li><a href="/Team:Marburg/Team">Team</a></li>
 
<li><a href="/Team:Marburg/Team">Team</a></li>
 
<li><a href="/Team:Marburg/Collaborations">Collaborations</a></li>
 
<li><a href="/Team:Marburg/Collaborations">Collaborations</a></li>
 +
<li><a href="/Team:Marburg/Attributions">Attributions</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 620: Line 30:
 
<li><a href="/Team:Marburg/Results">Results</a></li>
 
<li><a href="/Team:Marburg/Results">Results</a></li>
 
<li><a href="/Team:Marburg/Demonstrate">Demonstrate</a></li>
 
<li><a href="/Team:Marburg/Demonstrate">Demonstrate</a></li>
<li><a href="/Team:Marburg/Improve">Improve</a></li>
+
<li><a href="/Team:Marburg/Measurement">Measurement</a></li>
<li><a href="/Team:Marburg/Attributions">Attributions</a></li>
+
<li><a href="/Team:Marburg/Labautomation">Labautomation</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 627: Line 37:
 
<li><a href="#">Parts ▾</a>
 
<li><a href="#">Parts ▾</a>
 
<ul>
 
<ul>
<li><a href="/Team:Marburg/Parts">Parts</a></li>
+
<li><a href="/Team:Marburg/Parts">Parts Overview</a></li>
 
<li><a href="/Team:Marburg/Basic_Part">Basic Parts</a></li>
 
<li><a href="/Team:Marburg/Basic_Part">Basic Parts</a></li>
 +
<li><a href="/Team:Marburg/Composite_Part">Composite Part</a></li>
 +
<li><a href="/Team:Marburg/Part_Collection">Part Collection</a></li>
 +
<li><a href="/Team:Marburg/Improve">Improve</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 636: Line 49:
 
<li><a href="#">Human Practices ▾</a>
 
<li><a href="#">Human Practices ▾</a>
 
<ul>
 
<ul>
<li><a href="/Team:Marburg/Human_Practices">Silver</a></li>
+
<li><a href="/Team:Marburg/Human_Practices">Human Practices</a></li>
<li><a href="#">Integrated Practices</a></li>
+
 
<li><a href="/Team:Marburg/Public_Engagement">Public Engagement</a></li>
 
<li><a href="/Team:Marburg/Public_Engagement">Public Engagement</a></li>
 
</ul>
 
</ul>
Line 643: Line 55:
 
<li><a href="#">Awards ▾</a>
 
<li><a href="#">Awards ▾</a>
 
<ul>
 
<ul>
<li><a href="/Team:Marburg/Applied_Design">Applied Design</a></li>
+
<li><a href="/Team:Marburg/Human_Practices">Integrated Human Practices</a></li>
 +
<li><a href="/Team:Marburg/Public_Engagement">Education and Public Engagement</a></li>
 +
<li><a href="/Team:Marburg/Model">Model</a></li>
 +
<li><a href="/Team:Marburg/Measurement">Measurement</a></li>
 +
<li><a href="/Team:Marburg/Basic_Part">Best New Basic Part</a></li>
 +
<li><a href="/Team:Marburg/Composite_Part">Best New Composite Part</a></li>
 +
<li><a href="/Team:Marburg/Part_Collection">Best Part Collection</a></li>
 
<li><a href="/Team:Marburg/Software">Software</a></li>
 
<li><a href="/Team:Marburg/Software">Software</a></li>
 
</ul>
 
</ul>
 
</li>
 
</li>
<li><a href="#">Judging Form</a></li>
+
<li><a href="https://igem.org/2018_Judging_Form?id=2560">Judging Form</a></li>
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 653: Line 71:
  
 
</header>
 
</header>
 +
<div class="skipBar"></div>
 
<div class="btn_scroll_top btn_scroll_disabled"></div>
 
<div class="btn_scroll_top btn_scroll_disabled"></div>
 
<main>
 
<main>
 
 
 
</html>
 
</html>

Latest revision as of 22:59, 17 October 2018