campaign: Change video of the day to Arthur Jordan (2U).
[gnupg-doc.git] / web / share / campaign / campaign.css
1 /* Custom CSS for GnuPG campaign pages.  */
2  *
3  * This code is Copyright 2017 The GnuPG Project and licensed
4  * under a Creative Commons Attribution-ShareAlike 4.0 International
5  * License.  See the file copying.org for details.
6  */
7
8 /* The default brand is tiny, let's bump the size of the lock graphic.  */
9 .navbar-brand {
10   height: 50px;
11   padding: 0px 0px;
12 }
13 /* If you change this, make sure to test the scroll position when
14    clicking navbar links.  */
15 .camp-gutter {
16   padding-top: 70px;
17   padding-bottom: 70px;
18 }
19 /* If there is no change to the next background, remove some
20    whitespace.  */
21 .camp-gutter-clump {
22   padding-bottom: 0px;
23 }
24 h1 {
25   font-size: 3em;
26   margin-top: 0px;
27   padding-top: 10px;
28   padding-bottom: 10px;
29 }
30 @media (max-width: 1200px) {
31   h1 {
32     font-size: 2em;
33     font-weight: 400;
34     margin-top: 20px;
35     padding-top: 10px;
36     padding-bottom: 10px;
37   }
38 }
39 h2 {
40   font-weight: 600;
41   padding-bottom: .6em;
42   margin-top: 0px;
43 }
44 h2 small {
45   padding-top: 0.5em;
46   font-weight: 600;
47   font-style: italic;
48   display: block;
49 }
50 .camp-who img {
51   margin: 20px;
52   height: 150px;
53   border-radius: 75px;
54   float: left;
55 }
56 @media (max-width: 768px) {
57   .camp-who img {
58     margin-right: 10px;
59     margin-left: 0px;
60     height: 75px;
61     border-radius: 50px;
62   }
63 }
64 .media-body {
65   vertical-align: middle;
66 }
67 /* For the donation block.  */
68 h3 small,
69 h4 small {
70   padding-top: .3em;
71   font-size: 60%;
72   font-weight: 300;
73   display: block;
74 }
75 .camp-progress-info h3 {
76   margin-top: 0px;
77 }
78 /* Decoration */
79 .flying-locks {
80   background-color: #f8f8f8;
81   background-position: -100px -100px;
82   background-image: url("/share/gnupg-lock-white-250x250.png");
83 }
84 /* Carousel base class */
85 .carousel {
86   height: 550px;
87 }
88 /* Declare heights because of positioning of img element */
89 .carousel .item {
90   height: 550px;
91 }
92 .card {
93   display: block;
94   margin-left: auto;
95   margin-right: auto;
96   max-width: 400px;
97   height: 526px;
98   background: #f8f8f8;
99   text-align: center;
100   border: 1px solid #ddd;
101   color: #555;
102   position: relative;
103   overflow: hidden;
104 }
105 .card-img {
106   height: 200px;
107 }
108 .card-img-left {
109   position: absolute;
110   height: auto;
111   max-height: 200px;
112   left: 0px;
113 }
114 .card-img-right {
115   position: absolute;
116   height: auto;
117   max-height: 200px;
118   right: 0px;
119 }
120 .card-text {
121   padding: 24px;
122 }
123 .card-quote {
124   text-align: left;
125 }
126 .card-quote-long {
127   font-size: 17px;
128   line-height: 1.4em;
129 }
130 .card-quote-superlong {
131   font-size: 17px;
132   line-height: 1.3em;
133 }
134 @media (max-width: 767px) {
135   .card-quote-long {
136     font-size: 16px;
137   }
138   .card-quote-superlong {
139     font-size: 15px;
140   }
141 }
142 .card-meta {
143   position: absolute;
144   width: 100%;
145   margin-left: -24px;
146   bottom: 24px;
147 }
148 .card-name {
149   font-weight: 600;
150 }
151 .card-org {
152   font-style: italic;
153 }
154 .camp-final-pitch {
155   margin-top: 40px;
156 }
157 /* Main text */
158 .camp-headshot {
159   height: 8em;
160   margin: 1em;
161   border-radius: 50%;
162 }
163 .camp-image {
164   margin: 1em;
165 }
166 #camp-openpgp-conf {
167   max-width: 650px;
168   width: 100%;
169   border-radius: 4px;
170 }
171 #camp-gnuk {
172   width: 100%;
173   border-radius: 4px;
174 }
175 #camp-caption-openpgp-conf {
176   max-width: 650px;
177   width: 100%;
178   height: 1.5em;
179   text-overflow: ellipsis;
180   margin-top: -2em;
181   margin-left: auto;
182   margin-right: auto;
183   background: #000;
184   color: #eee;
185   opacity: .7;
186   white-space: nowrap;
187   overflow: hidden;
188 }
189 #camp-caption-gnuk {
190   width: 100%;
191   height: 1.5em;
192   text-overflow: ellipsis;
193   margin-top: -2em;
194   background: #000;
195   color: #eee;
196   opacity: .7;
197   white-space: nowrap;
198   overflow: hidden;
199 }
200 .camp-video {
201   background-color: #000;
202   position: relative;
203   overflow: hidden;
204   cursor: pointer;
205 }
206 .camp-video img {
207   width: 100%;
208   left: 0;
209   opacity: 0.7;
210 }
211 .camp-video .play-button {
212   width: 80px;
213   height: 50px;
214   box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
215   z-index: 1;
216   opacity: 0.8;
217   border-radius: 6px;
218 }
219 .camp-video .play-button {
220   transition: background-color 0.2s ease;
221   background-color: #333;
222 }
223 .camp-video:hover .play-button,
224 .touch .play-button {
225   transition: background-color 0.2s ease;
226   background-color: #f00;
227 }
228 .camp-video .play-button:before {
229   content: "";
230   border-style: solid;
231   border-width: 10px 0 10px 20.0px;
232   border-color: transparent transparent transparent #fff;
233 }
234 .camp-video img,
235 .youtube .play-button {
236   cursor: pointer;
237 }
238 .camp-video img,
239 .camp-video iframe,
240 .camp-video .play-button,
241 .camp-video .video-text,
242 .camp-video .play-button:before {
243   position: absolute;
244 }
245 .camp-video .play-button,
246 .camp-video .play-button:before {
247   top: 50%;
248   left: 50%;
249   transform: translate3d(-50%, -50%, 0);
250 }
251 .camp-video iframe {
252   height: 100%;
253   width: 100%;
254   top: 0;
255   left: 0;
256 }
257 .camp-video .video-text {
258   width: 100%;
259   top: 20%;
260   text-align: center;
261   opacity: 1.0;
262   color: #fff;
263   padding-left: 20px;
264   padding-right: 20px;
265   font-size: 130%;
266 }
267
268 #camp-footer {
269   width: 100%;
270   background: #f8f8f8;
271   font-size: 0.8em;
272   padding-bottom: 0.5em;
273 }
274
275 /* Flags for the language chooser.  */
276 .flag-icon {
277   display: inline-block;
278   height: .9em; /* Flag width/height ratio should be ~1.6.  */
279   width: 1.44em;
280 }
281 .flag-icon-de {
282   background: no-repeat center/100% url("/share/campaign/img/flags/de.min.svg");
283 }
284 .flag-icon-usuk {
285   background: no-repeat center/100% url("/share/campaign/img/flags/usuk.min.svg");
286 }
287 .flag-icon-jp {
288   background: no-repeat center/100% url("/share/campaign/img/flags/jp.min.svg");
289 }
290 .flag-icon-fr {
291   background: no-repeat center/100% url("/share/campaign/img/flags/fr.min.svg");
292 }
293
294 /* Some hacks to directly embed the dropdown menu into the navbar.  */
295 .lang-chooser-xs { margin-top: 12px; }
296 .lang-chooser-xs .caret { color: #fafafa; }
297 .lang-chooser-xs .dropdown-menu { left: -2em; }
298 .lang-chooser-xs li, .lang-chooser-xs > li > a { display: inline; }
299
300 .team-img {
301     width: 50%;
302     margin-left: 1em;
303     margin-top: 0.5em;
304 }
305 @media (max-width: 768px) {
306   .team-img {
307      width: 100%;
308      margin-left: 0em;
309      margin-top: 0.5em;
310   }
311 }
312 .vid-howto {
313     margin-top: 1em;
314     margin-bottom: 0px;
315 }
316 /* donate.*.org Paypal note.  */
317 .help-inline {
318   margin-bottom: 0;
319   margin-top: 5px;
320 }