Team:Calgary/Sandbox

From 2012.igem.org

(Difference between revisions)
Line 12: Line 12:
<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' />
<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' />
 +
 +
<link rel='stylesheet' type='text/css' media="only screen and (-webkit-min-device-pixel-ratio: 1.5),
 +
only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), 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>
<style>
-
 
-
 
-
/*Smartphone-specific styles*/
 
-
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 
-
only screen and (-o-min-device-pixel-ratio: 3/2), 
 
-
only screen and (min--moz-device-pixel-ratio: 1.5), 
 
-
only screen and (min-device-pixel-ratio: 1.5),
 
-
only screen and (max-device-width: 480px){
 
-
 
-
/***Global Adjustments***/
 
-
div#footer-box, div#footer, div#content, div#f-list, ul#f-list{
 
-
width: 95%;
 
-
}
 
-
div#top-section{
 
-
width: 100%;
 
-
}
 
-
#footer li{
 
-
display: block;
 
-
}
 
-
.left-menu li a, .right-menu a{
 
-
font-size: 1em;
 
-
padding-bottom: 5px;
 
-
padding-top: 10px;
 
-
}
 
-
.right-menu{
 
-
position: relative;
 
-
padding-top: 14px;
 
-
}
 
-
#top-section{
 
-
padding-bottom: 1.3em;
 
-
}
 
-
 
-
/*IMPORTANT: used to stop iPhones from scrolling horizontally due to overflow*/
 
-
body, #globalWrapper, #content, #footer-box{
 
-
overflow-x: hidden;
 
-
}
 
-
/*Hide header image. There has to be a better method.*/
 
-
#headerimage{
 
-
display: none;
 
-
}
 
-
 
-
/***End Global Adjustments***/
 
-
 
-
/*Mobile styling*/
 
-
#nav-wrap{
 
-
position: absolute;
 
-
width: 100%;
 
-
height: 71px;
 
-
top: 30px;
 
-
left: 0px;
 
-
background-color: #2c2c2c;
 
-
}
 
-
 
-
#nav{
 
-
clear: both;
 
-
list-style: none;
 
-
position: absolute;
 
-
left: -19px;
 
-
top: 68px;
 
-
width: 200px;
 
-
background: #6d6d6d;
 
-
display: none; /*add to JQ block*/
 
-
z-index: 1000;
 
-
}
 
-
 
-
#nav div{
 
-
display: none;
 
-
}
 
-
 
-
#nav a{
 
-
display: block;
 
-
text-decoration: none;
 
-
color: white;
 
-
font-family: Arial, Sans-Serif;
 
-
font-size: 2em;
 
-
line-height: 1.5em;
 
-
padding-left: 20px;
 
-
}
 
-
 
-
#menu-icon{
 
-
text-indent: -999em;
 
-
display: block;
 
-
width: 116px;
 
-
height: 71px;
 
-
background: url(https://static.igem.org/mediawiki/2012/b/b3/UCalgary2012_MobileMenuIconSprite.png);
 
-
background-position: top;
 
-
}
 
-
 
-
#menu-icon.active{
 
-
background-position: bottom;
 
-
}
 
-
 
-
#logo{
 
-
position: relative;
 
-
float: right;
 
-
top: -58px;
 
-
margin-right: 10px;
 
-
}
 
-
#logo img{
 
-
height: 40px;
 
-
}
 
-
 
-
#bodycontainer{
 
-
position: relative;
 
-
margin-top: 50px;
 
-
}
 
-
 
-
h1{
 
-
position: relative;
 
-
margin-top: 20px;
 
-
font-size: 2.4em;
 
-
}
 
-
h2{
 
-
position: relative;
 
-
font-size: 2em;
 
-
}
 
-
p{
 
-
position: relative;
 
-
font-size: 1.5em;
 
-
}
 
-
#css-mobi{
 
-
display: none;
 
-
}
 
-
#css-full{
 
-
display: block;
 
-
top: 0px;
 
-
}
 
-
 
-
}
 
@media only screen and (max-device-width: 481px){
@media only screen and (max-device-width: 481px){

Revision as of 21:07, 27 June 2012

Full View Mobile View

Header Stuff!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis eleifend interdum. Pellentesque libero magna, dignissim vitae blandit et, tincidunt nec felis. Proin et risus eget lectus lacinia mollis. Quisque rhoncus posuere lectus, eget vestibulum dolor feugiat bibendum. Vestibulum scelerisque commodo eros, in vulputate arcu tempus varius. Donec ornare malesuada mi vitae rhoncus. Nulla facilisi.

Subheader Stuff!

Viverra nisl a bibendum. Etiam cursus ultrices arcu, pretium sodales tellus euismod id. Pellentesque congue aliquam urna, commodo iaculis massa pellentesque eget. Vivamus et sem non massa tincidunt ultrices. Sed luctus justo nec dui venenatis sodales. Proin sit amet risus nibh. In hac habitasse platea dictumst. Sed pretium egestas augue, sed varius nibh consequat ac. In orci.