Difference between revisions of "Template:British Columbia 2"

m
m
 
(65 intermediate revisions by the same user 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{
Line 13: Line 8:
 
   width: 100vw; max-width: 100%;
 
   width: 100vw; max-width: 100%;
 
   top: 18px;
 
   top: 18px;
−
  font-family: Arial; font-size: 1.15em;
 
 
   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, #top_title {display:none;}
+
#sideMenu { z-index: 10 !important; background-color: white; position: fixed;}
−
#content {  
+
#content {  
−
          all: initial; margin-left: 0 !important;
+
  margin-left: 0 !important; all: initial;
−
          height: 100%; width: 100%; padding:0px; margin-top:-7px;
+
  height: 100%; width: 100%; padding:0px;  
−
          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+
  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; }
+
−
 
+
−
 
+
−
span.glyphicon-grain{
+
−
    font-size: 1.5em;
+
 
}
 
}
−
 
+
body {background-color: white; }
−
/************************************ Green Nav *****************************************************************************/
+
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
/************************************ #0f9347 Nav ***********************************************************************/
+
   #globalWrapper{ padding-bottom: 0 !important; }
−
.navbar-green {
+
−
  background-color: #0f9347;
+
−
  border-color: #0f9347;
+
−
  top: 14px;
+
−
  font-weight: bold; 
+
−
}
+
−
.navbar-green .navbar-brand {
+
−
   color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-brand:hover,
+
−
.navbar-green .navbar-brand:focus {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-text {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-nav > li > a {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-nav > li > a:hover,
+
−
.navbar-green .navbar-nav > li > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-nav > .active > a,
+
−
.navbar-green .navbar-nav > .active > a:hover,
+
−
.navbar-green .navbar-nav > .active > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-nav > .open > a,
+
−
.navbar-green .navbar-nav > .open > a:hover,
+
−
.navbar-green .navbar-nav > .open > a:focus {
+
−
  color: #ffffff;
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-toggle {
+
−
  border-color: #000000;
+
−
}
+
−
.navbar-green .navbar-toggle:hover,
+
−
.navbar-green .navbar-toggle:focus {
+
−
   background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-toggle .icon-bar {
+
−
  background-color: #0f9347;
+
−
}
+
−
.navbar-green .navbar-collapse,
+
−
.navbar-green .navbar-form {
+
−
  border-color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-link {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-green .navbar-link:hover {
+
−
  color: #ffffff;
+
−
}
+
−
 
+
−
@media (max-width: 767px) {
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a {
+
−
    color: #ffffff;
+
−
  }
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a:hover,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > li > a:focus {
+
−
    color: #ffffff;
+
−
  }
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a:hover,
+
−
  .navbar-green .navbar-nav .open .dropdown-menu > .active > a:focus {
+
−
    color: #ffffff;
+
−
    background-color: #0f9347;
+
−
  }
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/************************************ Transparent Nav ***********************************************************************/
+
−
.navbar-clear {
+
−
  background-color: transparent;
+
−
  border-color: transparent;
+
−
  top: 14px;
+
−
  font-weight: bold; 
+
−
}
+
−
.navbar-clear .navbar-brand {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-clear .navbar-brand:hover,
+
−
.navbar-clear .navbar-brand:focus {
+
−
  color: #30E3CA;
+
−
}
+
−
.navbar-clear .navbar-text {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-clear .navbar-nav > li > a {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-clear .navbar-nav > li > a:hover,
+
−
.navbar-clear .navbar-nav > li > a:focus {
+
−
  color: #30E3CA;
+
−
  background-color: transparent;
+
−
}
+
−
.navbar-clear .navbar-nav > .active > a,
+
−
.navbar-clear .navbar-nav > .active > a:hover,
+
−
.navbar-clear .navbar-nav > .active > a:focus {
+
−
  color: #30E3CA;
+
−
  background-color: transparent;
+
−
}
+
−
.navbar-clear .navbar-nav > .open > a,
+
−
.navbar-clear .navbar-nav > .open > a:hover,
+
−
.navbar-clear .navbar-nav > .open > a:focus {
+
−
  color: #30E3CA;
+
−
  background-color: transparent;
+
−
}
+
−
.navbar-clear .navbar-toggle {
+
−
  border-color: #000000;
+
−
}
+
−
.navbar-clear .navbar-toggle:hover,
+
−
.navbar-clear .navbar-toggle:focus {
+
−
  background-color: transparent;
+
−
}
+
−
.navbar-clear .navbar-toggle .icon-bar {
+
−
  background-color: transparent;
+
−
}
+
−
.navbar-clear .navbar-collapse,
+
−
.navbar-clear .navbar-form {
+
−
  border-color: #ffffff;
+
−
}
+
−
.navbar-clear .navbar-link {
+
−
  color: #ffffff;
+
−
}
+
−
.navbar-clear .navbar-link:hover {
+
−
  color: #30E3CA;
+
−
}
+
−
 
+
−
@media (max-width: 767px) {
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a {
+
−
    color: #ffffff;
+
−
  }
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a:hover,
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > li > a:focus {
+
−
    color: #30E3CA;
+
−
  }
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a,
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a:hover,
+
−
  .navbar-clear .navbar-nav .open .dropdown-menu > .active > a:focus {
+
−
    color: #30E3CA;
+
−
    background-color: transparent;
+
−
  }
+
−
}
+
−
 
+
−
 
+
−
 
+
  
  
Line 193: Line 28:
 
}
 
}
  
 +
/*cover image (the trees and mountains) styling*/
 
.cover{
 
.cover{
 +
  background: #0F9347; /*backup in case the header image does not load*/
 
   position: relative;
 
   position: relative;
 
   top: -14px !important; left: 0 !important;  
 
   top: -14px !important; left: 0 !important;  
Line 199: Line 36:
 
   height: 50vh; min-height: 50%; width: 100vw; max-width: 100%;
 
   height: 50vh; min-height: 50%; width: 100vw; max-width: 100%;
 
}
 
}
−
 
  
 
.cover .container-fluid{
 
.cover .container-fluid{
 
   position: absolute;
 
   position: absolute;
 
   bottom: 0;
 
   bottom: 0;
−
   color: #E4F9F5;
+
   color: #ffffff;
 
   padding-left: 60px;
 
   padding-left: 60px;
−
}
 
−
 
−
@media (max-width: 768px) {
 
−
  .cover{
 
−
    background-position: 0px 0px;
 
−
  }
 
 
}
 
}
  
 
#title{
 
#title{
−
   text-shadow: 0px 0px 15px black;
+
   text-shadow: 0px 0px 15px black; /*helps the title text inside the cover image stand out*/
−
}
+
−
 
+
−
.content{
+
−
  position: relative;
+
−
  height: 2000px;
+
−
  background-color: white;
+
−
  padding-bottom: 3em;
+
 
}
 
}
  
 +
/*breadcrumb navigation to show which path in the website you are on*/
 
#breadcrumbs{
 
#breadcrumbs{
−
   background-color: #40514E;  
+
   background-color: #8CC63F;  
−
   height: 50px; color: #E4F9F5; line-height: 50px; font-size: 13px;
+
   height: 50px; color: #ffffff; line-height: 50px; font-size: 1em;
 
   padding-left: 30px; margin-top: -14px;
 
   padding-left: 30px; margin-top: -14px;
 
   z-index: 2;
 
   z-index: 2;
Line 233: Line 57:
  
 
#breadcrumbs a{
 
#breadcrumbs a{
−
   color: #E4F9F5;
+
   color: #ffffff;
 
}
 
}
  
 +
/*generic content wrapper, ensures pages do not exceed 100% width*/
 
.content-wrap{
 
.content-wrap{
 
   position: relative;
 
   position: relative;
 
   height: 100%;  
 
   height: 100%;  
−
   background: white;
+
   background-color: white;
 
   padding: 25px;  
 
   padding: 25px;  
 
   width: 100vw; max-width: 100%;
 
   width: 100vw; max-width: 100%;
 
}
 
}
  
 +
.content-wrap p{
 +
  font-size: 16px !important;
 +
  text-indent: 50px;
 +
}
 +
 +
/*styling for the links below each page encouraging readers to visit other sections of the website*/
 
#read-more{
 
#read-more{
−
   background-color: #40514E;  
+
   background-color: #8CC63F;  
−
   height: 50px; color: #E4F9F5; line-height: 50px;
+
   height: 50px; color: #ffffff; line-height: 50px;
 
   margin-bottom: 0;  
 
   margin-bottom: 0;  
−
   text-align: center !important;
+
   text-align: center !important; font-size: 1em !important;  
 
}
 
}
  
Line 260: Line 91:
 
}
 
}
  
−
#previous img:hover, #next img:hover{
+
#previous:hover img, #next:hover img{
 
   transform: scale(1.15);
 
   transform: scale(1.15);
 
}
 
}
  
 
#previous figcaption, #next figcaption{
 
