Team:Calgary/static/basicpagemobile.css

From 2012.igem.org

(Difference between revisions)
 
(11 intermediate revisions not shown)
Line 89: Line 89:
position: relative;
position: relative;
float: right;
float: right;
-
top: -58px;
+
margin-top: -6.4em;
margin-right: 10px;
margin-right: 10px;
z-index: 2;
z-index: 2;
Line 106: Line 106:
margin-top: 20px;
margin-top: 20px;
font-size: 2.7em;
font-size: 2.7em;
-
line-height: 2.7em;
+
line-height: 1.2em;
}
}
-
+
#pagetitle{
 +
border-bottom: 1px solid #333333;
 +
}
h2{
h2{
position: relative;
position: relative;
-
font-size: 2em;
+
font-size: 2.5em;
}
}
p{
p{
position: relative;
position: relative;
-
font-size: 1.5em;
+
font-size: 2em;
}
}
#css-mobi{
#css-mobi{
Line 124: Line 126:
top: 0px;
top: 0px;
}
}
 +
#groupparts{
 +
float: right;
 +
}
 +
 +
/*Figures*/
 +
.figurebox{
 +
width: 90%
 +
margin: auto;
 +
}
 +
.figureimg, .figureimg img, .figurecaption{
 +
max-width: 100%;
 +
}
 +
.figureimg img{
 +
max-height: 300px;
 +
margin: auto;
 +
}
 +
.figureimg, .figurecaption{
 +
border: 2px solid #888;
 +
}
 +
.figurecaption{
 +
border-top: 0px;
 +
}
 +
.figurecaption p{
 +
padding: 5px;
 +
margin: 0 !important; /*necessary to override main page margins*/
 +
}

Latest revision as of 21:27, 21 August 2012

/*====== Mobile Styling ======*/

/***Global Adjustments***/ div#footer-box, div#footer, div#content, div#f-list, ul#f-list{ width: 95%; } div#top-section{ width: 100%; }

  1. 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; }

  1. 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.*/

  1. headerimage{

display: none; }

/***End Global Adjustments***/

/*Mobile styling*/

  1. nav-wrap{

position: absolute; width: 100%; height: 71px; top: 30px; left: 0px; background-color: #2c2c2c; }

  1. 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; }

  1. menu-icon{

text-indent: -999em; display: block; width: 116px; height: 71px; background: url(UCalgary2012_MobileMenuIconSprite.png); background-position: top; }

#menu-icon.active{ background-position: bottom; }

  1. logo{

position: relative; float: right; margin-top: -6.4em; margin-right: 10px; z-index: 2; } #logo img{ height: 40px; }

  1. bodycontainer{

position: relative; margin-top: 50px; }

h1{ position: relative; margin-top: 20px; font-size: 2.7em; line-height: 1.2em; } #pagetitle{ border-bottom: 1px solid #333333; } h2{ position: relative; font-size: 2.5em; } p{ position: relative; font-size: 2em; }

  1. css-mobi{

display: none; }

  1. css-full{

display: block; top: 0px; }

  1. groupparts{

float: right; }

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

Retrieved from "http://2012.igem.org/Team:Calgary/static/basicpagemobile.css"