Difference between revisions of "Team:Austin UTexas LASA/Templates/header"

 
(239 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
+
   
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:BootstrapStyling?action=raw&ctype=text/css" rel="stylesheet">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 +
    <meta name="description" content="">
 +
    <meta name="author" content="">
 +
    <link rel="icon" href="https://getbootstrap.com/docs/3.3/favicon.ico">
  
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
+
    <!-- Bootstrap core CSS -->
 +
    <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:NEStyle?action=raw&ctype=text/css" rel="stylesheet">
+
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 +
    <link href="https://getbootstrap.com/docs/3.3/dist/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
  
<script type="text/javascript" src="https://2016.igem.org/Team:Imperial_College/Resources/JS?action=raw&ctype=text/javascript"></script>
+
    <!-- Custom styles for this template -->
 +
    <link href="https://getbootstrap.com/docs/3.3/dist/css/navbar-fixed-top.css" rel="stylesheet">
  
<link rel="stylesheet" href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:VerticalScroll&amp;action=raw&amp;ctype=text/css">
+
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 +
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 +
    <script src="https://getbootstrap.com/docs/3.3/dist/css/ie-emulation-modes-warning.js.download"></script>
  
<script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script>
+
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1">
+
    <!--[if lt IE 9]>
 +
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 +
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
    <![endif]-->
  
<script src="https://2016.igem.org/Team:Imperial_College/Resources/Modernizers&amp;action=raw&amp;ctype=text/javascript"></script>
+
    <link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
<script src="https://2016.igem.org/Team:Imperial_College/Resources/JS:Bootstrap&amp;action=raw&amp;ctype=text/javascript"></script>
+
    <link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet">
<script src="https://2016.igem.org/Team:Imperial_College/Resources/JS:Jquery&amp;action=raw&amp;ctype=text/javascript"></script>
+
    <link href="https://fonts.googleapis.com/css?family=Antic" rel="stylesheet">
 
+
<script src="https://2015.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
 
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
 
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
+
  
 
<style>
 
<style>
  
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
  body,
 +
  html{
 +
  padding:0;
 +
  overflow-x: hidden;
 +
  position: relative;
 +
  }
  
#sideMenu,
+
  #content {
#top_title {
+
  width: 100%;
  display: none;
+
  height: 100%;
}
+
  border:0;
 +
  margin: 0px;
 +
  padding:0px;
 +
  background-color:#F6F2EA;
 +
  background-image: url("https://static.igem.org/mediawiki/2017/b/bb/T--Austin_UTexas_LASA--backgroundTrans.png") ;
 +
  background-repeat: no-repeat; 
 +
  }
  
#content {
+
  h1,h2,h3, h4, h5 {
  padding: 0px;
+
    /* font-family: 'News Cycle', sans-serif !important; */
  width: 100%;
+
    font-family: 'Antic', sans-serif !important;
}
+
  }
  
body {
+
  h1 {
  background-color: white;
+
    text-align: left;
  width: 100%;
+
    background-color: #7D5E7F;
}
+
    color: white;
 +
    padding-top:40px;
 +
    padding-left:20px;
 +
    height: 100px;
 +
  }
  
#bodyContent h1,
+
  .page_title {
#bodyContent h2,
+
    font-family: 'News Cycle', sans-serif;
#bodyContent h3,
+
  }
#bodyContent h4,
+
#bodyContent h5 {
+
  margin-bottom: 0px;
+
}
+
  
#bodyContent {
+
  #top_title, #sideMenu{
  padding-right: 0px;
+
    display: none;
}
+
  }
  
#globalWrapper {
 
  font-size: 100%;
 
  padding: 0px;
 
  margin: -10px -20px -20px -20px;
 
}
 
  
.navbar-collapse {
+
  /* for making menu open on hover */
  padding-left: 0px;
+
@media (min-width: 979px) {
}
+
  ul.nav li.dropdown:hover > ul.dropdown-menu {
 +
    display: block;
 +
  }
  
#banner {
+
}
  margin-top: 50px;
+
}
+
  
#sideMenu {
+
.navbar-default {
  margin-top: 10px;
+
    /* background-color: #7D5E7F; */
 +
    background-color: #2B1C26;
 +
    border-color: transparent;
 
}
 
}
  
.dropdown-menu li:hover .sub-menu {
+
.navbar-default .navbar-nav > li > a {
  visibility: visible;
+
    /* background-color: #7D5E7F; */
 +
    background-color: #2B1C26;
 +
    color: white
 
}
 
}
  
