Difference between revisions of "Template:WashU StLouis"

m
m
 
(129 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<style>
 
<style>
  
−
 
+
@font-face {
−
@import 'https://fonts.googleapis.com/css?family=Martel|Martel+Sans:400,700,900';
+
font-family: Bangers;
−
 
+
src: url(https://static.igem.org/mediawiki/2016/1/1d/T--WashU_StLouis--Bangers.woff);
 +
}
 +
@font-face {
 +
font-family: Boogaloo;
 +
src: url(https://static.igem.org/mediawiki/2016/8/8e/T--WashU_StLouis--Boogaloo.woff);
 +
}
 +
@font-face {
 +
font-family: MartelReg;
 +
src: url(https://static.igem.org/mediawiki/2016/f/f3/T--WashU_StLouis--MartelReg.woff);
 +
}
  
  
Line 14: Line 23:
 
body {background-color:transparent; }
 
body {background-color:transparent; }
 
#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; }
 +
h1, h2, h3, h4, h5, h6, h7 {font-family: 'MartelReg', sans-serif;}
 +
h1{ font-size: 100px; line-height: normal; text-align: center; }
 +
h2{ font-size: 25px; line-height: normal; text-align: center; }
 +
h3{ font-size: 25px; line-height: normal; text-align: center; }
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
Line 21: Line 34:
 
height:43px;  
 
height:43px;  
 
position:fixed;  
 
position:fixed;  
−
padding:0px;
+
padding:0px 0px 0px 0px;
 
float:left;  
 
float:left;  
−
background-color:#f2f2f2;  
+
background-color: #dbdbdb;  
 
text-align:left;
 
text-align:left;
−
                 font-family: 'Martel Sans', sans-serif;
+
                 font-family: 'MartelReg', sans-serif;
 +
                z-index:50;
 +
box-shadow: 0px 4px 20px 0px grey;
 
}
 
}
  
 
/* styling for the menu items */
 
/* styling for the menu items */
 
.menu_item {
 
.menu_item {
−
width:11%;  
+
width:13%;  
−
margin: px 0px 0px -20px;
+
margin: 0px 0px 0px 0px;
−
padding: 10px 10px;   
+
//padding: 10px 10px 10px 10px;   
−
border-left: 1px solid #d3d3d3;  
+
//border-left: 1px solid #000000;
 +
//border-right: 1px solid #000000;  
 
font-weight:bold;
 
font-weight:bold;
 
color:#000000;  
 
color:#000000;  
 
cursor: pointer;  
 
cursor: pointer;  
−
float: left;
+
//float: left;
 
list-style: none;
 
list-style: none;
 +
                vertical-align: middle;
 +
 
}
 
}
 +
 +
.right_mi {
 +
float: right;
 +
}
 +
 +
.left_mi {
 +
float: left;
 +
}
 +
  
 
/* when hovering on a menu item */
 
/* when hovering on a menu item */
 
.menu_item:hover {  
 
.menu_item:hover {  
−
color:#000000;  
+
//color:#000000;  
−
background-color: #72c9b6;
+
//background-color: #72c9b6;
 
}
 
}
  
Line 56: Line 83:
 
/* 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: "–";  
 
}
 
}
  
Line 66: Line 93:
 
ul.menu_items {
 
ul.menu_items {
 
width:100%;  
 
width:100%;  
−
margin-left:0px;  
+
margin: 0px 0px 0px 0px;  
−
padding:0px;
+
padding:0px 0px 0px 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:100%;  
−
margin-top:-2px;  
+
margin-top:-2px;
−
padding: 15px 0px 15px 15px ;  
+
padding: 0px 15px 0px 15px ;  
 
display:block;
 
display:block;
−
border-bottom: 1px solid #d3d3d3;   
+
//border-bottom: 1px solid #d3d3d3;   
−
text-align:left;  
+
text-align:center;  
 
font-weight:bold;
 
font-weight:bold;
 
text-decoration:none;  
 
text-decoration:none;  
Line 89: Line 116:
 
-o-transition: all 0.4s ease; transition: all 0.4s ease;   
 
-o-transition: all 0.4s ease; transition: all 0.4s ease;   
 
}
 
}
 +
  
 
.menu_item a {
 
.menu_item a {
 +
display:block;
 
width: 100%;
 
width: 100%;
−
margin-left: -20px;
+
//height: 100%;
−
padding: 11px 90px 12px 20px;
+
//margin-left: -20px;
 +
padding: 15px 0px 12px 0px;
 
text-decoration: none;
 
text-decoration: none;
−
color:black;
+
color:#04036C;
 
}
 
}
  
 
/* When hovering on a menu item */
 
/* When hovering on a menu item */
−
.menu_items li:hover {  
+
.menu_items > li:hover {  
−
background-color:#72c9b6;
+
background-color: #efefef;
−
color: #000000;
+
color:red;
 +
font-size:130%;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.super_cell  {
 +
font-family: 'Bangers';
 +
font-size:22px;
 +
-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; 
 +
}
 +
 
 +
.super_cell:hover {
 +
font-size:30px
 +
}
 +
 
 +
 
 +
.menu_items > li> a:hover {
 +
//background-color:#efefef;
 +
color:red;
 +
//font-size:16px;
 +
 
 
}
 
}
  
Line 110: Line 165:
 
font-weight:bold;
 
font-weight:bold;
 
cursor:pointer;  
 
cursor:pointer;  
−
 
+
font-size:12px;
 +
//background-color:#000000;
 
}
 
}
  
Line 116: Line 172:
 
ul.submenu {  
 
ul.submenu {  
 
width: 100%;
 
width: 100%;
−
margin: 10px 0px -11px 0px;
+
margin: 0px 10px -16px -20px;
 
list-style: none;
 
list-style: none;
 
}
 
}
Line 123: Line 179:
 
.submenu li {  
 
.submenu li {  
 
width: 100%;  
 
width: 100%;  
−
margin-left: 10px;
+
margin-left: 5px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 +
padding: 0px 0px 0px 0px;
 +
cursor:pointer;
 
}
 
}
  
Line 131: Line 189:
 
.submenu li a {
 
.submenu li a {
 
width: 100%;  
 
width: 100%;  
−
padding: 5px 10px;  
+
padding: 5px 15px;  
 
display: inline-block;
 
display: inline-block;
 
border-bottom: 1px solid #d3d3d3;
 
border-bottom: 1px solid #d3d3d3;
 +
border-top: 1px solid #d3d3d3;
 
background-color:white;  
 
background-color:white;  
 
text-decoration:none;
 
text-decoration:none;
Line 142: Line 201:
  
 
.submenu li a:hover  {
 
.submenu li a:hover  {
−
background-color:#000000;  
+
//background-color:#000000;  
−
color: #72c9b6;
+
color: red;
 +
 
 
}
 
}
  
Line 187: Line 247:
 
background-color:white;  
 
background-color:white;  
 
}
 
}
−
 
+
       
 
.full_size {
 
.full_size {
 
width:100vw;  
 
width:100vw;  
Line 198: Line 258:
  
 
.half_size {
 
.half_size {
−
width: 50%;  
+
width: 50vw;  
 
}
 
}
 
.half_size img {  
 
.half_size img {  
Line 229: Line 289:
  
 
/* styling for the titles */
 
/* styling for the titles */
−
.content_wrapper h1, .content_wrapper h2 {
+
.content_wrapper h1{
 
padding:5px 15px;  
 
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
Line 235: Line 295:
  
 
}
 
}
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
.content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color:#000000;
 +
 
 +
}
 +
.content_wrapper h3 {
 +
padding:20px 0px 20px 0px;
 +
border-bottom:0px;
 +
color:#000000;
 +
 
 +
}
 +
.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;   
 
}
 
}
 +
 +
 +
.page_title {
 +
background-color: #f2f2f2;
 +
margin: 0px 0px 100px 0px;
 +
padding: 50px 0px 50px 0px;
 +
}
 +
 +
 +
 +
.title2 {
 +
margin:-100px 0px 0px 0px;
 +
padding: 0px 0px 50px 0px;
 +
height: 35vw;
 +
background: url('https://static.igem.org/mediawiki/2016/3/3b/T--WashU_StLouis--Background1.png') 0% 0 fixed;
 +
background-position: 0% 0%;
 +
}
 +
 +
.action {
 +
position: absolute;
 +
top:2vw;
 +
//margin-top:-100px;
 +
width:80vw;
 +
left: 5vw;
 +
z-index: 7;
 +
 +
}
 +
.actionwords {
 +
position: absolute;
 +
top:17vw;
 +
margin-top:-100px;
 +
width:60vw;
 +
left: 51vw;
 +
margin-left: -42vw;
 +
z-index: 49;
 +
    font-family: 'Bangers', sans-serif;
 +
    font-weight: normal;
 +
    font-size: 150px;
 +
    text-align: center;
 +
    //overflow: visible;
 +
    line-height: normal;
 +
    color: #ffffff !important;
 +
    text-shadow:
 +
    -2px -2px 0 #000,
 +
    2px -2px 0 #000,
 +
    -2px 2px 0 #000,
 +
    2px 2px 0 #000;
 +
 +
 +
}
 +
 +
 +
.lactionwords {
 +
position: absolute;
 +
top:14vw;
 +
margin-top:-100px;
 +
width:60vw;
 +
left: 51vw;
 +
margin-left: -42vw;
 +
z-index: 49;
 +
 +
 +
    font-family: 'Bangers', sans-serif;
 +
    font-weight: normal;
 +
    font-size: 150px;
 +
    text-align: center;
 +
    //overflow: visible;
 +
    line-height: normal;
 +
    color: #ffffff !important;
 +
    text-shadow:
 +
    -2px -2px 0 #000,
 +
    2px -2px 0 #000,
 +
    -2px 2px 0 #000,
 +
    2px 2px 0 #000;
 +
 +
 +
}
 +
 +
 +
.speech {
 +
position: absolute;
 +
top:13vw;
 +
margin-top:-100px;
 +
width:30vw;
 +
left:69vw;
 +
margin-left: 0vw;
 +
z-index: 8;
 +
 +
}
 +
.speechwords {
 +
 +
font-family: 'Boogaloo', sans-serif;
 +
position: absolute;
 +
top:20vw;
 +
margin-top:-100px;
 +
width:24vw;
 +
left: 72vw;
 +
margin-left: 0vw;
 +
z-index: 9;
 +
 +
}
 +
 +
.page_text{
 +
padding: 50px 5vw 0px 5vw;
 +
}
 +
 +
.page_references{
 +
padding: 0px 8vw 0px 8vw;
 +
}     
 +
 +
.page_references p{
 +
font-size: 15px;
 +
font-family: 'Times New Roman', Times, serif;
 +
text-align: center;
 +
} 
 +
 +
.page_references li{
 +
font-size: 15px;
 +
font-family: 'Times New Roman', Times, serif;
 +
}     
 +
  
  
 
/* font and text */
 
/* font and text */
−
.content_wrapper p {  
+
.page_text p {  
−
padding:0px 15px;  
+
padding:10px 0px 10px 0px;  
−
font-size: 13px;
+
font-size: 18px;
 
//font-family:Tahoma, Geneva, sans-serif;  
 
//font-family:Tahoma, Geneva, sans-serif;  
−
font-family: 'Martel Sans', sans-serif;
+
font-family: 'MartelReg', sans-serif;
 +
line-height: 200%;
 
}
 
}
  
Line 272: Line 466:
 
.content_wrapper ul {
 
.content_wrapper ul {
 
padding:0px 20px;
 
padding:0px 20px;
−
font-size: 13px;
+
font-size: 18px;
 
//font-family:Tahoma, Geneva, sans-serif;
 
//font-family:Tahoma, Geneva, sans-serif;
−
                 font-family: 'Martel Sans', sans-serif;  
+
                 font-family: 'MartelReg', sans-serif;
 
}
 
}
  
Line 280: Line 474:
 
.content_wrapper ol {
 
.content_wrapper ol {
 
padding:0px;  
 
padding:0px;  
−
font-size: 13px;
+
font-size: 18px;
 
//font-family:Tahoma, Geneva, sans-serif;  
 
//font-family:Tahoma, Geneva, sans-serif;  
−
                 font-family: 'Martel Sans', sans-serif;
+
                 font-family: 'MartelReg', sans-serif;
 
}
 
}
  
Line 344: Line 538:
 
             font-size: 15px;
 
             font-size: 15px;
 
             transition: 0.4s;
 
             transition: 0.4s;
 +
 +
        }
 +
 +
    button.protocol-accordion-half {
 +
            background-color: #eee;
 +
            color: #444;
 +
            cursor: pointer;
 +
            //padding: 18px;
 +
            width: 50%;
 +
            border: none;
 +
            text-align: left;
 +
            outline: none;
 +
            font-size: 15px;
 +
            transition: 0.4s;
 +
            padding: 10px;
 +
 
         }
 
         }
 
          
 
          
