Browse code

donatehead updates:

- adding donate-style.css
- updating <head> and <nav>

Nima Fatemi authored on 08/12/2015 19:33:15
Showing 2 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,357 @@
1
+/* Some primery changes for bootstrap */
2
+.btn:focus,
3
+.btn:active:focus,
4
+.btn.active:focus,
5
+.btn.focus,
6
+.btn:active.focus,
7
+.btn.active.focus,
8
+a:focus,
9
+input[type="file"]:focus,
10
+input[type="radio"]:focus,
11
+input[type="checkbox"]:focus {
12
+      outline: none;
13
+}
14
+.form-control:focus {
15
+	border-color: #875ca4;
16
+	outline: 0;
17
+	-webkit-box-shadow: none;
18
+        	box-shadow: none;
19
+}
20
+.btn-default:active,
21
+.btn-default.active,
22
+.btn-default.active:hover,
23
+.btn-default.active:focus,
24
+.btn-default.active.focus,
25
+.open > .dropdown-toggle.btn-default:hover,
26
+.open > .dropdown-toggle.btn-default:focus,
27
+.open > .dropdown-toggle.btn-default.focus,
28
+.open > .dropdown-toggle.btn-default {
29
+    color: #fff;
30
+    background: #875ca4;
31
+    border-color: #875ca4;
32
+}
33
+.btn:active, .btn.active {
34
+    background-image: none;
35
+    outline: 0;
36
+    -webkit-box-shadow: none;
37
+    box-shadow: none;
38
+}
39
+a {
40
+    color: #875ca4;
41
+}
42
+a:hover, a:focus {
43
+    color: #663987;
44
+    text-decoration: none;
45
+}
46
+.btn-primary:hover {
47
+    background-color: #784B96;
48
+    border-color: #784B96;
49
+}
50
+.btn-primary {
51
+    background-color: #875ca4;
52
+    border-color: #875ca4;
53
+}
54
+.btn-primary:focus,
55
+.btn-primary.focus,
56
+.btn-primary:active,
57
+.btn-primary.active,
58
+.open > .dropdown-toggle.btn-primary,
59
+.btn-primary:active:hover,
60
+.btn-primary.active:hover,
61
+.open > .dropdown-toggle.btn-primary:hover,
62
+.btn-primary:active:focus,
63
+.btn-primary.active:focus,
64
+.open > .dropdown-toggle.btn-primary:focus,
65
+.btn-primary:active.focus,
66
+.btn-primary.active.focus,
67
+.open > .dropdown-toggle.btn-primary.focus{
68
+    background-color: #663987;
69
+    border-color: #663987;
70
+}
71
+.navbar-brand {
72
+    height: auto;
73
+    padding: 0;
74
+}
75
+.navbar-default {
76
+    background: white;
77
+    border: none;
78
+}
79
+.navbar {
80
+    margin-bottom: 0;
81
+}
82
+.navbar-collapse.collapse {
83
+display: block!important;
84
+}
85
+
86
+.navbar-nav>li, .navbar-nav {
87
+float: left !important;
88
+}
89
+
90
+
91
+.navbar-nav.navbar-right:last-child {
92
+margin-right: -15px !important;
93
+}
94
+
95
+.navbar-right {
96
+float: right!important;
97
+}
98
+
99
+
100
+.navbar-header {
101
+float: left;
102
+}
103
+.navbar-nav > li > a {
104
+    padding-top: 15px;
105
+    padding-bottom: 15px;
106
+}
107
+.navbar-nav{
108
+	margin: 0;
109
+}
110
+.img-thumbnail {
111
+  padding: 1px;
112
+  background-color: #794d9a;
113
+  border: 1px solid #794d9a;
114
+  -webkit-transition: none;
115
+       -o-transition: none;
116
+          transition: none;
117
+}
118
+
119
+
120
+
121
+/* Sticky footer styles
122
+-------------------------------------------------- */
123
+html {
124
+	position: relative;
125
+	min-height: 100%;
126
+}
127
+#navbar {
128
+    margin-top: 28px;
129
+}
130
+.logo{
131
+    width: 120px;
132
+}
133
+.donation{
134
+	text-align: center;
135
+	margin-bottom: 125px;
136
+}
137
+.main-text{
138
+	margin-top: 50px;
139
+}
140
+.nav > li > a:hover, .nav > li > a:focus {
141
+	text-decoration: none;
142
+	border-bottom: 3px solid #794d9a;
143
+}
144
+.donate-section{
145
+	margin-top: 50px;
146
+	margin-bottom: 30px;
147
+}
148
+.no-padding{
149
+	padding: 0;
150
+}
151
+.half-opacity{
152
+	opacity: 0.5;
153
+}
154
+.combined-input{
155
+	margin: 0 15px 35px 15px;
156
+}
157
+.left.btn-lg, .btn-group-lg > .btn{
158
+    border-top-right-radius: 0;
159
+    border-bottom-right-radius: 0;
160
+}
161
+.right.btn-lg, .btn-group-lg > .btn{
162
+    border-top-left-radius: 0;
163
+    border-bottom-left-radius: 0;
164
+}
165
+.right{
166
+    border-left-width: 0px !important;
167
+}
168
+.choiceLabel{
169
+    cursor: pointer !important;
170
+    margin: 0px !important;
171
+    width: 100%;
172
+    height: 100%;
173
+    font-weight: normal;
174
+}
175
+.combined-input > .btn-lg,
176
+.combined-input > .btn {
177
+	padding: 0;
178
+	min-height: 44px;
179
+	line-height: 44px;
180
+}
181
+
182
+input[type=number]::-webkit-inner-spin-button,
183
+input[type=number]::-webkit-outer-spin-button {
184
+	-webkit-appearance: none;
185
+	margin: 0;
186
+}
187
+input[type=number] {
188
+	-moz-appearance: textfield;
189
+}
190
+.error-msg{
191
+	color: red;
192
+	display: none;
193
+}
194
+.quote-section{
195
+	background-color:#663987;
196
+	padding: 20px 0;
197
+}
198
+.champion{
199
+	width: 100%;
200
+}
201
+.source-quote{
202
+	margin-top: 30px;
203
+	color: white;
204
+}
205
+blockquote {
206
+	text-align: justify;
207
+	display: block;
208
+	padding: 5px 0px 5px 45px;
209
+	margin: 20px 0 0 0;
210
+	position: relative;
211
+	font-size: 20px;
212
+	border-left: 5px solid #794d9a;
213
+    color: #ffffff;
214
+}
215
+blockquote::before {
216
+	content: "\201C";
217
+	position: absolute;
218
+	left: 10px;
219
+	top: -20px;
220
+	font-size: 80px;
221
+}
222
+blockquote footer{
223
+	color: rgb(240,240,240);
224
+}
225
+footer.footer{
226
+	margin-top: 20px;
227
+	position: absolute;
228
+    bottom: 0;
229
+    width: 100%;
230
+    /* Set the height of the footer here */
231
+    /*height: 65px;*/
232
+    padding-top: 20px;
233
+    padding-bottom: 10px;
234
+    background-color: #f5f5f5;
235
+}
236
+@media (max-width: 991px) {
237
+	blockquote {
238
+		margin: 30px 0 0 0;
239
+		font-size: 18px;
240
+	}
241
+	.champion{
242
+		width: 140px;
243
+	}
244
+	.source-quote{
245
+		margin-top: 20px;
246
+	}
247
+}
248
+@media (max-width: 767px)  {
249
+	.main-text{
250
+		font-size: 28px;
251
+	}
252
+	blockquote {
253
+		margin: 2% 0 0 0;
254
+		font-size: 16px;
255
+		border: none;
256
+	}
257
+	.img-section{
258
+		width: 20%;
259
+		float: left;
260
+	}
261
+	blockquote::before {
262
+		display: none;
263
+	}
264
+
265
+}
266
+@media (max-width: 659px)  {
267
+	.main-text{
268
+		font-size: 26px;
269
+	}
270
+	blockquote {
271
+		font-size: 17px;
272
+		margin: 0;
273
+	}
274
+	.img-section{
275
+		width: 30%;
276
+	}
277
+	.champion{
278
+		width: 100%;
279
+	}
280
+}
281
+@media (max-width: 549px)  {
282
+	.main-text{
283
+		font-size: 24px;
284
+	}
285
+	blockquote {
286
+		font-size: 15px;
287
+	}
288
+}
289
+@media (max-width: 449px)  {
290
+	.main-text{
291
+		font-size: 22px;
292
+	}
293
+	blockquote {
294
+		font-size: 14px;
295
+		padding: 0;
296
+	}
297
+
298
+}
299
+
300
+@media (max-width: 399px)  {
301
+	.logo {
302
+	    text-align: center;
303
+	    width: 25%;
304
+	    float: none;
305
+	}
306
+	.navbar-header{
307
+		width: 100%;
308
+	    text-align: center;	
309
+	}
310
+	.navbar-brand > img {
311
+    	display: initial;
312
+	}
313
+	.navbar-brand {
314
+    	float: initial;
315
+	}
316
+	.container > .navbar-header,
317
+	.container-fluid > .navbar-header,
318
+	.container > .navbar-collapse,
319
+		.container-fluid > .navbar-collapse {
320
+	    margin-right: 0;
321
+	    margin-left: 0;
322
+	}
323
+	.navbar-nav.navbar-right:last-child {
324
+	    margin-right: 0 !important;
325
+	}
326
+	#navbar{
327
+		width: 100%;
328
+		margin: 0;
329
+		height: 53px;
330
+	}
331
+	#navbar > li {
332
+	    width: 33.3%;
333
+	    text-align: center;
334
+	}
335
+	.main-text{
336
+		font-size: 20px;
337
+	}
338
+	#donate > .btn-group > .col-xs-6 {
339
+    width: 100%;
340
+	}
341
+	blockquote {
342
+		font-size: 14px;
343
+		padding: 0;
344
+	}
345
+	.img-section{
346
+		width: 35%;
347
+	}
348
+	footer.footer {
349
+	    margin-top: 10px;
350
+	    margin-bottom: 0px;
351
+	}
352
+	footer.footer > p {
353
+	    font-size: 12px;
354
+	}
355
+
356
+}
357
+
... ...
@@ -10,65 +10,32 @@
10 10
  <html>
