Template:Team:Calgary/BasicPage

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
/*======
-
<!--
+
Desktop Styling
-
Currently unable to implement the CSS switching due to the stupidity of the wiki. Will work on other things instead.
+
======*/
-
New header structure
+
/***Nav styling***/
-
-->
+
-
<head>
+
-
<!--
+
-
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+
-
-->
+
-
<meta name="HandheldFriendly" content="True" />
+
-
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+
 +
header{
 +
position: relative;
 +
top: -45px;
 +
}
-
<!--CSS styles: global-->
+
#nav-wrap{
-
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
+
height: 0px;
 +
margin-top: -45px;
 +
}
-
<!--Start with mobile first; change to desktop with JS-->
+
#nav, #nav ul{
-
<!--
+
list-style: none;
-
<link rel='stylesheet' type='text/css' id="pagestyle" href="https://2012.igem.org/Team:Calgary/static/basicpagemobile.css?action=raw&ctype=text/css" />
+
margin: 0;
-
-->
+
padding: 0;
-
 
+
width: 965px;
-
<!--desktop-->
+
height: 100%;
-
<link rel='stylesheet' type='text/css' media="only screen and (min-device-width:481px)" href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&ctype=text/css' />
+
display: table;
-
 
+
-
<!--mobile-->
+
-
<!--
+
}
-
<link rel='stylesheet' title="mobile sheet" type='text/css'
+
-
media="only screen and (-webkit-min-device-pixel-ratio: 1.5),
+
/*To be moved to JQ block*/
-
only screen and (-o-min-device-pixel-ratio: 3/2),
+
#menu-icon{
-
only screen and (min--moz-device-pixel-ratio: 1.5),
+
display: none;
-
only screen and (min-device-pixel-ratio: 1.5),
+
}
-
only screen and (max-device-width: 480px)"
+
-
href='https://2012.igem.org/Team:Calgary/static/basicpagemobile.css?action=raw&ctype=text/css' />
+
-
-->
+
-
<style>
+
/*menu*/
-
 
+
#nav li{
-
@media only screen and (max-device-width: 481px){
+
height: auto;
-
/*specific iPhone/iPod touch text*/
+
padding: 0;
-
h1{
+
list-style: none;
-
position: relative;
+
float: left;
-
margin-top: 20px;
+
width: auto;
-
font-size: 2.1em;
+
margin: 0;
 +
background: #333333;
 +
position: relative;
 +
}
 +
#nav > li a{
 +
padding: 0 15px;
}
}
-
h2{
+
#nav > li{
-
position: relative;
+
background: transparent;
-
font-size: 1.8em;
+
}
}
-
p{
+
-
position: relative;
+
/*submenu*/
-
font-size: 1.2em;
+
#nav li ul {
-
}
+
position: absolute;
 +
width: 200px;
 +
display: none;
}
}
 +
#nav li:hover ul {
 +
display: block;
 +
}
 +
/*sub-submenu*/
 +
#nav li ul ul{
 +
margin-left: 230px;
 +
margin-top: -15px;
 +
}
 +
#nav li:hover ul ul{
 +
display: none;
 +
}
 +
#nav li:hover ul, #nav li li:hover ul{
 +
display: block;
 +
}
 +
#nav a{
 +
display: block;
 +
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 +
color: white;
 +
}
 +
#nav li a{
 +
line-height: 1.4em; /*centers the text vertically*/
 +
font-size: 2em;
 +
}
 +
#nav ul li > a{
 +
width: 200px;
 +
}
 +
/*color change after rollover*/
 +
#nav li a:hover, #nav li li a.drop:hover::after{
 +
display: block;
 +
text-decoration: none;
 +
color: #43bbff;
 +
}
 +
#nav li ul li ul{
 +
margin-top: -35px;
 +
position: absolute;
 +
}
 +
/*submenu and sub-submenu*/
 +
#nav li ul li ul li a, #nav li ul li a{
 +
font-size: 1.8em;
 +
}
 +
#nav li li a.drop:after{
 +
content: '>';
 +
padding-left: 20px;
 +
color: #BBB;
 +
display: inline;
 +
