From 2014.igem.org
(Difference between revisions)
|
|
| Line 1: |
Line 1: |
| - |
| |
| | | | |
| | /*-----------------------------------------------------------------------------------*/ | | /*-----------------------------------------------------------------------------------*/ |
| Line 78: |
Line 77: |
| | MEDIA QUERIES | | MEDIA QUERIES |
| | --------------------------------------------------------*/ | | --------------------------------------------------------*/ |
| - | @media only screen and (min-width: 1200px){
| |
| - | h1 { font-size: 4.5em; }
| |
| - | .services_buttons { text-align: right; }
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .menu ul li a.current {
| |
| - | height: 85px;
| |
| - | }
| |
| - | #about .col-md-7 { padding-left: 50px; }
| |
| - | #about .col-md-8 { padding-left: 20px; }
| |
| - | #team .col-md-7 { padding-right: 50px; }
| |
| - | #skills .col-md-7 { padding-right: 90px; }
| |
| - | #portfolio .col-md-7 { padding-left: 46px; }
| |
| - | #contact .col-md-7 { padding-left: 50px; }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (min-width: 992px) and (max-width: 1199px) {
| |
| - | h1 { font-size: 3.5em; }
| |
| - | .services_buttons { text-align: right; }
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .menu ul li a.current {
| |
| - | height: 85px;
| |
| - | }
| |
| - | #about .col-md-7 { padding-left: 30px; }
| |
| - | #about .col-md-8 { padding-left: 20px; }
| |
| - | #team .col-md-7 { padding-right: 30px; }
| |
| - | #skills .col-md-7 { padding-right: 30px; }
| |
| - | #portfolio .col-md-7 { padding-left: 30px; }
| |
| - | #contact .col-md-7 { padding-left: 30px; }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (min-width: 768px) and (max-width: 991px) {
| |
| - | h1 { font-size: 2.5em; }
| |
| - | nav { font-size: 1em; }
| |
| - | .btn-primary { font-size: 1.6em; }
| |
| - | .services_buttons { text-align: left; }
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .menu ul li a.current {
| |
| - | height: 85px;
| |
| - | }
| |
| - | #about .col-md-8 { padding-left: 0; padding-bottom: 20px; }
| |
| - | #about img { padding: 0; margin-top: 20px; margin-bottom: 20px; }
| |
| - | #services .col-md-2, #services_content { padding-left: 0; padding-top: 20px; height: 300px; }
| |
| - | #portfolio p { padding: 7.3% 4%; }
| |
| - | #portfolio .col-md-7, #blog .col-md-7, #contact .col-md-7 { padding-left: 0; padding-top: 20px; }
| |
| - | #blog .col-md-7 { padding-right: 0; }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 767px) and (min-width: 481px) {
| |
| - | h1 { font-size: 2.5em; }
| |
| - | nav .fa { display: inline; text-align: left; margin-bottom: 0; margin-right: 10px; }
| |
| - | .navbar-default .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; }
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
| |
| - | height: 100%;
| |
| - | }
| |
| - | .btn-primary { font-size: 1.5em; }
| |
| - | .services_buttons { text-align: left; }
| |
| - | .services_buttons .icon-button { font-size: 210%; }
| |
| - | .blog_post img { max-width: 100%; }
| |
| - | #about .col-md-8 { padding-left: 0; padding-bottom: 20px; }
| |
| - | #about img { padding: 0; margin-top: 20px; margin-bottom: 20px; }
| |
| - | #team_content { width: 100%; }
| |
| - | #services .col-md-2, #services_content { padding-left: 0; padding-top: 20px; height: 300px; }
| |
| - | #services_tabs { padding-left: 10px; }
| |
| - | #portfolio .col-md-7, #blog .col-md-7, #contact .col-md-7 { padding-top: 20px; padding-left: 0; }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 480px) {
| |
| - | section h1 { font-size: 1.6em; line-height: 50px; }
| |
| - | nav .fa { display: inline; text-align: left; margin-bottom: 0; margin-right: 10px; }
| |
| - | .col-xxs { display:block; float:none; width: 100% }
| |
| - | .social_buttons { margin-top: 30px; }
| |
| - | .pull-right { float: left !important; } /*do not pull-right in mobile view*/
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
| |
| - | height: 100%;
| |
| - | }
| |
| - | .navbar-default .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; }
| |
| - | .btn-primary { font-size: 1.2em; }
| |
| - | .services_buttons { text-align: left; }
| |
| - | .services_buttons .icon-button { font-size: 190%; }
| |
| - | .blog_post { width: 50%;}
| |
| - | .blog_post img { max-width: 100%; }
| |
| - | #about .col-md-8 { padding-left: 0; padding-bottom: 20px; }
| |
| - | #about img { padding: 0; margin-top: 20px; margin-bottom: 20px; }
| |
| - | #team_content { width: 100%; }
| |
| - | #services .col-md-2, #services_content { padding-left: 0; padding-top: 20px; height: 300px; }
| |
| - | #services_tabs { padding-left: 0; }
| |
| - | #portfolio .col-md-7, #blog .col-md-7, #contact .col-md-7 { padding-top: 10px; padding-left: 0; }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 430px) {
| |
| - | body { font-size: 10px; }
| |
| - | .btn-primary { font-size: 1.1em; }
| |
| - | .blog_post h2 { font-size: 1.1em; padding: 5px 5px; }
| |
| - | .services_buttons .icon-button { font-size: 180%; }
| |
| - | .navbar-default .navbar-nav>li>a {
| |
| - | padding-top: 15px;
| |
| - | padding-bottom: 15px;
| |
| - | }
| |
| - |
| |
| - | .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
| |
| - | height: 100%;
| |
| - | }
| |
| - | #services_tabs { padding-left: 0; }
| |
| - | }
| |
| - |
| |
| | | | |
| | | | |
Revision as of 00:59, 18 October 2014
/*-----------------------------------------------------------------------------------*/
/* GENERAL
/*-----------------------------------------------------------------------------------*/
html { font-size: 1em; }
body { font-family: 'Comfortaa', Arial, sans-serif; overflow-x: hidden; margin: 0;} /*carasmo's comment to hide horizontal scroll bar https://github.com/twbs/bootstrap/issues/10711*/
section { padding-top: 85px; margin-top: -85px; }
section .outer_container { margin-bottom: 50px; background-color: #eeeeee; }
section .row { margin-left: 0; margin-right: 0; overflow: hidden; }
section h1 { text-transform: uppercase; color: white; margin-top: 0px; margin-bottom: 0px; line-height: 280px; text-align: center; }
.templatemo_ceo img { margin-bottom: 10px; }
.templatemo_ceo p { text-align: center; }
.container { margin: 0 auto; }
/*http://css-tricks.com/vertically-center-multi-lined-text/*/
.center-row { display: table; }
.center-row .center { display: table-cell; vertical-align: middle; }
/*------------------------------------------------------
FLEXSLIDER OVERRIDING
*/
.flexslider { padding-top: 85px; }
.flexslider a:hover, .flexslider a:focus { text-decoration: none; }
.flexslider { border: none; -webkit-border-radius: 0; border-radius: 0; }
.flexslider .slides li { position: relative; }
.flex-caption {
position:absolute;
left:0;
right:0;
bottom:0;
color: white;
background:rgba(197,82,87,.8);
z-index:1;
padding: 20px;
margin: 0;
width: 75%;
}
/*http://cssarrowplease.com/*/
.arrow-box { position: relative; color: white; background-color: #e98714; border-radius: 4px; margin-left: 30px; height: 100%;}
.arrow-left { display: block; width: 30px; height: 58px; background: url(../images/left_arrow.png) no-repeat 0 0; position: absolute; left: 1px; margin-top: 20px; }
/*------------------------------------------------------
BOOTSTRAP OVERRIDING
*/
.col-md-4, .col-md-5, .col-md-7, .col-md-8 { padding: 0; }
.btn-primary {
font-size: 2em;
padding-bottom: 10px;
background-color: rgb( 226, 90, 148 );
box-shadow: 0px 3px 0px 0px rgb( 180, 52, 107 );
width: 160px;
height: 55px;
border: none; border-radius: 0px;
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
background-color: rgb( 180, 52, 107 );
box-shadow: 0px 3px 0px 0px rgb( 226, 90, 148 );
}
/*------------------------------------------------------
MEDIA QUERIES
*/
.sciencephoto img{
width: 800px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.sciencedescription {
position:absolute;
top:680px;
left:88px;
width:800px;
background-color: #4682B4;
font-size:28px;
color:white;
opacity:0.7;
filter:alpha(opacity=70);
}
"