#previous figcaption, #next figcaption{
−
   position: absolute;
+
  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%);
 +
   position: absolute; width: 100%; height: 100px;
 
   bottom: 0; left: 0; padding: 25px;
 
   bottom: 0; left: 0; padding: 25px;
−
   color: #E4F9F5; font-size: 2em;
+
   color: #ffffff; font-size: 2em;
 
}
 
}
−
 
−
#previous
 
−
 
−
.dropdown-submenu {
 
−
    position: relative;
 
−
}
 
−
 
−
.dropdown-submenu>.dropdown-menu {
 
−
    top: 0;
 
−
    left: 100%;
 
−
    margin-top: -6px;
 
−
    margin-left: -1px;
 
−
    -webkit-border-radius: 0 6px 6px 6px;
 
−
    -moz-border-radius: 0 6px 6px;
 
−
    border-radius: 0 6px 6px 6px;
 
−
}
 
−
 
−
.dropdown-submenu:hover>.dropdown-menu {
 
−
    display: block;
 
−
}
 
−
 
−
.dropdown-submenu>a:after {
 
−
    display: block;
 
−
    content: " ";
 
−
    float: right;
 
−
    width: 0;
 
−
    height: 0;
 
−
    border-color: transparent;
 
−
    border-style: solid;
 
−
    border-width: 5px 0 5px 5px;
 
−
    border-left-color: #ccc;
 
−
    margin-top: 5px;
 
−
    margin-right: -10px;
 
−
}
 