float: right;
 +
}
-
</style>
+
/***End nav styling***/
-
<!--Mobile nav from http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial-->
+
/***Headerimage***/
-
<script type="text/javascript">
+
#headerimage{
-
/*from annakata on StackOverflow: http://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript*/
+
width: 968px;
-
/*unusable
+
position: relative;
-
function insertParam(key, value)
+
margin-left: 0px;
-
{
+
margin-bottom: 10px;
-
    key = escape(key); value = escape(value);
+
top: 0px;
-
 
+
}
-
    var kvp = document.location.search.substr(1).split('&');
+
#css-full{
 +
display: none;
 +
}
 +
#css-mobi{
 +
display: block;
 +
top: 0px;
 +
}
-
    var i=kvp.length; var x; while(i--)
+
/***Logo styling***/
-
    {
+
#logo{
-
        x = kvp[i].split('=');
+
position: relative;
-
 
+
top: -145px;
-
        if (x[0]==key)
+
right: 20px;
-
        {
+
float: right;
-
                x[1] = value;
+
-
                kvp[i] = x.join('=');
+
-
                break;
+
-
        }
+
-
    }
+
-
 
+
-
    if(i<0) {kvp[kvp.length] = [key,value].join('=');}
+
-
 
+
-
    //this will reload the page, it's likely better to store this until finished
+
-
    document.location.search = kvp.join('&');  
+
}
}
-
*/
 
-
jQuery(document).ready(function($){
+
#logo img{
-
 
+
width: 260px;
-
//eliminate jsnotice
+
-
$('#jsnotice').hide();
+
-
 
+
-
//prepend menu icon
+
-
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
+
-
+
-
//toggle nav
+
-
$("#menu-icon").click(function(){
+
-
$("#nav").slideToggle('fast');
+
-
$(this).toggleClass("active");
+
-
 
+
-
});
+
-
+
-
//hide url bar
+
-
window.scrollTo(0, 1);
+
-
+
-
/*Set stylesheet properly*/
+
-
/*Current unusable
+
-
if($(window).width() > 0){
+
-
$("#pagestyle").attr("href", 'https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw');
+
-
$("#pagestyle").href += (/\?/.test(this.href) ? '&' : '?') + 'ctype=text/css';
+
}
}
-
$('#css-full').click(function(){
+
/***Body styling***/
-
+
h1{
-
});
+
font-size: 2.3em;
-
*/
+
}
 +
h2{
 +
font-size: 1.8em;
 +
}
 +
#bodycontainer p{
 +
font-size: 1.1em;
 +
}
 +
#pagetitle{
 +
border-bottom: 2px solid black;
 +
padding-bottom: 10px;
 +
padding-left: 10px;
 +
}
 +
#bodycontainer{
 +
position: relative;
 +
top: 0;
 +
}
 +
#bodycontainer h2, #bodycontainer p{
 +
margin-left: 10px;
 +
margin-right: 10px;
 +
}
-
});
 
-
</script>
+
/*Figure captions*/
-
<!--switching function: thanks to http://www.digital-web.com/articles/strategies_for_css_switching/-->
+
.figurebox{
 +
max-width: 40%;
 +
float: right;
 +
}
 +
.figureimg, .figureimg img, .figurecaption{
 +
width: 100%;
 +
}
 +
.figureimg, .figurecaption{
 +
border: 2px solid #888;
 +
}
 +
.figurecaption{
 +
border-top: 0px;
 +
}
 +
.figurecaption p{
 +
padding: 5px;
 +
margin: 0 !important; /*necessary to override main page margins*/
 +
}
-
</head>
 
-
<body>
+
/* thumbnails */
-
 
