b696b5fdd9e7cc2c7181dcef8621aaabc954208c
[gnupg-doc.git] / web / share / campaign / campaign.css
1 /* Custom CSS for GnuPG site start here.  */
2 /* The default brand is tiny, let's bump the size of the lock graphic.  */
3 .navbar-brand {
4   height: 50px;
5   padding: 0px 0px;
6 }
7 /* If you change this, make sure to test the scroll position when
8    clicking navbar links.  */
9 .camp-gutter {
10   padding-top: 70px;
11   padding-bottom: 70px;
12 }
13 /* If there is no change to the next background, remove some
14    whitespace.  */
15 .camp-gutter-clump {
16   padding-bottom: 0px;
17 }
18 h1 {
19   font-size: 3em;
20   margin-top: 0px;
21   padding-top: 10px;
22   padding-bottom: 10px;
23 }
24 @media (max-width: 1200px) {
25   h1 {
26     font-size: 2em;
27     font-weight: 400;
28     margin-top: 20px;
29     padding-top: 10px;
30     padding-bottom: 10px;
31   }
32 }
33 h2 {
34   font-weight: 600;
35   padding-bottom: .6em;
36   margin-top: 0px;
37 }
38 h2 small {
39   padding-top: 0.5em;
40   font-weight: 600;
41   font-style: italic;
42   display: block;
43 }
44 .camp-who img {
45   margin: 20px;
46   height: 150px;
47   border-radius: 75px;
48   float: left;
49 }
50 @media (max-width: 768px) {
51   .camp-who img {
52     margin-right: 10px;
53     margin-left: 0px;
54     height: 75px;
55     border-radius: 50px;
56   }
57 }
58 .media-body {
59   vertical-align: middle;
60 }
61 /* For the donation block.  */
62 h3 small,
63 h4 small {
64   padding-top: .3em;
65   font-size: 60%;
66   font-weight: 300;
67   display: block;
68 }
69 .camp-progress-info h3 {
70   margin-top: 0px;
71 }
72 /* Decoration */
73 .flying-locks {
74   background-color: #f8f8f8;
75   background-position: -100px -100px;
76   background-image: url("/share/gnupg-lock-white-250x250.png");
77 }
78 /* Carousel base class */
79 .carousel {
80   height: 550px;
81 }
82 /* Declare heights because of positioning of img element */
83 .carousel .item {
84   height: 550px;
85 }
86 .card {
87   display: block;
88   margin-left: auto;
89   margin-right: auto;
90   max-width: 400px;
91   height: 526px;
92   background: #f8f8f8;
93   text-align: center;
94   border: 1px solid #ddd;
95   color: #555;
96   position: relative;
97   overflow: hidden;
98 }
99 .card-img {
100   height: 200px;
101 }
102 .card-img-left {
103   position: absolute;
104   height: auto;
105   max-height: 200px;
106   left: 0px;
107 }
108 .card-img-right {
109   position: absolute;
110   height: auto;
111   max-height: 200px;
112   right: 0px;
113 }
114 .card-text {
115   padding: 24px;
116 }
117 .card-quote {
118   text-align: justify;
119 }
120 .card-quote-long {
121   font-size: 17px;
122   line-height: 1.4em;
123 }
124 @media (max-width: 767px) {
125   .card-quote-long {
126     font-size: 16px;
127   }
128   .card-quote-superlong {
129     font-size: 15px;
130   }
131 }
132 .card-meta {
133   position: absolute;
134   width: 100%;
135   margin-left: -24px;
136   bottom: 24px;
137 }
138 .card-name {
139   font-weight: 600;
140 }
141 .card-org {
142   font-style: italic;
143 }
144 .camp-final-pitch {
145   margin-top: 40px;
146 }
147 /* Main text */
148 .camp-headshot {
149   height: 6em;
150   margin: 1em;
151 }
152 .camp-image {
153   margin: 1em;
154 }
155 #camp-openpgp-conf {
156   max-width: 650px;
157   width: 100%;
158   border-radius: 4px;
159 }
160 #camp-gnuk {
161   width: 100%;
162   border-radius: 4px;
163 }
164 #camp-caption-openpgp-conf {
165   max-width: 650px;
166   width: 100%;
167   height: 1.5em;
168   text-overflow: ellipsis;
169   margin-top: -2em;
170   margin-left: auto;
171   margin-right: auto;
172   background: #000;
173   color: #eee;
174   opacity: .7;
175   white-space: nowrap;
176   overflow: hidden;
177 }
178 #camp-caption-gnuk {
179   width: 100%;
180   height: 1.5em;
181   text-overflow: ellipsis;
182   margin-top: -2em;
183   background: #000;
184   color: #eee;
185   opacity: .7;
186   white-space: nowrap;
187   overflow: hidden;
188 }
189 #camp-headshot {
190   height: 10em;
191   margin: 1.5em;
192   border-radius: 50%;
193 }