Difference between revisions of "Template:Aix-Marseille"

 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<link href="https://fonts.googleapis.com/css?family=Lato|Merriweather+Sans" rel="stylesheet">  
+
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Aix-Marseille/CSS?action=raw&ctype=text/css" />
 +
<link href="https://2017.igem.org/wiki/index.php?title=Template:Aix-Marseille/fonts.css&action=raw&ctype=text/css" rel="stylesheet">
 +
<script src="https://2017.igem.org/Template:Aix-Marseille/details-element-polyfill?action=raw&amp;ctype=text/javascript"></script>
 
<script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
<script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
−
 
 
<script>
 
<script>
−
  MathJax.Ajax.config.path["mhchem"] =
 
−
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.1.0";
 
−
  MathJax.Hub.Config({
 
−
    TeX: {
 
−
      extensions: ["[mhchem]/mhchem.js"]
 
−
    }
 
−
  });
 
−
</script>
 
−
 
−
<script>
 
−
 
 
// This is the jquery part of your template.
 
// This is the jquery part of your template.
 
// Try not modify any of this code too much since it makes your menu work.
 
// Try not modify any of this code too much since it makes your menu work.
Line 25: Line 15:
 
menu_functionality();
 
menu_functionality();
 
hide_show_menu();
 
hide_show_menu();
 +
               
  
  
Line 43: Line 34:
 
//will show/hide the whole menu
 
//will show/hide the whole menu
 
$("#display_menu_control").click(function(){
 
$("#display_menu_control").click(function(){
−
$('#menu_content').fadeToggle(400);
+
$('#menu_content').toggleClass("hide_menu");
 
});
 
});
 +
 +
                        $('#menu_content').addClass("hide_menu");
  
 
// call the current page highlight function
 
// call the current page highlight function
Line 93: Line 86:
  
 
</script>
 
</script>
−
 
+
<head><meta name="viewport" content="width=device-width, initial-scale=1">
−
 
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
 
+
−
<style>
+
−
html {
+
−
  box-sizing: border-box;
+
−
}
+
−
*, *:before, *:after {
+
−
  box-sizing: inherit;
+
−
}
+
−
 
+
−
#pageTitle h1:empty { display: none; }
+
−
 
+
−
/********************************************* DEFAULT WIKI SETTINGS  *********************************************/
+
−
 
+
−
/* Clear the default wiki settings */
+
−
 
