Difference between revisions of "Template:British Columbia 2"

m
m
 
(245 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
   <title>Home</title>
+
   <title>Main CSS</title>
   <meta charset="utf-8">
+
   <!--Important to only include bootstrap in ONE of the templates, things will break if you include it twice.-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
 
+
 
<style>
 
<style>
 
html, body{
 
html, body{
   height: 100%; min-height: 100%;
+
   height: 100vh; max-height: 100%;
   width: 100%; min-width: 100%;
+
   width: 100vw; max-width: 100%;
 
   top: 18px;
 
   top: 18px;
  font-family: Arial;
 
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
}
 
}
  
/********************************* NOT REALLY DEFAULT WIKI SETTINGS  ********************************/
+
/********************************* Overriding the default wiki settings, rest in peace #sideMenu.*****************/
 +
#sideMenu, #top_title {display:none;}
 +
#sideMenu { z-index: 10 !important; background-color: white; position: fixed;}
 +
#content {
 +
  margin-left: 0 !important; all: initial;
 +
  height: 100%; width: 100%; padding:0px;
 +
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 +
}
 +
body {background-color: white; }
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
  #globalWrapper{ padding-bottom: 0 !important; }
  
#sideMenu, #top_title {display:none;}
 
#content {
 
          all: initial;
 
          height: 100%; width: 100%; padding:0px; margin-top:-7px;
 
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
        }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  
 +
.page-header{
 +
  border-bottom: 1 px solid black;
 +
}
  
span.glyphicon-grain{
+
/*cover image (the trees and mountains) styling*/
    font-size: 2em;
+
.cover{
 +
  background: #0F9347; /*backup in case the header image does not load*/
 +
  position: relative;
 +
  top: -14px !important; left: 0 !important;
 +
  overflow: hidden;
 +
  height: 50vh; min-height: 50%; width: 100vw; max-width: 100%;
 
}
 
}
  
.navbar-header, .navbar-nav > li > a{
+
.cover .container-fluid{
   margin-top: 14px !important;
+
   position: absolute;
 +
  bottom: 0;
 +
  color: #ffffff;
 +
  padding-left: 60px;
 
}
 
}
  
@media screen and (min-width: 768px) {
+
#title{
.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a{
+
  text-shadow: 0px 0px 15px black; /*helps the title text inside the cover image stand out*/
  color: #E4F9F5 !important;
+
 
}
 
}
  
.navbar-default {
+
/*breadcrumb navigation to show which path in the website you are on*/
    background-color:transparent;
+
#breadcrumbs{
    border: transparent;
+
  background-color: #8CC63F;  
 +
  height: 50px; color: #ffffff; line-height: 50px; font-size: 1em;
 +
  padding-left: 30px; margin-top: -14px;
 +
  z-index: 2;
 
}
 
}
  
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
+
#breadcrumbs a{
   background-color: transparent;
+
   color: #ffffff;
  border-bottom: 2px solid #E4F9F5;
+
  }
+
 
+
 
}
 
}
  
.cover{
+
/*generic content wrapper, ensures pages do not exceed 100% width*/
 +
.content-wrap{
 
   position: relative;
 
   position: relative;
   top: 0 !important;
+
   height: 100%;  
   overflow: hidden;
+
   background-color: white;
   height: 50vh; min-height: 50%; width: 100vw; max-width: 100%;
+
   padding: 25px;  
  background-color: grey;
+
  width: 100vw; max-width: 100%;
 
}
 
}
  
.cover .container-fluid{
+
.content-wrap p{
   position: absolute;
+
   font-size: 16px !important;
   bottom: 0;
+
   text-indent: 50px;
  color: #E4F9F5;
+
  font-size: 6em;
+
 
}
 
}
  
.opaque-nav{
+
/*styling for the links below each page encouraging readers to visit other sections of the website*/
   background-color: grey;
+
#read-more{
 +
   background-color: #8CC63F;
 +
  height: 50px; color: #ffffff; line-height: 50px;
 +
  margin-bottom: 0;
 +
  text-align: center !important; font-size: 1em !important;  
 
}
 
}
  
 +
#up-next{
 +
  height: 250px; background-color: grey;
 +
}
  
</style>
+
#previous, #next{
<script>
+
  max-height: 250px; overflow: hidden;
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
+
  padding-left: 0; padding-right: 0;
var mainbottom = $(".cover").offset().top + $(".cover").height();
+
}
  
// on scroll,  
+
#previous:hover img, #next:hover img{
$(window).on("scroll",function(){
+
  transform: scale(1.15);
 +
}
  
    // we round here to reduce a little workload
+
#previous figcaption, #next figcaption{
    stop = Math.round($(window).scrollTop());
+
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.55) 100%);
    if (stop > mainbottom) {
+
  position: absolute; width: 100%; height: 100px;
        $('.navbar-default').addClass('.opaque-nav');
+
  bottom: 0; left: 0; padding: 25px;
    } else {
+
  color: #ffffff; font-size: 2em;
        $('.navbar-default').removeClass('.opaque-nav');
+
}
  }
+
</style>
  
});
 
</script>
 
 
</head>
 
</head>
<header>
 
  <nav class="navbar navbar-default navbar-fixed-top">
 
    <div class="container-fluid">
 
      <div class="navbar-header">
 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 
        <span class="icon-bar"></span>
 
        <span class="icon-bar"></span>
 
        <span class="icon-bar"></span>
 
      </button>
 
        <a class="navbar-brand page-scroll" href="#page-top"><span class="glyphicon glyphicon-grain"></span></a>
 
      </div>
 
      <div class="collapse navbar-collapse">
 
        <ul class="nav navbar-nav navbar-right">
 
          <li class="dropdown">
 
            <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Project">Project
 
        <span class="caret"></span></a>
 
            <ul class="dropdown-menu">
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Overview">Overview</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer">S-layer Engineering</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Bio-Pathways">Biosynthetic Pathways</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Project/Consortia">Consortia</a></li>
 
            </ul>
 
          </li>
 
          <li><a href="https://2016.igem.org/Team:British_Columbia/Model">Modelling</a></li>
 
          <li><a href="https://2016.igem.org/Team:British_Columbia/Human_Practices">Human Practices</a></li>
 
          <li class="dropdown">
 
            <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Team">Team
 
        <span class="caret"></span></a>
 
            <ul class="dropdown-menu">
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Bios">Bios</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Attributions">Attributions</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Team/Sponsors">Sponsors</a></li>
 
            </ul>
 
          </li>
 
          <li><a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></li>
 
          <li class="dropdown">
 
            <a class="dropdown-toggle" data-toggle="dropdown" href="https://2016.igem.org/Team:British_Columbia/Achievements">Achievements
 
        <span class="caret"></span></a>
 
            <ul class="dropdown-menu">
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Collaborations">Collaborations</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Medal_Criteria">Medal Criteria</a></li>
 
              <li><a href="https://2016.igem.org/Team:British_Columbia/Achievements/Parts">Parts</a></li>
 
            </ul>
 
          </li>
 
        </ul>
 
      </div>
 
      <!--collapse navbar-collapse -->
 
    </div>
 
    <!-- container-fluid -->
 
  </nav>
 
</header>
 
 
<body></body>
 
 
</html>
 
</html>

Latest revision as of 14:14, 18 October 2016

Main CSS