Template:CarnegieMellon:CarnegieMellon/CSS
From 2014.igem.org
(Difference between revisions)
Acelentano (Talk | contribs) |
Acelentano (Talk | contribs) |
||
(44 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
body { | body { | ||
padding-bottom: 40px; | padding-bottom: 40px; | ||
- | background: # | + | background: #85B1C0; |
color: #5a5a5a; | color: #5a5a5a; | ||
font-size: 12px; | font-size: 12px; | ||
} | } | ||
+ | |||
+ | .container { | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | |||
Line 32: | Line 38: | ||
/* Remove border and change up box shadow for more contrast */ | /* Remove border and change up box shadow for more contrast */ | ||
.navbar .navbar-inner { | .navbar .navbar-inner { | ||
- | width: | + | width:99.5%; |
border: 0; | border: 0; | ||
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); | -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); | ||
Line 64: | Line 70: | ||
/* Carousel base class */ | /* Carousel base class */ | ||
.carousel { | .carousel { | ||
- | margin-bottom: | + | margin-bottom: 0px; |
} | } | ||
Line 74: | Line 80: | ||
.carousel-control { | .carousel-control { | ||
- | height: | + | height: 60px; |
- | margin-top: | + | margin-top: 0px; |
font-size: 120px; | font-size: 120px; | ||
text-shadow: 0 1px 1px rgba(0,0,0,.4); | text-shadow: 0 1px 1px rgba(0,0,0,.4); | ||
Line 84: | Line 90: | ||
.carousel .item { | .carousel .item { | ||
- | height: | + | height: 450px; |
} | } | ||
.carousel img { | .carousel img { | ||
Line 90: | Line 96: | ||
top: 0; | top: 0; | ||
left: 0; | left: 0; | ||
- | min-width: | + | min-width: 975px; |
- | height: | + | height: 450px; |
} | } | ||
Line 99: | Line 105: | ||
position: static; | position: static; | ||
max-width: 550px; | max-width: 550px; | ||
- | padding: | + | padding: 0px; |
margin-top: 500px; | margin-top: 500px; | ||
} | } | ||
Line 110: | Line 116: | ||
} | } | ||
.carousel-caption .btn { | .carousel-caption .btn { | ||
- | margin-top: | + | margin-top: 0px; |
} | } | ||
Latest revision as of 04:27, 17 October 2014
/* GLOBAL STYLES
-------------------------------------------------- */ /* Padding below the footer and lighter body text */
body { padding-bottom: 40px; background: #85B1C0; color: #5a5a5a; font-size: 12px; }
.container { margin:0px; }
/* CUSTOMIZE THE NAVBAR -------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 50; left: 0; right: 0; z-index: 100; margin-top: -69px; margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ } .navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */ .navbar .navbar-inner {
width:99.5%;
border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Downsize the brand/project name a bit */ .navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
/* Navbar links: increase padding for taller navbar */ .navbar .nav > li > a { padding: 15px 20px; }
/* Offset the responsive button for proper vertical alignment */ .navbar .btn-navbar { margin-top: 5px; }
/* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */
/* Carousel base class */ .carousel { margin-bottom: 0px;
}
.carousel .container { position: relative; z-index: 9; }
.carousel-control { height: 60px; margin-top: 0px; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; }
.carousel .item { height: 450px; } .carousel img { position: relative; top: 0; left: 0; min-width: 975px; height: 450px; }
.carousel-caption { background-color: transparent;
position: static; max-width: 550px; padding: 0px; margin-top: 500px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #000000; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 0px; }
/* Square Images -------------------------------------------------- */
.sqimg { display: inline-block; margin-left: auto; margin-right: auto; height: 250px; width: 400px; opacity: 0.8; margin-bottom: 3px; filter: alpha(opacity=40);
}
.sqimg:hover {
opacity: 1; filter: alpha(opacity=100);}
- images{
text-align: center;
display: block; width: 804px; height: 506px; margin: 0 auto;
}