+
−
#home_logo, #sideMenu { display:none; }
+
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px; background: #232323; color: #fff;}
+
−
body {background-color:#232323; color:#fff; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
/***************************************************** MENU *******************************************************/
+
−
h1, h2, h3, h4, h5, h6 { color: #fff; border: none; }
+
−
div.thumb div, div.thumb, div.thumbinner { border: 0; background: #232323; }
+
−
div.thumb div a img { border: 0; }
+
−
#toc h2, .toc h2 { color: #ffffff; }
+
−
#toc, .toc {background: #232323; border: 0; padding:0; padding-bottom: 1em;}
+
−
#toctitle { display : none; }
+
−
.tocnumber { display: none; }
+
−
.igem_2017_content_wrapper #toc a { text-decoration : none; }
+
−
 
+
−
/* Wrapper for the menu */
+
−
.igem_2017_menu_wrapper {
+
−
background-color: #f6da05;
+
−
color: #232323;
+
−
}
+
−
 
+
−
.igem_2017_menu_wrapper ul {
+
−
display: flex;
+
−
list-style: none;
+
−
padding: 1em 0;
+
−
margin: 0 auto;
+
−
max-width: 60em;
+
−
}
+
−
 
+
−
.igem_2017_menu_wrapper #menu_content li {
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
 
+
−
/* styling for links in the menu, removes the line under text */
+
−
.igem_2017_menu_wrapper a {
+
−
text-decoration: none;
+
−
color: #232323;
+
−
padding: 0.5em 0;
+
−
margin: 0 1em;
+
−
font-weight: bold;
+
−
cursor: pointer;
+
−
}
+
−
 
+
−
.igem_2017_menu_wrapper a:hover {
+
−
border-bottom: 4px #232323 solid;
+
−
}
+
−
 
+
−
/* styling for the images in the menu */
+
−
.igem_2017_menu_wrapper img {
+
−
width: 50%;
+
−
}
+
−
 
+
−
 
+
−
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
−
.igem_2017_menu_wrapper #display_menu_control {
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
 
+
−
/******************************************* CONTENT OF THE PAGE **************************************************/
+
−
 
+
−
#bodyContent {
+
−
  font-size: 16px;
+
−
  line-height: 21px;
+
−
}
+
−
 
+
−
/* Wrapper for the content */
+
−
 
+
−
.igem_2017_content_wrapper {
+
−
margin: 0 auto;
+
−
padding: 1em;
+
−
max-width: 60em;
+
−
font-family: Lato, sans-serif;
+
−
font-family: sans-serif;
+
−
font-size: 1em;
+
−
line-height: 1.3125em;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/********************************* HTML STYLING  *********************************/
+
−
 
+
−
.igem_2017_content_wrapper p img { max-width: 100%; }
+
−
 
+
−
#pageTitle h1 {
+
−
  font-size: 3.375em;
+
−
  line-height: 1.16666667em;
+
−
  margin-top: 0.38888889em;
+
−
  margin-bottom: 0.77777778em;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
  border-bottom: 0px;
+
−
  color: #fff;
+
−
  font-family: 'Merriweather Sans', sans-serif;
+
−
}
+
−
 
+
−
#bodyContent .igem_2017_content_wrapper h2 {
+
−
  font-size: 2.27777778em;
+
−
  line-height: 1.12195122em;
+
−
  margin-top: 0.56097561em;
+
−
  margin-bottom: 0.56097561em;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
  border-bottom: 0px;
+
−
  color: #fff;
+
−
  font-family: 'Merriweather Sans', sans-serif;
+
−
}
+
−
 
+
−
/* styling for the titles  h3 h4 h5 h6*/
+
−
#bodyContent .igem_2017_content_wrapper h3, #bodyContent .igem_2017_content_wrapper h4, #bodyContent .igem_2017_content_wrapper h5, #bodyContent .igem_2017_content_wrapper h6 {
+
−
  border-bottom:0px;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
  color: #fff;
+
−
  font-family: 'Merriweather Sans', sans-serif;
+
−
}
+
−
 
+
−
#bodyContent .igem_2017_content_wrapper h3 {
+
−
  font-size: 1.5em;
+
−
  line-height: 1.7037037em;
+
−
  margin-top: 0.85185185em;
+
−
  margin-bottom: 0em;
+
−
}
+
−
 
+
−
#bodyContent .igem_2017_content_wrapper h4 {
+
−
  font-size: 1em;
+
−
  line-height: 1.27777778em;
+
−
  margin-top: 1.27777778em;
+
−
  margin-bottom: 0em;
+
−
}
+
−
 
+
−
#bodyContent .igem_2017_content_wrapper h5 {
+
−
  font-size: 1em;
+
−
  line-height: 1.27777778em;
+
−
  margin-top: 1.27777778em;
+
−
  margin-bottom: 0em;
+
−
}
+
−
 
+
−
.igem_2017_content_wrapper p, .igem_2017_content_wrapper ul, .igem_2017_content_wrapper ol, .igem_2017_content_wrapper pre, .igem_2017_content_wrapper table, .igem_2017_content_wrapper blockquote {
+
−
  margin-top: 0em;
+
−
  margin-bottom: 1.27777778em;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
  text-align: justify;
+
−
  padding:0;
+
−
}
+
−
 
+
−
.igem_2017_content_wrapper ul {
+
−
  list-style: circle;
+
−
}
+
−
 