11 11
  <head>
12 12
 
13
-   <meta charset="utf-8">
14
-   <meta http-equiv="X-UA-Compatible" content="IE=edge">
15
-   <meta name="viewport" content="width=device-width,initial-scale=1">
16
-   <meta name="author" content="The Tor Project, Inc.">
17
-   <meta name="keywords" content="anonymity online, tor, tor project, censorship circumvention, traffic analysis, anonymous communications research">
18
-   <meta property="og:image" content="https://www.torproject.org/images/tor-logo.jpg">
13
+  <meta charset="utf-8">
14
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
15
+  <meta name="viewport" content="width=device-width,initial-scale=1">
16
+  <meta name="author" content="The Tor Project, Inc.">
17
+  <meta name="keywords" content="anonymity online, tor, tor project, censorship circumvention, traffic analysis, anonymous communications research">
18
+  <meta property="og:image" content="https://www.torproject.org/images/tor-logo.jpg">
19 19
 
20
-   <title>$(TITLE)</title>
21
-   <link href="$(DOCROOT)/css/bootstrap.css" rel="stylesheet">
20
+  <title>$(TITLE)</title>
21
+  <link href="$(DOCROOT)/css/bootstrap.css" rel="stylesheet">
22
+  <link href="$(DOCROOT)/css/donate-style.css" rel="stylesheet">
23
+  <link rel="icon" href="$(IMGROOT)/favicon.ico">
22 24
 
