annotate 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
rev   line source
0
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
1 /* Space out content a bit */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
2 body {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
3 padding-top: 20px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
4 padding-bottom: 20px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
5 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
6 .navbar {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
7 margin-bottom: 20px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
8 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
9
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
10 /* Everything but the jumbotron gets side spacing for mobile first views */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
11 .navbar
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
12 .marketing,
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
13 .footer {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
14 padding-left: 15px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
15 padding-right: 15px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
16 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
17
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
18 /* Custom page footer */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
19 .footer {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
20 padding-top: 19px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
21 color: #777;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
22 border-top: 1px solid #e5e5e5;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
23 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
24 .row-offcanvas {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
25 position: relative;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
26 transition: all 0.25s ease-out 0s;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
27 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
28 .row-offcanvas-right .sidebar-offcanvas {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
29 right: -50%;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
30 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
31 .row-offcanvas-left .sidebar-offcanvas {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
32 left: -50%;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
33 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
34 .row-offcanvas-right.active {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
35 right: 50%;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
36 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
37 .row-offcanvas-left.active {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
38 left: 50%;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
39 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
40 .sidebar-offcanvas {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
41 position: absolute;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
42 top: 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
43 width: 50%;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
44 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
45 /* Customize container */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
46 @media (min-width: 768px) {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
47 .container {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
48 max-width: 730px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
49 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
50 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
51 .container-narrow > hr {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
52 margin: 30px 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
53 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
54 .container p {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
55 font-size: 15px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
56 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
57 /* Main marketing message and sign up button */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
58 .jumbotron {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
59 text-align: center;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
60 border-bottom: 1px solid #e5e5e5;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
61 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
62 .jumbotron .btn {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
63 font-size: 21px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
64 padding: 14px 24px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
65 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
66
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
67 /* Supporting marketing content */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
68 .marketing {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
69 margin: 40px 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
70 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
71 .marketing p + h4 {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
72 margin-top: 28px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
73 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
74
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
75
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
76 /* Responsive: Portrait tablets and up */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
77 @media screen and (min-width: 768px) {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
78 /* Remove the padding we set earlier */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
79 .navbar,
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
80 .marketing,
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
81 .footer {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
82 padding-left: 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
83 padding-right: 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
84 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
85 /* Space out the masthead */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
86 .navbar {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
87 margin-bottom: 30px;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
88 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
89 /* Remove the bottom border on the jumbotron for visual effect */
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
90 .jumbotron {
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
91 border-bottom: 0;
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
92 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
93 }
20e1ebb86d9d Laying out Repository
Ariane Broermann <ariane@intevation.de>
parents:
diff changeset
94
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)