+
−
.igem_2017_content_wrapper ul ul, .igem_2017_content_wrapper ol ol, .igem_2017_content_wrapper ul ol, .igem_2017_content_wrapper ol ul {
+
−
  margin-top: 0em;
+
−
  margin-bottom: 0em;
+
−
  padding-top: 0;
+
−
  padding-bottom: 0;
+
−
}
+
−
 
+
−
 
+
−
/* Links */
+
−
.igem_2017_content_wrapper a, .igem_2017_content_wrapper a.external {
+
−
font-weight: bold;
+
−
text-decoration: none;
+
−
color:  #f6da05;
+
−
-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;
+
−
}
+
−
 
+
−
        .igem_2017_content_wrapper a.external, #bodyContent .igem_2017_content_wrapper a[href^="https://"]
+
−
        {
+
−
                background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNDM4LjUzNiA0MzguNTM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzguNTM2IDQzOC41MzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNDE0LjQxLDI0LjEyM0MzOTguMzMzLDguMDQyLDM3OC45NjMsMCwzNTYuMzE1LDBIODIuMjI4QzU5LjU4LDAsNDAuMjEsOC4wNDIsMjQuMTI2LDI0LjEyMyAgIEM4LjA0NSw0MC4yMDcsMC4wMDMsNTkuNTc2LDAuMDAzLDgyLjIyNXYyNzQuMDg0YzAsMjIuNjQ3LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMTAyYzE2LjA4NCwxNi4wODQsMzUuNDU0LDI0LjEyNiw1OC4xMDIsMjQuMTI2ICAgaDI3NC4wODRjMjIuNjQ4LDAsNDIuMDE4LTguMDQyLDU4LjA5NS0yNC4xMjZjMTYuMDg0LTE2LjA4NCwyNC4xMjYtMzUuNDU0LDI0LjEyNi01OC4xMDJWODIuMjI1ICAgQzQzOC41MzIsNTkuNTc2LDQzMC40OSw0MC4yMDQsNDE0LjQxLDI0LjEyM3ogTTM2NS40NDksMjI4LjQwMmMwLDcuOTk0LTMuNzE3LDEzLjYwNi0xMS4xMzYsMTYuODQ0ICAgYy0yLjQ3MSwwLjk1MS00Ljg1OSwxLjQyNy03LjEzOSwxLjQyN2MtNS4xMzQsMC05LjQxOC0xLjgxMS0xMi44NDctNS40MjRsLTQxLjExLTQxLjExMkwxNDAuNzY0LDM1Mi41OTkgICBjLTMuNjIxLDMuNjE0LTcuOSw1LjQyNS0xMi44NSw1LjQyNWMtNC45NTIsMC05LjIzNS0xLjgxMS0xMi44NTEtNS40MjVsLTI5LjEyMS0yOS4xMjZjLTMuNjE3LTMuNjEtNS40MjYtNy45MDEtNS40MjYtMTIuODQ3ICAgYzAtNC45NDQsMS44MDktOS4yMjksNS40MjYtMTIuODQzbDE1Mi40NjItMTUyLjQ2NGwtNDEuMTEzLTQxLjExMmMtNS45MDItNS41Mi03LjIzMy0xMi4xNzgtMy45OTktMTkuOTg1ICAgYzMuMjM0LTcuNDIxLDguODUyLTExLjEzNiwxNi44NDYtMTEuMTM2aDEzNy4wMzdjNC45NDgsMCw5LjIzMiwxLjgxLDEyLjg1NCw1LjQyOGMzLjYxMywzLjYxNCw1LjQyMSw3Ljg5OCw1LjQyMSwxMi44NDdWMjI4LjQwMnoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) center right no-repeat;
+
−
        background-size: 0.8em 0.8em;
+
−
        padding-right: 1em;
+
−
        }
+
−
 
