|
|
(3 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| {{Peking/include}} | | {{Peking/include}} |
| + | |
| <html> | | <html> |
| <head> | | <head> |
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| + | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> |
| + | <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet"> |
| | | |
− | <style> | + | <script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | | |
− | /********************************* DEFAULT WIKI SETTINGS ********************************/ | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| + | |
| | | |
− | #sideMenu, | + | <style> |
− | #top_title { | + | #sideMenu, #top_title {display:none;} |
− | display: none;
| + | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0%;, margin-right: 0%} |
− | } | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| | | |
− | #content {
| + | /* makes navbar in box with shadow */ |
− | padding: 0px;
| + | .navbar-fixed-top { |
− | width: 100%;
| + | filter: none !important; |
| + | box-shadow: 0 2px 30px rgba(0,0,0,0.25); |
| + | -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25); |
| + | -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25); |
| + | border-bottom: 1px solid rgba(0,0,0,0.2); |
| } | | } |
| | | |
− | body {
| + | @font-face { |
− | background-color: white;
| + | font-family: 'banaue'; |
− | width: 100%;
| + | src: url('https://static.igem.org/mediawiki/2017/b/b0/T--Sydney_Australia--Wiki_Font_Banaue-Regular.Media-File.ogg'); |
− | }
| + | font-weight: normal; |
− | | + | font-style: normal; |
− | #bodyContent h1,
| + | |
− | #bodyContent h2,
| + | |
− | #bodyContent h3,
| + | |
− | #bodyContent h4,
| + | |
− | #bodyContent h5 {
| + | |
− | margin-bottom: 0px;
| + | |
− | }
| + | |
− | | + | |
− | #bodyContent {
| + | |
− | padding-right: 0px;
| + | |
− | }
| + | |
− | | + | |
− | #globalWrapper {
| + | |
− | font-size: 100%;
| + | |
− | padding: 0px;
| + | |
− | margin: -10px -20px -20px -20px;
| + | |
− | }
| + | |
− | | + | |
− | .navbar-collapse { | + | |
− | padding-left: 0px;
| + | |
− | }
| + | |
− | | + | |
− | #banner {
| + | |
− | margin-top: 50px;
| + | |
− | }
| + | |
− | | + | |
− | #sideMenu {
| + | |
− | margin-top: 10px;
| + | |
| } | | } |
| + | /* Making 'Team' image nice and crispy*/ |
| + | .img-responsive { |
| + | image-rendering: -moz-crisp-edges; |
| + | image-rendering: -o-crisp-edges; |
| + | image-rendering: -webkit-optimize-contrast; |
| + | -ms-interpolation-mode: nearest-neighbor; |
| + | } |
| + | /*dropdown on hover*/ |
| | | |
| .dropdown-menu li:hover .sub-menu { | | .dropdown-menu li:hover .sub-menu { |
Line 65: |
Line 56: |
| } | | } |
| | | |
− | | + | .navbar { |
− | /********************************* CONTENT OF THE PAGE ********************************/
| + | font-family: 'banaue'!important; |
− | | + | } |
− | | + | .navbar-nav a { |
− | /* Wrapper for the content */
| + | font-size: 20px; |
− | | + | color: #3e403f!important; |
− | .content_wrapper { | + | |
− | width: 85%;
| + | |
− | margin-left: 150px;
| + | |
− | padding: 0px;
| + | |
− | float: left;
| + | |
− | background-color: white;
| + | |
| } | | } |
| | | |
− | | + | .navbar { |
− | /*LAYOUT */
| + | background-color: white!important; |
− | | + | |
− | .column { | + | |
− | padding: 10px 0px;
| + | |
− | float: left;
| + | |
− | background-color: white;
| + | |
| } | | } |
| | | |
− | .full_size { | + | .navbar-default .nav .dropdown .dropdown-menu { |
− | width: 100%;
| + | -webkit-border-radius: 5px 5px 5px 5px ; |
| + | -moz-border-radius: 5px 5px 5px 5px ; |
| + | border-radius: 5px 5px 5px 5px ; |
| + | background-color: #fff; |
| + | margin-top: -3px; |
| + | margin-left: 0px; |
| + | border: none; |
| + | width: 250px; |
| } | | } |
| | | |
− | .full_size img { | + | @media (max-width: 1200px) { |
− | padding: 10px 15px;
| + | .navbar-header { |
− | width: 96.5%;
| + | float: none; |
| + | } |
| + | .navbar-left,.navbar-right { |
| + | float: none !important; |
| + | } |
| + | .navbar-toggle { |
| + | display: block; |
| + | } |
| + | .navbar-collapse { |
| + | border-top: 1px solid transparent; |
| + | box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); |
| + | } |
| + | .navbar-fixed-top { |
| + | top: 0; |
| + | border-width: 0 0 1px; |
| + | } |
| + | .navbar-collapse.collapse { |
| + | display: none!important; |
| + | } |
| + | .navbar-nav { |
| + | float: none!important; |
| + | margin-top: 7.5px; |
| + | } |
| + | .navbar-nav>li { |
| + | float: none; |
| + | } |
| + | .navbar-nav>li>a { |
| + | padding-top: 10px; |
| + | padding-bottom: 10px; |
| + | } |
| + | .collapse.in{ |
| + | display:block !important; |
| + | } |
| } | | } |
− |
| |
− | .half_size {
| |
− | width: 50%;
| |
− | }
| |
− |
| |
− | .half_size img {
| |
− | padding: 10px 15px;
| |
− | width: 93%;
| |
− | }
| |
− |
| |
− | .img:hover {
| |
− | opacity: 1.0 !important;
| |
− | }
| |
− |
| |
− | .clear {
| |
− | clear: both;
| |
− | }
| |
− |
| |
− | .highlight {
| |
− | width: 90%;
| |
− | margin: auto;
| |
− | padding: 15px 5px;
| |
− | background-color: #f2f2f2;
| |
− | }
| |
− |
| |
− | .judges-will-not-evaluate {
| |
− | border: 4px solid #72c9b6;
| |
− | display: block;
| |
− | margin: 5px 15px;
| |
− | width: 95%;
| |
− | font-weight: bold;
| |
− | }
| |
− |
| |
− |
| |
− | /*STYLING */
| |
− |
| |
− |
| |
− | /* styling for the titles */
| |
− |
| |
− | .content_wrapper h1,
| |
− | .content_wrapper h2 {
| |
− | padding: 5px 15px;
| |
− | border-bottom: 0px;
| |
− | color: #72c9b6;
| |
− | }
| |
− |
| |
− | .content_wrapper h3,
| |
− | .content_wrapper h4,
| |
− | .content_wrapper h5,
| |
− | .content_wrapper h6 {
| |
− | padding: 5px 15px;
| |
− | border-bottom: 0px;
| |
− | color: #000000;
| |
− | }
| |
− |
| |
− |
| |
− | /* font and text */
| |
− |
| |
− | .content_wrapper p {
| |
− | padding: 0px 15px;
| |
− | font-size: 13px;
| |
− | font-family: 'Roboto', sans-serif;
| |
− | }
| |
− |
| |
− |
| |
− | /* Links */
| |
− |
| |
− | .content_wrapper a {
| |
− | font-weight: bold;
| |
− | text-decoration: underline;
| |
− | text-decoration-color: #72c9b6;
| |
− | color: #72c9b6;
| |
− | -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;
| |
− | }
| |
− |
| |
− |
| |
− | /* hover for the links */
| |
− |
| |
− | .content_wrapper a:hover {
| |
− | text-decoration: none;
| |
− | color: #000000;
| |
− | }
| |
− |
| |
− |
| |
− | /* non numbered lists */
| |
− |
| |
− | .content_wrapper ul {
| |
− | padding: 0px 20px;
| |
− | font-size: 13px;
| |
− | font-family: 'Quicksand', sans-serif;
| |
− | }
| |
− |
| |
− |
| |
− | /* numbered lists */
| |
− |
| |
− | .content_wrapper ol {
| |
− | padding: 0px;
| |
− | font-size: 13px;
| |
− | font-family: 'Quicksand', sans-serif;
| |
− | }
| |
− |
| |
− |
| |
− | /* Table */
| |
− |
| |
− | .content_wrapper table {
| |
− | width: 97%;
| |
− | margin: 15px 10px;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | }
| |
− |
| |
− |
| |
− | /* table cells */
| |
− |
| |
− | .content_wrapper td {
| |
− | padding: 10px;
| |
− | vertical-align: text-top;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | }
| |
− |
| |
− |
| |
− | /* table headers */
| |
− |
| |
− | .content_wrapper th {
| |
− | padding: 10px;
| |
− | vertical-align: text-top;
| |
− | border: 1px solid #d3d3d3;
| |
− | border-collapse: collapse;
| |
− | background-color: #f2f2f2;
| |
− | }
| |
− |
| |
− |
| |
− | /* Button class */
| |
− |
| |
− | .button_click {
| |
− | margin: 10px auto;
| |
− | padding: 15px;
| |
− | width: 12%;
| |
− | text-align: center;
| |
− | font-weight: bold;
| |
− | background-color: #72c9b6;
| |
− | cursor: pointer;
| |
− | -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;
| |
− | }
| |
− |
| |
− |
| |
− | /* button class on hover */
| |
− |
| |
− | .button_click:hover {
| |
− | background-color: #000000;
| |
− | color: #72c9b6;
| |
− | }
| |
− |
| |
− | .top-pad {
| |
− | padding: 35px;
| |
− | }
| |
− |
| |
− |
| |
− | /********************************* 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> |
| | | |
| <script> | | <script> |
| | | |
− | // This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
| |
| | | |
− | $(document).ready(function() {
| |
| | | |
− | $("#HQ_page").attr('id','');
| + | </script> |
− |
| + | </head> |
| | | |
− | if ( wgPageName.substring( 0, 8) == "Template") { // if the page is a template it displays the full name in a single line
| |
− | $("#team_name").html( wgPageName );
| |
− | }
| |
| | | |
− | else if ( ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name
| |
− | $("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
| |
− | }
| |
| | | |
− | else {
| + | <body class=" |
− | // this adds the team's name as an h1
| + | |
− | $("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/") ) );
| + | |
| | | |
− | // this adds the page's title as an h4
| + | devsite-landing-page |
− | $("#page_name").html ( ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ") );
| + | devsite-header-no-lower-tabs" |
− | }
| + | id="top_of_page"><nav><div class="devsite-wrapper"><div class="devsite-top-section-wrapper |
| + | devsite-billboard-search-active"><header class="devsite-top-section nocontent"> |
| | | |
| | | |
| + | <div class="devsite-top-logo-row-wrapper-wrapper" style="position: fixed;"><div class="devsite-top-logo-row-wrapper"><div class="devsite-top-logo-row devsite-full-site-width"><button type="button" class="devsite-expand-section-nav devsite-header-icon-button |
| + | button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Hamburger menu"></button><div class="devsite-product-name-wrapper"><a class="devsite-product-name-link gc-analytics-event" href="https://2017.igem.org/Team:Peking" data-category="Site-Wide Custom Events" data-label="Project logo (header)"><img src="TeamLogo.png" class="devsite-product-logo" alt="Peking iGEM2017"> </a> |
| | | |
| + | <h1 class="devsite-product-name" ><strong> Peking iGEM</strong> 2017</h1></div> |
| | | |
− | $('#accordion').find('.menu_item').click(function(){
| + | <div class="devsite-header-upper-tabs"><nav class="devsite-doc-set-nav devsite-nav devsite-overflow-tabs-scroll-wrapper" |
− | | + | |
− | //Expand or collapse this panel
| + | |
− | submenu = $(this).find('.submenu');
| + | |
− | submenu.toggle();
| + | |
− | | + | |
− | icon = $(this).find('.icon');
| + | |
− | | + | |
− | if ( !$( submenu ).is(':visible') ) {
| + | |
− | icon.removeClass("less").addClass("plus");
| + | |
− | }
| + | |
− | else {
| + | |
− | icon.removeClass("plus").addClass("less");
| + | |
− | }
| + | |
− | | + | |
− | //Hide the other panels
| + | |
− | $(".submenu").not(submenu).hide();
| + | |
− | $(".icon").not(icon).removeClass("less").addClass("plus");
| + | |
− | });
| + | |
− | | + | |
− | | + | |
− | $(".collapsable_menu_control").click(function() {
| + | |
− | $(".menu_item").toggle();
| + | |
− | });
| + | |
− | | + | |
− | $( window ).resize(function() {
| + | |
− | $(".menu_item").show();
| + | |
− | });
| + | |
− | | + | |
− | | + | |
− | });
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | </script>
| + | |
− | </head>
| + | |
− | | + | |
| | | |
| | | |
− | <body> | + | <ul class="devsite-doc-set-nav-tab-list devsite-overflow-tabs-scroll" style="min-width: 0px; left: 0px;"> |
− | <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
| + | |
− | <div class="container-fluid">
| + | |
− | <div class="navbar-header">
| + | |
| | | |
− | <a class="navbar-logo" href="https://2016.igem.org/Team:Imperial_College">
| |
− | <image class="img-responsive" src="https://static.igem.org/mediawiki/2016/2/2a/T--Imperial_College--Logo.png" height="80" width="80">
| |
− | </a>
| |
| | | |
| + | <li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Project" class="devsite-doc-set-nav-active |
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Project"> |
| + | Project |
| + | </a></li><li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Modelling" class=" |
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Modelling"> |
| + | Modelling |
| + | </a></li><li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Software" class=" |
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Software"> |
| + | Software |
| + | </a></li> |
| | | |
− | </div>
| + | <li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Lab" class=" |
− | <div class="navbar-header" style="padding-top: 15px; padding-left: 15px;">
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Lab"> |
− | <a class="navbar-logo" href="https://2016.igem.org/Team:Imperial_College">
| + | Lab |
− | <image class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/1a/T--Imperial_College--Imperial_Logo.png" height="120" width="120">
| + | </a></li> |
− | </a> | + | |
− | </div>
| + | |
| | | |
− | <div id="navbar" class="navbar-collapse collapse">
| + | <li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Human_Practices" class=" |
− | <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Human Practices"> |
− | <li class="dropdown">
| + | Human Practices |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Description">Project <span class="caret"></span></a>
| + | </a></li> |
− | <ul class="dropdown-menu" style="left:0;">
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Description">Description</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Results">Results</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Proof">Proof</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Basic_Part">Basic Parts</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Composite_Part">Composite Parts</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
| | | |
| + | <li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Team" class=" |
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Team"> |
| + | Team |
| + | </a></li> |
| | | |
− | <li class="dropdown">
| + | <li class="devsite-doc-set-nav-tab-container"><a href="https://2017.igem.org/Team:Peking/Award" class=" |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Model">Modelling <span class="caret"></span></a>
| + | devsite-doc-set-nav-tab gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Tab: Award"> |
− | <ul class="dropdown-menu" style="left:0;">
| + | Award |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Model">Overview</a></li>
| + | </a></li> |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/SingleCell">Single Cell Model</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/GRO">Population Model</a></li>
| + | |
| | | |
− | </ul>
| + | </ul></nav></div> |
− | </li>
| + | |
| | | |
| + | <div class="devsite-site-mask"></div> |
| | | |
− | <li>
| + | </div></div></div></div></div></div></nav></body> |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Software">Software Tools </a></li>
| + | |
| | | |
| | | |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Notebook">Notebook <span class="caret"></span></a>
| |
− | <ul class="dropdown-menu" style="left:0;">
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Notebook">Lab book</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Experiments">Protocols</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Medals">Medal Criteria</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/BrainStorm">Brainstorm</a></li>
| |
− | </ul>
| |
− | </li>
| |
| | | |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices <span class="caret"></span></a>
| |
− | <ul class="dropdown-menu">
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Integrated_Practices">Integrated Practices</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Engagement">Public Engagement</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Collaborations">Collaborations</a></li>
| |
| | | |
− | </ul>
| |
− | </li>
| |
| | | |
− | <li class="dropdown">
| |
− | <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Team">Team <span class="caret"></span></a>
| |
− | <ul class="dropdown-menu" style="text-align: right;">
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Team">Team</a></li>
| |
− | <li><a href="https://2016.igem.org/Team:Imperial_College/Attributions">Attributions</a></li>
| |
| | | |
− | </ul>
| |
− | </li>
| |
− | </ul>
| |
− | </div>
| |
− | <!-- /.navbar-collapse -->
| |
− | </div>
| |
− | <!-- /.container-fluid -->
| |
− | </nav>
| |
− | </body>
| |
| | | |
| </html> | | </html> |