|
|
Line 1: |
Line 1: |
− |
| |
| <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 { | + | |
− | padding: 0px;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | body {
| + | |
− | background-color: white;
| + | |
− | width: 100%;
| + | |
− | } | + | |
− | | + | |
− | #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 {
| + | /* makes navbar in box with shadow */ |
− | margin-top: 50px;
| + | .navbar-fixed-top { |
| + | 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); |
| } | | } |
| | | |
− | #sideMenu {
| + | @font-face { |
− | margin-top: 10px;
| + | font-family: 'banaue'; |
| + | 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; |
| } | | } |
| + | /* 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 54: |
| } | | } |
| | | |
− | | + | .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 {
| |
− | // 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
| |
− | $("#page_name").html ( ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ") );
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | $('#accordion').find('.menu_item').click(function(){
| |
− |
| |
− | //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>
| |
− |
| |
− | </html>
| |
− | {{Peking/include}}
| |
− | <html>
| |
| <body class=" | | <body class=" |
| | | |
Line 449: |
Line 179: |
| | | |
| </div></div></div></div></div></div></nav></body> | | </div></div></div></div></div></div></nav></body> |
− |
| |
| | | |
| | | |