+
div.thumb {
-
<header>
+
    margin-bottom: .5em;
-
<!--
+
    border-style: solid;
-
<a id="css-full" href="#default">Full View</a>
+
    border-color: transparent;
-
<a id="css-mobi" href="#mobile">Mobile View</a>
+
    width: auto;
-
-->
+
}
-
<div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/7/7c/UCalgary2012_HeaderImage_V7.2.png"></img></div>
+
div.thumb div {
-
<a id="logo" href="https://2012.igem.org/Team:Calgary"><img src="https://static.igem.org/mediawiki/2012/4/48/UCalgary2012_White_Low-Res_Official_Logo.png"></img></a>
+
    border: 1px solid #ccc;
-
<div id="nav-wrap">
+
    padding: 3px !important;
-
<ul id="nav">
+
    font-size: 94%;
-
<li><a href="https://2012.igem.org/Team:Calgary">Home</a></li>
+
    text-align: center;
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Team">Team</a>
+
    overflow: hidden;
-
<ul>
+
}
-
<li>
+
div.thumb div a img {
-
<a class="drop" href="#">Members</a>
+
    border: 1px solid #ccc;
-
<ul>
+
}
-
<li><a href="#">Undergraduates</a></li>
+
div.thumb div div.thumbcaption {
-
<li><a href="#">Advisors</a></li>
+
    border: none;
-
<li><a href="#">Supervisors</a></li>
+
    text-align: left;
-
</ul>
+
    line-height: 1.4em;
-
</li>
+
    padding: .3em 0 .1em 0;
-
<li><a class="dropheader" href="http://ung.igem.org/Team.cgi?id=902">Official Profile</a></li>
+
}
-
<li><a class="dropheader" href="#">The University</a></li>
+
div.magnify {
-
</ul>
+
    float: right;
-
</li>
+
    border: none !important;
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Project">Project</a>
+
    background: none !important;
-
<ul>
+
}
-
<li>
+
div.magnify a, div.magnify img {
-
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project">Overview</a>
+
    display: block;
-
<ul>
+
    border: none !important;
-
<li><a href="#">Data Page</a></li>
+
    background: none !important;
-
</ul>
+
}
-
</li>
+
div.tright {
-
<li>
+
    clear: right;
-
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/FRED">FRED</a>
+
    float: right;
-
<ul>
+
    border-width: .5em 0 .8em 1.4em;
-
<li><a href="#">Sensing NAs</a></li>
+
}
-
<li><a href="#">Electroreporting</a></li>
+
div.tleft {
-
<li><a href="#">Modelling</a></li>
+
    float: left;
-
<li><a href="#">Device Prototype</a></li>
+
    margin-right: .5em;
-
</ul>
+
    border-width: .5em 1.4em .8em 0;
-
</li>
+
}
-
<li>
+
-
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/OSCAR">OSCAR</a>
+
-
<ul>
+
-
<li><a href="#">Decarboxylation</a></li>
+
-
<li><a href="#">Desulfurization</a></li>
+
-
<li><a href="#">Denitrification</a></li>
+
-
<li><a href="#">Decatecholization</a></li>
+
-
<li><a href="#">Bioreactor Design</a></li>
+
-
<li><a href="#">Flux Analysis</a></li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/Killswitch">Killswitch</a>
+
-
<ul>
+
-
<li><a href="#">Death Genes</a></li>
+
-
<li><a href="#">Regulation</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2012.igem.org/Team:Calgary/Project/FutureDirections">Future Directions</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2012.igem.org/Team:Calgary/Parts">Parts</a></li>
+
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Notebook">Notebook</a>
+
-
<ul>
+
-
<li><a href="#">Journal</a></li>
+
-
<li><a href="#">Protocols</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Outreach">Outreach</a>
+
-
<ul>
+
-
<li><a class="drop" href="#">Killswitch Design</a>
+
-
<ul>
+
-
<li><a href="#">Collaboration</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a class="drop" href="#">Engineering</a>
+
-
<ul>
+
-
<li><a href="#">Biosensor</a></li>
+
-
<li><a href="#">Bioreactor</a></li>
+
-
</ul>
+
-
</li>
+
-
<li>
+
-
<a class="drop" href="#">Community</a>
+
-
<ul>
+
-
<li><a href="#">Spark Science</a></li>
+
-
<li><a href="#">Minds in Motion</a></li>
+
-
<li><a href="#">TEDxCalgary</a></li>
+
-
<li><a href="#">Follow Us!</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2012.igem.org/Team:Calgary/Safety">Safety</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="https://2012.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
+
-
<li><a href="https://2012.igem.org" target="_blank">iGEM</a></li>
+
-
</ul>
+
-
 
+
-
</div>
+
-
</header>
+
-
 
+
-
<div id="bodycontainer">
+
-
<div id="jsnotice">
+
-
<p>Hello! iGEM Calgary's wiki functions best with Javascript enabled, especially for mobile devices. We recommend that you enable Javascript on your device for the best wiki-viewing experience. Thanks!</p>
+
-
</div>
+
-
<h1 id="pagetitle"></html>{{{TITLE|Page Title}}}<html></h1>
+
-
</html>
+
-
{{{CONTENT|<html><p>Hello! We are sorry to say that this page has yet to be created. Please check back shortly to see any new updates that we may have.</p>
+
-
+
-
<h2>Under Construction!</h2>
+
-
<p>Currently this wiki is under construction. We hope to bring the entire site running up to full speed as soon as we can. For the time being, there will be broken links and navigation issues until we iron out the kinks. We apologize for any inconvenience.</p></html>}}}
+
-
<html>
+
-
</div>
+
-
</body>
+
-
</html>
+

