0
|
1 /* Space out content a bit */ |
|
2 body { |
|
3 padding-top: 20px; |
|
4 padding-bottom: 20px; |
|
5 } |
|
6 .navbar { |
|
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 { |
|
55 font-size: 15px; |
|
56 } |
|
57 /* Main marketing message and sign up button */ |
|
58 .jumbotron { |
|
59 text-align: center; |
|
60 border-bottom: 1px solid #e5e5e5; |
|
61 } |
|
62 .jumbotron .btn { |
|
63 font-size: 21px; |
|
64 padding: 14px 24px; |
|
65 } |
|
66 |
|
67 /* Supporting marketing content */ |
|
68 .marketing { |
|
69 margin: 40px 0; |
|
70 } |
|
71 .marketing p + h4 { |
|
72 margin-top: 28px; |
|
73 } |
|
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 |