.dropdown:hover .dropdown-menu {
+
.navbar-default .navbar-nav > li > a:hover,
  display: block;
+
.navbar-default .navbar-nav > li > a:focus {
 +
    color: #C5C5C5;
 
}
 
}
  
.navbar-nav .dropdown-menu,
+
.nav a{
.navbar .dropdown-menu {
+
    font-family: 'Coda', cursive, sans-serif !important;
  margin-top: 0;
+
    font-size: 1.2em;
}
+
    }
  
 
+
#HQ_page p {
/********************************* CONTENT OF THE PAGE ********************************/
+
    /* font-family: "Arial",Helvetica,sans-serif; */
 
+
    font-family: 'Antic', sans-serif;
 
+
    font-size: 20px;
/* Wrapper for the content */
+
    text-align: justify;
 
+
.content_wrapper {
+
  width: 85%;
+
  margin-left: 150px;
+
  padding: 0px;
+
  float: left;
+
  background-color: white;
+
 
}
 
}
  
  
/*LAYOUT */
 
 
.column {
 
  padding: 10px 0px;
 
  float: left;
 
  background-color: white;
 
}
 
 
.full_size {
 
  width: 100%;
 
}
 
 
.full_size img {
 
  padding: 10px 15px;
 
  width: 96.5%;
 
}
 
 
.half_size {
 
  width: 50%;
 
}
 
 
.half_size img {
 
  padding: 10px 15px;
 
  width: 93%;
 
}
 
 
.img:hover {
 
  opacity: 1.0 !important;
 
}
 
 
.clear {
 
  clear: both;
 
}
 
 
.highlight {
 
  width: 90%;
 
  margin: auto;
 
  padding: 15px 5px;
 
  background-color: #f2f2f2;
 
}
 
 
.judges-will-not-evaluate {
 
  border: 4px solid #72c9b6;
 
  display: block;
 
  margin: 5px 15px;
 
  width: 95%;
 
  font-weight: bold;
 
}
 
 
 
/*STYLING */
 
 
 
/* styling for the titles */
 
 
.content_wrapper h1,
 
.content_wrapper h2 {
 
  padding: 5px 15px;
 
  border-bottom: 0px;
 
  color: #72c9b6;
 
}
 
 
.content_wrapper h3,
 
.content_wrapper h4,
 
.content_wrapper h5,
 
.content_wrapper h6 {
 
  padding: 5px 15px;
 
  border-bottom: 0px;
 
  color: #000000;
 
}
 
 
 
/* font and text */
 
 
.content_wrapper p {
 
  padding: 0px 15px;
 
  font-size: 13px;
 
  font-family: 'Roboto', sans-serif;
 
}
 
 
 
/* Links */
 
 
.content_wrapper a {
 
  font-weight: bold;
 
  text-decoration: underline;
 
  text-decoration-color: #72c9b6;
 
  color: #72c9b6;
 
  -webkit-transition: all 0.4s ease;
 
  -moz-transition: all 0.4s ease;
 
  -ms-transition: all 0.4s ease;
 
  -o-transition: all 0.4s ease;
 
  transition: all 0.4s ease;
 
}
 
 
 
/* hover for the links */
 
 
.content_wrapper a:hover {
 
  text-decoration: none;
 
  color: #000000;
 
}
 
 
 
/* non numbered lists */
 
 
.content_wrapper ul {
 
  padding: 0px 20px;
 
  font-size: 13px;
 
  font-family: 'Quicksand', sans-serif;
 
}
 
 
 
/* numbered lists */
 
 
.content_wrapper ol {
 
  padding: 0px;
 
  font-size: 13px;
 
  font-family: 'Quicksand', sans-serif;
 
}
 
 
 
/* Table */
 
 
.content_wrapper table {
 
  width: 97%;
 
  margin: 15px 10px;
 
  border: 1px solid #d3d3d3;
 
  border-collapse: collapse;
 
}
 
 
 
/* table cells */
 
 
.content_wrapper td {
 
  padding: 10px;
 
  vertical-align: text-top;
 
  border: 1px solid #d3d3d3;
 
  border-collapse: collapse;
 
}
 
 
 
