campaign: One camp-headshot style is enough. (Merge them.)
[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: 8em;
150   margin: 1em;
151   border-radius: 50%;
152 }
153 .camp-image {
154   margin: 1em;
155 }
156 #camp-openpgp-conf {
157   max-width: 650px;
158   width: 100%;
159   border-radius: 4px;
160 }
161 #camp-gnuk {
162   width: 100%;
163   border-radius: 4px;
164 }
165 #camp-caption-openpgp-conf {
166   max-width: 650px;
167   width: 100%;
168   height: 1.5em;
169   text-overflow: ellipsis;
170   margin-top: -2em;
171   margin-left: auto;
172   margin-right: auto;
173   background: #000;
174   color: #eee;
175   opacity: .7;
176   white-space: nowrap;
177   overflow: hidden;
178 }
179 #camp-caption-gnuk {
180   width: 100%;
181   height: 1.5em;
182   text-overflow: ellipsis;
183   margin-top: -2em;
184   background: #000;
185   color: #eee;
186   opacity: .7;
187   white-space: nowrap;
188   overflow: hidden;
189 }