e8c1e49737116b94b4a1b371bc4a4b7ce0096ac5
[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 @media (max-width: 767px) {
131   .card-quote-long {
132     font-size: 16px;
133   }
134   .card-quote-superlong {
135     font-size: 15px;
136   }
137 }
138 .card-meta {
139   position: absolute;
140   width: 100%;
141   margin-left: -24px;
142   bottom: 24px;
143 }
144 .card-name {
145   font-weight: 600;
146 }
147 .card-org {
148   font-style: italic;
149 }
150 .camp-final-pitch {
151   margin-top: 40px;
152 }
153 /* Main text */
154 .camp-headshot {
155   height: 8em;
156   margin: 1em;
157   border-radius: 50%;
158 }
159 .camp-image {
160   margin: 1em;
161 }
162 #camp-openpgp-conf {
163   max-width: 650px;
164   width: 100%;
165   border-radius: 4px;
166 }
167 #camp-gnuk {
168   width: 100%;
169   border-radius: 4px;
170 }
171 #camp-caption-openpgp-conf {
172   max-width: 650px;
173   width: 100%;
174   height: 1.5em;
175   text-overflow: ellipsis;
176   margin-top: -2em;
177   margin-left: auto;
178   margin-right: auto;
179   background: #000;
180   color: #eee;
181   opacity: .7;
182   white-space: nowrap;
183   overflow: hidden;
184 }
185 #camp-caption-gnuk {
186   width: 100%;
187   height: 1.5em;
188   text-overflow: ellipsis;
189   margin-top: -2em;
190   background: #000;
191   color: #eee;
192   opacity: .7;
193   white-space: nowrap;
194   overflow: hidden;
195 }
196 .camp-video {
197   background-color: #000;
198   position: relative;
199   overflow: hidden;
200   cursor: pointer;
201 }
202 .camp-video img {
203   width: 100%;
204   left: 0;
205   opacity: 0.7;
206 }
207 .camp-video .play-button {
208   width: 80px;
209   height: 50px;
210   box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
211   z-index: 1;
212   opacity: 0.8;
213   border-radius: 6px;
214 }
215 .camp-video .play-button {
216   transition: background-color 0.2s ease;
217   background-color: #333;
218 }
219 .camp-video:hover .play-button,
220 .touch .play-button {
221   transition: background-color 0.2s ease;
222   background-color: #f00;
223 }
224 .camp-video .play-button:before {
225   content: "";
226   border-style: solid;
227   border-width: 10px 0 10px 20.0px;
228   border-color: transparent transparent transparent #fff;
229 }
230 .camp-video img,
231 .youtube .play-button {
232   cursor: pointer;
233 }
234 .camp-video img,
235 .camp-video iframe,
236 .camp-video .play-button,
237 .camp-video .video-text,
238 .camp-video .play-button:before {
239   position: absolute;
240 }
241 .camp-video .play-button,
242 .camp-video .play-button:before {
243   top: 50%;
244   left: 50%;
245   transform: translate3d(-50%, -50%, 0);
246 }
247 .camp-video iframe {
248   height: 100%;
249   width: 100%;
250   top: 0;
251   left: 0;
252 }
253 .camp-video .video-text {
254   width: 100%;
255   top: 20%;
256   text-align: center;
257   opacity: 1.0;
258   color: #fff;
259   padding-left: 20px;
260   padding-right: 20px;
261   font-size: 130%;
262 }
263
264 #camp-footer {
265   width: 100%;
266   background: #f8f8f8;
267   font-size: 0.8em;
268   padding-bottom: 0.5em;
269 }
270
271 /* Flags for the language chooser.  */
272 .flag-icon {
273   display: inline-block;
274   height: .9em; /* Flag width/height ratio should be ~1.6.  */
275   width: 1.44em;
276 }
277 .flag-icon-de {
278   background: no-repeat center/100% url("/share/campaign/img/flags/de.min.svg");
279 }
280 .flag-icon-usuk {
281   background: no-repeat center/100% url("/share/campaign/img/flags/usuk.min.svg");
282 }
283 .flag-icon-jp {
284   background: no-repeat center/100% url("/share/campaign/img/flags/jp.min.svg");
285 }
286 .flag-icon-fr {
287   background: no-repeat center/100% url("/share/campaign/img/flags/fr.min.svg");
288 }
289
290 /* Some hacks to directly embed the dropdown menu into the navbar.  */
291 .lang-chooser-xs { margin-top: 12px; }
292 .lang-chooser-xs .dropdown-menu { left: -2em; }
293 .lang-chooser-xs li, .lang-chooser-xs > li > a { display: inline; }
294
295 .team-img {
296     width: 50%;
297     margin-left: 1em;
298     margin-top: 0.5em;
299 }
300 @media (max-width: 768px) {
301   .team-img {
302      width: 100%;
303      margin-left: 0em;
304      margin-top: 0.5em;
305   }
306 }