Difference between revisions of "Template:Toronto/CSS"

 
(649 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<head>
 +
<!--link rel="stylesheet" href="https://2018.igem.org/Template:Toronto/css/styleNavBarTympanus?action=raw&ctype=text/css" type="text/css"/-->
 +
 +
 +
<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>
 +
</head>
 +
 
<style>
 
<style>
−
.testClass {  
+
ul.sdt_menu{
−
    background-color: black !important;;
+
margin:0;
 +
padding:0;
 +
padding-bottom: 86px;
 +
list-style: none;
 +
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 +
font-size:14px;
 +
width:99%;
 
}
 
}
 +
ul.sdt_menu a{
 +
text-decoration:none;
 +
outline:none;
 +
}
 +
ul.sdt_menu li{
 +
float:right;
 +
width:170px;
 +
height:85px;
 +
position:relative;
 +
cursor:pointer;
 +
}
 +
ul.sdt_menu li > a{
 +
position:absolute;
 +
top:0px;
 +
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{
 +
border:none;
 +
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;
 +
}
 +
ul.sdt_menu li span.sdt_wrap{
 +
position:absolute;
 +
top:25px;
 +
left:0px;
 +
width:170px;
 +
height:60px;
 +
z-index:15;
 +
}
 +
ul.sdt_menu li span.sdt_active{
 +
position:absolute;
 +
background:#111;
 +
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;
 +
}
 +
 +
 +
 +
 +
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
 +
 +
 +
 +
 +
 +
.tempClassWrapper {
 +
    background-color: white;
 +
}
 +
 +
.bodyWhiteClass {
 +
    background-color: #ffffff;
 +
    padding-right: 100px;
 +
    padding-left: 100px;
 +
}
 +
 +
.bodyClearClass {
 +
    background-color: none;
 +
    padding-right: 100px;
 +
    padding-left: 100px;
 +
    width: 100%;
 +
}
 +
 +
.oneLineSpacerClass{
 +
    padding-bottom: 20px;
 +
width: 100%;
 +
}
 +
 +
.paddingClassSimple{
 +
  padding: 10px;
 +
}
 +
 +
.translucentClass {
 +
    background-color: #ffffff;
 +
    opacity: 0.6;
 +
    color: black;
 +
}
 +
.center {
 +
    float: center;
 +
    padding: 20px;
 +
    margin: auto;
 +
}
 +
.halfClass {
 +
    width: 50%;
 +
    padding: 20px;
 +
    float: left;
 +
}
 +
.twoThirdClass{
 +
    width: 66%;
 +
    padding: 20px;
 +
    float: left;
 +
}
 +
.oneThirdClass{
 +
    width: 32%;
 +
    float: left;
 +
}
 +
.oneQuarterClass{
 +
    width: 25%;
 +
    float: left;
 +
}
 +
 +
.tertiaryPagesClass {
 +
    width: 70%;
 +
    padding: 20px;
 +
    float: left;
 +
    box-shadow: inset 0 0 300px black;
 +
}
 +
 +
.headerspacer {
 +
    padding-top: 100px;
 +
    padding-bottom: 200px;
 +
    width: 100%;
 +
}
 +
 +
.navBarSpacer {
 +
    background: #ffffff url("https://static.igem.org/mediawiki/2018/e/e1/T--Toronto--Day_HP-banner-mk2.gif");
 +
    background-size: 100%;
 +
background-position-y: top: 55%;
 +
background-repeat: no-repeat;
 +
    z-index: 99;
 +
top: 0px;
 +
}
 +
 +
.testClass {
 +
    background-color: none;
 +
    padding: 10px;
 +
}
 +
 +
.logo_2018 {
 +
    background-color: grey;
 +
    display:none;
 +
}
 +
 +
.mw-body {
 +
    background-color: white;
 +
    border: none !important;
 +
    padding: 0px;
 +
}
 +
 +
.video-background {
 +
  background: #000;
 +
  position: fixed;
 +
  top: 0; right: 0; bottom: 0; left: 0;
 +
  z-index: -99;
 +
}
 +
.video-foreground,
 +
.video-background iframe {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  pointer-events: none;
 +
}
 +
 +
.crop {
 +
    width: 170px;
 +
    height: 170px;
 +
    overflow: hidden;
 +
}
 +
 +
#top_title {
 +
display: none;}
 +
 +
#top_menu_inside {
 +
width: 965px;}
 +
 +
#content {
 +
padding: 0px;
 +
position: relative;
 +
width: 100%;
 +
top: -10px;
 +
background: white;
 +
margin-left: 0px;
 +
}
 +
 +
.bubbles{
 +
  position:absolute;
 +
  top:100%;
 +
  left:0;
 +
  width:100%;
 +
  height:100%;
 +
  z-index: 9;
 +
  transform: translateZ(0);
 +
}
 +
 +
.bubbles li{
 +
  position: absolute;
 +
  list-style: none;
 +
  display: block;
 +
  background-color: rgba(0,0,255,1);
 +
  bottom: -100px;
 +
  animation: square 20s infinite;
 +
  transition-timing-function: linear;
 +
}
 +
 +
.bubbles li:nth-child(1){
 +
  width: 40px;
 +
  height: 40px;
 +
  left: 20%;
 +
}
 +
 +
.bubbles li:nth-child(2){
 +
  width: 60px;
 +
  height: 60px;
 +
  left: 40%;
 +
  animation-delay: 2s;
 +
  animation-duration: 17s;
 +
}
 +
.bubbles li:nth-child(3){
 +
  width: 10px;
 +
  height: 10px;
 +
  left: 60%;
 +
  animation-delay: 4s;
 +
  animation-duration: 13s;
 +
}
 +
.bubbles li:nth-child(4){
 +
  width: 80px;
 +
  height: 80px;
 +
  left: 80%;
 +
  animation-delay: 1s;
 +
  animation-duration: 22s;
 +
}
 +
.bubbles li:nth-child(5){
 +
  width: 50px;
 +
  height: 50px;
 +
  left: 50%;
 +
  animation-delay: 7s;
 +
  animation-duration: 12s;
 +
}
 +
 +
@keyframes square{
 +
  0%{
 +
    transform:translateY(0);
 +
  }
 +
  100%{
 +
    transform:translateY(-1080px) rotate(630deg);
 +
  }
 +
}
 +
 
body {
 
body {
−
background: #ffffff url("http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/colors_explosion_wallpaper_abstract_3d_45.jpg") no-repeat;
+
background-color: white;
−
background-color: grey !important;
+
background: #808080;
 +
}
 +
 
 +
.grid-container {
 +
  display: grid;
 +
  grid-template-columns: 300px 300px 300px;
 +
  grid-gap: 50px;
 +
  background-color: rgba(0,0,0,1.0);
 +
  border-radius: 0px;
 +
  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;
 +
}
 +
 
 +
.center {
 +
    position: relative;
 +
}
 +
 
 +
.centerPacker{
 +
  margin: 0;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
}
 +
 
 +
 
 +
.page-section {
 +
/*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