Difference between revisions of "Template:Example2"

Line 56: Line 56:
  
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 +
/* Clear the default wiki settings */
 +
 
#home_logo, #sideMenu { display:none; }
 
#home_logo, #sideMenu { display:none; }
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
Line 63: Line 66:
 
#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 */
 
.igem_2017_menu_wrapper {  
 
.igem_2017_menu_wrapper {  
Line 77: Line 83:
 
overflow-x: hidden;
 
overflow-x: hidden;
 
border-left: 1px solid #d3d3d3;  
 
border-left: 1px solid #d3d3d3;  
 +
}
 +
 +
 +
 +
/* styling for links in the menu, removes the line under text */
 +
.igem_2017_menu_wrapper a { 
 +
text-decoration: none;
 
}
 
}
  
  
−
/* styling for the images in the side menu */
+
/* styling for the images in the menu */
 
.igem_2017_menu_wrapper img {  
 
.igem_2017_menu_wrapper img {  
 
width: 100%;
 
width: 100%;
 
}
 
}
  
 +
/* styling for the menu buttons */
 +
.igem_2017_menu_wrapper .menu_button {
 +
width: 100%;
 +
border-bottom: 1px solid #d3d3d3;
 +
padding: 10px 0px 10px 25px;
 +
font-weight: bold;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
float:left;
 +
cursor: pointer;
 +
}
  
 +
/* styling for the menu buttons on hover */
 +
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover {
 +
color:#ffffff;
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
}
  
 +
/* styling for the submenu buttons */
 +
.igem_2017_menu_wrapper .submenu_button {
 +
width: 100%;
 +
border-bottom: 1px solid #d3d3d3;
 +
padding: 10px 0px 10px 25px;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
float:left;
 +
background-color:#f2f2f2;
 +
cursor: pointer;
 +
}
  
 +
/* wrapper for the submenu items, they are hidden by default*/
 +
.igem_2017_menu_wrapper .submenu_wrapper {
 +
display:none;
 +
}
  
 +
/* 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 ********************************/
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
  
 
/* Wrapper for the content */
 
/* Wrapper for the content */
Line 102: Line 153:
  
  
−
 
+
/********************************* HTML STYLING  *********************************/
−
 
+
−
/*********************************HTML STYLING  *********************************/
+
  
 
/* styling for the titles h1 h2 */
 
/* styling for the titles h1 h2 */
Line 124: Line 173:
 
/* font and text */
 
/* font and text */
 
.igem_2017_content_wrapper p {  
 
.igem_2017_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;  
Line 190: Line 239:
 
/**********************************LAYOUT CLASSES **********************************/
 
/**********************************LAYOUT CLASSES **********************************/
  
−
/* class for when the menu is not shown and the content occupies the whole screen */
+
/* general class for column divs */
−
.igem_2017_content_wrapper.full_screen {
+
−
width: 96%;
+
−
}
+
−
 
+
−
 
+
−
 
+
 
.igem_2017_content_wrapper .column  {  
 
.igem_2017_content_wrapper .column  {  
 
padding: 10px 0px;
 
padding: 10px 0px;
Line 202: Line 245:
 
}
 
}
  
−
 
+
/* class for a full width column */
−
 
+
 
.column .full_size {
 
.column .full_size {
 
width:100%;  
 
width:100%;  
 
}
 
}
  
 +
/* styling for images in a full width column*/
 
.column.full_size img {  
 
.column.full_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
Line 213: Line 256:
 
}
 
}
  
 +
/* class for a half width column */
 
.column.half_size {
 
.column.half_size {
 
width: 50%;  
 
width: 50%;  
 
}
 
}
−
 
+
/* styling for images in a half width column*/
 
.column.half_size img {  
 
.column.half_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
 
width: 94.5%;
 
width: 94.5%;
 
}
 
}
−
 
−
 
−
 
  
  
Line 230: Line 271:
 
/********************************* SUPPORT CLASSES ********************************/
 
/********************************* SUPPORT CLASSES ********************************/
  
−
 
+
/* class that clears content below*/
 
.igem_2017_content_wrapper .clear {
 
.igem_2017_content_wrapper .clear {
 
clear:both;
 
clear:both;
 
}
 
}
−
 
+
 +
 +
/* adds extra spacing when clearing content */
 
