Difference between revisions of "Template:Toronto/CSS"

 
(91 intermediate revisions by 2 users not shown)
Line 6: Line 6:
  
 
<script type="text/javascript" src="https://2018.igem.org/Template:Toronto/js/jqueryeasing1_3?action=raw&ctype=text/javascript"></script>
 
<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>
 
</head>
  
 
<style>
 
<style>
−
ul.sdt_menu{33
+
ul.sdt_menu{
 
margin:0;
 
margin:0;
 
padding:0;
 
padding:0;
Line 112: Line 116:
 
}
 
}
 
ul.sdt_menu li div.sdt_box a:first-child{
 
ul.sdt_menu li div.sdt_box a:first-child{
−
margin-top:15px;
+
margin-top:10px;
 
}
 
}
 
ul.sdt_menu li div.sdt_box a:hover{
 
ul.sdt_menu li div.sdt_box a:hover{
Line 141: Line 145:
 
     padding-right: 100px;
 
     padding-right: 100px;
 
     padding-left: 100px;
 
     padding-left: 100px;
−
width: 100px;
+
    width: 100%;
 
}
 
}
  
 
.oneLineSpacerClass{
 
.oneLineSpacerClass{
 
     padding-bottom: 20px;
 
     padding-bottom: 20px;
 +
width: 100%;
 
}
 
}
  
Line 154: Line 159:
 
.translucentClass {
 
.translucentClass {
 
     background-color: #ffffff;
 
     background-color: #ffffff;
−
     opacity: 0.9;
+
     opacity: 0.6;
 
     color: black;
 
     color: black;
 
}
 
}
−
 
+
.center {
 +
    float: center;
 +
    padding: 20px;
 +
    margin: auto;
 +
}
 
