Difference between revisions of "Template:Washington"
(117 intermediate revisions by the same user not shown) | |||
Line 30: | Line 30: | ||
/* page background color*/ | /* page background color*/ | ||
body { | body { | ||
− | background-color: # | + | background-color: #77525B; |
text-align: center; | text-align: center; | ||
} | } | ||
Line 43: | Line 43: | ||
border-bottom: 6px solid #b48a27; | border-bottom: 6px solid #b48a27; | ||
font-family: "Open Sans", Helvetica, sans-serif; | 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 */ | /* Creates the container for the menu */ | ||
Line 49: | Line 57: | ||
width: 100%; | width: 100%; | ||
background-color: #EEEDEA; | background-color: #EEEDEA; | ||
− | height: | + | height: auto; |
border-bottom: 6px solid #b48a27; | border-bottom: 6px solid #b48a27; | ||
font-family: "Open Sans", Helvetica, sans-serif; | font-family: "Open Sans", Helvetica, sans-serif; | ||
Line 56: | Line 64: | ||
/* Creates the container for the content */ | /* Creates the container for the content */ | ||
#contentContainer { | #contentContainer { | ||
− | |||
− | |||
− | |||
margin: 0 auto; | margin: 0 auto; | ||
height: auto; | height: auto; | ||
Line 64: | Line 69: | ||
padding: 10px; | padding: 10px; | ||
padding-right:24px; | padding-right:24px; | ||
+ | color: white; | ||
} | } | ||
Line 70: | Line 76: | ||
#bannerContainer { | #bannerContainer { | ||
height:0; | height:0; | ||
− | padding-top: | + | 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/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-repeat: no-repeat; | ||
background-size: 100%; | background-size: 100%; | ||
Line 79: | Line 86: | ||
text-align:center; | text-align:center; | ||
} | } | ||
− | + | ||
− | + | #wrapper{ | |
− | + | width: 960px; | |
− | + | margin:0 auto: | |
− | + | text-align:center; | |
− | + | } | |
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
Line 90: | Line 97: | ||
/*Change the styling of text for everything inside main container*/ | /*Change the styling of text for everything inside main container*/ | ||
− | #mainContainer p { | + | #mainContainer p, p2 { |
font-family: "Open Sans", Helvetica, sans-serif; | font-family: "Open Sans", Helvetica, sans-serif; | ||
font-size: 12px; | font-size: 12px; | ||
color: #0e232f; | color: #0e232f; | ||
width: 95%; | width: 95%; | ||
+ | line-height: 200%; | ||
+ | line-spacing: 10px; | ||
} | } | ||
/*This changes the color and font family */ | /*This changes the color and font family */ | ||
− | #contentContainer | + | #contentContainer h2, h3, h4, h5, h6 { |
font-family: "Uni Sans", Helvetica, sans-serif; | font-family: "Uni Sans", Helvetica, sans-serif; | ||
− | color: # | + | 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: 15%; | ||
+ | margin-left: 15%; | ||
+ | font-family: "Uni Sans", Helvetica, sans-serif; | ||
+ | color: white; | ||
line-spacing: 5px; | line-spacing: 5px; | ||
border-bottom: none; | border-bottom: none; | ||
font-weight: normal; | 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 */ | /*Style of the links - links are different inside the menu */ | ||
#contentContainer a { | #contentContainer a { | ||
− | + | font-family: "Open Sans", sans-serif; | |
font-weight: bold; | font-weight: bold; | ||
color: #85754d; | color: #85754d; | ||
} | } | ||
− | + | /* Styling links on hover- links are different inside the menu */ | |
#contentContainer a:hover{ | #contentContainer a:hover{ | ||
color: #85754d; | color: #85754d; | ||
Line 148: | Line 214: | ||
} | } | ||
− | + | #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; | ||
+ | } | ||
Line 191: | Line 262: | ||
margin-right: auto; | margin-right: auto; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
− | margin-top: - | + | margin-top: -7px; |
padding-left: 0px; | padding-left: 0px; | ||
padding-right: 0px; | padding-right: 0px; | ||
text-align: center; | text-align: center; | ||
z-index: 1; | z-index: 1; | ||
− | width: | + | width: auto; |
− | height: | + | max-width: 950px; |
+ | height: auto; | ||
background: #ffffff; | background: #ffffff; | ||
font-style: bold; | font-style: bold; | ||
Line 272: | Line 344: | ||
/* side bar css */ | /* side bar css */ | ||
#sidebar { | #sidebar { | ||
− | width: | + | width:200px; |
float:right; | float:right; | ||
} | } | ||
Line 287: | Line 359: | ||
nav.stick { | nav.stick { | ||
position: fixed; | position: fixed; | ||
− | top: | + | top: 12px; |
z-index: 10000; | z-index: 10000; | ||
margin-top:12px; | margin-top:12px; | ||
Line 295: | Line 367: | ||
margin:0; | margin:0; | ||
padding:0; | padding:0; | ||
− | list-style- | + | list-style-image:url("https://static.igem.org/mediawiki/2015/e/e9/Replace_pixel_washington.png"); |
} | } | ||
Line 306: | Line 378: | ||
color:rgb(50,50,50); | color:rgb(50,50,50); | ||
font-weight:700; | font-weight:700; | ||
+ | color: #000; | ||
float: left; | float: left; | ||
} | } | ||
Line 313: | Line 386: | ||
} | } | ||
− | + | 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> | </style> | ||
<!-- End of CSS --> | <!-- End of CSS --> | ||
<head> | <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 () { | $(document).ready(function () { | ||
// Read the cookie and if it's defined scroll to id | // Read the cookie and if it's defined scroll to id | ||
Line 327: | Line 405: | ||
scrollToID(scroll, 1000); | scrollToID(scroll, 1000); | ||
$.removeCookie('scroll'); | $.removeCookie('scroll'); | ||
+ | |||
+ | |||
+ | |||
+ | |||
} | } | ||
Line 366: | Line 448: | ||
$('html,body').animate({scrollTop:$(n).offset().top}, 1000); | $('html,body').animate({scrollTop:$(n).offset().top}, 1000); | ||
}); | }); | ||
+ | |||
/* to make the sidebar anchor*/ | /* 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> | </script> | ||
− | </head> | + | </head> |
− | + | <!-- Start of the template html elements. --> | |
− | + | <div id ="mainContainer"> | |
− | + | <!--This div will close on the page.--> | |
− | + | <div id="bannerContainer"> | |
+ | <br> | ||
<br> | <br> | ||
− | + | </div> | |
− | + | </div> | |
− | </div> | + | <!-- Start of menu --> |
− | + | <!-- End of menu --> | |
− | + | <!-- Start of content --> | |
− | + | </html> | |
− | + | ||
− | + | ||
− | + |
Latest revision as of 22:39, 18 September 2015