Line 349: Line 559:
 
         button.protocol-accordion:hover {
 
         button.protocol-accordion:hover {
 
             background-color: #ddd;
 
             background-color: #ddd;
 +
            padding: 20px;
 +
 +
 
         }
 
         }
 
          
 
          
Line 356: Line 569:
 
             color: #777;
 
             color: #777;
 
             float: right;
 
             float: right;
−
             margin-left: 5px;
+
             padding-right: 20px;
 +
 
 +
 
 +
 
 
         }
 
         }
 
          
 
          
 
         button.protocol-accordion.active:after {
 
         button.protocol-accordion.active:after {
 
             content: "\2796";
 
             content: "\2796";
 +
            padding-right: 20px;
 +
 +
 +
 
         }
 
         }
 
          
 
          
 
         div.protocol-panel {
 
         div.protocol-panel {
−
            padding: 0 18px;
 
 
             background-color: white;
 
             background-color: white;
 +
            //padding: 0 18px;
 
             max-height: 0;
 
             max-height: 0;
 
             overflow: hidden;
 
             overflow: hidden;
Line 374: Line 594:
 
         div.protocol-panel.show {
 
         div.protocol-panel.show {
 
             opacity: 1;
 
             opacity: 1;
−
             max-height: 500px;
+
             max-height: 800px;
 +
            padding: 25px 0px 25px 0px;
 +
            margin: 25px 18px 25px 0px;
 +
            background-color: #E8E8E8;
 
         }
 
         }
  
Line 426: Line 649:
 
<div class="collapsable_menu_control"> MENU ▤ </div>
 
<div class="collapsable_menu_control"> MENU ▤ </div>
  
−
<ul id="accordion" class="accordion">
+
<ul id="accordion" class="accordion menu_items">
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:WashU_StLouis">HOME </a> </li>
+
<li class="menu_item left_mi" > <a href="https://2016.igem.org/Team:WashU_StLouis" class = "super_cell">SUPER CELLS</a> </li>
  
  
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
<li class="menu_item right_mi"> <a href="https://2016.igem.org/Team:WashU_StLouis/Measurement"> ACHIEVEMENTS </a>
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href=" https://2016.igem.org/Team:WashU_StLouis/Team"> Team   </a> </li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Achievements">Medal Achievements</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Collaborations">★  Collaborations </a> </li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Measurement">Measurement Award</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Model">Model Award</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Basic_Part">Basic Part</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Composite_Part">Composite Part</a></li>
 +
 
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
 
 +
<li class="menu_item right_mi"> <a href="https://2016.igem.org/Team:WashU_StLouis/HP/Silver">HUMAN PRACTICES</a> </li>
 +
 
 +
 
 +
<li class="menu_item right_mi"> <a href="https://2016.igem.org/Team:WashU_StLouis/Experiments"> LAB </a>  
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Description"> ★  Description </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Experiments">Experiments</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Design"> ★ Design </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Notebook">Notebook</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Experiments"> Experiments </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Interlab">Interlab</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Proof"> ★ Proof of Concept </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Safety">Safety</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Demonstrate"> ★ Demonstrate </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Results"> Results </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Notebook"> Notebook </a></li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
 
 +
<li class="menu_item right_mi"> <a href="https://2016.igem.org/Team:WashU_StLouis/Description"> PROJECT </a>  
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Parts">Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Description">Overview</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Basic_Part"> ★ Basic Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Design">Design</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Composite_Part"> ★ Composite Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Modeling">Modeling</a></li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Part_Collection"> ★ Part Collection </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Results">Results</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Proof">Proof of Concept</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Conclusions">Conclusions</a></li>
 +
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Parts">Parts</a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:WashU_StLouis/Safety">SAFETY </a> </li>
 
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:WashU_StLouis/Attributions">★  ATTRIBUTIONS </a></li>
 
  
−
 
+
<li class="menu_item right_mi"> <a href=" https://2016.igem.org/Team:WashU_StLouis/Team">TEAM</a>
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Human_Practices"> Human Practices </a></li>
+
<li> <a href=" https://2016.igem.org/Team:WashU_StLouis/Team">Team</a> </li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/HP/Silver">★ Silver </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Collaborations">Collaborations</a> </li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/HP/Gold">★ Gold </a></li>
+
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Attributions">Attributions</a> </li>
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Integrated_Practices"> ★ Integrated Practices </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Engagement">★ Engagement </a></li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
  
  
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 
−
<ul class="submenu">
 
−
<li><a href="https://2016.igem.org/Team:WashU_StLouis/Entrepreneurship"> ★ Entrepreneurship </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Hardware"> ★ Hardware </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Software">★ Software </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Measurement">★  Measurement </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:WashU_StLouis/Model">★ Model </a></li>
 
  
−
                    </ul>
 
−
                </li>
 
 
</ul>
 
</ul>
  
Line 498: Line 717:
  
  
−
 
+
<p style="margin-bottom: 1.5cm;"></p>
−
<!-- <h1 id="team_name">  </h1> -->
+
−
<!-- <h4 id="page_name">  </h4> -->
+
−
 
+
−
<p style= "margin-bottom: 1cm;"></p>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
  
  
Line 540: Line 749:
  
  
−
$('#accordion').find('.menu_item').click(function(){
+
$('#accordion').find('.menu_item').hover(function(){
  
 
//Expand or collapse this panel
 
//Expand or collapse this panel

Latest revision as of 03:14, 20 October 2016

MENU ▤