.igem_2017_content_wrapper  .clear.extra_space {
 
.igem_2017_content_wrapper  .clear.extra_space {
 
height: 30px;
 
height: 30px;
Line 240: Line 283:
  
  
−
 
+
/* highlight class, makes content slightly smaller */
−
 
+
−
/* highlight class */
+
−
 
+
 
.igem_2017_content_wrapper .highlight {  
 
.igem_2017_content_wrapper .highlight {  
 
padding: 15px 0px;
 
padding: 15px 0px;
Line 250: Line 290:
  
  
−
/* highlight class */
+
/* highlight class, adds a gray background */
 
.igem_2017_content_wrapper .highlight.gray {
 
.igem_2017_content_wrapper .highlight.gray {
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
  
−
/* highlight with decoration*/
+
/* highlight with decoration blue line on top */
 
.igem_2017_content_wrapper .highlight.blue_top {
 
.igem_2017_content_wrapper .highlight.blue_top {
−
    border-top: 4px solid #3399ff;
+
    border-top: 4px solid #3399ff;
−
 
+
−
 
+
 
}
 
}
  
−
/* highlight class */
+
/* highlight with a full blue border decoration */
 
.igem_2017_content_wrapper .highlight.blue_border {
 
.igem_2017_content_wrapper .highlight.blue_border {
−
    border: 4px solid  #3399ff;
+
    border: 4px solid  #3399ff;
 
}
 
}
  
  
 +
/* button class */
 
.igem_2017_content_wrapper .button{
 
.igem_2017_content_wrapper .button{
−
        max-width: 35%;
+
max-width: 35%;
−
    background-color: #3399ff;
+
    background-color: #3399ff;
−
    padding: 12px 10px;
+
    padding: 12px 10px;
−
    text-align: center;
+
    text-align: center;
−
    margin: 30px auto;
+
    margin: 30px auto;
−
    color: #ffffff;
+
    color: #ffffff;
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
Line 281: Line 320:
 
}
 
}
  
−
 
+
/* styling for button on hover */
 
.igem_2017_content_wrapper .button:hover{
 
.igem_2017_content_wrapper .button:hover{
 
     color: #000000;
 
     color: #000000;
Line 289: Line 328:
  
  
−
.igem_2017_menu_wrapper .menu_button{ width: 100%; border-bottom: 1px solid #d3d3d3; padding: 10px 0px 10px 25px; font-weight: bold; font-size: 12px; color: #5e5f5f; float:left; cursor: pointer;}
 
  
−
.menu_button:hover , .submenu_button:hover {  color:#ffffff; background-color: #3399ff; text-decoration: none;}
+
/***************************************************** RESPONSIVE STYLING ****************************************************/
−
 
+
−
 
+
−
.submenu_button { width: 100%; border-bottom: 1px solid #d3d3d3; padding: 10px 0px 10px 25px; font-size: 12px; color: #5e5f5f; float:left; background-color:#f2f2f2; cursor: pointer;}
+
−
 
+
−
.igem_2017_menu_wrapper a {  text-decoration: none; }
+
−
 
+
−
 
+
−
.with_submenu_button { width: 67%;}
+
−
 
+
−
.expand_submenu_button {   
+
−
font-weight: bold;
+
−
font-size: 12px;
+
−
padding: 10px;
+
−
cursor: pointer;
+
−
width:10%;
+
−
float: right;
+
−
text-align: center;
+
−
background-color: #f2f2f2;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
}
+
−
 
+
−
 
+
−
.submenu_wrapper { display:none;}
+
−
 
+
−
 
+
−
#display_menu_control {
+
−
display:none;
+
−
text-align:center;
+
−
}
+
−
 
+
−
/********************************* RESPONSIVE STYLING ********************************/
+
  
 
/* IF THE SCREEN IS LESS THAN 1200PX */
 
/* IF THE SCREEN IS LESS THAN 1200PX */
−
 
 
@media only screen and (max-width: 1200px) {
 
@media only screen and (max-width: 1200px) {
  
Line 333: Line 339:
 
#display_menu_control { display:none; }
 
#display_menu_control { display:none; }
 
#menu_content { display:block;}
 
#menu_content { display:block;}
 +
 
}
 
}
−
 
−
 
−
 
  
 
/* IF THE SCREEN IS LESS THAN 800PX */
 
/* IF THE SCREEN IS LESS THAN 800PX */
−
 
 
@media only screen and (max-width: 800px) {
 
@media only screen and (max-width: 800px) {
  
Line 347: Line 350:
 
.column.full_size img, .column.half_size img { padding: 10px 0px; width: 100%;}  
 
.column.full_size img, .column.half_size img { padding: 10px 0px; width: 100%;}  
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
−
 
 
#display_menu_control { display:block; }
 
#display_menu_control { display:block; }
 
#menu_content { display:none;}
 
#menu_content { display:none;}
Line 353: Line 355:
  
  
−
 
+
−
.judges-will-not-evaluate {
+
−
    border: 4px solid #3399ff;
+
/* special class that the system uses to make sure the team wants a page to be evaluated */
−
    display: block;
+
.judges-will-not-evaluate {
−
    margin: 5px 15px;
+
  border: 4px solid #3399ff;
−
    width: 96.6%;
+
  display: block;
−
    font-weight: bold;
+
  margin: 5px 15px;
−
}
+
  width: 96.6%;
 +
    font-weight: bold;
 +
}
 +
 
</style>
 
</style>
−
 
−
 
  
  
Line 369: Line 372:
  
  
−
<!-- This tells the browser that your page is responsive -->
 
  
 
<head>  
 
<head>  
 +
 +
<!-- This tells the browser that your page is responsive -->
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
 
<meta name="viewport" content="width=device-width, initial-scale=1">  
−
 
  
 
</head>
 
</head>
Line 380: Line 383:
  
 
<div class="igem_2017_menu_wrapper" >
 
<div class="igem_2017_menu_wrapper" >
 +
 +
  
 
<a href="https://2017.igem.org/Team:Example2">
 
<a href="https://2017.igem.org/Team:Example2">
Line 386: Line 391:
  
  
 +
<!-- 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">
 
<div class="menu_button" id="display_menu_control">
 
MENU   
 
MENU   
 
</div>  
 
</div>  
  
−
<div id="menu_content">
+
<div id="menu_content">
−
<div class="menu_button">
+
−
TEAM  
+
<div class="menu_button">
−
</div>  
+
TEAM  
 +
</div>  
  
−
<div class="submenu_wrapper">
+
<div class="submenu_wrapper">
−
<a href="https://2017.igem.org/Team:Example2/Team">
+
−
<div class="submenu_button">
+
<a href="https://2017.igem.org/Team:Example2/Team">
−
Team  
+
<div class="submenu_button">
−
</div>
+
Team  
−
</a>
+
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Collaborations">
+
<a href="https://2017.igem.org/Team:Example2/Collaborations">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Collaborations
+
Collaborations
−
</div>
+
</div>
−
</a>
+
</a>
 +
 +
 +
</div>
  
−
</div>
 
  
 +
 +
  
 +
<div class="menu_button">
 +
PROJECT
 +
</div>
  
−
<div class="menu_button">
+
<!-- project submenu -->
−
PROJECT
+
<div class="submenu_wrapper" id="project_submenu">
−
</div>  
+
 +
<a href="https://2017.igem.org/Team:Example2/Description">
 +
<div class="submenu_button">
 +
Description
 +
</div>
 +
</a>
  
−
<div class="submenu_wrapper">
+
<a href="https://2017.igem.org/Team:Example2/Design">
−
<a href="https://2017.igem.org/Team:Example2/Description">
+
<div class="submenu_button">
−
<div class="submenu_button">
+
Design
−
Description
+
</div>
−
</div>
+
</a>
−
</a>
+
  
−
<a href="https://2017.igem.org/Team:Example2/Design">
+
<a href="https://2017.igem.org/Team:Example2/Experiments">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Design
+
Experiments
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Model">
 
−
<div class="submenu_button">
 
−
Model
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2017.igem.org/Team:Example2/Experiments">
+
<a href="https://2017.igem.org/Team:Example2/Notebook">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Experiments
+
Notebook
−
</div>
+
</div>
−
</a>
+
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/InterLab">
 +
<div class="submenu_button">
 +
InterLab
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Notebook">
+
<a href="https://2017.igem.org/Team:Example2/Contribution">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Notebook
+
Contribution
−
</div>
+
</div>
−
</a>
+
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Model">
 +
<div class="submenu_button">
 +
Model
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Contribution">
+
<a href="https://2017.igem.org/Team:Example2/Results">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Contribution
+
Results
−
</div>
+
</div>
−
</a>
+
</a>
  
−
 
  
−
<a href="https://2017.igem.org/Team:Example2/Results">
+
<a href="https://2017.igem.org/Team:Example2/Demonstrate">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Results
+
Demonstrate
−
</div>
+
</div>
−
</a>
+
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Improve">
 +
<div class="submenu_button">
 +
Improve
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Demonstrate">
+
<a href="https://2017.igem.org/Team:Example2/Attributions">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Demonstrate
+
Attribution
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/InterLab">
+
</div>
−
<div class="submenu_button">
+
−
InterLab
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2017.igem.org/Team:Example2/Improve">
+
−
<div class="submenu_button">
+
−
Improve
+
−
</div>
+
−
</a>
+
  
−
<a href="https://2017.igem.org/Team:Example2/Attributions">
+
<div class="menu_button">
−
<div class="submenu_button">
+
PARTS
−
Attribution
+
</div>
−
</div>
+
−
</a>
+
<!-- parts submenu -->
 +
<div class="submenu_wrapper">
 +
 +
<a href="https://2017.igem.org/Team:Example2/Parts">
 +
<div class="submenu_button">
 +
Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Basic_Part">
 +
<div class="submenu_button">
 +
Basic Parts
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Composite_Part">
 +
<div class="submenu_button">
 +
Composite Parts
 +
</div>
 +
</a>
  
−
</div>
+
<a href="https://2017.igem.org/Team:Example2/Part_Collection">
 +
<div class="submenu_button">
 +
Part Collection
 +
</div>
 +
</a>
 +
</div>  
  
 +
 +
 +
 +
  
−
<div class="menu_button">
+
<a href="https://2017.igem.org/Team:Example2/Safety">
−
PARTS
+
<div class="menu_button">
−
</div>
+
SAFETY
−
 
+
</div>  
−
<div class="submenu_wrapper">
+
−
<a href="https://2017.igem.org/Team:Example2/Parts">
+
−
<div class="submenu_button">
+
−
Parts
+
−
</div>
+
 
</a>
 
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Basic_Part">
 
−
<div class="submenu_button">
 
−
Basic Parts
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2017.igem.org/Team:Example2/Composite_Part">
 
−
<div class="submenu_button">
 
−
Composite Parts
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2017.igem.org/Team:Example2/Part_Collection">
 
−
<div class="submenu_button">
 
−
Part Collection
 
−
</div>
 
−
</a>
 
  
  
−
</div>
 
  
−
 
+
<div class="menu_button" >
−
<a href="https://2017.igem.org/Team:Example2/Safety">
+
HUMAN PRACTICES
−
<div class="menu_button">
+
−
SAFETY
+
 
</div>  
 
</div>  
−
</a>
 
  
−
<div class="menu_button" >
+
<!-- human practices submenu -->
−
HUMAN PRACTICES
+
<div class="submenu_wrapper">
−
</div>  
+
  
−
<div class="submenu_wrapper">
+
<a href="https://2017.igem.org/Team:Example2/HP/Silver">
 +
<div class="submenu_button">
 +
Silver HP
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/HP/Silver">
+
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Silver HP
+
Integrated and Gold
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/HP/Gold_Integrated">
 
−
<div class="submenu_button">
 
−
Integrated and Gold
 
−
</div>
 
−
</a>
 
  
 +
<a href="https://2017.igem.org/Team:Example2/Engagement">
 +
<div class="submenu_button">
 +
Public Engagement
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Engagement">
+
</div>
−
<div class="submenu_button">
+
−
Public Engagement
+
−
</div>
+
−
</a>
+
  
−
</div>
 
  
 +
<div class="menu_button">
 +
AWARDS
 +
</div>
  
−
<div class="menu_button">
+
<!-- awards submenu -->
−
AWARDS
+
<div class="submenu_wrapper">
−
</div>
+
−
<div class="submenu_wrapper">
+
  
−
<a href="https://2017.igem.org/Team:Example2/Applied_Design">
+
<a href="https://2017.igem.org/Team:Example2/Applied_Design">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Applied Design
+
Applied Design
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Entrepreneurship">
+
<a href="https://2017.igem.org/Team:Example2/Entrepreneurship">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Entrepreneurship
+
Entrepreneurship
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Hardware">
+
<a href="https://2017.igem.org/Team:Example2/Hardware">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Hardware
+
Hardware
−
</div>
+
</div>
−
</a>
+
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Measurement">
+
<a href="https://2017.igem.org/Team:Example2/Measurement">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Measurement
+
Measurement
−
</div>
+
</div>
−
</a>
+
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Model">
 +
<div class="submenu_button">
 +
Model
 +
</div>
 +
</a>
  
 +
<a href="https://2017.igem.org/Team:Example2/Plant">
 +
<div class="submenu_button">
 +
Plant
 +
</div>
 +
</a>
  
−
<a href="https://2017.igem.org/Team:Example2/Model">
 
−
<div class="submenu_button">
 
−
Model
 
−
</div>
 
−
</a>
 
  
−
<a href="https://2017.igem.org/Team:Example2/Plant">
+
<a href="https://2017.igem.org/Team:Example2/Software">
−
<div class="submenu_button">
+
<div class="submenu_button">
−
Plant
+
Software
−
</div>
+
</div>
−
</a>
+
</a>
  
 +
</div>
 +
 +
</div>
 +
</div>
  
−
<a href="https://2017.igem.org/Team:Example2/Software">
 
−
<div class="submenu_button">
 
−
Software
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
</div>
 
−
</div>
 
  
  
 +
<!-- start of content -->
 
<div class="igem_2017_content_wrapper">
 
<div class="igem_2017_content_wrapper">

Revision as of 20:33, 8 March 2017

TEAM
Team
Collaborations
PROJECT
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software