Revision as of 21:11, 5 September 2012

/*====== Desktop Styling ======*/

/***Nav styling***/

header{ position: relative; top: -45px; }

  1. nav-wrap{

height: 0px; margin-top: -45px; }

  1. nav, #nav ul{

list-style: none; margin: 0; padding: 0; width: 965px; height: 100%; display: table;


}

/*To be moved to JQ block*/

  1. menu-icon{

display: none; }

/*menu*/

  1. nav li{

height: auto; padding: 0; list-style: none; float: left; width: auto; margin: 0; background: #333333; position: relative; } #nav > li a{ padding: 0 15px; } #nav > li{ background: transparent; }

/*submenu*/

  1. nav li ul {

position: absolute; width: 200px; display: none; } #nav li:hover ul { display: block; } /*sub-submenu*/

  1. nav li ul ul{

margin-left: 230px; margin-top: -15px; } #nav li:hover ul ul{ display: none; }

  1. nav li:hover ul, #nav li li:hover ul{

display: block; }

  1. nav a{

display: block; font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; color: white; } #nav li a{ line-height: 1.4em; /*centers the text vertically*/ font-size: 2em; } #nav ul li > a{ width: 200px; } /*color change after rollover*/ #nav li a:hover, #nav li li a.drop:hover::after{ display: block; text-decoration: none; color: #43bbff; }

  1. nav li ul li ul{

margin-top: -35px; position: absolute; } /*submenu and sub-submenu*/ #nav li ul li ul li a, #nav li ul li a{ font-size: 1.8em; }

  1. nav li li a.drop:after{

content: '>'; padding-left: 20px; color: #BBB; display: inline; float: right; }

/***End nav styling***/

/***Headerimage***/

  1. headerimage{

width: 968px; position: relative; margin-left: 0px; margin-bottom: 10px; top: 0px; }

  1. css-full{

display: none; }

  1. css-mobi{

display: block; top: 0px; }

/***Logo styling***/

  1. logo{

position: relative; top: -145px; right: 20px; float: right; }

#logo img{ width: 260px; }

/***Body styling***/ h1{ font-size: 2.3em; } h2{ font-size: 1.8em; }

  1. bodycontainer p{

font-size: 1.1em; }

  1. pagetitle{

border-bottom: 2px solid black; padding-bottom: 10px; padding-left: 10px; }

  1. bodycontainer{

position: relative; top: 0; }

  1. bodycontainer h2, #bodycontainer p{

margin-left: 10px; margin-right: 10px; }


/*Figure captions*/

.figurebox{ max-width: 40%; float: right; } .figureimg, .figureimg img, .figurecaption{ width: 100%; } .figureimg, .figurecaption{ border: 2px solid #888; } .figurecaption{ border-top: 0px; } .figurecaption p{ padding: 5px; margin: 0 !important; /*necessary to override main page margins*/ }


/* thumbnails */ div.thumb { 

   margin-bottom: .5em;
   border-style: solid;
   border-color: transparent;
   width: auto;

} div.thumb div { 

   border: 1px solid #ccc;
   padding: 3px !important;
   font-size: 94%;
   text-align: center;
   overflow: hidden;

} div.thumb div a img { 

   border: 1px solid #ccc;

} div.thumb div div.thumbcaption { 

   border: none;
   text-align: left;
   line-height: 1.4em;
   padding: .3em 0 .1em 0;

} div.magnify { 

   float: right;
   border: none !important;
   background: none !important;

} div.magnify a, div.magnify img { 

   display: block;
   border: none !important;
   background: none !important;

} div.tright { 

   clear: right;
   float: right;
   border-width: .5em 0 .8em 1.4em;

} div.tleft { 

   float: left;
   margin-right: .5em;
   border-width: .5em 1.4em .8em 0;

}

Retrieved from "http://2012.igem.org/Template:Team:Calgary/BasicPage"