Difference between revisions of "Template:Toronto/CSS"

 
(55 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>
  
Line 158: Line 162:
 
     color: black;
 
     color: black;
 
}
 
}
−
.fullClass {
+
.center {
−
    width: 100%;
+
−
    padding: 50px;
+
 
     float: center;
 
     float: center;
 +
    padding: 20px;
 +
    margin: auto;
 
}
 
}
 
.halfClass {
 
.halfClass {
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 318: Line 329:
 
background: #808080;
 
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 394: 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 403: Line 577:
 
<li>
 
<li>
 
<a href="https://2018.igem.org/Team:Toronto/WetLab">
 
<a href="https://2018.igem.org/Team:Toronto/WetLab">
−
<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/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>
Line 415: 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>
 
   <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 435: 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 444: 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 452: 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>

Latest revision as of 00:23, 17 October 2018