Difference between revisions of "Template:Chalmers-Gothenburg"

Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
  
−
<!-- Start of CSS-->
 
−
<style type="text/css">
 
  
−
/* PAGE LAYOUT */
+
  <!-- custom body font -->
 +
  <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Oswald' rel='stylesheet' type='text/css'>
  
−
/* Change Background color*/
+
  <script>
−
body {  
+
    $(function(){ // document ready
−
background-color: #fff;
+
      if($(window).width() >= 1200){
−
}
+
        var stickyTop = $('#section1-menu').offset().top; // returns number
 +
        $(window).scroll(function(){ // scroll event
 +
          var windowTop = $(window).scrollTop(); // returns number
 +
          if (stickyTop < windowTop+60) {
 +
            $('#section1-menu').css({ position: 'fixed', top: 60 });
 +
            $('#section1-menu').css({'margin-top':'0px'});
 +
            $('#section1-toc').css({ position: 'fixed', top: 60 });
 +
          }
 +
          else {
 +
            $('#section1-menu').css('position','static');
 +
            $('#section1-menu').css({'margin-top':'120px'});
 +
            $('#section1-toc').css('position','static');
 +
          }
 +
        });
 +
      }
 +
    });
 +
  </script>
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
  <style type="text/css">
−
#mainContainer { 
+
−
width: 978px;
+
−
overflow:hidden;
+
−
float:left;
+
−
margin-left:20px;
+
−
margin-bottom: 10px;
+
−
background-color: #fff;
+
−
border-bottom: 14px solid #565656;
+
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/* Creates the container for the menu */
+
    /* body heading fonts */
−
#menuContainer  {  
+
    h2, h3 { font-family: Oswald, sans-serif; }
−
float:left;
+
    h4 { font-family: 'Slabo 27px', serif; }
−
width: 134px;
+
−
padding: 20px 0px;
+
−
border-top: 14px solid #565656;
+
−
background-color: #E8E8E9;
+
−
}
+
  
−
/* Creates the container for the content */
+
    /*
−
#contentContainer {
+
    * default stylesheet overrides
−
padding-top:20px;
+
    */
−
padding-right:10px;
+
−
margin-bottom: 20px;
+
−
width: 814px;
+
−
padding-left: 20px;
+
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/*Set up height place holder for the banner*/
+
    body {
−
#bannerContainer {
+
      background-color: #ffffff;
−
height:200px;
+
      font-family: 'Slabo 27px', serif;
−
margin:auto;
+
      font-size: 13pt;
−
text-align:center;
+
      color: #444444;
−
color: #24B694;
+
    }
−
}
+
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
    /* reset margins & paddings */
 +
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
 +
    dt, dd, blockquote, address {
 +
      margin: 0;
 +
      padding: 0;
 +
      border: 0;
 +
    }
  
−
/*Change the styling of text for everything inside main container*/
+
    /* center the wiki top menu  */
−
#mainContainer p {  
+
    #top_menu_inside {
−
font-size: 13px;
+
      margin: auto;
−
color: #000000;
+
    }
−
}
+
−
+
−
/*This changes the color and font family */
+
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
−
color: #565656;
+
−
border-bottom: none;
+
−
font-weight: bold;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
  
−
/*Style of the links - links are different inside the menu */
+
    /* enable use of full browser width */
−
#contentContainer a {  
+
    #globalWrapper, #content {  
−
font-weight: bold;
+
      width: 100%;
−
color: #23b593;
+
−
}
+
  
−
  /* Styling links on hover- links are different inside the menu */
+
      margin: 0px;
−
#contentContainer a:hover {
+
      padding: 0px;
−
color: #59bf92;
+
    }
−
}
+
  
−
/*Change the styling of tables */
+
    /*
−
        #contentContainer table {
+
    * Custom styles
−
    border: 1px solid #565656;
+
    */
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
    #main {
−
    #contentContainer  td {
+
      width: 100%;
−
    padding: 10px;
+
      height: 50px;
−
    border: 1px solid #565656;
