Mercurial > dive4elements > website
changeset 2:6a78f347c2cd
Changed style.
author | Ariane Broermann <ariane@intevation.de> |
---|---|
date | Tue, 28 Jan 2014 12:29:35 +0100 |
parents | 9a344b2a8baf |
children | 2d286f28acf9 |
files | css/style.css |
diffstat | 1 files changed, 67 insertions(+), 71 deletions(-) [+] |
line wrap: on
line diff
--- a/css/style.css Tue Jan 28 09:44:15 2014 +0100 +++ b/css/style.css Tue Jan 28 12:29:35 2014 +0100 @@ -1,60 +1,13 @@ -/* Space out content a bit */ body { padding-top: 20px; padding-bottom: 20px; } -.navbar { - margin-bottom: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile first views */ -.navbar -.marketing, -.footer { - padding-left: 15px; - padding-right: 15px; -} - -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; -} -.row-offcanvas { - position: relative; - transition: all 0.25s ease-out 0s; -} -.row-offcanvas-right .sidebar-offcanvas { - right: -50%; -} -.row-offcanvas-left .sidebar-offcanvas { - left: -50%; -} -.row-offcanvas-right.active { - right: 50%; -} -.row-offcanvas-left.active { - left: 50%; -} -.sidebar-offcanvas { - position: absolute; - top: 0; - width: 50%; -} -/* Customize container */ -@media (min-width: 768px) { - .container { - max-width: 730px; - } -} -.container-narrow > hr { - margin: 30px 0; -} +/* Custom page container */ .container p { font-size: 15px; } -/* Main marketing message and sign up button */ + +/* Custom jumbotron */ .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; @@ -63,6 +16,70 @@ font-size: 21px; padding: 14px 24px; } +/* Custom page footer */ +.footer { + padding-left: 15px; + padding-right: 15px; + padding-top: 19px; + color: #777; + border-top: 1px solid #e5e5e5; +} +/* Custom page carousel */ +.carousel img { + align: right; + width: 748px; + height: 400px; +} +.carousel-caption { + background-color: #2D6CA2; + border: 2px solid; + border-radius: 25px 25px 25px 25px; + box-shadow: 10px 10px 5px #888888; + font-size: 1.2em; + opacity: 0.9; +} +.carousel-caption a { + color: #F3F663; +} +.carousel-caption a:hover { + color: #FFF5A2; +} +/* + * dive4elements + * -------------------------------------------------- + */ +@media screen and (max-width: 767px) { + .row-dive4elements { + position: relative; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; + } + + .row-dive4elements-right + .sidebar-dive4elements { + right: -50%; /* 6 columns */ + } + + .row-dive4elements-left + .sidebar-dive4elements { + left: -50%; /* 6 columns */ + } + + .row-dive4elements-right.active { + right: 50%; /* 6 columns */ + } + + .row-dive4elements-left.active { + left: 50%; /* 6 columns */ + } + + .sidebar-dive4elements { + position: absolute; + top: 0; + width: 50%; /* 6 columns */ + } +} /* Supporting marketing content */ .marketing { @@ -71,24 +88,3 @@ .marketing p + h4 { margin-top: 28px; } - - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Remove the padding we set earlier */ - .navbar, - .marketing, - .footer { - padding-left: 0; - padding-right: 0; - } - /* Space out the masthead */ - .navbar { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} -