/* table headers */
 
 
.content_wrapper th {
 
  padding: 10px;
 
  vertical-align: text-top;
 
  border: 1px solid #d3d3d3;
 
  border-collapse: collapse;
 
  background-color: #f2f2f2;
 
}
 
 
 
/* Button class */
 
 
.button_click {
 
  margin: 10px auto;
 
  padding: 15px;
 
  width: 12%;
 
  text-align: center;
 
  font-weight: bold;
 
  background-color: #72c9b6;
 
  cursor: pointer;
 
  -webkit-transition: all 0.4s ease;
 
  -moz-transition: all 0.4s ease;
 
  -ms-transition: all 0.4s ease;
 
  -o-transition: all 0.4s ease;
 
  transition: all 0.4s ease;
 
}
 
 
 
/* button class on hover */
 
 
.button_click:hover {
 
  background-color: #000000;
 
  color: #72c9b6;
 
}
 
 
.top-pad {
 
  padding: 35px;
 
}
 
 
 
/********************************* RESPONSIVE STYLING ********************************/
 
 
 
/* IF THE SCREEN IS LESS THAN 1000PX */
 
 
@media only screen and (max-width: 1000px) {
 
  #content {
 
    width: 100%;
 
  }
 
  .menu_wrapper {
 
    width: 15%;
 
  }
 
  .content_wrapper {
 
    margin-left: 15%;
 
  }
 
  .menu_item {
 
    display: block;
 
  }
 
  .icon {
 
    display: none;
 
  }
 
  .highlight {
 
    padding: 10px 0px;
 
  }
 
}
 
 
 
/* IF THE SCREEN IS LESS THAN 680PX */
 
 
@media only screen and (max-width: 680px) {
 
  .collapsable_menu_control {
 
    display: block;
 
  }
 
  .menu_item {
 
    display: none;
 
  }
 
  .menu_wrapper {
 
    width: 100%;
 
    height: 15%;
 
    position: relative;
 
  }
 
  .content_wrapper {
 
    width: 100%;
 
    margin-left: 0px;
 
  }
 
  .column.half_size {
 
    width: 100%;
 
  }
 
  .column img {
 
    width: 100%;
 
    padding: 5px 0px;
 
  }
 
  .icon {
 
    display: block;
 
  }
 
  .highlight {
 
    padding: 15px 5px;
 
  }
 
}
 
  
 
</style>
 
</style>
  
<script>
+
  </head>
  
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
+
    <header>
  
$(document).ready(function() {
+
    <!-- Fixed navbar -->
 +
    <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
 +
      <div class="container-fluid" style="padding-left:5px;">
 +
        <div class="navbar-header navbar-left">
 +
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 +
            <span class="sr-only">Toggle navigation</span>
 +
            <span class="icon-bar"></span>
 +
            <span class="icon-bar"></span>
 +
            <span class="icon-bar"></span>
 +
          </button>
 +
          <a  href="https://2017.igem.org/Team:Austin_UTexas_LASA"><img src="https://static.igem.org/mediawiki/2017/2/2f/T--Austin_UTexas_LASA--logoblack.jpg" style="height:53px;width:150px"></a>
 +
        </div>
 +
        <div id="navbar" class="navbar-collapse collapse">
 +
          <ul class="nav navbar-nav navbar-right">
 +
            <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA" style="font-size:1.0em"><b>Home</b></a></li>
 +
            <li class="dropdown">
 +
              <a href="https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:1.0em"><b>Project</b><span class="caret"></span></a>
 +
              <ul class="dropdown-menu">
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Description">Description</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Design">Design</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Parts">Parts</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Experiments">Experiments</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Results">Results</a></li>
 +
              </ul>
 +
            </li>
  
$("#HQ_page").attr('id','');
+
            <li class="dropdown">
+
              <a href="https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:1.0em"><b>Practices</b><span class="caret"></span></a>
 +
              <ul class="dropdown-menu">
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Notebook">Notebook</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Safety">Safety</a></li>
 +
              </ul>
 +
            </li>
  
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
+
            <li class="dropdown">
$("#team_name").html( wgPageName );
+
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:1.0em"><b>Other Aspects</b><span class="caret"></span></a>
}
+
              <ul class="dropdown-menu">
 
+
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Contribution">Contributions</a></li>
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Collaborations">Collaborations</a></li>
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Engagement">Public Engagement</a></li>
}
+
              </ul>
 
+
            </li>
else {
+
// this adds the team's name as an h1
+
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
+
 
+
// this adds the page's title as an h4
+
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
}
+
 