+
    }
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
    /* Header */
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
 +
    #header {
 +
      width: 100%;
 +
      min-width: 1200px;
 +
      background-color: #e8e8e8;
 +
      //background-image: url(http://www.transparenttextures.com/patterns/crissxcross.png);
 +
      background-image: url('https://static.igem.org/mediawiki/2015/0/0a/Headerpicgbg.jpeg');
 +
      background-size: 100%;
 +
      background-position: center;
 +
      border-bottom: 4px solid #018c92;
 +
    }
  
 +
    #header-content {
 +
      position: relative;
 +
      width: 1200px;
 +
      height: 210px;
 +
      margin: 0px auto;
 +
      color: #ffffff;
 +
    }
  
−
/*MENU STYLING */
+
    #header-content img#logo {
 +
      position: absolute;
 +
      top: 67px;
 +
      left: 45px;
 +
    }
  
−
/*Styling for the links in the menu */
+
    #header-content img#study-in-scarlet {
−
#menuContainer a {
+
      position: absolute;
−
color: #565656;
+
      top: 70px;
−
text-decoration:none;
+
      left: 397px;
−
font-weight: bold;
+
    }
−
}
+
  
−
/* Sets the style for lists inside menuContainer  */
+
    /* woo css */
−
#menuContainer ul {
+
−
list-style: none;
+
−
margin-left:0px;
+
−
}
+
  
−
/*Styles the list items to become menu buttons */
+
    #my_content {
−
#menuContainer ul li {  
+
      width: 1200px;
−
text-align: center;
+
      margin: 0px auto;
−
display: block;
+
      position: relative;
−
width: 100%;
+
    }
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
  
−
/*For the menu buttons, changes the color when hovering*/
+
    /* Section 1 */
−
#menuContainer li:hover {
+
−
color:  #FFF;
+
−
background-color: #24B694;
+
−
}
+
  
−
/*Submenus are not displayed as default*/
+
    #section1 {
−
#menuContainer li ul {
+
      width: 1200px;
−
display: none;
+
      margin: 0px auto;
−
padding-top:15px;
+
      position: relative;
−
margin-left: -19px;
+
    }
−
}
+
  
−
/*Submenus are displayed when hovering the menu button */
+
    #section1-menu {
−
#menuContainer li:hover ul {
+
      float: left;
−
/*display: inline-block; */
+
      border-right: 1px dashed #bbb;
−
display: block;  
+
      margin-top: 130px;
−
position: absolute;
+
      text-align: center;
−
float:right;
+
    }
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
    #section1-menu ul {
−
#menuContainer li ul li{
+
      list-style: none;
−
background-color: #59BF92;  
+
      margin: 0px;
−
padding-left:20px;
+
      padding-right: 25px;
−
padding-right:20px;
+
    }
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
−
/*CLASSES */
+
    nav ul ul {
 +
      position:absolute;
 +
      left: 230px;
 +
      top: 0px;
 +
      background-color: #ef5c80;
 +
      display:none;
 +
      z-index: 1000;
 +
      width: 230px;
 +
      border-right: 4px solid #ef8c90;
 +
    }
  
−
/*Clear class for all the pages, adds spacing too*/
+
    nav ul ul:hover + a {
−
.clear{
+
      background-color: #ef5c80;
−
clear:both;
+
      color: #fff;
−
height: 10px;
+
    }
−
}
+
  
 +
    nav ul li:hover ul {
 +
      /* When list item is hovered, display UL nested within. */
 +
      display:block;
 +
    }
  
−
/* highlight box for special messages */
+
    #section1-menu ul>li {
−
    .highlightBox {
+
      margin-right: 15px;
−
        width:500px;
+
      margin-left: 15px;
−
        margin:auto;
+
      position: relative;
−
        background-color: #E8E8E9;
+
    }
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
 +
    #section1-menu ul>li>a {
 +
      display: block;
 +
      width: 230px;
 +
      color: #333;
 +
      padding-top: 2px;
 +
      padding-bottom: 2px;
 +
      margin-bottom: 2px;
 +
    }
  
