GitList
Browse code

Delete rule-41 campaign

hiromipaw authored on 07/09/2017 17:54:09
Showing 1 changed files
rule-41/sass/call-email-tool.scss
History View file @ 100c5aec8
1 1 
deleted file mode 100644
... ... 
@@ -1,778 +0,0 @@
1 
-$yellow: #F2C45A;
2 
-
3 
-/* normalise.css v3 */
4 
-
5 
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}
6 
-
7 
-@font-face {
8 
-    font-family: 'brandon_grotesque';
9 
-    src: url('../fonts/brandongrotesque-regular-webfont.eot');
10 
-    src: url('../fonts/brandongrotesque-regular-webfont.eot?#iefix') format('embedded-opentype'),
11 
-         url('../fonts/brandongrotesque-regular-webfont.woff') format('woff'),
12 
-         url('../fonts/brandongrotesque-regular-webfont.ttf') format('truetype'),
13 
-         url('../fonts/brandongrotesque-regular-webfont.svg#brandon_grotesque_regularRg') format('svg');
14 
-    font-weight: normal;
15 
-    font-style: normal;
16 
-}
17 
-@font-face {
18 
-    font-family: 'brandon_grotesque';
19 
-    src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot');
20 
-    src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
21 
-         url('../fonts/brandongrotesque-mediumitalic-webfont.woff') format('woff'),
22 
-         url('../fonts/brandongrotesque-mediumitalic-webfont.ttf') format('truetype'),
23 
-         url('../fonts/brandongrotesque-mediumitalic-webfont.svg#brandon_grotesqueMdIt') format('svg');
24 
-    font-weight: 500;
25 
-    font-style: italic;
26 
-}
27 
-@font-face {
28 
-    font-family: 'brandon_grotesque';
29 
-    src: url('../fonts/brandongrotesque-blackitalic-webfont.eot');
30 
-    src: url('../fonts/brandongrotesque-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
31 
-         url('../fonts/brandongrotesque-blackitalic-webfont.woff') format('woff'),
32 
-         url('../fonts/brandongrotesque-blackitalic-webfont.ttf') format('truetype'),
33 
-         url('../fonts/brandongrotesque-blackitalic-webfont.svg#brandon_grotesqueblack_italic') format('svg');
34 
-    font-weight: 700;
35 
-    font-style: italic;
36 
-}
37 
-
38 
-@font-face {
39 
-    font-family: 'brandon_grotesque';
40 
-    src: url('../fonts/brandongrotesque-black-webfont.eot');
41 
-    src: url('../fonts/brandongrotesque-black-webfont.eot?#iefix') format('embedded-opentype'),
42 
-         url('../fonts/brandongrotesque-black-webfont.woff') format('woff'),
43 
-         url('../fonts/brandongrotesque-black-webfont.ttf') format('truetype'),
44 
-         url('../fonts/brandongrotesque-black-webfont.svg#brandon_grotesqueblack') format('svg');
45 
-    font-weight: 700;
46 
-    font-style: normal;
47 
-}
48 
-
49 
-
50 
-
51 
-/////////////////
52 
-// Semantic.gs // for SCSS: http://sass-lang.com/
53 
-/////////////////
54 
-
55 
-// Defaults which you can freely override
56 
-$column-width: 60px;
57 
-$gutter-width: 20px;
58 
-$columns: 12;
59 
-
60 
-// Utility function — you should never need to modify this
61 
-@function gridsystem-width($columns:$columns) {
62 
-	@return ($column-width * $columns) + ($gutter-width * $columns);
63 
-}
64 
-
65 
-// Set $total-width to 100% for a fluid layout
66 
-$total-width: 100%;
67 
-
68 
-// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
69 
-// $min-width: 999999;
70 
-// $correction: 0.5 / $min-width * 100;
71 
-
72 
-// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
73 
-@mixin clearfix() {
74 
-	*zoom:1;
75 
-
76 
-	&:before,
77 
-	&:after {
78 
-	    content:"";
79 
-	    display:table;
80 
-	}
81 
-	&:after {
82 
-	    clear:both;
83 
-	}
84 
-}
85 
-
86 
-
87 
-//////////
88 
-// GRID //
89 
-//////////
90 
-
91 
-body {
92 
-	width: 100%;
93 
-	@include clearfix();
94 
-	background: #FAFAFA;
95 
-	line-height: 1.5em;
96 
-	font-family: 'brandon_grotesque', Helvetica, Arial, sans-serif;
97 
-	color: #666;
98 
-	padding-bottom: 0;
99 
-}
100 
-
101 
-a {
102 
-	color: $yellow;
103 
-	text-decoration: none;
104 
-	&:hover {
105 
-		text-decoration: underline;
106 
-	}
107 
-}
108 
-
109 
-@mixin row($columns:$columns) {
110 
-	display: block;
111 
-	width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
112 
-	margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
113 
-	// *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction;
114 
-	// *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction;
115 
-	@include clearfix();
116 
-}
117 
-@mixin column($x,$columns:$columns) {
118 
-	display: inline;
119 
-	float: left;
120 
-	width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns));
121 
-	margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
122 
-	// *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction;
123 
-	// *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction;
124 
-}
125 
-@mixin push($offset:1) {
126 
-	margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
127 
-}
128 
-@mixin pull($offset:1) {
129 
-	margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
130 
-}
131 
-
132 
-
133 
-/* CSS START */
134 
-
135 
-header {
136 
-	background: #000;
137 
-	width: 100%;
138 
-	line-height: 0;
139 
-	padding: 1em 0;
140 
-	h1 {
141 
-		margin: 0;
142 
-		max-width: 748px;
143 
-		margin: 0 auto;
144 
-		padding: 0 2em;
145 
-		font-size: 1em;
146 
-	}
147 
-	h1 span {
148 
-		font-size: 0em;
149 
-	}
150 
-	img {
151 
-		height: auto;
152 
-		width: 100%;
153 
-		margin: 0 auto;
154 
-		display: block;
155 
-	}
156 
-}
157 
-
158 
-
159 
-
160 
-form, section {
161 
-	max-width: 768px;
162 
-	margin: 0 auto;
163 
-	padding: 1em 2em;
164 
-}
165 
-
166 
-form {
167 
-	padding-top: 0;
168 
-	h2 {
169 
-		text-transform: uppercase;
170 
-		font-weight: bold;
171 
-		letter-spacing: 0.1em;
172 
-		font-style: italic;
173 
-		padding-top: 1em;
174 
-		border-top: 1px solid #EEE;
175 
-		color: #333;
176 
-		font-size: 1.2em;
177 
-		margin-bottom: 0.5em;
178 
-	}
179 
-	fieldset {
180 
-		display: block;
181 
-		@include column(6);
182 
-		border: none;
183 
-		padding: 0;
184 
-		padding-bottom: 1em;
185 
-		label {
186 
-			padding-top: 2em;
187 
-		}
188 
-	}
189 
-	input {
190 
-		border: 1px solid #AAA;
191 
-		padding: 0.5em 2.5%;
192 
-		line-height: 1em;
193 
-		width: 95%;
194 
-		font-size: 0.9em;
195 
-	}
196 
-}
197 
-
198 
-
199 
-label, h3 {
200 
-	text-transform: uppercase;
201 
-	font-weight: bold;
202 
-	display: block;
203 
-	padding: 0.5em 0;
204 
-	padding-top: 1em;
205 
-	font-size: 0.9em;
206 
-	line-height: 1em;
207 
-	color: #555;
208 
-	font-style: italic;
209 
-	letter-spacing: 0.1em;
210 
-}
211 
-
212 
-.popover-content {
213 
-padding: 9px 14px;
214 
-}
215 
-.popover {
216 
-text-align: left;
217 
-white-space: normal;
218 
-}
219 
-.popover.top {
220 
-margin-top: -10px;
221 
-}
222 
-.fade.in {
223 
-opacity: 1;
224 
-}
225 
-span.popovertext {
226 
-cursor:hand;
227 
-cursor: pointer;
228 
-color: #F2C45A;
229 
-}
230 
-.popover {
231 
-text-align: left;
232 
-white-space: normal;
233 
-}
234 
-.popover {
235 
-position: absolute;
236 
-top: 0;
237 
-left: 0;
238 
-z-index: 1010;
239 
-display: none;
240 
-max-width: 276px;
241 
-padding: 1px;
242 
-text-align: left;
243 
-background-color: #fff;
244 
-background-clip: padding-box;
245 
-border: 1px solid #ccc;
246 
-border: 1px solid rgba(0,0,0,0.2);
247 
-border-radius: 6px;
248 
--webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
249 
-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
250 
-white-space: normal;
251 
-}
252 
-.fade {
253 
-opacity: 0;
254 
--webkit-transition: opacity .15s linear;
255 
-transition: opacity .15s linear;
256 
-}
257 
-.popover.top .arrow {
258 
-left: 50%;
259 
-margin-left: -11px;
260 
-border-bottom-width: 0;
261 
-border-top-color: #999;
262 
-border-top-color: rgba(0,0,0,0.25);
263 
-bottom: -11px;
264 
-}
265 
-.popover .arrow {
266 
-border-width: 11px;
267 
-}
268 
-.popover .arrow, .popover .arrow:after {
269 
-position: absolute;
270 
-display: block;
271 
-width: 0;
272 
-height: 0;
273 
-border-color: transparent;
274 
-border-style: solid;
275 
-}
276 
-a:hover {
277 
-text-decoration:none;
278 
-}
279 
-
280 
-	div#content {
281 
-		@include column(7);
282 
-		p {
283 
-			font-weight: bold;
284 
-			text-transform: uppercase;
285 
-			font-size: 0.9em;
286 
-			line-height: 1em;
287 
-		}
288 
-		textarea {
289 
-			-moz-box-shadow: inset 0 1px 2px #000;
290 
-			border: 1px solid #AAA;
291 
-			background: #FFF;
292 
-			padding: 2.5%;
293 
-			height: 500px;
294 
-			display: block;
295 
-			width: 95%;
296 
-		}
297 
-		input#email-checkbox {
298 
-			width: auto;
299 
-			padding: 0;
300 
-			display: inline;
301 
-			margin-right: 0.5em;
302 
-			margin-top: 1em;
303 
-		}
304 
-		label {
305 
-			display: inline;
306 
-			text-transform: none;
307 
-			font-weight: normal;
308 
-			letter-spacing: normal;
309 
-			font-size: 1.1em;
310 
-			font-style: normal;
311 
-		}
312 
-		input.cta-button {
313 
-			padding: 0.5em 0;
314 
-		}
315 
-		#read-more {
316 
-			text-align: center;
317 
-			font-size: 1.25em;
318 
-			font-style: italic;
319 
-			display: block;
320 
-			padding-top: 0;
321 
-			padding-bottom: 0.75em;
322 
-			margin-bottom: 1em;
323 
-			text-align: center;
324 
-			border-bottom: 1px solid #EEE;
325 
-		}
326 
-	}
327 
-
328 
-		.cta-button, input.cta-button {
329 
-			font-weight: bold;
330 
-			display: block;
331 
-			background: $yellow;
332 
-			color: #333;
333 
-			padding: 0.75em 0;
334 
-			letter-spacing: 0.1em;
335 
-			font-size: 1.25em;
336 
-			display: block;
337 
-			font-style: italic;
338 
-			text-align: center;
339 
-			text-decoration: none;
340 
-			text-transform: uppercase;
341 
-			line-height: 1em;
342 
-			margin: 1em 0;
343 
-			width: 100%;
344 
-			border: none;
345 
-			border-bottom: 2px solid #EEE;
346 
-			&:hover {
347 
-				background: #333;
348 
-				color: $yellow;
349 
-			}
350 
-			&:active {
351 
-				background: #111;
352 
-				color: darken($yellow, 10%);
353 
-			}
354 
-		}
355 
-
356 
-
357 
-aside {
358 
-	@include column(5);
359 
-	h3 {
360 
-		padding-bottom: 0.5em;
361 
-		padding-top: 0;
362 
-		margin-bottom: 1.5em;
363 
-		display: inline-block;
364 
-		border-bottom: 2px solid #EEE;
365 
-	}
366 
-	p {
367 
-		margin-top: 0;
368 
-	}
369 
-	ol {
370 
-		display: block;
371 
-		background: #FFF;
372 
-		padding: 0.5em 1.5em;
373 
-		padding-bottom: 1.5em;
374 
-		list-style-type: none;
375 
-		border-bottom: 3px solid #EEE;
376 
-		li {
377 
-			margin-bottom: 1.5em;
378 
-			&:last-child {
379 
-				padding:0;
380 
-				margin: 0;
381 
-				border: 0;
382 
-			}
383 
-			h4 {
384 
-				margin: 0;
385 
-				color: #333;
386 
-			}
387 
-		}
388 
-	}
389 
-
390 
-}
391 
-
392 
-footer {
393 
-	background: #000;
394 
-	width: 100%;
395 
-	padding: 1em 0;
396 
-	clear: both;
397 
-	div {
398 
-		max-width: 768px;
399 
-		padding: 0 2em;
400 
-		margin: 0 auto;
401 
-		@include clearfix;
402 
-		p {
403 
-			float: left;
404 
-			width: 51%;
405 
-			margin: 0;
406 
-			font-size: 0.85em;
407 
-			color: #FFF;
408 
-			line-height: 1.2em;
409 
-		}
410 
-		i {
411 
-			float: right;
412 
-			display: inline-block;
413 
-			vertical-align: middle;
414 
-		}
415 
-	}
416 
-}
417 
-
418 
-/* Call Page */
419 
-.call {
420 
-	div#content {
421 
-		text-align: center;
422 
-		max-width: 600px;
423 
-		width: auto;
424 
-		margin: 0 auto;
425 
-		float: none;
426 
-		display: block;
427 
-		aside {
428 
-			width: auto;
429 
-			display: block;
430 
-			float: none;
431 
-			text-align: left;
432 
-			margin-top: 2em;
433 
-			font-size: 1.1em;
434 
-			p {
435 
-				font-style: normal;
436 
-				&:last-child {
437 
-					margin-bottom:0;
438 
-				}
439 
-			}
440 
-		}
441 
-		h2 {
442 
-			font-weight: normal;
443 
-			line-height: 1.25em;
444 
-			font-size: 1.25em;
445 
-		}
446 
-		img {
447 
-			margin-top: 1em;
448 
-		}
449 
-		a.cta-button {
450 
-			padding-left: 0;
451 
-			padding-right: 0;
452 
-			width: 98%;
453 
-			margin: 0 auto;
454 
-		}
455 
-		p {
456 
-			line-height: 1.5em;
457 
-			text-transform: none;
458 
-			font-weight: normal;
459 
-			font-style: italic;
460 
-			font-size: 1.05em;
461 
-			color: #777;
462 
-			a {
463 
-				white-space: nowrap;
464 
-				text-shadow: 0 1px 3px #FFF;
465 
-			}
466 
-		}
467 
-		ul#bill-details {
468 
-			text-align: left;
469 
-			padding: 0 1em;
470 
-			list-style-type: none;
471 
-			li {
472 
-				margin-bottom: 1em;
473 
-				padding-bottom: 1em;
474 
-				border-bottom: 1px solid #DDD;
475 
-			}
476 
-			&.invisible {
477 
-				display: none;
478 
-			}
479 
-		}
480 
-	}
481 
-	footer a {
482 
-		opacity: 0.6;
483 
-		transition: all 0.2s ease-in-out;
484 
-		&.tdwfb {
485 
-			opacity: 1;
486 
-		}
487 
-		img {
488 
-			height: auto;
489 
-			vertical-align: middle;
490 
-			width: 171px;
491 
-			&.twilio-privacy {
492 
-				width: 114px;
493 
-			}
494 
-		}
495 
-
496 
-		&:hover {
497 
-			opacity: 0.9;
498 
-		}
499 
-	}
500 
-
501 
-}
502 
-
503 
-/* Thank You page */
504 
-
505 
-.thank-you {
506 
-	background: #000;
507 
-	color: #EEE;
508 
-	text-align: center;
509 
-	font-size: 0.95em;
510 
-	line-height: 1.5em;
511 
-	padding-bottom: 1em;
512 
-	header {
513 
-		padding-bottom: 0;
514 
-		h1 {
515 
-			padding: 2em;
516 
-			padding-bottom: 0;
517 
-			max-width: 400px;
518 
-		}
519 
-	}
520 
-	form {
521 
-		padding: 0 2em;
522 
-		max-width: 400px;
523 
-	}
524 
-	input {
525 
-		margin: 0;
526 
-		width: 92%;
527 
-		padding: 1em 4%;
528 
-		border: none;
529 
-		line-height: normal;
530 
-		color: #333;
531 
-		&#submit {
532 
-			padding: 0.8em 0;
533 
-			width: 100%;
534 
-			border: none;
535 
-			margin-top: 0.15em;
536 
-			margin-bottom: 1em;
537 
-			font-size: 1em;
538 
-			box-shadow: none;
539 
-		}
540 
-	}
541 
-	section {
542 
-		max-width: 600px;
543 
-		padding-top: 0;
544 
-		p {
545 
-			font-size: 1.2em;
546 
-			span {
547 
-				display: block;
548 
-			}
549 
-		}
550 
-		.twilio-container {
551 
-			font-size: 0.8em;
552 
-			img {
553 
-				vertical-align: middle;
554 
-			}
555 
-		}
556 
-	}
557 
-	footer {
558 
-		background: #222;
559 
-	}
560 
-	h2 {
561 
-		text-transform: uppercase;
562 
-		padding-top: 1.5em;
563 
-		margin-top: 1.5em;
564 
-		font-size: 1.2em;
565 
-		border-top: 1px solid #333;
566 
-	}
567 
-	#also-call {
568 
-		h2 {
569 
-			padding: 0;
570 
-			margin-top: 1.5em;
571 
-			font-size: 1.5em;
572 
-			border: none;
573 
-		}
574 
-
575 
-		.twilio-container a {
576 
-			opacity: 0.6;
577 
-			transition: all 0.2s ease-in-out;
578 
-			img {
579 
-				height: auto;
580 
-				vertical-align: middle;
581 
-				width: 171px;
582 
-				&.twilio-privacy {
583 
-					width: 114px;
584 
-				}
585 
-			}
586 
-			&:hover {
587 
-				opacity: 0.9;
588 
-			}
589 
-		}
590 
-	}
591 
-	a.cta-button {
592 
-		display: inline-block;
593 
-		width: auto;
594 
-		border: none;
595 
-		font-size: 0.9em;
596 
-		padding: 0.8em 2em;
597 
-		margin: 0;
598 
-	}
599 
-	i.i-logo {
600 
-		margin-top: 1.5em;
601 
-	}
602 
-	#social {
603 
-		padding-top: 2em;
604 
-		margin-bottom: 1em;
605 
-		text-align: center;
606 
-		@include clearfix;
607 
-		a {
608 
-			@include column(4);
609 
-		    display: inline-block;
610 
-		    position: relative;
611 
-		    margin: 0 auto;
612 
-		    transition: 0.2s ease-in-out all;
613 
-		    opacity: 0.8;
614 
-		    &:hover {
615 
-		    	opacity:0.95;
616 
-		    }
617 
-		}
618 
-		.social-count:after {
619 
-		    background: #FFF;
620 
-		    text-transform: uppercase;
621 
-		    font-style: italic;
622 
-		    font-weight: bold;
623 
-		    border-radius: 1px;
624 
-		    top: -33px;
625 
-		    color: #333;
626 
-		    content: attr(count);
627 
-		    display: block;
628 
-		    left: 50%;
629 
-		    margin-left: -32px;
630 
-		    width: 54px;
631 
-		    padding: 5px;
632 
-		    line-height: 1em;
633 
-		    text-align: center;
634 
-		    position: absolute;
635 
-		    white-space: nowrap;
636 
-		}
637 
-		.social-count:before {
638 
-		    border: solid;
639 
-		    border: 1px solid $yellow;
640 
-		    border-color: #111 transparent;
641 
-		    border-color:$yellow transparent;
642 
-		    border-width: .2em .2em 0 .2em;
643 
-		    top: -8px;
644 
-		    content: "";
645 
-		    display: block;
646 
-		    left: 50%;
647 
-		    margin-left: -.2em;
648 
-		    position: absolute;
649 
-		}
650 
-		.sicon {
651 
-		    width: 54px;
652 
-		    height: 54px;
653 
-		    margin: 0 auto;
654 
-		    position: relative;
655 
-		    background-color: black;
656 
-		    background-image: url('../imgs/social-icons.png');
657 
-		}
658 
-
659 
-		#sfb {
660 
-		    background-position: 66.6666% 0;
661 
-		}
662 
-		#stwit {
663 
-		    background-position: 33.3333% 0;
664 
-		}
665 
-		#sgplus {
666 
-		    background-position: 0% 0;
667 
-		}
668 
-	}
669 
-
670 
-}
671 
-
672 
-/* =====================================*/
673 
-/* CSS Sprite */
674 
-/* =====================================*/
675 
-
676 
-
677 
-.i {
678 
-    background-image: url('../imgs/image.png');
679 
-    background-repeat: no-repeat;
680 
-    display: block;
681 
-    margin: 0 auto;
682 
-}
683 
-
684 
-.i-email {
685 
-    width: 172px;
686 
-    height: 19px;
687 
-    background-position: -1px -25px;
688 
-    margin-top:13px;
689 
-}
690 
-
691 
-.i-call {
692 
-    width: 144px;
693 
-    height: 22px;
694 
-    background-position: -1px -1px;
695 
-    margin-top:30px;
696 
-}
697 
-
698 
-.i-logo {
699 
-    width: 279px;
700 
-    height: 30px;
701 
-    background-position: -1px -46px;
702 
-}
703 
-
704 
-/* =====================================*/
705 
-/* Media Queries */
706 
-/* =====================================*/
707 
-
708 
-@media screen and (max-width: 600px) {
709 
-	body {
710 
-		font-size: 0.9em;
711 
-		padding: 0;
712 
-	}
713 
-	footer {
714 
-		position: static;
715 
-		text-align: center;
716 
-		font-size: 0.9em;
717 
-		margin-top: 2em;
718 
-		div {
719 
-			p {
720 
-				float: none;
721 
-				width: auto;
722 
-				margin-bottom: 1em;
723 
-				}
724 
-			i {
725 
-				float: none;
726 
-				margin: 0 auto;
727 
-			}
728 
-		}
729 
-	}
730 
-
731 
-
732 
-	form {
733 
-		padding-bottom: 2em;
734 
-		}
735 
-		aside {
736 
-			display: none;
737 
-		}
738 
-
739 
-		div#content, div#content h2, .call aside {
740 
-			width: auto;
741 
-			float: none;
742 
-			margin: 0;
743 
-			display: block;
744 
-		}
745 
-		.call div#content img {
746 
-			margin-bottom: 1em;
747 
-		}
748 
-		h2 {
749 
-			clear: both;
750 
-			display: block;
751 
-		}
752 
-
753 
-}
754 
-@media screen and (max-width: 400px) {
755 
-	form {
756 
-		fieldset {
757 
-			float: none;
758 
-			width: auto;
759 
-			margin: 0;
760 
-			display: block;
761 
-		}
762 
-	}
763 
-}
764 
-
765 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
766 
-    .thank-you input {
767 
-    	padding-top: 1.2em;
768 
-    }
769 
-    .thank-you a.cta-button,.thank-you input#submit {
770 
-        padding-top: 1em;
771 
-    }
772 
-    form input, div#content input.cta-button {
773 
-    	padding-top: 0.8em;
774 
-    }
775 
-    .cta-button, input.cta-button {
776 
-    	padding-top: 0.95em;
777 
-    }
778 
-}
779 0 
\ No newline at end of file
Browse code

