Difference between revisions of "Template:Cardiff Wales"

m (test footer bar)
m (test footer bar)
Line 1: Line 1:
 
<html>
 
<html>
−
+
 
 
<style>
 
<style>
  
Line 13: Line 13:
 
-background-size: cover; /* pour Opera */
 
-background-size: cover; /* pour Opera */
 
background-size: cover;
 
background-size: cover;
−
     }  
+
     }
−
 
+
 
−
   
+
−
 
+
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
−
.menu_wrapper {  
+
.menu_wrapper {
 
width:100px;
 
width:100px;
−
height:auto;  
+
height:auto;
 
position:fixed;
 
position:fixed;
 
padding:2px 0px 0px 16px;
 
padding:2px 0px 0px 16px;
−
float:centre;  
+
float:centre;
−
background-color:#FF0000;  
+
background-color:#FF0000;
 
                 opacity: 0.95;
 
                 opacity: 0.95;
 
text-align:left;
 
text-align:left;
Line 38: Line 36:
 
/* styling for the menu items */
 
/* styling for the menu items */
 
.menu_item {
 
.menu_item {
−
width:100%;  
+
width:100%;
−
margin:-2px 1px 5px -35px;  
+
margin:-2px 1px 5px -35px;
 
padding: 2px 20px 18px 4px;
 
padding: 2px 20px 18px 4px;
 
border-bottom: 0.5px solid #000000;
 
border-bottom: 0.5px solid #000000;
Line 49: Line 47:
 
                 border-top-right-radius: 2px;
 
                 border-top-right-radius: 2px;
 
                 border-bottom-left-radius: 2px;
 
                 border-bottom-left-radius: 2px;
−
display:inline-block;
+
display:inline-block;
 
                 opacity: 0.;
 
                 opacity: 0.;
−
cursor: pointer;  
+
cursor: pointer;
 
                 list-style-type: none;
 
                 list-style-type: none;
 
                 color:#fff;
 
                 color:#fff;
 
}
 
}
−
   
+
 
−
     .span {  
+
     .span {
 
               background:url(https://static.igem.org/mediawiki/2016/7/7f/T--Cardiff_Wales--igembackground.png);
 
               background:url(https://static.igem.org/mediawiki/2016/7/7f/T--Cardiff_Wales--igembackground.png);
 
               background-repeat: no-repeat;
 
               background-repeat: no-repeat;
Line 66: Line 64:
  
 
/* when hovering on a menu item */
 
/* when hovering on a menu item */
−
.menu_item:hover {  
+
.menu_item:hover {
−
color:#000000;  
+
color:#000000;
 
background-color: #ff4c4c;
 
background-color: #ff4c4c;
 
}
 
}
Line 73: Line 71:
 
/* decoration icon for the menu buttons*/
 
/* decoration icon for the menu buttons*/
 
.icon {
 
.icon {
−
float:right;
+
float:right;
−
font-size:14px;  
+
font-size:14px;
−
font-weight:bold;  
+
font-weight:bold;
 
                 color:white;
 
                 color:white;
 
}
 
}
−
+
 
−
 
+
 
−
   
+
 
 
/* this is the icon for when the content is collapsed */
 
/* this is the icon for when the content is collapsed */
 
.plus::before {
 
.plus::before {
−
content: "+";  
+
content: "+";
 
}
 
}
 
/* this is the icon for when the content is expanded */
 
/* this is the icon for when the content is expanded */
 
.less::before {
 
.less::before {
−
content: "–";  
+
content: "–";
−
}
+
}
  
 
/* styling for the ul that creates the buttons */
 
/* styling for the ul that creates the buttons */
 
ul.menu_items {
 
ul.menu_items {
−
width:100%;  
+
width:100%;
−
margin-left:0px;  
+
margin-left:0px;
 
padding:0px;
 
padding:0px;
−
list-style: none;  
+
list-style: none;
 
}
 
}
  
 
/* styling for the li that are the menu items */
 
/* styling for the li that are the menu items */
−
.menu_items li {  
+
.menu_items li {
−
width:90%;  
+
width:90%;
−
margin-top:-2px;  
+
margin-top:-2px;
−
padding: 15px 0px 15px 15px ;  
+
padding: 15px 0px 15px 15px ;
 
display:block;
 
display:block;
−
border-bottom: 1px solid #d3d3d3;
+
border-bottom: 1px solid #d3d3d3;
−
text-align:left;  
+
text-align:left;
 
font-weight:bold;
 
font-weight:bold;
−
text-decoration:none;  
+
text-decoration:none;
−
color:#000000;  
+
color:#000000;
−
list-style-type:none;  
+
list-style-type:none;
−
cursor:pointer;  
+
cursor:pointer;
−
-webkit-transition: all 0.4s ease;  
+
-webkit-transition: all 0.4s ease;
−
-moz-transition: all 0.4s ease;  
+
-moz-transition: all 0.4s ease;
−
-ms-transition: all 0.4s ease;  
+
-ms-transition: all 0.4s ease;
−
-o-transition: all 0.4s ease; transition: all 0.4s ease;
+
-o-transition: all 0.4s ease; transition: all 0.4s ease;
−
       
+
 
 
}
 
}
  
Line 127: Line 125:
  
 
/* When hovering on a menu item */
 
/* When hovering on a menu item */
−
.menu_items li:hover {  
+
.menu_items li:hover {
−
+
 
 
color: #000000;
 
color: #000000;
 
}
 
}
  
 
         /* When hovering on a menu item */
 
         /* When hovering on a menu item */
−
.menu_item a:hover {  
+
.menu_item a:hover {
 
background-color:#white;
 
background-color:#white;
 
color: #000000;
 
color: #000000;
Line 140: Line 138:
 
/* styling for the submenus */
 
/* styling for the submenus */
 
.submenu {
 
.submenu {
−
width:100%;  
+
width:100%;
−
display: none;
+
display: none;
 
font-weight:bold;
 
font-weight:bold;
−
cursor:pointer;  
+
cursor:pointer;
−
       
+
 
 
}
 
}
  
 
/* moving the margin for the submenu ul list */
 
/* moving the margin for the submenu ul list */
−
ul.submenu {  
+
ul.submenu {
 
width: 100%;
 
width: 100%;
 
margin: 10px 0px -11px 0px;
 
margin: 10px 0px -11px 0px;
Line 155: Line 153:
  
 
/*styling for the submenu buttons */
 
/*styling for the submenu buttons */
−
.submenu li {  
+
.submenu li {
−
width: 100%;  
+
width: 100%;
 
margin-left: 10px;
 
margin-left: 10px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
Line 164: Line 162:
 
/* hover state for the submenu buttons */
 
/* hover state for the submenu buttons */
 
.submenu li a {
 
.submenu li a {
−
width: 100%;  
+
width: 100%;
−
padding: 5px 10px;  
+
padding: 5px 10px;
 
display: inline-block;
 
display: inline-block;
 
border-bottom: 1px solid #d3d3d3;
 
border-bottom: 1px solid #d3d3d3;
−
background-color:000000;  
+
background-color:000000;
 
text-decoration:none;
 
text-decoration:none;
−
color:#000000;  
+
color:#000000;
 
}
 
}
  
Line 176: Line 174:
  
 
.submenu li a:hover  {
 
.submenu li a:hover  {
−
background-color:#000000;  
+
background-color:#000000;
 
color: #white;
 
color: #white;
 
}
 
}
Line 182: Line 180:
  
 
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
−
.collapsable_menu_control {  
+
.collapsable_menu_control {
−
width:100%;  
+
width:100%;
 
padding: 15px 0px;
 
padding: 15px 0px;
−
display:none;  
+
display:none;
−
  background-color:#000000;  
+
  background-color:#000000;
−
text-align:center;
+
text-align:center;
−
font-weight:bold;  
+
font-weight:bold;
 
color:#72c9b6;
 
color:#72c9b6;
−
cursor:pointer;  
+
cursor:pointer;
−
-webkit-transition: all 0.4s ease;  
+
-webkit-transition: all 0.4s ease;
−
-moz-transition: all 0.4s ease;  
+
-moz-transition: all 0.4s ease;
−
-ms-transition: all 0.4s ease;  
+
-ms-transition: all 0.4s ease;
−
-o-transition: all 0.4s ease;  
+
-o-transition: all 0.4s ease;
−
transition: all 0.4s ease;  
+
transition: all 0.4s ease;
 
}
 
}
  
 
/* when hovering on that button */
 
/* when hovering on that button */
−
.collapsable_menu_control:hover {  
+
.collapsable_menu_control:hover {
 
background-color: #72c9b6;
 
background-color: #72c9b6;
−
color:#000000;
+
color:#000000;
 
}
 
}
  
Line 210: Line 208:
 
width: 85%;
 
width: 85%;
 
margin-left:150px;
 
margin-left:150px;
−
padding:10px 0px;  
+
padding:10px 0px;
−
float:left;  
+
float:left;
−
background-color:999999;  
+
background-color:999999;
−
         
+
 
 
}
 
}
  
 
/*LAYOUT */
 
/*LAYOUT */
−
.column  {  
+
.column  {
 
padding: 10px 0px;
 
padding: 10px 0px;
−
float:center;  
+
float:center;
−
background-color:transparent;  
+
background-color:transparent;
 
}
 
}
  
 
.full_size {
 
.full_size {
−
width:100%;  
+
width:100%;
 
}
 
}
  
−
.full_size img {  
+
.full_size img {
 
padding: 10px 15px;
 
padding: 10px 15px;
−
width:96.5%;  
+
width:96.5%;
 
}
 
}
  
 
.half_size {
 
.half_size {
−
width: 50%;  
+
width: 50%;
 
}
 
}
−
.half_size img {  
+
.half_size img {
 
padding: 10px 15px;
 
padding: 10px 15px;
−
width: 93%;  
+
width: 93%;
 
}
 
}
  
Line 245: Line 243:
 
}
 
}
  
−
.highlight {  
+
.highlight {
−
width: 100%;  
+
width: 100%;
−
margin: auto;  
+
margin: auto;
 
padding: 3px 5px;
 
padding: 3px 5px;
 
                 background-color:rgba(204,204,204,0.1);
 
                 background-color:rgba(204,204,204,0.1);
Line 266: Line 264:
 
/* styling for the titles */
 
/* styling for the titles */
 
.content_wrapper h1, .content_wrapper h2 {
 
.content_wrapper h1, .content_wrapper h2 {
−
padding:5px 15px;  
+
padding:5px 15px;
−
border-bottom:5px;  
+
border-bottom:5px;
 
color:#000000;
 
color:#000000;
  
 
}
 
}
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
−
padding:5px 15px;  
+
padding:5px 15px;
−
border-bottom:0px;  
+
border-bottom:0px;
−
color: #000000;
+
color: #000000;
 
}
 
}
  
  
 
/* font and text */
 
/* font and text */
−
.content_wrapper p {  
+
.content_wrapper p {
−
padding:0px 15px;  
+
padding:0px 15px;
 
font-size: 13px;
 
font-size: 13px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Tahoma, Geneva, sans-serif;
 
}
 
}
  
 
/* Links */
 
/* Links */
−
.content_wrapper a {  
+
.content_wrapper a {
−
font-weight: bold;  
+
font-weight: bold;
 
text-decoration: underline;
 
text-decoration: underline;
 
text-decoration-color:#72c9b6;
 
text-decoration-color:#72c9b6;
 
color: #72c9b6;
 
color: #72c9b6;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
−
-moz-transition: all 0.4s ease;  
+
-moz-transition: all 0.4s ease;
−
-ms-transition: all 0.4s ease;  
+
-ms-transition: all 0.4s ease;
−
-o-transition: all 0.4s ease;  
+
-o-transition: all 0.4s ease;
 
transition: all 0.4s ease;
 
transition: all 0.4s ease;
 
}
 
}
  
 
/* hover for the links */
 
/* hover for the links */
−
.content_wrapper a:hover {  
+
.content_wrapper a:hover {
 
text-decoration:none;
 
text-decoration:none;
 
color:#000000;
 
color:#000000;
Line 308: Line 306:
 
padding:0px 20px;
 
padding:0px 20px;
 
font-size: 13px;
 
font-size: 13px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Tahoma, Geneva, sans-serif;
 
}
 
}
  
 
/* numbered lists */
 
/* numbered lists */
 
.content_wrapper ol {
 
.content_wrapper ol {
−
padding:0px;  
+
padding:0px;
 
font-size: 13px;
 
font-size: 13px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Tahoma, Geneva, sans-serif;
 
}
 
}
  
 
/* Table */
 
/* Table */
−
.content_wrapper table {  
+
.content_wrapper table {
−
width: 97%;  
+
width: 97%;
−
margin:15px 10px;  
+
margin:15px 10px;
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #d3d3d3;
−
border-collapse: collapse;  
+
border-collapse: collapse;
 
}
 
}
  
 
/* table cells */
 
/* table cells */
−
.content_wrapper  td {  
+
.content_wrapper  td {
 
padding: 10px;
 
padding: 10px;
−
vertical-align: text-top;  
+
vertical-align: text-top;
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #d3d3d3;
−
border-collapse: collapse;  
+
border-collapse: collapse;
 
}
 
}
  
 
/* table headers */
 
/* table headers */
−
.content_wrapper th {  
+
.content_wrapper th {
−
padding: 10px;  
+
padding: 10px;
−
vertical-align: text-top;  
+
vertical-align: text-top;
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #d3d3d3;
−
border-collapse: collapse;  
+
border-collapse: collapse;
−
background-color:#f2f2f2;  
+
background-color:#f2f2f2;
 
}
 
}
  
 
/* Button class */
 
/* Button class */
−
.button_click {  
+
.button_click {
 
margin: 10px auto;
 
margin: 10px auto;
−
padding: 15px; width:12%;
+
padding: 15px; width:12%;
−
text-align:center;  
+
text-align:center;
−
font-weight:bold;  
+
font-weight:bold;
 
background-color: #ffffff;
 
background-color: #ffffff;
−
cursor:pointer;
+
cursor:pointer;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
−
  -moz-transition: all 0.4s ease;  
+
  -moz-transition: all 0.4s ease;
−
-ms-transition: all 0.4s ease;  
+
-ms-transition: all 0.4s ease;
−
-o-transition: all 0.4s ease;  
+
-o-transition: all 0.4s ease;
−
transition: all 0.4s ease;  
+
transition: all 0.4s ease;
 
}
 
}
  
 
/* button class on hover */
 
/* button class on hover */
−
.button_click:hover {
+
.button_click:hover {
−
background-color:#000000;  
+
background-color:#000000;
 
color:#72c9b6;
 
color:#72c9b6;
 
}
 
}
Line 405: Line 403:
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
  
−
<head>  
+
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
</head>
  
Line 415: Line 413:
 
     <div class="collapsable_menu_control"> MENU ▤ </div>
 
     <div class="collapsable_menu_control"> MENU ▤ </div>
 
     <ul id="accordion" class="accordion">
 
     <ul id="accordion" class="accordion">
−
   
+
 
 
     <li class="menu_item"> <a href="https://2016.igem.org/Team:Cardiff_Wales">HOME</a> </li>
 
     <li class="menu_item"> <a href="https://2016.igem.org/Team:Cardiff_Wales">HOME</a> </li>
 
     <li class="menu_item"> <div class="icon plus"></div> TEAM
 
     <li class="menu_item"> <div class="icon plus"></div> TEAM
Line 424: Line 422:
 
       </li>
 
       </li>
  
−
       <li class="menu_item"> <div class="icon plus"></div> PROJECT  
+
       <li class="menu_item"> <div class="icon plus"></div> PROJECT
 
           <ul class="submenu">
 
           <ul class="submenu">
 
      <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Description">Description </a></li>
 
      <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Description">Description </a></li>
−
   
+
 
 
               <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Results"> Acheivements </a></li>
 
               <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Results"> Acheivements </a></li>
−
<li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Description#FUEL">FUEL Project </a></li>
+
<li> <a href="https://2016.igem.org/Team:Cardiff_Wales/Description#FUEL">FUEL Project </a></li>
−
               <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/protocols">  Protocols </a></li>
+
               <li> <a href="https://2016.igem.org/Team:Cardiff_Wales/protocols">  Protocols </a></li>
 
             </ul>
 
             </ul>
 
       </li>
 
       </li>
Line 450: Line 448:
  
 
</div>
 
</div>
−
 
−
 
−
 
−
 
  
 
<div class="content_wrapper">
 
<div class="content_wrapper">
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 472: Line 459:
  
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
−
+
 
  
 
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
−
$("#team_name").html( wgPageName );  
+
$("#team_name").html( wgPageName );
 
}
 
}
  
 
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );  
+
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 
}
 
}
  
 
else {
 
else {
 
// this adds the team's name as an h1
 
// this adds the team's name as an h1
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );  
+
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
  
−
// this adds the page's title as an h4
+
// this adds the page's title as an h4
 
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 
}
 
}
Line 514: Line 501:
  
  
−
$(".collapsable_menu_control").click(function() {
+
$(".collapsable_menu_control").click(function() {
 
$(".menu_item").toggle();
 
$(".menu_item").toggle();
 
});
 
});

Revision as of 17:07, 18 October 2016

MENU ▤