−
</style>
+
    #section1-menu a.arrow {
−
<!-- End of CSS -->
+
      background-image: url('https://static.igem.org/mediawiki/2015/5/57/DownArrow.png');
 +
      background-repeat: no-repeat;
 +
      background-position: 99% center;
 +
    }
  
 +
    #section1-menu ul>li>a.active {
 +
      background-color: #ef5c80;
 +
      color: #fff;
 +
    }
  
−
<!-- Start of the template html elements. -->
+
    #section1-menu ul>li>a:hover {
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
      background-color: #ef5c80;
 +
      color: #fff;
 +
      text-decoration: none;
 +
    }
  
 +
    #section1-content {
 +
      width: 640px;
 +
      position: absolute;
 +
      right: 230px;
 +
      color: #333333;
 +
    }
  
−
<div id="bannerContainer">
+
    #section1-content p {
−
<br><br>
+
      margin-bottom: 30px;
−
<h2> Add a banner to your wiki! </h2>
+
      line-height: 150%;
−
+
      /*text-align: justify;
−
<p>You can make the image 980px  by  200px</p>
+
      text-justify: inter-word;*/
−
<p> Remember to call the file: "<i>Team_Chalmers-Gothenburg_banner.jpg</i>" </p>
+
    }
−
</div>
+
  
−
<!-- Start of menu -->
+
    #section1-content h2 {
−
<div id="menuContainer">
+
      padding-bottom: 15px;
 +
      color: #333333;
 +
      margin-top: 55px;
 +
    }
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
    #section1-toc-container {
−
<ul>
+
      position: absolute;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg"><li>HOME</li></a>
+
      right: 0px;
 +
      margin-top: 130px;
 +
      width: 200px;
 +
    }
  
 +
    #section1-toc {
 +
      border: 1px solid #bbb;
 +
      background-color: #eee;
 +
      font-size: 12pt;
 +
      padding: 5px;
 +
      box-shadow: 0 0 3px 2px rgba(0,0,0,.05);
 +
      position: static;
 +
      width: 200px;
 +
      padding-bottom: 15px;
 +
    }
  
 +
    #section1-toc a {
 +
      color: #777;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Team"><li>TEAM
+
    /* Sidebar */
−
<ul> 
+
−
 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Students"><li>Students</li></a>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Supervisors"><li>Supervisors</li></a> 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions"><li>Attributions</li></a>   
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Gallery"><li>Gallery</li></a>
+
−
+
−
</ul>
+
  
−
</li></a>
+
    /* #sidebar {
 +
      background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Gothenburg_concrete.png);
 +
      position: absolute;
 +
      width: 240px;
 +
      right: 0px;
 +
      top: 0px;
 +
      padding: 15px;
 +
      padding-top: 45px;
 +
      text-align: center;
 +
      color: #999;
 +
      border: 1px solid #dddddd;
 +
      border-top: none;
 +
    } */
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Project"><li>PROJECT
+
    #sidebar {
−
<ul> 
+
      position: absolute;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Theory"><li>Theory</li></a> 
+
      width: 270px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Constructs"><li>Constructs</li></a>
+
      right: 0px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Protocols"><li>Protocols</li></a>
+
      top: 60px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/OtherApplications"><li>Other applications</li></a>
+
      padding-top: 20px;
−
</ul>
+
      padding-left: 5px;
−
</li></a>
+
      text-align: right;
 +
      color: #999;
 +
      /* border-left: 3px dashed #dddddd; */
 +
      font-size: 13pt;
 +
    }
  
 +
    #sidebar p {
 +
      margin: 10px;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Achievements"><li>ACHIEVEMENTS
+
    #sidebar img {
−
<ul> 
+
      max-width: 170px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Project Results"><li>Project Results</li></a>
+
      margin: 5px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/BioBricks"><li>BioBricks</li></a> 