23
-   <link rel="icon" href="$(IMGROOT)/favicon.ico">
25
+ </head>
24 26
 
25
-    <style>
26
-
27
-    /* Sticky footer styles
28
-    -------------------------------------------------- */
29
-    html {
30
-      position: relative;
31
-      min-height: 100%;
32
-    }
33
-
34
-    body {
35
-      margin-bottom: 65px;
36
-    }
37
-
38
-    .footer {
39
-      position: absolute;
40
-      bottom: 0;
41
-      width: 100%;
42
-      /* Set the height of the footer here */
43
-      height: 65px;
44
-      padding-top: 10px;
45
-      padding-bottom: 10px;
46
-      background-color: #f5f5f5;
47
-    }
48
-
49
-    .donation{
50
-        text-align: center;
51
-      padding-bottom: 65px;
52
-    }
53
-
54
-    h6{
55
-        font-weight: normal;
56
-    }
57
-    </style>
58
-
59
-
60
-</head>
61 27
 <body>
62
-  <div class="container">
63
-     <a href="<page index>"><img src="$(IMGROOT)/tor-logo.jpg" alt="Tor Project Home"></a>
64
-<!--
65
-      <ul class="nav navbar-nav navbar-right" style="margin-top:50px; ">
66
-          <li><a href="<page index>">Home</a></li>
67
-          <li><a href="<page about/overview>">About</a></li>
68
-          <li><a href="<page about/contact>">Contact</a></li>
28
+  <nav class="navbar navbar-default navbar-static-top">
29
+    <div class="container">
30
+      <div class="navbar-header">
31
+        <a class="navbar-brand" href="<page index>">
32
+          <img src="$(IMGROOT)/tor-logo.jpg" alt="Tor Project" class="logo">
33
+        </a>
34
+      </div>      
35
+      <ul id="navbar" class="nav navbar-nav navbar-right">
36
+        <li><a href="<page index>">Home</a></li>
37
+        <li><a href="<page index>/about">About</a></li>
38
+        <li><a href="<page index>/contact">Contact</a></li>
69 39
       </ul>
70
-      <hr style="margin-top:0;">
71
-  </div>
72
-  <br>
73
-
40
+    </div>
41
+  </nav>
74 42
\ No newline at end of file