Difference between revisions of "Template:Toronto/CSS"

 
(581 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
−
<script src="http://code.jquery.com/jquery-latest.js"></script>
+
<!--link rel="stylesheet" href="https://2018.igem.org/Template:Toronto/css/styleNavBarTympanus?action=raw&ctype=text/css" type="text/css"/-->
  
−
<script>
+
 
−
!function(a){"use strict";var t={init:function(t){var o={easing:"ease",duration:700,margins:!1,setOnClick:!1,activeObj:".active",autoUpdate:!1,updateTime:100,enableHover:!0,delayOn:0,delayOff:0,enableFocus:!1,deepFocus:!1};return t=a.extend({},o,t),this.each(function(){var o=t.margins,s=t.setOnClick,m=t.activeObj,r=t.autoUpdate,p=t.updateTime,u=t.enableHover,v=t.delayOn,c=t.delayOff,d=t.enableFocus,f=t.deepFocus,h=t.duration,g=t.easing,b=a(this),T=b.children(),y=b.children(m);0===y.length&&(y=T.eq(0)),b.addClass("lavalamp").data({lavalampActive:y,isAnim:!1,settings:t});var A=a('<div class="lavalamp-object '+g+'" />').prependTo(b);T.addClass("lavalamp-item"),A.css({WebkitTransitionDuration:h/1e3+"s",msTransitionDuration:h/1e3+"s",MozTransitionDuration:h/1e3+"s",OTransitionDuration:h/1e3+"s",transitionDuration:h/1e3+"s"});var j=y.outerWidth(o),I=y.outerHeight(o),O=y.position().top,C=y.position().left,x=y.css("marginTop"),D=y.css("marginLeft");o||(D=parseInt(D),x=parseInt(x),C+=D,O+=x),A.css({width:j,height:I,transform:"translate("+C+"px,"+O+"px)"});var F=!1,H=!0;if(e=function(){var t=a(this);F=!0,setTimeout(function(){F&&H&&b.lavalamp("anim",t)},v)},i=function(a){a=b.data("lavalampActive"),F=!1,setTimeout(function(){!F&&H&&b.lavalamp("anim",a)},c)},n=function(){var t=a(this);t.hasClass("lavalamp-item")||(t=t.parents(".lavalamp-item")),H=!1,setTimeout(function(){b.lavalamp("anim",t)},v)},l=function(){H=!0;var a=b.data("lavalampActive");setTimeout(function(){b.lavalamp("anim",a)},c)},u&&(b.on("mouseenter",".lavalamp-item",e),b.on("mouseleave",".lavalamp-item",i)),d&&(b.on("focusin",".lavalamp-item",n),b.on("focusout",".lavalamp-item",l)),f&&(b.on("focusin",".lavalamp-item *",n),b.on("focusout",".lavalamp-item *",l)),s&&T.click(function(){y=a(this),b.data("lavalampActive",y).lavalamp("update")}),r){var k=setInterval(function(){var a=b.data("isAnim");F||a||b.lavalamp("update")},p);b.data("updateInterval",k)}})},destroy:function(){return this.each(function(){var t=a(this),o=t.data("settings"),s=t.children(".lavalamp-item"),m=o.enableHover,r=o.enableFocus,p=o.deepFocus,u=o.autoUpdate;if(m&&(t.off("mouseenter",".lavalamp-item",e),t.off("mouseleave",".lavalamp-item",i)),r&&(t.off("focusin",".lavalamp-item",n),t.off("focusout",".lavalamp-item",l)),p&&(t.off("focusin",".lavalamp-item *",n),t.off("focusout",".lavalamp-item *",l)),t.removeClass("lavalamp"),s.removeClass("lavalamp-item"),u){var v=t.data("updateInterval");clearInterval(v)}t.children(".lavalamp-object").remove(),t.removeData()})},update:function(){return this.each(function(){var t=a(this),e=t.children(":not(.lavalamp-object)"),i=t.data("lavalampActive");e.addClass("lavalamp-item").css({zIndex:5,position:"relative"}),t.lavalamp("anim",i)})},anim:function(a){var t=this,e=t.data("settings"),i=e.duration,n=e.margins,l=t.children(".lavalamp-object"),o=a.outerWidth(n),s=a.outerHeight(n),m=a.position().top,r=a.position().left,p=a.css("marginTop"),u=a.css("marginLeft");n||(u=parseInt(u),p=parseInt(p),r+=u,m+=p),t.data("isAnim",!0),l.css({width:o,height:s,transform:"translate("+r+"px,"+m+"px)"}),setTimeout(function(){t.data("isAnim",!1)},i)}};a.fn.lavalamp=function(e){return t[e]?t[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void a.error("Method "+e+" does not exist on jQuery.lavalamp"):t.init.apply(this,arguments)};var e,i,n,l}(jQuery);
+
<script type="text/javascript" src="https://2018.igem.org/Template:Toronto/js/jqueryeasing1_3?action=raw&ctype=text/javascript"></script>
 +
 
 +
<script type="text/javascript" async
 +
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
 
</script>
 
</script>
 
</head>
 
</head>
  
 
<style>
 
<style>
−
.testClass {  
+
ul.sdt_menu{
−
    background-color: white;
+
margin:0;
 +
padding:0;
 +
padding-bottom: 86px;
 +
list-style: none;
 +
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 +
font-size:14px;
 +
width:99%;
 
}
 
}
−
#top_title {
+
ul.sdt_menu a{
−
<display: none;}
+
text-decoration:none;
−
 
+
outline:none;
−
#content {
+
−
padding: 0px;}
+
−
 
+
−
.logo_2018 {  
+
−
    background-color: grey;
+
−
    display:none;
+
 
}
 
}
−
 