+
−
        .mw-body .igem_2017_content_wrapper a.external:visited, .mw-body .igem_2017_content_wrapper a:visited { color: #ddb204; }
+
−
 
+
−
/* hover for the links */
+
−
.igem_2017_content_wrapper a:hover {
+
−
text-decoration:none;
+
−
color:#fff;
+
−
}
+
−
 
+
−
/* Table */
+
−
.igem_2017_content_wrapper table {
+
−
/*width: 97%;*/
+
−
margin:15px 10px;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
}
+
−
 
+
−
/* table cells */
+
−
.igem_2017_content_wrapper  td {
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
}
+
−
 
+
−
/* table headers */
+
−
.igem_2017_content_wrapper th {
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
background-color:#222;
+
−
}
+
−
 
+
−
/**********************************LAYOUT CLASSES **********************************/
+
−
 
+
−
/* general class for column divs */
+
−
.igem_2017_content_wrapper .column  {
+
−
padding: 10px 0px;
+
−
float:left;
+
−
}
+
−
 
+
−
/* class for a full width column */
+
−
.column .full_size {
+
−
width:100%;
+
−
}
+
−
 
+
−
/* styling for images in a full width column*/
+
−
.column.full_size img {
+
−
width:97%;
+
−
padding: 10px 15px;
+
−
}
+
−
 
+
−
/* class for a half width column */
+
−
.column.half_size {
+
−
width: 50%;
+
−
}
+
−
 
+
−
/* styling for images in a half width column*/
+
−
.column.half_size img {
+
−
width: 94.5%;
+
−
padding: 10px 15px;
+
−
}
+
−
 
+
−
 
+
−
/********************************* SUPPORT CLASSES ********************************/
+
−
 
+
−
/* class that clears content below*/
+
−
.igem_2017_content_wrapper .clear {
+
−
clear:both;
+
−
}
+
−
 
+
−
 
+
−
/* adds extra spacing when clearing content */
+
−
.igem_2017_content_wrapper  .clear.extra_space {
+
−
height: 30px;
+
−
}
+
−
 
+
−
 
+
−
/* highlight class, makes content slightly smaller */
+
−
.igem_2017_content_wrapper .highlight {
+
−
margin: 0px 15px;
+
−
padding: 15px 0px;
+
−
}
+
−
 
+
−
 
+
−
/* highlight class, adds a gray background */
+
−
.igem_2017_content_wrapper .highlight.gray {
+
−
background-color: #f2f2f2;
+
−
}
+
−
 
+
−
/* highlight with decoration blue line on top */
+
−
.igem_2017_content_wrapper .highlight.blue_top {
+
−
    border-top: 4px solid #3399ff;
+
−
}
+
−
 
+
−
/* highlight with a full blue border decoration */
+
−
.igem_2017_content_wrapper .highlight.blue_border {
+
−
    border: 4px solid  #3399ff;
+
−
}
+
−
 
+
−
 
+
−
/* button class */
+
−
.igem_2017_content_wrapper .button{
+
−
max-width: 35%;
+
−
margin: 30px auto;
+
−
padding: 12px 10px;
+
−
    background-color: #3399ff;
+
−
    text-align: center;
+
−
  color: #ffffff;
+
−
-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;
+
−
}
+
−
 
+
−
/* styling for button on hover */
+
−
.igem_2017_content_wrapper .button:hover{
+
−
background-color: #3399ff;
+
−
    color: #000000;
+
−
}
+
−
 
+
−
 
+
−
/************************************************ RESPONSIVE STYLING **********************************************/
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 1200PX */
+
−
@media only screen and (max-width: 1200px) {
+
−
 
+
−
#content {width:100%; }
+
−
.igem_2017_menu_wrapper {width:15%; right:0;}
+
−
.highlight {padding:10px 0px;}
+
−
.igem_2017_menu_wrapper #display_menu_control { display:none; }
+
−
#menu_content { display:block;}
+
−
.menu_button.direct_to_page {padding-left: 17px;}
+
−
 
+
−
}
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 800PX */
+
−
@media only screen and (max-width: 800px) {
+
−
 
+
−
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
+
−
/*.igem_2017_content_wrapper {width:100%; margin-left:0px;}*/
+
−
.column.half_size  {width:100%; }
+
−
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
+
−
.highlight {padding:15px 5px;}
+
−
.igem_2017_menu_wrapper #display_menu_control { display:block; }
+
−
#menu_content { display:none;}
+
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
+
−
.menu_bottom_padding {display:none;}
+
−
.menu_button.direct_to_page { padding-left: 36px; }
+
−
}
+
−
 
+
−
/* special class that the system uses to make sure the team wants a page to be evaluated */
+
−
.judges-will-not-evaluate {
+
−
    width: 96.6%;
+
−
  margin: 5px 15px;
+
−
  display: block;
+
−
border: 4px solid #3399ff;
+
−
    font-weight: bold;
+
−
}
+
−
 
+
−
.row-icons ul { display: flex; justify-content: space-around; margin: 0; padding: 0; }
+
−
.row-icons ul li { list-style: none; }
+
−
.row-icons ul li a {
+
−
/*background: #fff;*/ padding: 0.5em; border-radius: 50%;
+
−
width: 9em;
+
−
height: 9em;
+
−
box-shadow: 0 0 0 5px #fff;
+
−
}
+
−
 
+
−
.row-icons ul li a, .row-icons ul li .legend {
+
−
display: flex; align-items: center; justify-content: center;
+
−
}
+
−
 
+
−
.row-icons ul li .legend {
+
−
padding-top: 1em;
+
−
}
+
−
.row-icons ul li a:hover, .row-icons ul li a:focus {
+
−
box-shadow: 0 0 0 10px #f6da05;
+
−
}
+
−
 
+
−
.row-icons ul li a:hover img, .row-icons ul li a:focus img {
+
−
 
+
−
-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;
+
−
}
+
−
 
+
−
.row-icons ul li a:hover img, .row-icons ul li a:focus img {
+
−
transform: scale(1.2);
+
−
}
+
−
 
+
−
.white-icons ul li a:hover img, .white-icons ul li a:focus img {
+
−
  filter: sepia(100%) saturate(10000%) hue-rotate(0deg);
+
−
}
+
−
.white-icons ul li a:hover .legend, .white-icons ul li a:focus .legend {
+
−
color: #f6da05;
+
−
}
+
−
 
+
−
.row-icons img { max-width: 100%; max-height: 100%; height: auto; width: auto; margin: 1.5em; }
+
−
 
+
−
</style>
+
−
 
+
−
 
+
−
<!-- THIS IS WHERE THE HTML BEGINS -->
+
−
 
+
−
 
+
−
<head>
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
 
</head>
 
</head>
−
 
−
 
 
<nav class="igem_2017_menu_wrapper" >
 
<nav class="igem_2017_menu_wrapper" >
−
 
+
<div class="menu_button" id="display_menu_control">MENU</div>
−
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
+
−
<div class="menu_button" id="display_menu_control">
+
−
MENU
+
−
</div>
+
−
 
+
 
<ul id="menu_content">
 
<ul id="menu_content">
 
<li><a href="/Team:Aix-Marseille" title="Kill Xyl Homepage">KILL XYL</a></li>
 
<li><a href="/Team:Aix-Marseille" title="Kill Xyl Homepage">KILL XYL</a></li>
Line 525: Line 101:
 
<li><a href="https://igem.org/2017_Judging_Form?team=Aix-Marseille">Judging form</a></li>
 
<li><a href="https://igem.org/2017_Judging_Form?team=Aix-Marseille">Judging form</a></li>
 
</ul>
 
</ul>
−
 
+
</nav>
−
</nav><div class="igem_2017_content_wrapper"><div id="pageTitle"><h1></html>{{{title}}}<html></h1></div></html>{{{toc}}}
+
<div class="igem_2017_content_wrapper">
 +
<div id="pageTitle">
 +
<h1></html>{{{title}}}<html></h1>
 +
</div>
 +
</html>{{{toc}}}

Latest revision as of 03:43, 2 November 2017

{{{title}}}

{{{toc}}}