iAttempt at adding the rule-41 page

Sebastian Hahn authored on 19/06/2016 14:24:21
Showing 1 changed files
rule-41/sass/call-email-tool.scss
History View file @ 79f570efd
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,778 @@
1 
+$yellow: #F2C45A;
2 
+
3 
+/* normalise.css v3 */
4 
+
5 
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}
6 
+
7 
+@font-face {
8 
+    font-family: 'brandon_grotesque';
9 
+    src: url('../fonts/brandongrotesque-regular-webfont.eot');
10 
+    src: url('../fonts/brandongrotesque-regular-webfont.eot?#iefix') format('embedded-opentype'),
11 
+         url('../fonts/brandongrotesque-regular-webfont.woff') format('woff'),
12 
+         url('../fonts/brandongrotesque-regular-webfont.ttf') format('truetype'),
13 
+         url('../fonts/brandongrotesque-regular-webfont.svg#brandon_grotesque_regularRg') format('svg');
14 
+    font-weight: normal;
15 
+    font-style: normal;
16 
+}
17 
+@font-face {
18 
+    font-family: 'brandon_grotesque';
19 
+    src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot');
20 
+    src: url('../fonts/brandongrotesque-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
21 
+         url('../fonts/brandongrotesque-mediumitalic-webfont.woff') format('woff'),
22 
+         url('../fonts/brandongrotesque-mediumitalic-webfont.ttf') format('truetype'),
23 
+         url('../fonts/brandongrotesque-mediumitalic-webfont.svg#brandon_grotesqueMdIt') format('svg');
24 
+    font-weight: 500;
25 
+    font-style: italic;
26 
+}
27 
+@font-face {
28 
+    font-family: 'brandon_grotesque';
29 
+    src: url('../fonts/brandongrotesque-blackitalic-webfont.eot');
30 
+    src: url('../fonts/brandongrotesque-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
31 
+         url('../fonts/brandongrotesque-blackitalic-webfont.woff') format('woff'),
32 
+         url('../fonts/brandongrotesque-blackitalic-webfont.ttf') format('truetype'),
33 
+         url('../fonts/brandongrotesque-blackitalic-webfont.svg#brandon_grotesqueblack_italic') format('svg');
34 
+    font-weight: 700;
35 
+    font-style: italic;
36 
+}
37 
+
38 
+@font-face {
39 
+    font-family: 'brandon_grotesque';
40 
+    src: url('../fonts/brandongrotesque-black-webfont.eot');
41 
+    src: url('../fonts/brandongrotesque-black-webfont.eot?#iefix') format('embedded-opentype'),
42 
+         url('../fonts/brandongrotesque-black-webfont.woff') format('woff'),
43 
+         url('../fonts/brandongrotesque-black-webfont.ttf') format('truetype'),
44 
+         url('../fonts/brandongrotesque-black-webfont.svg#brandon_grotesqueblack') format('svg');
45 
+    font-weight: 700;
46 
+    font-style: normal;
47 
+}
48 
+
49 
+
50 
+
51 
+/////////////////
52 
+// Semantic.gs // for SCSS: http://sass-lang.com/
53 
+/////////////////
54 
+
55 
+// Defaults which you can freely override
56 
+$column-width: 60px;
57 
+$gutter-width: 20px;
58 
+$columns: 12;
59 
+
60 
+// Utility function — you should never need to modify this
61 
+@function gridsystem-width($columns:$columns) {
62 
+	@return ($column-width * $columns) + ($gutter-width * $columns);
63 
+}
64 
+
65 
+// Set $total-width to 100% for a fluid layout
66 
+$total-width: 100%;
67 
+
68 
+// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
69 
+// $min-width: 999999;
70 
+// $correction: 0.5 / $min-width * 100;
71 
+
72 
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
73 
+@mixin clearfix() {
74 
+	*zoom:1;
75 
+
76 
+	&:before,
77 
+	&:after {
78 
+	    content:"";
79 
+	    display:table;
80 
+	}
81 
+	&:after {
82 
+	    clear:both;
83 
+	}
84 
+}
85 
+
86 
+
87 
+//////////
88 
+// GRID //
89 
+//////////
90 
+
91 
+body {
92 
+	width: 100%;
93 
+	@include clearfix();
94 
+	background: #FAFAFA;
95 
+	line-height: 1.5em;
96 
+	font-family: 'brandon_grotesque', Helvetica, Arial, sans-serif;
97 
+	color: #666;
98 
+	padding-bottom: 0;
99 
+}
100 
+
101 
+a {
102 
+	color: $yellow;
103 
+	text-decoration: none;
104 
+	&:hover {
105 
+		text-decoration: underline;
106 
+	}
107 
+}
108 
+
109 
+@mixin row($columns:$columns) {
110 
+	display: block;
111 
+	width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
112 
+	margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
113 
+	// *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction;
114 
+	// *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction;
115 
+	@include clearfix();
116 
+}
117 
+@mixin column($x,$columns:$columns) {
118 
+	display: inline;
119 
+	float: left;
120 
+	width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns));
121 
+	margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
122 
+	// *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction;
123 
+	// *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction;
124