|
|
| (6 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | + | |
| | + | <style type="text/css"> |
| | + | body { |
| | + | background: url(https://static.igem.org/mediawiki/2017/c/c0/T--Shanghaitech--background4.png); |
| | + | } |
| | + | #content{background:none;} |
| | + | :target{margin-top:-150px;padding-top:150px;} |
| | + | </style> |
| | | | |
| − | <script>
| |
| − |
| |
| − | // This is the jquery part of your template.
| |
| − | // Try not modify any of this code too much since it makes your menu work.
| |
| − |
| |
| − | $(document).ready(function() {
| |
| − |
| |
| − | $("#HQ_page").attr('id','');
| |
| − |
| |
| − | // call the functions that control the menu
| |
| − | menu_functionality();
| |
| − | hide_show_menu();
| |
| − |
| |
| − |
| |
| − |
| |
| − | //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
| |
| − | function menu_functionality() {
| |
| − |
| |
| − | //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
| |
| − | $(".menu_button").click(function(){
| |
| − |
| |
| − | // add or remove the class "open" , this class holds the "-"
| |
| − | $(this).children().toggleClass("open");
| |
| − | // show or hide the submenu
| |
| − | $(this).next('.submenu_wrapper').fadeToggle(400);
| |
| − | });
| |
| − |
| |
| − | // 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
| |
| − | highlight_current_page();
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // call the highlight current page function to show it on the menu with a different background color
| |
| − | function highlight_current_page() {
| |
| − |
| |
| − | // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
| |
| − | $("#"+ wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
| |
| − |
| |
| − | // now that the current_page class has been added to a menu item, make the submenu fade in
| |
| − | $(".current_page").parents(".submenu_wrapper").fadeIn(400);
| |
| − | // change the +/- symbol of the corresponding menu button
| |
| − | $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | // allow button on the black menu bar to show/hide the side menu
| |
| − | function hide_show_menu() {
| |
| − |
| |
| − | // in case you preview mode is selected, the menu is hidden for better visibility
| |
| − | if (window.location.href.indexOf("submit") >= 0) {
| |
| − | $(".igem_2017_menu_wrapper").hide();
| |
| − | }
| |
| − |
| |
| − | // if the black menu bar has been loaded
| |
| − | if (document.getElementById('bars_item')) {
| |
| − |
| |
| − | // when the "bars_item" has been clicked
| |
| − | $("#bars_item").click(function() {
| |
| − | $("#sideMenu").hide();
| |
| − |
| |
| − | // show/hide the menu wrapper
| |
| − | $(".igem_2017_menu_wrapper").fadeToggle("100");
| |
| − | });
| |
| − | }
| |
| − |
| |
| − | // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
| |
| − | else {
| |
| − | setTimeout(hide_show_menu, 15);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | });
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <style type="text/css">/* Magnific Popup CSS
| |
| − | ====================================*/
| |
| − | .mfp-bg {
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | z-index:999999999;
| |
| − | overflow: hidden;
| |
| − | position: fixed;
| |
| − | background: #000;
| |
| − | opacity: 0.8;
| |
| − | filter: alpha(opacity=80);
| |
| − | }
| |
| − |
| |
| − | .mfp-wrap {
| |
| − | top: -10px;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | z-index:999999999;
| |
| − | position: fixed;
| |
| − | outline: none !important;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .mfp-container {
| |
| − | height: 100%;
| |
| − | text-align: center;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | left: 0;
| |
| − | top: 0;
| |
| − | padding: 0 18px;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | .mfp-container:before {
| |
| − | content: '';
| |
| − | display: inline-block;
| |
| − | height: 100%;
| |
| − | vertical-align: middle;
| |
| − | }
| |
| − |
| |
| − | .mfp-align-top .mfp-container:before {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .mfp-content {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | vertical-align: middle;
| |
| − | margin: 0 auto;
| |
| − | text-align: left;
| |
| − | z-index: 505;
| |
| − | }
| |
| − |
| |
| − | .mfp-inline-touchinger .mfp-content,
| |
| − | .mfp-ajax-touchinger .mfp-content {
| |
| − | width: 100%;
| |
| − | cursor: auto;
| |
| − | }
| |
| − |
| |
| − | .mfp-ajax-cur {
| |
| − | cursor: progress;
| |
| − | }
| |
| − |
| |
| − | .mfp-zoom-out-cur,
| |
| − | .mfp-zoom-out-cur .mfp-figure .mfp-close {
| |
| − | cursor: -moz-zoom-out;
| |
| − | cursor: -webkit-zoom-out;
| |
| − | cursor: zoom-out;
| |
| − | }
| |
| − |
| |
| − | .mfp-zoom {
| |
| − | cursor: pointer;
| |
| − | cursor: -webkit-zoom-in;
| |
| − | cursor: -moz-zoom-in;
| |
| − | cursor: zoom-in;
| |
| − | }
| |
| − |
| |
| − | .mfp-auto-cursor .mfp-content {
| |
| − | cursor: auto;
| |
| − | }
| |
| − |
| |
| − | .mfp-close,
| |
| − | .mfp-arrow,
| |
| − | .mfp-preloader,
| |
| − | .mfp-counter {
| |
| − | -webkit-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − |
| |
| − | .mfp-loading.mfp-figure {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .mfp-hide {
| |
| − | display: none !important;
| |
| − | }
| |
| − |
| |
| − | .mfp-preloader {
| |
| − | color: #aaa;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | width: auto;
| |
| − | text-align: center;
| |
| − | margin-top: -0.8em;
| |
| − | left: 8px;
| |
| − | right: 8px;
| |
| − | z-index: 504;
| |
| − | }
| |
| − |
| |
| − | .mfp-preloader a {
| |
| − | color: #cccccc;
| |
| − | }
| |
| − |
| |
| − | .mfp-preloader a:hover {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .mfp-s-ready .mfp-preloader {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .mfp-s-error .mfp-content {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .mfp-s-loading .mfp-arrow {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | button.mfp-close,
| |
| − | button.mfp-arrow {
| |
| − | overflow: visible;
| |
| − | cursor: pointer;
| |
| − | background: transparent;
| |
| − | border: 0;
| |
| − | -webkit-appearance: none;
| |
| − | display: block;
| |
| − | padding: 0;
| |
| − | z-index: 506;
| |
| − | }
| |
| − |
| |
| − | button::-moz-focus-inner {
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | }
| |
| − |
| |
| − | .mfp-close {
| |
| − | width: 44px;
| |
| − | height: 44px;
| |
| − | line-height: 44px;
| |
| − | position: absolute;
| |
| − | right: 0;
| |
| − | top: 0;
| |
| − | text-decoration: none;
| |
| − | opacity: 1;
| |
| − | padding: 0 0 18px 10px;
| |
| − | text-indent: 99999;
| |
| − | }
| |
| − |
| |
| − | .mfp-figure .mfp-close, .mfp-iframe-touchinger .mfp-close {
| |
| − | right: -13px;
| |
| − | top: 20px;
| |
| − | padding-right: 6px;
| |
| − | width: 100%;
| |
| − | background-image: url(https://igemshare.github.io/images/mfp-close.png);
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: 100% 50%;
| |
| − | text-indent: 9999;
| |
| − | }
| |
| − |
| |
| − | .mfp-counter {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | color: #aaa;
| |
| − | font-size: 13px;
| |
| − | line-height: 18px;
| |
| − | }
| |
| − |
| |
| − | .mfp-arrow {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | opacity: 0;
| |
| − | margin: 0;
| |
| − | top: 50%;
| |
| − | margin-top: -55px;
| |
| − | padding: 0;
| |
| − | width: 90px;
| |
| − | height: 110px;
| |
| − | -webkit-transition: all 0.15s ease-in-out;
| |
| − | -moz-transition: all 0.15s ease-in-out;
| |
| − | -o-transition: all 0.15s ease-in-out;
| |
| − | -ms-transition: all 0.15s ease-in-out;
| |
| − | transition: all 0.15s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .mfp-arrow .mfp-b,
| |
| − | .mfp-arrow .mfp-a {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | top: 0;
| |
| − | margin-top: 35px;
| |
| − | margin-left: 35px;
| |
| − | border: solid transparent;
| |
| − | }
| |
| − |
| |
| − | .mfp-arrow.mfp-arrow-left {
| |
| − | background-image: url(https://igemshare.github.io/images/mfp-left.png);
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: 50%;
| |
| − | }
| |
| − |
| |
| − | .mfp-arrow.mfp-arrow-right {
| |
| − | background-image: url(https://igemshare.github.io/images/mfp-right.png);
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: 50%;
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | .mfp-content:hover .mfp-arrow {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | .mfp-iframe-touchinger {
| |
| − | padding-top: 40px;
| |
| − | padding-bottom: 40px;
| |
| − | }
| |
| − |
| |
| − | .mfp-iframe-touchinger .mfp-content {
| |
| − | line-height: 0;
| |
| − | width: 100%;
| |
| − | max-width: 900px;
| |
| − | }
| |
| − |
| |
| − | .mfp-iframe-scaler {
| |
| − | width: 100%;
| |
| − | height: 0;
| |
| − | overflow: hidden;
| |
| − | padding-top: 56.25%;
| |
| − | }
| |
| − |
| |
| − | .mfp-iframe-scaler iframe {
| |
| − | position: absolute;
| |
| − | display: block;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
| |
| − | background: black;
| |
| − | }
| |
| − |
| |
| − | .mfp-iframe-touchinger .mfp-close {
| |
| − | top: -40px;
| |
| − | }
| |
| − |
| |
| − | /* Main image in popup */
| |
| − | img.mfp-img {
| |
| − | width: auto;
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | display: block;
| |
| − | line-height: 0;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | padding: 40px 0 40px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /* The shadow behind the image */
| |
| − | .mfp-figure:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | top: 40px;
| |
| − | bottom: 40px;
| |
| − | display: block;
| |
| − | right: 0;
| |
| − | width: auto;
| |
| − | height: auto;
| |
| − | z-index: -1;
| |
| − | box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
| |
| − | }
| |
| − |
| |
| − | .mfp-figure {
| |
| − | line-height: 0;
| |
| − | }
| |
| − |
| |
| − | .mfp-bottom-bar {
| |
| − | margin-top: -30px;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | cursor: auto;
| |
| − | }
| |
| − |
| |
| − | .mfp-title {
| |
| − | text-align: left;
| |
| − | line-height: 18px;
| |
| − | color: #f3f3f3;
| |
| − | word-break: break-word;
| |
| − | padding-right: 36px;
| |
| − | }
| |
| − |
| |
| − | .mfp-figure small {
| |
| − | color: #bdbdbd;
| |
| − | display: block;
| |
| − | font-size: 12px;
| |
| − | line-height: 14px;
| |
| − | }
| |
| − |
| |
| − | .mfp-figure .mfp-content {
| |
| − | max-width: 100%;
| |
| − | }
| |
| − |
| |
| − | .mfp-gallery .mfp-figure .mfp-figure {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | </style>
| |
| | | | |
| | | | |
| Line 437: |
Line 26: |
| | #sideMenu, #top_title, .patrollink {display:none;} | | #sideMenu, #top_title, .patrollink {display:none;} |
| | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} |
| − | body {background-color:white; } | + | |
| | #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; } |
| | | | |
