Difference between revisions of "Template:WashU StLouis"

 
(48 intermediate revisions by 2 users not shown)
Line 28: Line 28:
 
});
 
});
  
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
$("#display_menu_control").click(function(){
+
$('#menu_content').fadeToggle(400);
+
});
+
  
 
// call the current page highlight function
 
// call the current page highlight function
Line 109: Line 106:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.igem_2017_menu_wrapper {  
 
.igem_2017_menu_wrapper {  
width: 15%;  
+
width: 15vw;  
 
height:100vh;  
 
height:100vh;  
 
position:fixed;
 
position:fixed;
right:0%;
+
left:0%;
 
padding:0px;
 
padding:0px;
float:right;  
+
float:left;  
border-left: 1px solid #d3d3d3;  
+
border-right: 1px solid #d3d3d3;  
background-color:#dd3e40;  
+
background-color:white;  
 
text-align:left;
 
text-align:left;
font-family:Georgia, Geneva, sans-serif;  
+
font-family:"Trebuchet MS", Georgia, Geneva, sans-serif;  
 
overflow-y: auto;
 
overflow-y: auto;
 
overflow-x: hidden;
 
overflow-x: hidden;
Line 124: Line 121:
  
 
/* this hides the scrollbar to keep view consistency */
 
/* this hides the scrollbar to keep view consistency */
.igem_2017_menu_wrappe::-webkit-scrollbar {  
+
.igem_2017_menu_wrapper::-webkit-scrollbar {  
 
display: none;  
 
display: none;  
 
}
 
}
Line 145: Line 142:
 
padding: 10px 0px 10px 15px;  
 
padding: 10px 0px 10px 15px;  
 
float:left;  
 
float:left;  
border-bottom: 1px solid white;  
+
border-bottom: 0.3vw solid #93efea;  
font-size: 12px;  
+
font-size: 1vw;  
 
font-weight: bold;  
 
font-weight: bold;  
color: white;  
+
color: #66A7A3;  
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
Line 181: Line 178:
 
/* styling for the menu buttons on hover */
 
/* styling for the menu buttons on hover */
 
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
 
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {  
background-color: #ec696c;  
+
background-color: #b5e1f2;  
 
text-decoration: none;
 
text-decoration: none;
 
color:#ffffff;  
 
color:#ffffff;  
Line 198: Line 195:
 
padding: 10px 0px 10px 34px;  
 
padding: 10px 0px 10px 34px;  
 
float:left;
 
float:left;
background-color:#c8c8c8;  
+
background-color:#add9e6;  
border-bottom: 1px solid #d3d3d3;  
+
border-bottom: 1px solid #add9e6 ;  
font-size: 12px;  
+
font-size: 0.9vw;  
 
color: white;  
 
color: white;  
 
cursor: pointer;
 
cursor: pointer;
Line 224: Line 221:
 
margin: 2%;
 
margin: 2%;
 
display:block;
 
display:block;
float:left;  
+
float:right;  
background-color:white;  
+
background-color:transparent;  
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:"Trebuchet MS", Tahoma, Geneva, sans-serif;  
 
}
 
}
  
Line 334: Line 331:
 
/* class for a half width column */
 
/* class for a half width column */
 
.column.half_size {
 
.column.half_size {
width: 50%;  
+
width: 46%;
 +
                background-color:transparent;  
 
}
 
}
 
/* styling for images in a half width column*/
 
/* styling for images in a half width column*/
Line 388: Line 386:
 
padding: 12px 10px;
 
padding: 12px 10px;
 
     background-color: #3399ff;
 
     background-color: #3399ff;
     text-align: center;
+
     text-align: left;
 
   color: #ffffff;
 
   color: #ffffff;
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
Line 407: Line 405:
 
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
/***************************************************** 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; }
+
}
+
  
  
Line 462: Line 435:
  
  
<div class="igem_2017_menu_wrapper" >
+
<div class="igem_2017_menu_wrapper" style="text-align:left">
 
+
  
  
 +
        <div style="text-align:center">
 
<a href="https://2017.igem.org/Team:WashU_StLouis">
 
<a href="https://2017.igem.org/Team:WashU_StLouis">
<img src="http://placehold.it/350x150">
+
<img src="https://static.igem.org/mediawiki/2017/7/7c/T--WashU_StLouis--wustligemlogo.jpg" style="height:8vw;width:8vw"/>
 
</a>
 
</a>
 
+
        </div>
  
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
 
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
Line 490: Line 463:
  
 
<div class="menu_button">
 
<div class="menu_button">
<div class="expand_collapse_icon">  </div> TEAM
+
<div class="expand_collapse_icon">  </div> Team
 
</div>  
 
</div>  
  
Line 500: Line 473:
 
</div>
 
</div>
 
</a>
 
</a>
 +
 +
<a href="https://2017.igem.org/Team:WashU_StLouis/TeamPictures">
 +
<div class="submenu_button" id="TeamPictures_page">
 +
Team Pictures
 +
</div>
 +
</a>
 +
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Collaborations">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Collaborations">
Line 512: Line 492:
  
  
+
 
  
 
<div class="menu_button">
 
<div class="menu_button">
<div class="expand_collapse_icon">  </div> PROJECT
+
<div class="expand_collapse_icon">  </div> Project
 
</div>  
 
</div>  
 
+
 
<!-- project submenu -->
 
<!-- project submenu -->
 
<div class="submenu_wrapper">
 
<div class="submenu_wrapper">
 +
 +
                        <a href="https://2017.igem.org/Team:WashU_StLouis/Background">
 +
                                <div class="submenu_button" id="Background_page">
 +
                                        Background
 +
                                </div>
 +
                        </a>
 
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Description">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Description">
Line 530: Line 516:
 
<div class="submenu_button"  id="Design_page">
 
<div class="submenu_button"  id="Design_page">
 
Design
 
Design
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Experiments">
 
<div class="submenu_button"  id="Experiments_page">
 
Experiments
 
 
</div>
 
</div>
 
</a>
 
</a>
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Notebook">
 
<div class="submenu_button"  id="Notebook_page">
 
Notebook
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/InterLab">
 
<div class="submenu_button"  id="InterLab_page">
 
InterLab
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Contribution">
 
<div class="submenu_button"  id="Contribution_page">
 
Contribution
 
</div>
 
</a>
 
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Model">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Model">
Line 586: Line 548:
 
        <div class="submenu_button"  id="Attributions_page">
 
        <div class="submenu_button"  id="Attributions_page">
 
        Attributions  
 
        Attributions  
 +
        </div>
 +
        </a>
 +
 +
        <a href="https://2017.igem.org/Team:WashU_StLouis/Citations">
 +
        <div class="submenu_button"  id="Citations_page">
 +
        Citations
 
        </div>
 
        </div>
 
        </a>
 
        </a>
Line 592: Line 560:
  
 
 
+
<div class="menu_button">
 +
<div class="expand_collapse_icon">  </div> Wet Lab
 +
</div>
 +
 
 +
                <!--wet lab submenu-->
 +
                <div class="submenu_wrapper">
 +
 
 +
<a href="https://2017.igem.org/Team:WashU_StLouis/Notebook">
 +
<div class="submenu_button"  id="Notebook_page">
 +
Notebook
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:WashU_StLouis/Experiments-Protocols">
 +
<div class="submenu_button"  id="Experiments-Protocols_page">
 +
Experiments/Protocols
 +
</div>
 +
</a>
 +
 
 +
<a href="https://2017.igem.org/Team:WashU_StLouis/InterLab">
 +
<div class="submenu_button"  id="InterLab_page">
 +
InterLab
 +
</div>
 +
</a>
 +
 
 +
 
 +
        <a href="https://2017.igem.org/Team:WashU_StLouis/Safety">
 +
        <div class="submenu_button" id="Safety_page">
 +
        Safety
 +
        </div>
 +
        </a>
 +
 
 +
                </div>
 
 
 
 
  
 
<div class="menu_button">
 
<div class="menu_button">
<div class="expand_collapse_icon">  </div> PARTS
+
<div class="expand_collapse_icon">  </div> Parts
 
</div>
 
</div>
 
 
 
 
Line 621: Line 621:
 
</a>
 
</a>
  
<a href="https://2017.igem.org/Team:WashU_StLouis/Part_Collection">
+
 
<div class="submenu_button"  id="Part_Collection_page">
+
Part Collection
+
</div>
+
</a>
+
 
</div>  
 
</div>  
 
 
 
 
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Safety">
 
<div class="menu_button direct_to_page">
 
SAFETY
 
</div>
 
</a>
 
 
 
 
  
  
Line 646: Line 628:
  
 
<div class="menu_button" >
 
<div class="menu_button" >
<div class="expand_collapse_icon">  </div> HUMAN PRACTICES
+
<div class="expand_collapse_icon">  </div> Human Practices
 
</div>  
 
</div>  
  
Line 657: Line 639:
 
</div>
 
</div>
 
</a>
 
</a>
 
<a href="https://2017.igem.org/Team:WashU_StLouis/HP/Gold_Integrated">
 
<div class="submenu_button" id="Gold_Integrated_page">
 
Integrated and Gold
 
</div>
 
</a>
 
 
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Engagement">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Engagement">
Line 675: Line 650:
  
 
<div class="menu_button">
 
<div class="menu_button">
<div class="expand_collapse_icon">  </div> AWARDS
+
<div class="expand_collapse_icon">  </div> Awards
 
</div>  
 
</div>  
  
Line 681: Line 656:
 
<div class="submenu_wrapper">
 
<div class="submenu_wrapper">
  
<a href="https://2017.igem.org/Team:WashU_StLouis/Applied_Design">
 
<div class="submenu_button"  id="Applied_Design_page">
 
Applied Design
 
</div>
 
</a>
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Entrepreneurship">
 
<div class="submenu_button"  id="Entrepreneurship_page">
 
Entrepreneurship
 
</div>
 
</a>
 
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Hardware">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Hardware">
Line 699: Line 663:
 
</a>
 
</a>
  
<a href="https://2017.igem.org/Team:WashU_StLouis/Measurement">
 
<div class="submenu_button"  id="Measurement_page">
 
Measurement
 
</div>
 
</a>
 
  
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Model">
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Model">
Line 711: Line 670:
 
</a>
 
</a>
  
<a href="https://2017.igem.org/Team:WashU_StLouis/Plant">
 
<div class="submenu_button"  id="Plant_page">
 
Plant
 
</div>
 
</a>
 
 
 
<a href="https://2017.igem.org/Team:WashU_StLouis/Software">
 
<div class="submenu_button"  id="Software_page">
 
Software
 
</div>
 
</a>
 
  
 
</div>  
 
</div>  
Line 728: Line 675:
 
<a href="https://igem.org/2017_Judging_Form?team=WashU_StLouis">
 
<a href="https://igem.org/2017_Judging_Form?team=WashU_StLouis">
 
<div class="menu_button direct_to_page">
 
<div class="menu_button direct_to_page">
JUDGING FORM
+
Judging Form
 
</div>  
 
</div>  
 
</a>
 
</a>

Latest revision as of 22:53, 1 November 2017