Mercurial > dive4elements > website
comparison css/style.css @ 2:6a78f347c2cd
Changed style.
| author | Ariane Broermann <ariane@intevation.de> |
|---|---|
| date | Tue, 28 Jan 2014 12:29:35 +0100 |
| parents | 20e1ebb86d9d |
| children | 65bb726d70b4 |
comparison
equal
deleted
inserted
replaced
| 1:9a344b2a8baf | 2:6a78f347c2cd |
|---|---|
| 1 /* Space out content a bit */ | |
| 2 body { | 1 body { |
| 3 padding-top: 20px; | 2 padding-top: 20px; |
| 4 padding-bottom: 20px; | 3 padding-bottom: 20px; |
| 5 } | 4 } |
| 6 .navbar { | 5 /* Custom page container */ |
| 7 margin-bottom: 20px; | |
| 8 } | |
| 9 | |
| 10 /* Everything but the jumbotron gets side spacing for mobile first views */ | |
| 11 .navbar | |
| 12 .marketing, | |
| 13 .footer { | |
| 14 padding-left: 15px; | |
| 15 padding-right: 15px; | |
| 16 } | |
| 17 | |
| 18 /* Custom page footer */ | |
| 19 .footer { | |
| 20 padding-top: 19px; | |
| 21 color: #777; | |
| 22 border-top: 1px solid #e5e5e5; | |
| 23 } | |
| 24 .row-offcanvas { | |
| 25 position: relative; | |
| 26 transition: all 0.25s ease-out 0s; | |
| 27 } | |
| 28 .row-offcanvas-right .sidebar-offcanvas { | |
| 29 right: -50%; | |
| 30 } | |
| 31 .row-offcanvas-left .sidebar-offcanvas { | |
| 32 left: -50%; | |
| 33 } | |
| 34 .row-offcanvas-right.active { | |
| 35 right: 50%; | |
| 36 } | |
| 37 .row-offcanvas-left.active { | |
| 38 left: 50%; | |
| 39 } | |
| 40 .sidebar-offcanvas { | |
| 41 position: absolute; | |
| 42 top: 0; | |
| 43 width: 50%; | |
| 44 } | |
| 45 /* Customize container */ | |
| 46 @media (min-width: 768px) { | |
| 47 .container { | |
| 48 max-width: 730px; | |
| 49 } | |
| 50 } | |
| 51 .container-narrow > hr { | |
| 52 margin: 30px 0; | |
| 53 } | |
| 54 .container p { | 6 .container p { |
| 55 font-size: 15px; | 7 font-size: 15px; |
| 56 } | 8 } |
| 57 /* Main marketing message and sign up button */ | 9 |
| 10 /* Custom jumbotron */ | |
| 58 .jumbotron { | 11 .jumbotron { |
| 59 text-align: center; | 12 text-align: center; |
| 60 border-bottom: 1px solid #e5e5e5; | 13 border-bottom: 1px solid #e5e5e5; |
| 61 } | 14 } |
| 62 .jumbotron .btn { | 15 .jumbotron .btn { |
| 63 font-size: 21px; | 16 font-size: 21px; |
| 64 padding: 14px 24px; | 17 padding: 14px 24px; |
| 18 } | |
| 19 /* Custom page footer */ | |
| 20 .footer { | |
| 21 padding-left: 15px; | |
| 22 padding-right: 15px; | |
| 23 padding-top: 19px; | |
| 24 color: #777; | |
| 25 border-top: 1px solid #e5e5e5; | |
| 26 } | |
| 27 /* Custom page carousel */ | |
| 28 .carousel img { | |
| 29 align: right; | |
| 30 width: 748px; | |
| 31 height: 400px; | |
| 32 } | |
| 33 .carousel-caption { | |
| 34 background-color: #2D6CA2; | |
| 35 border: 2px solid; | |
| 36 border-radius: 25px 25px 25px 25px; | |
| 37 box-shadow: 10px 10px 5px #888888; | |
| 38 font-size: 1.2em; | |
| 39 opacity: 0.9; | |
| 40 } | |
| 41 .carousel-caption a { | |
| 42 color: #F3F663; | |
| 43 } | |
| 44 .carousel-caption a:hover { | |
| 45 color: #FFF5A2; | |
| 46 } | |
| 47 /* | |
| 48 * dive4elements | |
| 49 * -------------------------------------------------- | |
| 50 */ | |
| 51 @media screen and (max-width: 767px) { | |
| 52 .row-dive4elements { | |
| 53 position: relative; | |
| 54 -webkit-transition: all 0.25s ease-out; | |
| 55 -moz-transition: all 0.25s ease-out; | |
| 56 transition: all 0.25s ease-out; | |
| 57 } | |
| 58 | |
| 59 .row-dive4elements-right | |
| 60 .sidebar-dive4elements { | |
| 61 right: -50%; /* 6 columns */ | |
| 62 } | |
| 63 | |
| 64 .row-dive4elements-left | |
| 65 .sidebar-dive4elements { | |
| 66 left: -50%; /* 6 columns */ | |
| 67 } | |
| 68 | |
| 69 .row-dive4elements-right.active { | |
| 70 right: 50%; /* 6 columns */ | |
| 71 } | |
| 72 | |
| 73 .row-dive4elements-left.active { | |
| 74 left: 50%; /* 6 columns */ | |
| 75 } | |
| 76 | |
| 77 .sidebar-dive4elements { | |
| 78 position: absolute; | |
| 79 top: 0; | |
| 80 width: 50%; /* 6 columns */ | |
| 81 } | |
| 65 } | 82 } |
| 66 | 83 |
| 67 /* Supporting marketing content */ | 84 /* Supporting marketing content */ |
| 68 .marketing { | 85 .marketing { |
| 69 margin: 40px 0; | 86 margin: 40px 0; |
| 70 } | 87 } |
| 71 .marketing p + h4 { | 88 .marketing p + h4 { |
| 72 margin-top: 28px; | 89 margin-top: 28px; |
| 73 } | 90 } |
| 74 | |
| 75 | |
| 76 /* Responsive: Portrait tablets and up */ | |
| 77 @media screen and (min-width: 768px) { | |
| 78 /* Remove the padding we set earlier */ | |
| 79 .navbar, | |
| 80 .marketing, | |
| 81 .footer { | |
| 82 padding-left: 0; | |
| 83 padding-right: 0; | |
| 84 } | |
| 85 /* Space out the masthead */ | |
| 86 .navbar { | |
| 87 margin-bottom: 30px; | |
| 88 } | |
| 89 /* Remove the bottom border on the jumbotron for visual effect */ | |
| 90 .jumbotron { | |
| 91 border-bottom: 0; | |
| 92 } | |
| 93 } | |
| 94 |