−
 
−
.dropdown-submenu:hover>a:after {
 
−
    border-left-color: #fff;
 
−
}
 
−
 
−
.dropdown-submenu.pull-left {
 
−
    float: none;
 
−
}
 
−
 
−
.dropdown-submenu.pull-left>.dropdown-menu {
 
−
    left: -100%;
 
−
    margin-left: 10px;
 
−
    -webkit-border-radius: 6px 0 6px 6px;
 
−
    -moz-border-radius: 6px 0 6px 6px;
 
−
    border-radius: 6px 0 6px 6px;
 
−
}
 
−
 
 
</style>
 
</style>
−
 
−
<script>
 
−
$(window).on("scroll", function() {swapNavs()});
 
−
 
−
function swapNavs(){
 
−
var width = $(window).width();
 
−
    if($(window).scrollTop() > 100) {
 
−
        $(".navbar-clear").fadeOut();
 
−
        $(".navbar-green").fadeIn();
 
−
    } else if(width >= 768){
 
−
        $(".navbar-clear").fadeIn();
 
−
        $(".navbar-green").fadeOut();
 
−
    }
 
−
}
 
−
 
−
$(window).on("resize", function(){checkSize()});
 
−
 
−
function checkSize(){
 
−
var width = $(window).width();
 
−
    if(width < 768){
 
−
        $(".navbar-clear").fadeOut();
 
−
        $(".navbar-green").fadeIn();
 
−
    } else if(width >= 768){
 
−
        if($(window).scrollTop() >= 100){
 
−
            $(".navbar-clear").fadeOut();
 
−
            $(".navbar-green").fadeIn();
 
−
        }else if($(window).scrollTop() < 100) {
 
−
            $(".navbar-clear").fadeIn();
 
−
            $(".navbar-green").fadeOut();
 
−
        }
 
−
    }
 
−
}
 
−
</script>
 
  
 
</head>
 
</head>
−
</head>
 
−
<header>
 
−
  <nav class="navbar navbar-green 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="https://2016.igem.org/Team:British_Columbia"><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 class="dropdown-submenu">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <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/S-Layer/Cellulases">Cellulases</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">Laccases</a></li>
 
−
                </ul>
 
−
              </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>
 
−
 
−
  <nav class="navbar navbar-clear 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="https://2016.igem.org/Team:British_Columbia"><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 class="dropdown-submenu">
 
−
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">S-Layer</a>
 
−
                <ul class="dropdown-menu">
 
−
                  <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/S-Layer/Cellulases">Cellulases</a></li>
 
−
                  <li><a href="https://2016.igem.org/Team:British_Columbia/Project/S-Layer/Laccases">Laccases</a></li>
 
−
                </ul>
 
−
              </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