Difference between revisions of "Template:Toronto/CSS"

 
(35 intermediate revisions by the same user 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>
  
Line 180: Line 184:
 
     width: 25%;
 
     width: 25%;
 
     float: left;
 
     float: left;
 +
}
 +
 +
.tertiaryPagesClass {
 +
    width: 70%;
 +
    padding: 20px;
 +
    float: left;
 +
    box-shadow: inset 0 0 300px black;
 
}
 
}
  
Line 338: Line 349:
 
   line-height: 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 414: 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 435: Line 589:
 
                         <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>
Line 448: Line 602:
 
     </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 464: 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 481: Line 634:
 
     <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>

Latest revision as of 00:23, 17 October 2018