"
Template:Team:Marburg/Template:Header
From 2014.igem.org
(Difference between revisions)
m (Created page with "<html> <style> #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} - →-- hides default wiki settings --: .firstHeading {...") |
m |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> | ||
<style> | <style> | ||
| Line 207: | Line 208: | ||
.annItem ul, .annItem li {padding: 0px; margin: 0px;} | .annItem ul, .annItem li {padding: 0px; margin: 0px;} | ||
.annItem li {list-style: none; margin: 5px} | .annItem li {list-style: none; margin: 5px} | ||
| + | </style> | ||
| + | |||
| + | <script> | ||
| + | $(window).load(function(){ | ||
| + | /* test for @media-query support */ | ||
| + | $('body').append($('<div id="test-media-query">').css({visibility: 'hidden', position: 'absolute'})); | ||
| + | $('head').prepend('<style type="text/css" media="only all" id="test-media-query-style">'); | ||
| + | styleSht = document.styleSheets[0]; | ||
| + | if (styleSht.cssRules || styleSht.rules) { | ||
| + | if (styleSht.insertRule) {styleSht.insertRule('#test-media-query {display:none !important;}', styleSht.cssRules.length); | ||
| + | } else if (styleSht.addRule) {styleSht.addRule('#test-media-query', 'display:none');} | ||
| + | } | ||
| + | mediaQuery = $('#test-media-query').css('display') === 'none'; | ||
| + | $('#test-media-query, #test-media-query-style').remove(); | ||
| + | |||
| + | /* if not supported then use the jQuery routine */ | ||
| + | if (!mediaQuery) { | ||
| + | |||
| + | /* on page entry and page resize check the window width and add/remove stylesheets depending on width */ | ||
| + | $(window).on("resize", function () { | ||
| + | widthDoc = $(window).width(); | ||
| + | |||
| + | if (!$('link[href="responsive-single/size880.css"]').length && widthDoc<=1024) {$("<link>").appendTo($('head')).attr({type:'text/css',rel:'stylesheet',href:'responsive-single/size880.css'});} | ||
| + | if (widthDoc>1024) {$('link[href="responsive-single/size880.css"]').remove();} | ||
| + | |||
| + | }).resize(); | ||
| + | } | ||
| + | |||
| + | }); | ||
| + | <script> | ||
| + | <style> | ||
| + | section {display:block; padding:0; margin:0 auto; max-width:1200px; min-width:320px;} | ||
| + | article {display:block; padding:0; margin:0;} | ||
| + | .menu {display:block; padding:0; margin:0; height:42px; position:relative; | ||
| + | -webkit-user-select: none; | ||
| + | -moz-user-select: none; | ||
| + | -ms-user-select: none; | ||
| + | -o-user-select: none; | ||
| + | user-select: none; | ||
| + | -ms-touch-action: none; | ||
| + | } | ||
| + | .menu img {position:absolute; left:5px; top:14px; z-index:100; display:none;} | ||
| + | .menu ul {padding:0; margin:0; border:1px solid #aaa; background:#fff;} | ||
| + | .menu ul li {display:inline-block; position:relative; background:#fff;} | ||
| + | .menu ul li {*display:inline;} | ||
| + | .menu ul li a {display:block; font:normal 16px/40px 'Roboto Condensed', arial, sans-serif; color:#444; text-decoration:none; padding:0 25px;} | ||
| + | .menu ul li a:hover {color:#a00;} | ||
| + | .menu ul li.current a {color:#c00; z-index:100;} | ||
| + | .menu ul li.current b {display:block; width:100%; height:40px; position:absolute;; top:0; left:0; background:url(trans.gif);} | ||
| + | .menu.center {text-align:center;} | ||
| + | .menu.right {text-align:right;} | ||
| + | |||
| + | p {font: normal 17px/20px 'times new roman', serif; color:#666;} | ||
| + | h1 {font: normal 30px/40px 'times new roman', serif; color:#444;} | ||
| + | h3 {font: normal 20px/30px 'times new roman', serif; color:#666;} | ||
| + | h4 {font: normal 18px/20px 'times new roman', serif; color:#444;} | ||
| + | |||
| + | @media only screen and (max-width:880px) { | ||
| + | .menu {width:200px;} | ||
| + | .menu.center {margin:0 auto; text-align:left;} | ||
| + | .menu.right {margin:0 0 0 auto; text-align:left;} | ||
| + | .menu img {display:block;} | ||
| + | .menu ul li {display:block; margin-bottom:-40px; | ||
| + | -webkit-transition:0.5s; | ||
| + | -moz-transition:0.5s; | ||
| + | -o-transition:0.5s; | ||
| + | transition:0.5s; | ||
| + | } | ||
| + | .menu ul li:last-child {margin-bottom:0;} | ||
| + | .menu ul li.current {display:block; z-index:10;} | ||
| + | .menu:hover ul li {margin-bottom:0;} | ||
| + | } | ||
| + | @media only screen and (max-device-width:1024px) and (orientation:portrait) { | ||
| + | .menu {width:200px;} | ||
| + | .menu.center {margin:0 auto; text-align:left;} | ||
| + | .menu.right {margin:0 0 0 auto; text-align:left;} | ||
| + | .menu img {display:block;} | ||
| + | .menu ul li {display:block; margin-bottom:-40px; | ||
| + | -webkit-transition:0.5s; | ||
| + | -moz-transition:0.5s; | ||
| + | -o-transition:0.5s; | ||
| + | transition:0.5s; | ||
| + | } | ||
| + | .menu ul li:last-child {margin-bottom:0;} | ||
| + | .menu ul li.current {display:block; z-index:10;} | ||
| + | .menu:hover ul li {margin-bottom:0;} | ||
| + | } | ||
| + | @media only screen and (max-device-width:480px) { | ||
| + | .menu {width:200px;} | ||
| + | .menu.center {margin:0 auto; text-align:left;} | ||
| + | .menu.right {margin:0 0 0 auto; text-align:left;} | ||
| + | .menu img {display:block;} | ||
| + | .menu ul li {display:block; margin-bottom:-40px; | ||
| + | -webkit-transition:0.5s; | ||
| + | -moz-transition:0.5s; | ||
| + | -o-transition:0.5s; | ||
| + | transition:0.5s; | ||
| + | } | ||
| + | .menu ul li:last-child {margin-bottom:0;} | ||
| + | .menu ul li.current {display:block; z-index:10;} | ||
| + | .menu:hover ul li {margin-bottom:0;} | ||
| + | } | ||
</style> | </style> | ||
| + | |||
</html> | </html> | ||
Revision as of 14:49, 11 September 2014