|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!-- Declare that you are going to use html code instead of wiki code -->
| |
| − | <html>
| |
| − | <!-- Start of CSS-->
| |
| − | <style type="text/css">
| |
| | | | |
| − | /* WIKI SETTINGS*/
| |
| − |
| |
| − | /* Hide first heading */
| |
| − | .firstHeading {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /*-- Remove borders, float content left and remove padding/margin */
| |
| − | #globalWrapper, #content{
| |
| − | background-color: transparent;
| |
| − | border: 0px;
| |
| − | float: center;
| |
| − | margin:0 auto;
| |
| − | padding: 0px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | /*left align Black Menu Bar */
| |
| − | #top_menu_inside {
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | /* PAGE LAYOUT */
| |
| − |
| |
| − | /* page background color*/
| |
| − | body {
| |
| − | background-color: #77525B;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Creates a container that will wrap all of the content inside your wiki pages. */
| |
| − | #mainContainer {
| |
| − | width: auto;
| |
| − |
| |
| − | margin: 0 auto;
| |
| − | background-color: #683f49;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #main {
| |
| − | background-image:url("https://static.igem.org/mediawiki/2015/2/2d/Huskyigemtrans.png");
| |
| − | background-repeat:no-repeat;
| |
| − | background-position: 20% 6%;
| |
| − | background-size: 707.25px 636.75px;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the menu */
| |
| − | #menuContainer {
| |
| − | width: 100%;
| |
| − | background-color: #EEEDEA;
| |
| − | height: auto;
| |
| − | border-bottom: 6px solid #b48a27;
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Creates the container for the content */
| |
| − | #contentContainer {
| |
| − | margin: 0 auto;
| |
| − | height: auto;
| |
| − | text-align: left;
| |
| − | padding: 10px;
| |
| − | padding-right:24px;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Set up height place holder for the banner*/
| |
| − | #bannerContainer {
| |
| − | height:0;
| |
| − | padding-top:32%;
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/6/69/Igem_front_page_UW.png");
| |
| − | //background-image: url("https://static.igem.org/mediawiki/2015/7/7b/Igem_skyline_seattle.png");
| |
| − | background-image: url("https://static.igem.org/mediawiki/2015/d/d6/Igem_banner.jpg");
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 100%;
| |
| − | width: 100%;
| |
| − | margin:auto;
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | #wrapper{
| |
| − | width: 960px;
| |
| − | margin:0 auto:
| |
| − | text-align:center;
| |
| − | }
| |
| − |
| |
| − | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
| |
| − |
| |
| − |
| |
| − | /*Change the styling of text for everything inside main container*/
| |
| − | #mainContainer p, p2 {
| |
| − | font-family: "Open Sans", Helvetica, sans-serif;
| |
| − | font-size: 12px;
| |
| − | color: #0e232f;
| |
| − | width: 95%;
| |
| − | line-height: 200%;
| |
| − | line-spacing: 10px;
| |
| − | }
| |
| − |
| |
| − | /*This changes the color and font family */
| |
| − | #contentContainer h2, h3, h4, h5, h6 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | text-align: center;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer h1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: bold;
| |
| − | font-size: 25px;
| |
| − | line-height:100%;
| |
| − | padding-top: 1em;
| |
| − | padding-bottom: 1em;
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #contentContainer p {
| |
| − | margin-right: 20%;
| |
| − | margin-left: 20%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − | #contentContainer p1 {
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − | #contentContainer p2 {
| |
| − | margin-right: 30%;
| |
| − | margin-left: 30%;
| |
| − | font-family: "Uni Sans", Helvetica, sans-serif;
| |
| − | color: white;
| |
| − | line-spacing: 5px;
| |
| − | border-bottom: none;
| |
| − | font-weight: normal;
| |
| − | line-height: 200%;
| |
| − | font-size: 15.5px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*Style of the links - links are different inside the menu */
| |
| − | #contentContainer a {
| |
| − | font-family: "Open Sans", sans-serif;
| |
| − | font-weight: bold;
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /* Styling links on hover- links are different inside the menu */
| |
| − | #contentContainer a:hover{
| |
| − | color: #85754d;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of tables */
| |
| − | #contentContainer table {
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | width: 90%
| |
| − | margin: auto;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | margin-right: 10px;
| |
| − | margin-left: 10px;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table cells*/
| |
| − | #contentContainer td {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #EEEDEA;
| |
| − | }
| |
| − |
| |
| − | /*Change the styling of table headers */
| |
| − | #contentContainer th {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #0e232f;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: text-top;
| |
| − | background-color: #e8d5b7;
| |
| − | }
| |
| − |
| |
| − | #links {
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | width: 450px;
| |
| − | height: 450px;
| |
| − | float: inherit;
| |
| − | }
| |
| − |
| |
| − | #links p {
| |
| − | text-align: right;
| |
| − | padding-top: 10px;
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | #links a {
| |
| − | font-size: 24px;
| |
| − | font-weight: bold;
| |
| − | font-family: "Encode Sans Normal";
| |
| − | color: #4b2e83;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | #links a:hover {
| |
| − | font-size: 36px;
| |
| − | }
| |
| − |
| |
| − | img {
| |
| − | float: center;
| |
| − | margin: 0px 0px 15px 20px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*MENU STYLING */
| |
| − |
| |
| − | /*Styling for the links in the menu */
| |
| − | #menuContainer ul a {
| |
| − | color: #4b2e83;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 16px;
| |
| − | }
| |
| − |
| |
| − | /* Sets the style for lists inside menuContainer */
| |
| − | #menuContainer > ul {
| |
| − | list-style: none;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-bottom: 0px;
| |
| − | margin-top: -7px;
| |
| − | padding-left: 0px;
| |
| − | padding-right: 0px;
| |
| − | text-align: center;
| |
| − | z-index: 1;
| |
| − | width: auto;
| |
| − | max-width: 950px;
| |
| − | height: auto;
| |
| − | background: #ffffff;
| |
| − | font-style: bold;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /*Styles the list items to become menu buttons */
| |
| − | #menuContainer ul li {
| |
| − | display: inline-block;
| |
| − | width: 100px;
| |
| − | padding: 21px 5px 20px 5px;
| |
| − | position: relative;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li:hover {
| |
| − | background: #d9d9d9;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*HIde the submenus and removes the padding */
| |
| − | #menuContainer ul li ul {
| |
| − | display: none;
| |
| − | margin-top: 20px;
| |
| − | position: absolute;
| |
| − | margin-left: -5px;
| |
| − | z-index: 1;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − | /*Shows the submenus once you hover*/
| |
| − | #menuContainer ul li:hover ul {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | /*style the submenu buttons*/
| |
| − | #menuContainer ul li ul li {
| |
| − | display: block;
| |
| − | background: #0E232F;
| |
| − | padding: 10px 5px 10px 5px;
| |
| − | }
| |
| − |
| |
| − | #menuContainer ul li ul li:hover {
| |
| − | background: #444444;
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | #menuContainer li ul a {
| |
| − | color: #ffffff;
| |
| − | text-decoration:none;
| |
| − | font-weight: bold;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*CLASSES */
| |
| − | /*Clear class for all the pages, adds spacing too*/
| |
| − | .clear{
| |
| − | clear:both;
| |
| − | height: 10px;
| |
| − | }
| |
| − |
| |
| − | /* highlight box for special messages */
| |
| − | .highlightBox {
| |
| − | width:500px;
| |
| − | margin:auto;
| |
| − | background-color: #E8D5B7;
| |
| − | margin-bottom: 15px;
| |
| − | margin-top: 15px;
| |
| − | padding: 15px;
| |
| − | padding-top: 5px;
| |
| − | }
| |
| − | /* side bar css */
| |
| − | #sidebar {
| |
| − | width:200px;
| |
| − | float:right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* navigation */
| |
| − | nav {
| |
| − | width:300px;
| |
| − | background-color:rgb(240,240,240);
| |
| − | border:solid 1px rgb(220,220,220);
| |
| − | padding:0 12px;
| |
| − | }
| |
| − |
| |
| − | nav.stick {
| |
| − | position: fixed;
| |
| − | top: 12px;
| |
| − | z-index: 10000;
| |
| − | margin-top:12px;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png");
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | nav li a {
| |
| − |
| |
| − | color:rgb(50,50,50);
| |
| − | font-weight:700;
| |
| − | color: #000;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | a.nav-active {
| |
| − | color:#ccc;
| |
| − | }
| |
| − |
| |
| − | ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; margin-right: 20%; margin-left: 20%; }
| |
| − | ul#tabs li { display: inline; }
| |
| − | ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; font-size: 17px; }
| |
| − | ul#tabs li a:hover { background-color: #f1f0ee; }
| |
| − | ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-size: 18px; padding: 0.7em 0.3em 0.38em 0.3em; }
| |
| − | div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #b7a57a; font-size: 16px; line-height:1.5em; margin-right: 20%; margin-left: 20%;}
| |
| − | div.tabContent.hide { display: none; }
| |
| − |
| |
| − | </style>
| |
| − | <!-- End of CSS -->
| |
| − | <head>
| |
| − | <script data-require="jquery-cookie@1.3.1" data-semver="1.3.1" src="https://2015.igem.org/Template:Washington_jquary?action=raw&ctype=text/javascript" type="text/javascript"></script>
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function () {
| |
| − | // Read the cookie and if it's defined scroll to id
| |
| − | var scroll = $.cookie('scroll');
| |
| − | if(scroll){
| |
| − | scrollToID(scroll, 1000);
| |
| − | $.removeCookie('scroll');
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | // Handle event onclick, setting the cookie when the href != #
| |
| − | $('.nav a').click(function (e) {
| |
| − | e.preventDefault();
| |
| − | var id = $(this).data('id');
| |
| − | var href = $(this).attr('href');
| |
| − | if(href === '#'){
| |
| − | scrollToID(id, 1000);
| |
| − | }else{
| |
| − | $.cookie('scroll', id);
| |
| − | window.location.href = href;
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // scrollToID function
| |
| − | function scrollToID(id, speed) {
| |
| − | var offSet = 70;
| |
| − | var obj = $('#' + id).offset();
| |
| − | var targetOffset = obj.top - offSet;
| |
| − | $('html,body').animate({ scrollTop: targetOffset }, speed);
| |
| − | }
| |
| − | $(window).scroll(function(){
| |
| − | var window_top = $(window).scrollTop() + 12; // the "12" should equal the margin-top value for nav.stick
| |
| − | var div_top = $('#nav-anchor').offset().top;
| |
| − | if (window_top > div_top) {
| |
| − | $('nav').addClass('stick');
| |
| − | } else {
| |
| − | $('nav').removeClass('stick');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(e){
| |
| − | var str= location.hash;
| |
| − | var n=str.replace("_temp","");
| |
| − | $('html,body').animate({scrollTop:$(n).offset().top}, 1000);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | /* to make the sidebar anchor*/
| |
| − |
| |
| − |
| |
| − | var tabLinks = new Array();
| |
| − | var contentDivs = new Array();
| |
| − |
| |
| − | function init() {
| |
| − |
| |
| − | // Grab the tab links and content divs from the page
| |
| − | var tabListItems = document.getElementById('tabs').childNodes;
| |
| − | for ( var i = 0; i < tabListItems.length; i++ ) {
| |
| − | if ( tabListItems[i].nodeName == "LI" ) {
| |
| − | var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
| |
| − | var id = getHash( tabLink.getAttribute('href') );
| |
| − | tabLinks[id] = tabLink;
| |
| − | contentDivs[id] = document.getElementById( id );
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Assign onclick events to the tab links, and
| |
| − | // highlight the first tab
| |
| − | var i = 0;
| |
| − |
| |
| − | for ( var id in tabLinks ) {
| |
| − | tabLinks[id].onclick = showTab;
| |
| − | tabLinks[id].onfocus = function() { this.blur() };
| |
| − | if ( i == 0 ) tabLinks[id].className = 'selected';
| |
| − | i++;
| |
| − | }
| |
| − |
| |
| − | // Hide all content divs except the first
| |
| − | var i = 0;
| |
| − |
| |
| − | for ( var id in contentDivs ) {
| |
| − | if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
| |
| − | i++;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function showTab() {
| |
| − | var selectedId = getHash( this.getAttribute('href') );
| |
| − |
| |
| − | // Highlight the selected tab, and dim all others.
| |
| − | // Also show the selected content div, and hide all others.
| |
| − | for ( var id in contentDivs ) {
| |
| − | if ( id == selectedId ) {
| |
| − | tabLinks[id].className = 'selected';
| |
| − | contentDivs[id].className = 'tabContent';
| |
| − | } else {
| |
| − | tabLinks[id].className = '';
| |
| − | contentDivs[id].className = 'tabContent hide';
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Stop the browser following the link
| |
| − | return false;
| |
| − | }
| |
| − |
| |
| − | function getFirstChildWithTagName( element, tagName ) {
| |
| − | for ( var i = 0; i < element.childNodes.length; i++ ) {
| |
| − | if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function getHash( url ) {
| |
| − | var hashPos = url.lastIndexOf ( '#' );
| |
| − | return url.substring( hashPos + 1 );
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − | </head>
| |
| − | <!-- Start of the template html elements. -->
| |
| − | <div id ="mainContainer">
| |
| − | <!--This div will close on the page.-->
| |
| − | <div id="bannerContainer">
| |
| − | <br>
| |
| − | <br>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- Start of menu -->
| |
| − | <!-- End of menu -->
| |
| − | <!-- Start of content -->
| |
| − | </html>
| |