Mercurial > dive4elements > website
diff css/style.css @ 0:20e1ebb86d9d
Laying out Repository
author | Ariane Broermann <ariane@intevation.de> |
---|---|
date | Tue, 28 Jan 2014 09:32:34 +0100 |
parents | |
children | 6a78f347c2cd |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/css/style.css Tue Jan 28 09:32:34 2014 +0100 @@ -0,0 +1,94 @@ +/* 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; +} +.container p { + font-size: 15px; +} +/* Main marketing message and sign up button */ +.jumbotron { + text-align: center; + border-bottom: 1px solid #e5e5e5; +} +.jumbotron .btn { + font-size: 21px; + padding: 14px 24px; +} + +/* Supporting marketing content */ +.marketing { + margin: 40px 0; +} +.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; + } +} +