.halfClass {
 
.halfClass {
 
     width: 50%;
 
     width: 50%;
Line 170: Line 179:
 
.oneThirdClass{
 
.oneThirdClass{
 
     width: 32%;
 
     width: 32%;
 +
    float: left;
 +
}
 +
.oneQuarterClass{
 +
    width: 25%;
 +
    float: left;
 +
}
 +
 +
.tertiaryPagesClass {
 +
    width: 70%;
 
     padding: 20px;
 
     padding: 20px;
 
     float: left;
 
     float: left;
 +
    box-shadow: inset 0 0 300px black;
 
}
 
}
  
Line 181: Line 200:
  
 
.navBarSpacer {
 
.navBarSpacer {
−
     background: #ffffff url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/STQXMOu1-j2a79wbj/videoblocks-a-lot-of-bubbles-float-to-the-surface-of-the-blue-water-in-the-rays-of-light-beautiful-3d-animation-full-hd-1080p_sa4unifjw_thumbnail-full01.png");
+
     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;
 
     z-index: 99;
 
top: 0px;
 
top: 0px;
Line 305: Line 327:
 
body {
 
body {
 
background-color: white;
 
background-color: white;
−
background: #ffffff url("http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/colors_explosion_wallpaper_abstract_3d_45.jpg");
+
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>
  
Line 327: Line 446:
 
     $elem.animate({
 
     $elem.animate({
 
'padding-bottom':'86px'
 
'padding-bottom':'86px'
−
     },100,'easeOutBack')
+
     },100)
 
     <!--END Animate NavBar Test ENDER-->
 
     <!--END Animate NavBar Test ENDER-->
 
});
 
});
Line 383: Line 502:
 
.animate({'top':'25px'},200);
 
.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>
 
</script>
Line 389: Line 574:
 
<div id="navBarBackground" class="navBarSpacer" style="background-color=black;">
 
<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;">
 
<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">
+
−
<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>
+
 
<li>
 
<li>
 
<a href="https://2018.igem.org/Team:Toronto/WetLab">
 
<a href="https://2018.igem.org/Team:Toronto/WetLab">
−
<img src="https://media1.tenor.com/images/a2c0a3d2db6003c854718d0c387ceb27/tenor.gif" alt=""/>
+
<img src="https://static.igem.org/mediawiki/2018/1/19/T--Toronto--wetlabnavbaricon.jpg" alt=""/>
 
<span class="sdt_active"></span>
 
<span class="sdt_active"></span>
 
<span class="sdt_wrap">
 
<span class="sdt_wrap">
 
<span class="sdt_link">WetLab</span>
 
<span class="sdt_link">WetLab</span>
−
<span class="sdt_descr">You'll.Float.Too.</span>
+
<span class="sdt_descr">Laboratory Experiments</span>
 
</span>
 
</span>
 
</a>
 
</a>
−
<div class="sdt_box" style="z-index: 99; opacity: 1.0; height:250px;">
+
<div class="sdt_box" style="z-index: 99; opacity: 1.0; height:170px;">
−
                         <a href="https://2018.igem.org/Team:Toronto/WetLab/ExperimentProtocols">Experiments & Protocols</a>
+
                         <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/Notebook">Notebook</a>
 
                         <a href="https://2018.igem.org/Team:Toronto/WetLab/Results">Results</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/WetLab/Parts">Parts</a>
−
<a href="https://2018.igem.org/Team:Toronto/WetLab/InterLab">InterLab</a>
+
<a href="https://2018.igem.org/Team:Toronto/InterLab">InterLab</a>
 
</div>
 
</div>
 
</li>
 
</li>
 
   <li>
 
   <li>
 
     <a href="https://2018.igem.org/Team:Toronto/DryLab">
 
     <a href="https://2018.igem.org/Team:Toronto/DryLab">
−
       <img src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt=""/>
+
       <img src="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--2018_drylabnavbaricon.jpg" alt=""/>
 
       <span class="sdt_active"></span>
 
       <span class="sdt_active"></span>
 
       <span class="sdt_wrap">
 
       <span class="sdt_wrap">
 
         <span class="sdt_link">DryLab</span>
 
         <span class="sdt_link">DryLab</span>
−
         <span class="sdt_descr">Dry Jokes Here</span>
+
         <span class="sdt_descr">Computational Projects</span>
 
       </span>
 
       </span>
 
     </a>
 
     </a>
 
     <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 
     <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
−
       <a href="https://2018.igem.org/Team:Toronto/DryLab/Equations">Equations</a>
+
       <a href="https://2018.igem.org/Team:Toronto/Model">Model</a>
−
      <a href="https://2018.igem.org/Team:Toronto/DryLab/Model">Model</a>
+
 
     </div>
 
     </div>
 
   </li>
 
   </li>
Line 437: Line 608:
 
     <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices">
 
     <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices">
 
     <div class="crop">
 
     <div class="crop">
−
       <img src="https://www.crpe.org/sites/default/files/policy_practice_sign_image.jpg" alt=""/>
+
       <img src="https://static.igem.org/mediawiki/2018/5/53/T--Toronto--pnpnavbaricon.jpg" alt=""/>
 
     </div>
 
     </div>
 
       <span class="sdt_active"></span>
 
       <span class="sdt_active"></span>
Line 446: Line 617:
 
     </a>
 
     </a>
 
     <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 
     <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
−
       <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/HumanPractices">Human Practices</a>
+
       <a href="https://2018.igem.org/Team:Toronto/Human_Practices">Human Practices</a>
−
       <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Integration">Integration</a>
+
       <a href="https://2018.igem.org/Team:Toronto/Public_Engagement">Engagement</a>
−
       <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/PublicEngagement">Public Engagement</a>
+
       <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Outreach">Outreach</a>
 
     </div>
 
     </div>
 
   </li>
 
   </li>
Line 454: Line 625:
 
   <li>
 
   <li>
 
     <a href="https://2018.igem.org/Team:Toronto/Project">
 
     <a href="https://2018.igem.org/Team:Toronto/Project">
−
       <img src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt=""/>
+
       <img src="https://static.igem.org/mediawiki/2018/1/18/T--Toronto--projectnavbaricon.jpg" alt=""/>
 
       <span class="sdt_active"></span>
 
       <span class="sdt_active"></span>
 
       <span class="sdt_wrap">
 
       <span class="sdt_wrap">
 
         <span class="sdt_link">Project</span>
 
         <span class="sdt_link">Project</span>
−
         <span class="sdt_descr">Work Hard Play Hard</span>
+
         <span class="sdt_descr">Team Behind the Project</span>
 
       </span>
 
       </span>
 
     </a>
 
     </a>
 
     <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 
     <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/Project/Description">Description</a>
−
       <a href="https://2018.igem.org/Team:Toronto/Project/Demonstrate">Demonstrate</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/Project/Team">Team</a>
−
       <a href="https://2018.igem.org/Team:Toronto/Project/Collaborations">Collaborations</a>
+
       <a href="https://2018.igem.org/Team:Toronto/Collaborations">Collaborations</a>
−
       <a href="https://2018.igem.org/Team:Toronto/Project/Attributions">Attributions</a>
+
       <a href="https://2018.igem.org/Team:Toronto/Attributions">Attributions</a>
 
     </div>
 
     </div>
 
   </li>
 
   </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>
 
</ul>
 
</div>
 
</div>

Latest revision as of 00:23, 17 October 2018