+
ul.sdt_menu li{
−
.mw-body {  
+
float:right;
−
    background-color: None;
+
width:170px;
−
    border: none !important;
+
height:85px;
−
    padding: 0px;
+
position:relative;
 +
cursor:pointer;
 
}
 
}
−
 
+
ul.sdt_menu li > a{
−
.top_title {  
+
position:absolute;
−
    background-color: red;
+
top:0px;
−
    display:none;
+
left:0px;
 +
width:170px;
 +
height:86px;
 +
z-index:12;
 +
background:transparent url(../images/overlay.png) no-repeat bottom right;
 +
-moz-box-shadow:0px 0px 2px #000 inset;
 +
-webkit-box-shadow:0px 0px 2px #000 inset;
 +
box-shadow:0px 0px 2px #000 inset;
 
}
 
}
−
 
+
ul.sdt_menu li a img{
−
.lavalamp {
+
border:none;
−
position:relative;
+
position:absolute;
 +
width:0px;
 +
height:0px;
 +
bottom:0px;
 +
left:85px;
 +
z-index:100;
 +
-moz-box-shadow:0px 0px 4px #000;
 +
-webkit-box-shadow:0px 0px 4px #000;
 +
box-shadow:0px 0px 4px #000;
 
}
 
}
−
.lavalamp-item {
+
ul.sdt_menu li span.sdt_wrap{
−
z-index:5;
+
position:absolute;
−
position:relative;
+
top:25px;
 +
left:0px;
 +
width:170px;
 +
height:60px;
 +
z-index:15;
 
}
 
}
−
.lavalamp-object {
+
ul.sdt_menu li span.sdt_active{
 
position:absolute;
 
position:absolute;
−
top:0;
+
background:#111;
−
left:0;
+
top:85px;
 +
width:170px;
 +
height:0px;
 +
left:0px;
 +
z-index:14;
 +
-moz-box-shadow:0px 0px 4px #000 inset;
 +
-webkit-box-shadow:0px 0px 4px #000 inset;
 +
box-shadow:0px 0px 4px #000 inset;
 +
}
 +
ul.sdt_menu li span span.sdt_link,
 +
ul.sdt_menu li span span.sdt_descr,
 +
ul.sdt_menu li div.sdt_box a{
 +
margin-left:15px;
 +
text-transform:uppercase;
 +
text-shadow:1px 1px 1px #000;
 +
}
 +
ul.sdt_menu li span span.sdt_link{
 +
color:#fff;
 +
font-size:24px;
 +
float:left;
 +
clear:both;
 +
}
 +
ul.sdt_menu li span span.sdt_descr{
 +
color:#0B75AF;
 +
float:left;
 +
clear:both;
 +
width:155px; /*For dumbass IE7*/
 +
font-size:10px;
 +
letter-spacing:1px;
 +
}
 +
ul.sdt_menu li div.sdt_box{
 +
display:block;
 +
position:absolute;
 +
width:170px;
 +
overflow:hidden;
 +
height:170px;
 +
top:86px;
 +
left:0px;
 +
display:none;
 +
background:#000;
 +
}
 +
ul.sdt_menu li div.sdt_box a{
 +
float:left;
 +
clear:both;
 +
line-height:30px;
 +
color:#0B75AF;
 +
}
 +
ul.sdt_menu li div.sdt_box a:first-child{
 +
margin-top:10px;
 +
}
 +
ul.sdt_menu li div.sdt_box a:hover{
 +
color:#fff;
 
}
 
}
  
