m (menu bar fixed to top) |
m |
||
(145 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<style> | <style> | ||
+ | |||
+ | @font-face { | ||
+ | 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); | ||
+ | } | ||
+ | |||
/********************************* DEFAULT WIKI SETTINGS ********************************/ | /********************************* DEFAULT WIKI SETTINGS ********************************/ | ||
Line 7: | Line 21: | ||
#sideMenu, #top_title {display:none;} | #sideMenu, #top_title {display:none;} | ||
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;} | #content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;} | ||
− | body {background-color: | + | 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 16: | Line 34: | ||
height:43px; | height:43px; | ||
position:fixed; | position:fixed; | ||
− | padding:0px; | + | padding:0px 0px 0px 0px; |
float:left; | float:left; | ||
− | background-color:# | + | background-color: #dbdbdb; |
text-align:left; | text-align:left; | ||
+ | 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: | + | width:13%; |
− | margin: | + | margin: 0px 0px 0px 0px; |
− | padding: 10px 10px; | + | //padding: 10px 10px 10px 10px; |
− | border- | + | //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 50: | 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 60: | Line 93: | ||
ul.menu_items { | ul.menu_items { | ||
width:100%; | width:100%; | ||
− | margin | + | 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: | + | //width:100%; |
− | margin-top:-2px; | + | margin-top:-2px; |
− | padding: | + | padding: 0px 15px 0px 15px ; |
display:block; | display:block; | ||
− | border-bottom: 1px solid #d3d3d3; | + | //border-bottom: 1px solid #d3d3d3; |
− | text-align: | + | text-align:center; |
font-weight:bold; | font-weight:bold; | ||
text-decoration:none; | text-decoration:none; | ||
Line 83: | 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: | + | //margin-left: -20px; |
+ | padding: 15px 0px 12px 0px; | ||
text-decoration: none; | text-decoration: none; | ||
− | color: | + | color:#04036C; |
} | } | ||
/* When hovering on a menu item */ | /* When hovering on a menu item */ | ||
− | .menu_items li:hover { | + | .menu_items > li:hover { |
− | background-color:# | + | background-color: #efefef; |
− | color: # | + | 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 104: | Line 165: | ||
font-weight:bold; | font-weight:bold; | ||
cursor:pointer; | cursor:pointer; | ||
− | + | font-size:12px; | |
+ | //background-color:#000000; | ||
} | } | ||
Line 110: | Line 172: | ||
ul.submenu { | ul.submenu { | ||
width: 100%; | width: 100%; | ||
− | margin: | + | margin: 0px 10px -16px -20px; |
list-style: none; | list-style: none; | ||
} | } | ||
Line 117: | Line 179: | ||
.submenu li { | .submenu li { | ||
width: 100%; | width: 100%; | ||
− | margin-left: | + | margin-left: 5px; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | cursor:pointer; | ||
} | } | ||
Line 125: | Line 189: | ||
.submenu li a { | .submenu li a { | ||
width: 100%; | width: 100%; | ||
− | padding: 5px | + | 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 136: | Line 201: | ||
.submenu li a:hover { | .submenu li a:hover { | ||
− | background-color:#000000; | + | //background-color:#000000; |
− | color: | + | color: red; |
+ | |||
} | } | ||
Line 169: | Line 235: | ||
.content_wrapper { | .content_wrapper { | ||
width: 85%; | width: 85%; | ||
− | margin-left:150px; | + | //margin-left:150px; |
padding:10px 0px; | padding:10px 0px; | ||
float:left; | float:left; | ||
− | background-color: | + | background-color:transparent; |
} | } | ||
Line 181: | Line 247: | ||
background-color:white; | background-color:white; | ||
} | } | ||
− | + | ||
.full_size { | .full_size { | ||
− | width: | + | width:100vw; |
} | } | ||
Line 192: | Line 258: | ||
.half_size { | .half_size { | ||
− | width: | + | width: 50vw; |
} | } | ||
.half_size img { | .half_size img { | ||
Line 223: | Line 289: | ||
/* styling for the titles */ | /* styling for the titles */ | ||
− | .content_wrapper h1 | + | .content_wrapper h1{ |
padding:5px 15px; | padding:5px 15px; | ||
border-bottom:0px; | border-bottom:0px; | ||
Line 229: | Line 295: | ||
} | } | ||
− | .content_wrapper h3 | + | .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 */ | ||
− | . | + | .page_text p { |
− | padding:0px | + | padding:10px 0px 10px 0px; |
− | font-size: | + | font-size: 18px; |
− | font-family:Tahoma, Geneva, sans-serif; | + | //font-family:Tahoma, Geneva, sans-serif; |
+ | font-family: 'MartelReg', sans-serif; | ||
+ | line-height: 200%; | ||
} | } | ||
Line 265: | Line 466: | ||
.content_wrapper ul { | .content_wrapper ul { | ||
padding:0px 20px; | padding:0px 20px; | ||
− | font-size: | + | font-size: 18px; |
− | font-family:Tahoma, Geneva, sans-serif; | + | //font-family:Tahoma, Geneva, sans-serif; |
+ | font-family: 'MartelReg', sans-serif; | ||
} | } | ||
Line 272: | Line 474: | ||
.content_wrapper ol { | .content_wrapper ol { | ||
padding:0px; | padding:0px; | ||
− | font-size: | + | font-size: 18px; |
− | font-family:Tahoma, Geneva, sans-serif; | + | //font-family:Tahoma, Geneva, sans-serif; |
+ | font-family: 'MartelReg', sans-serif; | ||
} | } | ||
Line 321: | Line 524: | ||
color:#72c9b6; | color:#72c9b6; | ||
} | } | ||
+ | |||
+ | /********************************* EXPERIMENTS:PROTOCOL ********************************/ | ||
+ | |||
+ | button.protocol-accordion { | ||
+ | background-color: #eee; | ||
+ | color: #444; | ||
+ | cursor: pointer; | ||
+ | padding: 18px; | ||
+ | width: 100%; | ||
+ | border: none; | ||
+ | text-align: left; | ||
+ | outline: none; | ||
+ | font-size: 15px; | ||
+ | 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; | ||
+ | |||
+ | } | ||
+ | |||
+ | button.protocol-accordion.active, | ||
+ | button.protocol-accordion:hover { | ||
+ | background-color: #ddd; | ||
+ | padding: 20px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | button.protocol-accordion:after { | ||
+ | content: '\02795'; | ||
+ | font-size: 13px; | ||
+ | color: #777; | ||
+ | float: right; | ||
+ | padding-right: 20px; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | button.protocol-accordion.active:after { | ||
+ | content: "\2796"; | ||
+ | padding-right: 20px; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | div.protocol-panel { | ||
+ | background-color: white; | ||
+ | //padding: 0 18px; | ||
+ | max-height: 0; | ||
+ | overflow: hidden; | ||
+ | transition: 0.6s ease-in-out; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | div.protocol-panel.show { | ||
+ | opacity: 1; | ||
+ | max-height: 800px; | ||
+ | padding: 25px 0px 25px 0px; | ||
+ | margin: 25px 18px 25px 0px; | ||
+ | background-color: #E8E8E8; | ||
+ | } | ||
/********************************* RESPONSIVE STYLING ********************************/ | /********************************* RESPONSIVE STYLING ********************************/ | ||
Line 363: | Line 641: | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
</head> | </head> | ||
− | |||
− | |||
− | |||
<div class="menu_wrapper" > | <div class="menu_wrapper" > | ||
Line 374: | 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"> | + | <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"> < | + | <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 | + | <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/ | + | <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"> < | + | |
+ | <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/Experiments">Experiments</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/ | + | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/Safety">Safety</a></li> |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | |
− | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
− | <li class="menu_item"> < | + | |
+ | <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/ | + | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/Description">Overview</a></li> |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/Design">Design</a></li> |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/Modeling">Modeling</a></li> |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | <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 right_mi"> <a href=" https://2016.igem.org/Team:WashU_StLouis/Team">TEAM</a> | |
− | <li class="menu_item"> < | + | |
<ul class="submenu"> | <ul class="submenu"> | ||
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis | + | <li> <a href=" https://2016.igem.org/Team:WashU_StLouis/Team">Team</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/Attributions">Attributions</a> </li> | |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | |
− | <li> <a href="https://2016.igem.org/Team:WashU_StLouis/ | + | |
</ul> | </ul> | ||
</li> | </li> | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</ul> | </ul> | ||
Line 446: | Line 717: | ||
− | + | <p style="margin-bottom: 1.5cm;"></p> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 486: | Line 749: | ||
− | $('#accordion').find('.menu_item'). | + | $('#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