|
|
(114 intermediate revisions by the same user not shown) |
Line 6: |
Line 6: |
| | | |
| #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:101.7%; margin-top:-5px; margin-left:-24px;} |
− | body {background-color:white; } | + | body {background-color:black; } |
| #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; } |
| | | |
Line 65: |
Line 65: |
| /* 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: 15px 0px 15px 15px ; |
Line 166: |
Line 166: |
| /* Wrapper for the content */ | | /* Wrapper for the content */ |
| .content_wrapper { | | .content_wrapper { |
− | width: 85%; | + | width: 100%; |
| margin-left:150px; | | margin-left:150px; |
| padding:10px 0px; | | padding:10px 0px; |
Line 186: |
Line 186: |
| .full_size img { | | .full_size img { |
| padding: 10px 15px; | | padding: 10px 15px; |
− | width:96.5%; | + | width:100%; |
| } | | } |
| | | |
| .half_size { | | .half_size { |
− | width: 50%; | + | width: 100%; |
| } | | } |
| .half_size img { | | .half_size img { |
| padding: 10px 15px; | | padding: 10px 15px; |
− | width: 93%; | + | width: 100%; |
| } | | } |
| | | |
Line 203: |
Line 203: |
| | | |
| .highlight { | | .highlight { |
− | width: 90%; | + | width: 100%; |
| margin: auto; | | margin: auto; |
| padding: 15px 5px; | | padding: 15px 5px; |
Line 213: |
Line 213: |
| display: block; | | display: block; |
| margin: 5px 15px; | | margin: 5px 15px; |
− | width: 95%; | + | width: 100%; |
| font-weight:bold; | | font-weight:bold; |
| } | | } |
Line 276: |
Line 276: |
| /* Table */ | | /* Table */ |
| .content_wrapper table { | | .content_wrapper table { |
− | width: 97%; | + | width: 100%; |
| margin:15px 10px; | | margin:15px 10px; |
| border: 1px solid #d3d3d3; | | border: 1px solid #d3d3d3; |
Line 302: |
Line 302: |
| .button_click { | | .button_click { |
| margin: 10px auto; | | margin: 10px auto; |
− | padding: 15px; width:12%; | + | padding: 15px; width:100%; |
| text-align:center; | | text-align:center; |
| font-weight:bold; | | font-weight:bold; |
Line 322: |
Line 322: |
| /********************************* RESPONSIVE STYLING ********************************/ | | /********************************* RESPONSIVE STYLING ********************************/ |
| | | |
− | /* IF THE SCREEN IS LESS THAN 1000PX */
| |
| | | |
− | @media only screen and (max-width: 1000px) {
| |
− |
| |
− | #content {width:100%; }
| |
− | .menu_wrapper {width:15%;}
| |
− | .content_wrapper {margin-left: 15%;}
| |
− | .menu_item {display:block;}
| |
− | .icon {display:none;}
| |
− | .highlight {padding:10px 0px;}
| |
− | }
| |
− |
| |
− |
| |
− | /* IF THE SCREEN IS LESS THAN 680PX */
| |
− |
| |
− | @media only screen and (max-width: 680px) {
| |
− | .collapsable_menu_control { display:block;}
| |
− | .menu_item {display:none;}
| |
− | .menu_wrapper { width:100%; height: 15%; position:relative;}
| |
− | .content_wrapper {width:100%; margin-left:0px;}
| |
− | .column.half_size {width:100%; }
| |
− | .column img { width: 100%; padding: 5px 0px;}
| |
− | .icon {display:block;}
| |
− | .highlight {padding:15px 5px;}
| |
− | }
| |
| | | |
| </style> | | </style> |
Line 357: |
Line 333: |
| | | |
| <!-- This tells the browser that your page is responsive --> | | <!-- This tells the browser that your page is responsive --> |
− |
| |
− | <head>
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
− | </head>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <div class="menu_wrapper" >
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <div class="collapsable_menu_control"> MENU ▤ </div>
| |
− |
| |
− | <ul id="accordion" class="accordion">
| |
− |
| |
− | <li class="menu_item"> <a href="https://2016.igem.org/Team:BGIC_China">HOME </a> </li>
| |
− |
| |
− |
| |
− | <li class="menu_item"> <div class="icon plus"></div> TEAM
| |
− | <ul class="submenu">
| |
− | <li> <a href=" https://2016.igem.org/Team:BGIC_China/Team"> Team </a> </li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Collaborations">★ Collaborations </a> </li>
| |
− | </ul>
| |
− | </li>
| |
− |
| |
− | <li class="menu_item"> <div class="icon plus"></div> PROJECT
| |
− | <ul class="submenu">
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Description"> ★ Description </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Design"> ★ Design </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Experiments"> Experiments </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Proof"> ★ Proof of Concept </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Demonstrate"> ★ Demonstrate </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Results"> Results </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Notebook"> Notebook </a></li>
| |
− | </ul>
| |
− | </li>
| |
− |
| |
− | <li class="menu_item"> <div class="icon plus"></div> PARTS
| |
− | <ul class="submenu">
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Parts">Parts </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Basic_Part"> ★ Basic Parts </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Composite_Part"> ★ Composite Parts </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Part_Collection"> ★ Part Collection </a></li>
| |
− | </ul>
| |
− | </li>
| |
− |
| |
− |
| |
− | <li class="menu_item"> <a href="https://2016.igem.org/Team:BGIC_China/Safety"> SAFETY </a> </li>
| |
− |
| |
− |
| |
− | <li class="menu_item"> <a href="https://2016.igem.org/Team:BGIC_China/Attributions">★ ATTRIBUTIONS </a></li>
| |
− |
| |
− |
| |
− | <li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
| |
− | <ul class="submenu">
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Human_Practices"> Human Practices </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/HP/Silver">★ Silver </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/HP/Gold">★ Gold </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Integrated_Practices"> ★ Integrated Practices </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Engagement">★ Engagement </a></li>
| |
− | </ul>
| |
− | </li>
| |
− |
| |
− |
| |
− | <li class="menu_item"> <div class="icon plus"></div> AWARDS
| |
− | <ul class="submenu">
| |
− | <li><a href="https://2016.igem.org/Team:BGIC_China/Entrepreneurship"> ★ Entrepreneurship </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Hardware"> ★ Hardware </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Software">★ Software </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Measurement">★ Measurement </a></li>
| |
− | <li> <a href="https://2016.igem.org/Team:BGIC_China/Model">★ Model </a></li>
| |
− |
| |
− | </ul>
| |
− | </li>
| |
− | </ul>
| |
− |
| |
− | </div>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <div class="content_wrapper">
| |
− |
| |
− |
| |
− |
| |
− | <h1 id="team_name"> </h1>
| |
− | <h4 id="page_name"> </h4>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
| | | |
| | | |