−
/* Custom easing transitions */
 
  
  
−
.lavalamp .lavalamp-object {
+
 
−
-webkit-transition-property:-webkit-transform, width, height;
+
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
−
-moz-transition-property:-moz-transform, width, height;
+
 
−
-o-transition-property:-o-transform, width, height;
+
 
−
transition-property:transform, width, height;
+
 
 +
 
 +
 
 +
.tempClassWrapper {
 +
    background-color: white;
 
}
 
}
−
.lavalamp .lavalamp-object.ease {
+
 
−
-webkit-transition-timing-function: ease;
+
.bodyWhiteClass {
−
-moz-transition-timing-function: ease;
+
    background-color: #ffffff;
−
-o-transition-timing-function: ease;
+
    padding-right: 100px;
−
transition-timing-function: ease;
+
    padding-left: 100px;
 
}
 
}
−
.lavalamp .lavalamp-object.ease-in {
+
 
−
-webkit-transition-timing-function: ease-in;
+
.bodyClearClass {
−
-moz-transition-timing-function: ease-in;
+
    background-color: none;
−
-o-transition-timing-function: ease-in;
+
    padding-right: 100px;
−
transition-timing-function: ease-in;
+
    padding-left: 100px;
 +
    width: 100%;
 
}
 
}
−
.lavalamp .lavalamp-object.ease-out {
+
 
−
-webkit-transition-timing-function: ease-out;
+
.oneLineSpacerClass{
−
-moz-transition-timing-function: ease-out;
+
    padding-bottom: 20px;
−
-o-transition-timing-function: ease-out;
+
width: 100%;
−
transition-timing-function: ease-out;
+
 
}
 
}
−
.lavalamp .lavalamp-object.ease-in-out {
+
 
−
-webkit-transition-timing-function: ease-in-out;
+
.paddingClassSimple{
−
-moz-transition-timing-function: ease-in-out;
+
  padding: 10px;
−
-o-transition-timing-function: ease-in-out;
+
−
transition-timing-function: ease-in-out;
+
 
}
 
}
−
.lavalamp .lavalamp-object.linear {
+
 
−
-webkit-transition-timing-function: linear;
+
.translucentClass {
−
-moz-transition-timing-function: linear;
+
    background-color: #ffffff;
−
-o-transition-timing-function: linear;
+
    opacity: 0.6;
−
transition-timing-function: linear;
+
    color: black;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuad {
+
.center {
−
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    float: center;
−
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    padding: 20px;
−
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    margin: auto;
−
transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInCubic {
+
.halfClass {
−
-webkit-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
    width: 50%;
−
-moz-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
    padding: 20px;
−
-o-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
    float: left;
−
transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuart {
+
.twoThirdClass{
−
-webkit-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
    width: 66%;
−
-moz-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
    padding: 20px;
−
-o-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
    float: left;
−
transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuint {
+
.oneThirdClass{
−
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
    width: 32%;
−
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
    float: left;
−
-o-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
−
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInSine {
+
.oneQuarterClass{
−
-webkit-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
    width: 25%;
−
-moz-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
    float: left;
−
-o-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
−
transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInExpo {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
.tertiaryPagesClass {
−
-moz-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
    width: 70%;
−
-o-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
    padding: 20px;
−
transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
    float: left;
 +
    box-shadow: inset 0 0 300px black;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInCirc {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
.headerspacer {
−
-moz-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
    padding-top: 100px;
−
-o-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
    padding-bottom: 200px;
−
transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
    width: 100%;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInBack {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
.navBarSpacer {
−
-moz-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
    background: #ffffff url("https://static.igem.org/mediawiki/2018/e/e1/T--Toronto--Day_HP-banner-mk2.gif");
−
-o-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
    background-size: 100%;
−
transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
background-position-y: top: 55%;
 +
background-repeat: no-repeat;
 +
    z-index: 99;
 +
top: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuad {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
.testClass {
−
-moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
    background-color: none;
−
-o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
    padding: 10px;
−
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutCubic {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
.logo_2018 {
−
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
    background-color: grey;
−
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
    display:none;
−
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuart {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
.mw-body {
−
-moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
    background-color: white;
−
-o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
    border: none !important;
−
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
    padding: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuint {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
.video-background {
−
-moz-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  background: #000;
−
-o-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  position: fixed;
−
transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  top: 0; right: 0; bottom: 0; left: 0;
 +
  z-index: -99;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutSine {
+
.video-foreground,
−
-webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
.video-background iframe {
−
-moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  position: absolute;
−
-o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  top: 0;
−
transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  pointer-events: none;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutExpo {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
.crop {
−
-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
    width: 170px;
−
-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
    height: 170px;
−
transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
    overflow: hidden;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutCirc {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
#top_title {
−
-moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
display: none;}
−
-o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
 
−
transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
#top_menu_inside {
 +
width: 965px;}
 +
 
 +
#content {
 +
padding: 0px;
 +
position: relative;
 +
width: 100%;
 +
top: -10px;
 +
background: white;
 +
margin-left: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutBack {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
.bubbles{
−
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
  position:absolute;
−
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
  top:100%;
−
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
  left:0;
 +
  width:100%;
 +
  height:100%;
 +
  z-index: 9;
 +
  transform: translateZ(0);
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuad {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
.bubbles li{
−
-moz-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
  position: absolute;
−
-o-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
  list-style: none;
−
transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
  display: block;
 +
  background-color: rgba(0,0,255,1);
 +
  bottom: -100px;
 +
  animation: square 20s infinite;
 +
  transition-timing-function: linear;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutCubic {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
.bubbles li:nth-child(1){
−
-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  width: 40px;
−
-o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  height: 40px;
−
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  left: 20%;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuart {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
.bubbles li:nth-child(2){
−
-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  width: 60px;
−
-o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  height: 60px;
−
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
  left: 40%;
 +
  animation-delay: 2s;
 +
  animation-duration: 17s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuint {
+
.bubbles li:nth-child(3){
−
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
  width: 10px;
−
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
  height: 10px;
−
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
  left: 60%;
−
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
  animation-delay: 4s;
 +
  animation-duration: 13s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutSine {
+
.bubbles li:nth-child(4){
−
-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
  width: 80px;
−
-moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
  height: 80px;
−
-o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
  left: 80%;
−
transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
  animation-delay: 1s;
 +
  animation-duration: 22s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutExpo {
+
.bubbles li:nth-child(5){
−
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
  width: 50px;
−
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
  height: 50px;
−
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
  left: 50%;
−
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
  animation-delay: 7s;
 +
  animation-duration: 12s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutCirc {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
@keyframes square{
−
-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
  0%{
−
-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
    transform:translateY(0);
−
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
  }
−
}
+
  100%{
−
.lavalamp .lavalamp-object.easeInOutBack {
+
    transform:translateY(-1080px) rotate(630deg);
−
-webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
  }
−
-moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
−
-o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
−
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
 
}
 
}
  
−
.topnav {
+
body {
−
    background-color: #333;
+
background-color: white;
−
    overflow: hidden;
+
background: #808080;
 
}
 
}
  
−
.topnav a {
+
.grid-container {
−
    float: left;
+
  display: grid;
−
    color: #f2f2f2;
+
  grid-template-columns: 300px 300px 300px;
−
    text-align: center;
+
  grid-gap: 50px;
−
    padding: 14px 16px;
+
  background-color: rgba(0,0,0,1.0);
−
    text-decoration: none;
+
  border-radius: 0px;
−
    font-size: 17px;
+
  padding-bottom: 30px;
 +
  padding-top: 30px;
 +
  align-items: stretch;
 +
}
 +
.grid-container > div {
 +
  background-color: rgba(15,65,92,1.0);
 +
  border: 3px solid white;
 +
border-radius: 0%;
 +
  text-align: center;
 +
  padding: 50px 20px;
 +
  font-size: 30px;
 +
  line-height: 30px;
 
}
 
}
  
−
.topnav a:hover {
+
.center {
−
     background-color: #ddd;
+
     position: relative;
−
    color: black;
+
 
}
 
}
  
−
.topnav a.active {
+
.centerPacker{
−
    background-color: #4CAF50;
+
  margin: 0;
−
    color: white;
+
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 
}
 
}
  
−
body {
+
 
−
background-color: white;
+
.page-section {
−
background: #ffffff url("http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/colors_explosion_wallpaper_abstract_3d_45.jpg");
+
/*height: 480px;*/
 +
width: 60%;
 +
margin-left: 25%;
 +
margin-top: 0px;
 +
padding: 3em;
 +
background: linear-gradient(45deg, #ffffff 10%, #ffffff 90%);
 +
color: black;
 +
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
 
}
 
}
 +
.navigation {
 +
transition: all 0.1s ease;
 +
position: fixed;
 +
width: 20%;
 +
margin-left: 2%;
 +
background-color: #999;
 +
color: #ffffff;
 +
border-radius: 20px;
 +
text-align: center;
 +
font-family: "Arial", Helvetica, sans-serif;
 +
font-size: 14px;
 +
line-height: 14px;
 +
}
 +
.navigation__link {
 +
display: block;
 +
color: #ddd;
 +
text-decoration: none;
 +
padding: 10px;
 +
font-weight: 400;
 +
border-radius: 20px;
 +
}
 +
.navigation__link:hover {
 +
background-color: #aaa;
 +
border-radius: 20px;
 +
}
 +
.navigation__link.active {
 +
color: white;
 +
background-color: rgba(0, 0, 0, 0.1);
 +
}
 +
.backgroundTertiaryHandler{
 +
background-color: black;
 +
background: linear-gradient(0deg, #ffffff 10%, rgba(15,65,92,1.0) 90%);
 +
padding-top: 25px;
 +
margin-top: 0px;
 +
}
 +
.backgroundTertiaryHandler h3{
 +
font-size: 64px;
 +
line-height: 65px;
 +
text-align: center;
 +
color: black;
 +
}
 +
.backgroundTertiaryHandler h1{
 +
font-size: 24px;
 +
line-height: 25px;
 +
color: black;
 +
}
 +
.backgroundTertiaryHandler p{
 +
font-size: 14px;
 +
line-height: 14px;
 +
color: black;
 +
}
 +
 
</style>
 
</style>
 +
 +
 +
<script>
 +
$(function() {
 +
$('#navBarBackground > ul').bind('mouseenter',function(){
 +
var $elem = $(this);
 +
    <!--BEGIN Animate NavBar Test-->
 +
    $elem.stop(true)
 +
    $elem.animate({
 +
'padding-bottom':'170px'
 +
    },100,'easeOutBack')
 +
$elem.find('li > a').animate({'height':'170px'},100,'easeOutBack')
 +
    <!--END Animate NavBar Test-->
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
    <!--BEGIN Animate NavBar Test ENDER-->
 +
$elem.find('li > a').animate({'height':'86px'},0,'easeOutBack')
 +
    $elem.animate({
 +
'padding-bottom':'86px'
 +
    },100)
 +
    <!--END Animate NavBar Test ENDER-->
 +
});
 +
 +
 +
$('#sdt_menu > li').bind('mouseenter',function(){
 +
var $elem = $(this);
 +
<!--BEGIN Animate NavBar Test-->
 +
$elem.stop(true)
 +
<!--END Animate NavBar Test-->
 +
$elem.find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'170px',
 +
'height':'170px',
 +
'left':'0px'
 +
},200,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'240px'},200,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'170px', 'top':'170px'},100,function(){
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length){
 +
var left = '-170px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '170px';
 +
$sub_menu.show().animate({'left':left, 'top':'170px'},100);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
<!--BEGIN Animate NavBar Test ENDER-->
 +
 +
<!--END Animate NavBar Test ENDER-->
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 +
$elem.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'0px'},0)
 +
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'86px'},100)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},200);
 +
});
 +
});
 +
</script>
 +
 +
<script>
 +
$(document).ready(function() {
 +
$('a[href*=#]').bind('click', function(e) {
 +
e.preventDefault(); // prevent hard jump, the default behavior
 +
 +
var target = $(this).attr("href"); // Set the target as variable
 +
 +
// perform animated scrolling by getting top-position of target-element and set it as scroll target
 +
$('html, body').stop().animate({
 +
scrollTop: $(target).offset().top
 +
}, 600, function() {
 +
location.hash = target; //attach the hash (#jumptarget) to the pageurl
 +
});
 +
 +
return false;
 +
});
 +
});
 +
 +
$(window).scroll(function() {
 +
var scrollDistance = $(window).scrollTop();
 +
 +
// Show/hide menu on scroll
 +
//if (scrollDistance >= 850) {
 +
// $('nav').fadeIn("fast");
 +
//} else {
 +
// $('nav').fadeOut("fast");
 +
//}
 +
 +
// Assign active class to nav links while scolling
 +
$('.page-section').each(function(i) {
 +
if ($(this).position().top <= scrollDistance) {
 +
$('.navigation a.active').removeClass('active');
 +
$('.navigation a').eq(i).addClass('active');
 +
}
 +
});
 +
}).scroll();
 +
</script>
 +
 +
 +
<script>
 +
$(function() {
 +
    var $anchor = $("#scroller-anchor");
 +
    var $scroller = $('#mainNav');
 +
 +
    var move = function() {
 +
        var st = $(window).scrollTop();
 +
        var ot = $anchor.offset().top - 50;
 +
        if(st > ot) {
 +
          $scroller.css({
 +
              position: "fixed",
 +
              top: "50px",
 +
              float: "left"
 +
          });
 +
        } else {
 +
          $scroller.css({
 +
              position: "relative",
 +
              top: "",
 +
              float: "left"
 +
          });
 +
        }
 +
    };
 +
    $(window).scroll(move);
 +
    move();
 +
});
 +
</script>
 +
 +
<body>
 +
<div id="navBarBackground" class="navBarSpacer" style="background-color=black;">
 +
<ul id="sdt_menu" class="sdt_menu" <!--style="padding-top:90px;--> style="position:fixed; background-color=black; padding-bottom: 86px;">
 +
 +
<li>
 +
<a href="https://2018.igem.org/Team:Toronto/WetLab">
 +
<img src="https://static.igem.org/mediawiki/2018/1/19/T--Toronto--wetlabnavbaricon.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">WetLab</span>
 +
<span class="sdt_descr">Laboratory Experiments</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style="z-index: 99; opacity: 1.0; height:170px;">
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/ExperimentProtocols">Protocols</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Notebook">Notebook</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Results">Results</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Parts">Parts</a>
 +
<a href="https://2018.igem.org/Team:Toronto/InterLab">InterLab</a>
 +
</div>
 +
</li>
 +
  <li>
 +
    <a href="https://2018.igem.org/Team:Toronto/DryLab">
 +
      <img src="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--2018_drylabnavbaricon.jpg" alt=""/>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
        <span class="sdt_link">DryLab</span>
 +
        <span class="sdt_descr">Computational Projects</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Model">Model</a>
 +
    </div>
 +
  </li>
 +
  <li>
 +
    <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices">
 +
    <div class="crop">
 +
      <img src="https://static.igem.org/mediawiki/2018/5/53/T--Toronto--pnpnavbaricon.jpg" alt=""/>
 +
    </div>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
        <span class="sdt_link">P & P</span>
 +
        <span class="sdt_descr">Policy and Practices</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Human_Practices">Human Practices</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Public_Engagement">Engagement</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Outreach">Outreach</a>
 +
    </div>
 +
  </li>
 +
 +
  <li>
 +
    <a href="https://2018.igem.org/Team:Toronto/Project">
 +
      <img src="https://static.igem.org/mediawiki/2018/1/18/T--Toronto--projectnavbaricon.jpg" alt=""/>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
        <span class="sdt_link">Project</span>
 +
        <span class="sdt_descr">Team Behind the Project</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Project/Description">Description</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Demonstrate">Demonstrate</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Project/Team">Team</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Collaborations">Collaborations</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Attributions">Attributions</a>
 +
    </div>
 +
  </li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Toronto">
 +
<img src="https://static.igem.org/mediawiki/2018/8/8b/HQ_page_logo.jpg" alt="iGEM Logo was here"/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">iGEM</span>
 +
<span class="sdt_descr">iGEM Home Page</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
<a href="https://2018.igem.org/Main_Page">iGEM Home</a>
 +
<a href="https://2018.igem.org/Team:Toronto">iGEM Toronto</a>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 00:23, 17 October 2018