+
    }
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Medals"><li>Medals</li></a> 
+
−
+
−
</ul>
+
−
</li></a>
+
  
 +
    #sidebar hr {
 +
      margin-top: 20px;
 +
      margin-bottom: 20px;
 +
    }
  
−
<a href="#"><li>MODELING
+
    /*
−
            <ul>
+
    * General
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Detection"><li>Detection</li></a>
+
    */
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety Switch"><li>Safety Switch</li></a> 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Simulation"><li>Simulation</li></a> 
+
−
+
−
</ul>
+
−
</li></a>
+
−
+
  
 +
    .scarlet {
 +
      color: #ef5c80 !important;
 +
    }
 +
  </style>
  
 +
  <div id="main">
  
−
+
    <div id="header">
 +
      <div id="header-content">
 +
        <img src="https://static.igem.org/mediawiki/2015/5/5c/Chalmers_logo.png" height="170px" id="logo" alt="iGEM-Chalmers logo">
 +
        <img src="https://static.igem.org/mediawiki/2015/8/84/Study_in_scarlet.png" id="study-in-scarlet" alt="Team Chalmers Gothenburg - A study in scarlet">
 +
      </div>
 +
    </div>
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Practices"><li>HUMAN PRACTICES
+
    <div id="my_content">
−
<ul>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/iGEMCommunity"><li>iGEM Community</li></a>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/NextGeneration"><li>Next Generation</li></a> 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Society"><li>Society</li></a> 
+
−
+
−
</ul></a></li>
+
  
 +
      <div id="section1">
 +
        <div id="section1-menu">
 +
          <nav>
 +
            <ul>
 +
              <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg">Home</a></li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Theory">Theory</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Protocols">Protocols</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Results">Results</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/OtherApplications">Other Applications</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Project" class="arrow">Project</a>
 +
              </li>
 +
              <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Modeling">Modeling</a></li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/iGEMCommunity">iGEM Community</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/NextGeneration">Next Generation</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Society">Society</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/HumanPractices" class="arrow">Human Practices</a>
 +
              </li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/LabSafety">Lab Safety</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Ethics">Ethics</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety" class="arrow">Safety</a>
 +
              </li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Schedule">Schedule</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions">Attributions</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Notebook" class="arrow">Notebook</a>
 +
              </li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Students">Students</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Supervisors">Supervisors</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Gallery">Gallery</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Team" class="arrow">Team</a>
 +
              </li>
 +
              <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Achievements">Achievements</a></li>
 +
              <li>
 +
                <ul>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Sponsors">Sponsors</a></li>
 +
                  <li><a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Acknowledgements">Acknowledgements</a></li>
 +
                </ul>
 +
                <a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Thanks" class="arrow">Thanks!</a>
 +
              </li>
 +
            </ul>
 +
          </nav>
 +
        </div>
 +
        <div id="section1-toc-container">
 +
          <div id="section1-toc">
 +
            <h2>Contents</h2>
 +
            <ul>
 +
              <li><a href="#introduction" class="anchor-link">Introduction</a></li>
 +
          </div>
 +
        </div>
 +
        <div id="section1-content">
  
−
 
−
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Notebook"><li>NOTEBOOK
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Schedule"><li>Schedule</li></a>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions"><li>Attributions</li></a>   
 
−
 
−
</ul>
 
−
</li></a>
 
−
     
 
−
 
−
 
−
 
−
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety"><li>SAFETY
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/LabSafety"><li>Lab Safety</li></a>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Ethics"><li>Ethics</li></a> 
 
−
 
−
</ul>
 
−
 
−
</li></a>
 
−
 
−
 
−
 
−
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Entrepreneurship"><li>THANKS
 
−
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Sponsors"><li>Sponsors</li></a>
 
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Acknowledgements"><li>Acknowledgements</li></a> 
 
−
 
−
</ul>
 
−
 
−
</li></a>
 
−
 
−
</ul>
 
−
</div>
 
−
<!-- End of menu  -->
 
−
 
−
<!-- Start of content -->
 
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
 
</html>
 
</html>

Revision as of 18:38, 18 September 2015