+
 
+
 
+
 
+
$('#accordion').find('.menu_item').click(function(){
+
 
+
//Expand or collapse this panel
+
submenu = $(this).find('.submenu');
+
submenu.toggle();
+
 
+
icon = $(this).find('.icon');
+
 
+
if ( !$( submenu ).is(':visible') ) {
+
icon.removeClass("less").addClass("plus");
+
}
+
else {
+
icon.removeClass("plus").addClass("less");
+
}
+
 
+
//Hide the other panels
+
$(".submenu").not(submenu).hide();
+
$(".icon").not(icon).removeClass("less").addClass("plus");
+
});
+
 
+
 
+
$(".collapsable_menu_control").click(function() {
+
$(".menu_item").toggle();
+
});
+
 
+
$( window ).resize(function() {
+
$(".menu_item").show();
+
});
+
 
+
 
+
});
+
 
+
 
+
 
+
 
+
</script>
+
</head>
+
 
+
 
+
 
+
<body>
+
  <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
+
    <div class="container-fluid">
+
      <div class="navbar-header">
+
 
+
        <a class="navbar-logo" href="https://2016.igem.org/Team:Imperial_College">
+
          <image class="img-responsive" src="https://static.igem.org/mediawiki/2016/2/2a/T--Imperial_College--Logo.png" height="80" width="80">
+
        </a>
+
  
 +
            <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="font-size:1.0em"><b>Team & iGEM</b><span class="caret"></span></a>
 +
              <ul class="dropdown-menu">
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Team">Team</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Attributions">Attributions</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Austin_UTexas_LASA/Medals">Medal Criteria</a></li>
 +
              </ul>
 +
            </li>
  
 +
          </ul>
 +
        </div><!--/.nav-collapse -->
 
       </div>
 
       </div>
      <div class="navbar-header" style="padding-top: 15px; padding-left: 15px;">
+
    </nav>
        <a class="navbar-logo" href="https://2016.igem.org/Team:Imperial_College">
+
          <image class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/1a/T--Imperial_College--Imperial_Logo.png" height="120" width="120">
+
        </a>
+
      </div>
+
  
      <div id="navbar" class="navbar-collapse collapse">
+
 
        <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
+
          <li class="dropdown">
+
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Description">Project <span class="caret"></span></a>
+
            <ul class="dropdown-menu" style="left:0;">
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Description">Description</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Results">Results</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Proof">Proof</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Basic_Part">Basic Parts</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Composite_Part">Composite Parts</a></li>
+
            </ul>
+
          </li>
+
  
 +
    </header>
 +
    <!-- Bootstrap core JavaScript
 +
    ================================================== -->
 +
    <!-- Placed at the end of the document so the pages load faster -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
 +
    <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
 +
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 +
    <script src="https://getbootstrap.com/docs/3.3/dist/js/ie10-viewport-bug-workaround.js"></script>
  
          <li class="dropdown">
+
   
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Model">Modelling <span class="caret"></span></a>
+
            <ul class="dropdown-menu" style="left:0;">
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Model">Overview</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/SingleCell">Single Cell Model</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/GRO">Population Model</a></li>
+
 
+
            </ul>
+
          </li>
+
 
+
 
+
          <li>
+
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Software">Software Tools </a></li>
+
 
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Notebook">Notebook <span class="caret"></span></a>
+
            <ul class="dropdown-menu" style="left:0;">
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Notebook">Lab book</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Experiments">Protocols</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Medals">Medal Criteria</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/BrainStorm">Brainstorm</a></li>
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices <span class="caret"></span></a>
+
            <ul class="dropdown-menu">
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Integrated_Practices">Integrated Practices</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">Public Engagement</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Collaborations">Collaborations</a></li>
+
 
+
            </ul>
+
          </li>
+
 
+
          <li class="dropdown">
+
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Team">Team <span class="caret"></span></a>
+
            <ul class="dropdown-menu" style="text-align: right;">
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Team">Team</a></li>
+
              <li><a href="https://2016.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>
+
 
+
            </ul>
+
          </li>
+
        </ul>
+
      </div>
+
      <!-- /.navbar-collapse -->
+
    </div>
+
    <!-- /.container-fluid -->
+
  </nav>
+
</body>
+
 
+
 
</html>
 
</html>

Latest revision as of 01:41, 2 November 2017