├── src
    ├── assets
    │   └── .placeholder
    ├── data
    │   ├── .placeholder
    │   ├── graphic.csv
    │   └── pct_change_distribution.csv
    ├── js
    │   ├── config.js
    │   ├── detectFeatures.js
    │   ├── utils.js
    │   ├── share.js
    │   ├── fm.js
    │   └── thing.js
    ├── jade
    │   ├── thing.jade
    │   ├── includes
    │   │   └── share.jade
    │   └── index.jade
    └── styl
    │   ├── qz
    │       ├── buttons.styl
    │       ├── share.styl
    │       ├── colors.styl
    │       ├── dropdowns.styl
    │       ├── icons.styl
    │       ├── chart-elements.styl
    │       └── type.styl
    │   ├── main.styl
    │   ├── layout.styl
    │   ├── thing.styl
    │   ├── responsive.styl
    │   └── normalize.styl
├── README.md
├── .gitignore
├── gulp
    ├── cli.js
    ├── utils.js
    └── config.js
├── content.json
├── package.json
├── __build.sh
└── gulpfile.js


/src/assets/.placeholder:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/data/.placeholder:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # county-wages-distribution
2 | 
3 | 
4 | 


--------------------------------------------------------------------------------
/src/js/config.js:
--------------------------------------------------------------------------------
1 | var ENV = '/* @echo ENV */';
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | build
3 | !node_modules/stylus-normalize
4 | .DS_Store
5 | .tmp
6 | 


--------------------------------------------------------------------------------
/src/data/graphic.csv:
--------------------------------------------------------------------------------
 1 | year,value
 2 | 2005,1
 3 | 2006,3
 4 | 2007,5
 5 | 2008,6
 6 | 2009,4
 7 | 2010,5
 8 | 2011,6
 9 | 2012,7
10 | 2013,8
11 | 2014,6
12 | 2015,3
13 | 


--------------------------------------------------------------------------------
/src/data/pct_change_distribution.csv:
--------------------------------------------------------------------------------
 1 | pct_change,count
 2 | -15,10
 3 | -10,27
 4 | -5,49
 5 | 0,109
 6 | 5,206
 7 | 10,381
 8 | 15,442
 9 | 20,478
10 | 25,366
11 | 30,331
12 | 35,200
13 | 40,152
14 | 45,96
15 | 50,57
16 | 55,58
17 | 60,39
18 | 65,26
19 | 70,8
20 | 75,19
21 | 80,7
22 | 


--------------------------------------------------------------------------------
/gulp/cli.js:
--------------------------------------------------------------------------------
 1 | var opts = require('nomnom')
 2 | 	.option('build', {
 3 | 		abbr: 'b',
 4 | 		help: 'Build project. [local | move | commit | push]',
 5 | 		choices: ['local', 'move', 'commit', 'push']
 6 | 	})
 7 | 	.option('dont-minify', {
 8 | 		abbr: 'd',
 9 | 		flag: true,
10 | 		help: 'Prevent build from minifying your js'
11 | 	});
12 | 
13 | module.exports = opts;
14 | 


--------------------------------------------------------------------------------
/src/jade/thing.jade:
--------------------------------------------------------------------------------
 1 | h2 Distribution of US counties by real growth of income from employment, 1990 to 2015
 2 | 
 3 | div#graphic
 4 | 
 5 | div.footer.clearfix
 6 |     div.brand Quartz | qz.com
 7 |     div.source Data: <a href="https://www.bls.gov/cew/">US Bureau of Labor Statistics</a>. <span class="nowrap">Extreme outliers have been excluded.</span> <span class="nowrap">(Less than 2.5% of counties.)</span>
 8 |     
 9 | p.break &nbsp;
10 | 


--------------------------------------------------------------------------------
/src/jade/includes/share.jade:
--------------------------------------------------------------------------------
 1 | ul.share-buttons
 2 | 	li.share-icon.twitter
 3 | 		a(title='Tweet' class='share-action icon icon-twitter' target='_blank')
 4 | 	li.share-icon.facebook
 5 | 		a(title='Share on Facebook' class='share-action icon icon-facebook' target='_blank')
 6 | 	li.share-icon.linkedin
 7 | 		a(title='Share on LinkedIn' class='share-action icon icon-linkedin' target='_blank')
 8 | 	li.share-icon.email
 9 | 		a(title='Email' class='share-action icon icon-email' target='_blank')
10 | 


--------------------------------------------------------------------------------
/src/styl/qz/buttons.styl:
--------------------------------------------------------------------------------
 1 | qz-button-group()
 2 | 	text-align center
 3 | 	button
 4 | 		color white
 5 | 		border none
 6 | 		background-color $qz-gray-1
 7 | 		font-family $qz-sans
 8 | 		border-radius 3px
 9 | 		margin 2px 4px 2px 0
10 | 		vertical-align middle
11 | 		padding 0px 8px
12 | 		line-height 2em
13 | 		display inline-block
14 | 		&.active
15 | 			//font-family $qz-sans-bold
16 | 			background-color $qz-purp-2
17 | 			transition background-color 0.2s linear
18 | 		&:focus
19 | 			outline 0
20 | 


--------------------------------------------------------------------------------
/gulp/utils.js:
--------------------------------------------------------------------------------
 1 | function generateShellCmd (buildArg, qzdataPath, thingName) {
 2 | 	var baseCmd = "./__build.sh " + qzdataPath + " " + thingName + " "; // then commit? push?
 3 | 
 4 | 	switch (buildArg) {
 5 | 		case "move":
 6 | 			return baseCmd + "false false";
 7 | 		case "commit":
 8 | 			return baseCmd + "true false";
 9 | 		case "push":
10 | 			return baseCmd + "true true";
11 | 		default:
12 | 			return 'echo ""';
13 | 	}
14 | }
15 | 
16 | module.exports = {
17 | 	generateShellCmd: generateShellCmd
18 | };
19 | 


--------------------------------------------------------------------------------
/src/js/detectFeatures.js:
--------------------------------------------------------------------------------
 1 | module.exports = function () {
 2 | 	var features = {};
 3 | 
 4 | 	features.hasDeviceMotion = 'ondevicemotion' in window;
 5 | 	features.isAndroid = (/android/gi).test(navigator.appVersion);
 6 | 	features.isIDevice = (/iphone|ipad/gi).test(navigator.appVersion);
 7 | 	features.isTouchPad = (/hp-tablet/gi).test(navigator.appVersion);
 8 | 	features.isKindle = (/silk/gi).test(navigator.appVersion);
 9 | 	features.hasTouchEvents = (
10 | 		features.isAndroid ||
11 | 		features.isIDevice ||
12 | 		features.isTouchPad ||
13 | 		features.isKindle
14 | 	);
15 | 
16 | 	return features;
17 | };
18 | 


--------------------------------------------------------------------------------
/src/styl/main.styl:
--------------------------------------------------------------------------------
 1 | // Normalize -- https://github.com/bymathias/normalize.styl
 2 | @import 'normalize'
 3 | 
 4 | // nib -- http://visionmedia.github.io/nib/
 5 | @import 'nib'
 6 | 
 7 | // Qz modules. Comment out the things you don't need.
 8 | @import 'qz/type'
 9 | @import 'qz/colors'
10 | 
11 | // Optional components. Uncomment if you need them. See wiki for usage info
12 | // note: `share` depends on `icons`
13 | //@import 'qz/icons'
14 | //@import 'qz/share'
15 | //@import 'qz/dropdowns'
16 | //@import 'qz/buttons'
17 | //@import 'qz/chart-elements'
18 | 
19 | // Thing-specific css
20 | @import 'responsive'
21 | @import 'layout'
22 | @import 'thing'
23 | 


--------------------------------------------------------------------------------
/content.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"hed": "This Quartz Thing has not connected to a Google Doc",
 3 | 	"dek": "Perhaps you forgot to start the server? Make viewable to anyone with the link?",
 4 | 	"items": [{
 5 | 		"copy": "Ut enim ad minim veniam, <a href=\"https://qz.com/re/quartzthings\">quis nostrud exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat."
 6 | 	}, {
 7 | 		"copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
 8 | 	}, {
 9 | 		"copy": "Excepteur sint occaecat cupidatat non proident, <a href=\"https://qz.com\">sunt in culpa</a> qui officia deserunt mollit anim id est laborum"
10 | 	}]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/styl/qz/share.styl:
--------------------------------------------------------------------------------
 1 | // Icon-related colors
 2 | $color-twitter = #00aced
 3 | $color-facebook = #3b5998
 4 | $color-linkedin = #007bb6
 5 | $color-email = #0096b6
 6 | $color-icon-hover = #c3c5c0
 7 | 
 8 | ul.share-buttons
 9 | 	list-style-type none
10 | 	margin 0
11 | 	padding 0
12 | 
13 | li.share-icon
14 | 	display inline-block
15 | 	font-size 1.2em
16 | 	a
17 | 		text-decoration none
18 | 		cursor pointer
19 | 
20 | .icon-email
21 | 	color $color-email
22 | 	&:hover
23 | 		color $color-icon-hover
24 | 
25 | .icon-facebook
26 | 	color $color-facebook
27 | 	&:hover
28 | 		color $color-icon-hover
29 | 
30 | .icon-linkedin
31 | 	color $color-linkedin
32 | 	&:hover
33 | 		color $color-icon-hover
34 | 
35 | .icon-twitter
36 | 	color $color-twitter
37 | 	&:hover
38 | 		color $color-icon-hover
39 | 


--------------------------------------------------------------------------------
/src/styl/layout.styl:
--------------------------------------------------------------------------------
 1 | // Page layout setup
 2 | 
 3 | html, body
 4 | 	min-width 270px
 5 | 	font-family $qz-font-body
 6 | 	color $qz-body-black
 7 | 	background-color $qz-background-gray
 8 | 
 9 | h1, h2, h4, h5
10 | 	font-family $qz-sans-bold
11 | 	color $qz-header-black
12 | 
13 | h1
14 | 	line-height 50px
15 | 	margin-bottom 10px
16 | 
17 | h2
18 | 	font-size 24px
19 | 	line-height 24px
20 | 	font-style bold
21 | 	margin 40px 0px
22 | 
23 | h3
24 | 	font-size 20px
25 | 	font-family $qz-serif
26 | 	color: $qz-header-black
27 | 	font-weight: bold;
28 | 
29 | p
30 | 	position relative
31 | 	margin 0 0 0 0
32 | 	padding 16px 0 16px 0
33 | 	line-height 1.6
34 | 	color #4c4c4c
35 | 
36 | .item-body
37 | 	margin 0 auto
38 | 	//max-width 940px
39 | 
40 | #interactive-content
41 | 	width 100%
42 | 	margin-left auto
43 | 	margin-right auto
44 | 


--------------------------------------------------------------------------------
/src/jade/index.jade:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | html
 3 | 	head
 4 | 		meta(charset='utf-8')
 5 | 		meta(http-equiv='X-UA-Compatible', content='IE=edge')
 6 | 		title county-wages-distribution
 7 | 		meta(name='description', content='')
 8 | 		meta(name='viewport', content='width=device-width, initial-scale=1')
 9 | 		link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic")
10 | 		link(rel='stylesheet', href='css/main.css')
11 | 		script(src='https://app.qz.com/js/frameMessager/min/frameMessager.min.js')
12 | 
13 | 	body
14 | 		div.item-body
15 | 			div#interactive-content
16 | 				include thing.jade
17 | 		script(src='//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js')
18 | 		script window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')
19 | 		script(src='js/config.js')
20 | 		script(src='js/thing.js')
21 | 


--------------------------------------------------------------------------------
/src/styl/thing.styl:
--------------------------------------------------------------------------------
 1 | @import 'qz/chart-elements'
 2 | 
 3 | .item-body h2
 4 | 	margin-bottom 20px
 5 | 
 6 | .y.grid line
 7 | 	fill none
 8 | 	stroke $qz-chart-gridline
 9 | 	stroke-width 1px
10 | 	shape-rendering crispEdges
11 | 
12 | .bars rect
13 | 	fill: $qz-blue-1
14 | 
15 | .x.axis
16 | 	.tick.zero text
17 | 		stroke $qz-gray-3
18 | 
19 | .y.grid
20 | 	line.zero
21 | 		stroke $qz-gray-3
22 | 
23 | .footer
24 | 	font-family $qz-sans
25 | 	color $qz-gray-2
26 | 	width 100%
27 | 	padding 10px 0 0 0
28 | 	font-size 14px
29 | 
30 | 	.brand
31 | 		width 30%
32 | 		float left
33 | 		text-align left
34 | 
35 | 	.source
36 | 		width 70%
37 | 		float left
38 | 		text-align right
39 | 
40 | 	.nowrap
41 | 		white-space: nowrap;
42 | 
43 | @media screen and (max-width: 600px)
44 | 	.item-body h2:first-child
45 | 		margin-bottom 20px
46 | 
47 | 	.x.axis
48 | 		.tick text
49 | 			font-size 12px
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "county-wages-distribution",
 3 | 	"version": "0.0.1",
 4 | 	"description": "",
 5 | 	"main": "index.js",
 6 | 	"scripts": {
 7 | 		"test": "echo \"Error: no test specified\" && exit 1"
 8 | 	},
 9 | 	"author": "Quartz",
10 | 	"license": "ISC",
11 | 	"repository": {
12 | 		"type": "git",
13 | 		"url": ""
14 | 	},
15 | 	"dependencies": {},
16 | 	"devDependencies": {
17 | 		"archieml": "^0.3.1",
18 | 		"browser-sync": "^2.9.11",
19 | 		"browserify": "^12.0.1",
20 | 		"d3": "^3.5.6",
21 | 		"d3-geo-projection": "^1.0.3",
22 | 		"d3-request": "^0.4.7",
23 | 		"del": "^2.0.2",
24 | 		"gulp": "^3.6.2",
25 | 		"gulp-changed": "^1.3.0",
26 | 		"gulp-jade": "^1.1.0",
27 | 		"gulp-preprocess": "^1.2.0",
28 | 		"gulp-shell": "^0.2.5",
29 | 		"gulp-stylus": "^2.1.0",
30 | 		"nib": "^1.0.2",
31 | 		"nomnom": "^1.8.0",
32 | 		"request": "^2.65.0",
33 | 		"topojson": "1.6.27",
34 | 		"uglifyify": "^3.0.1",
35 | 		"vinyl-source-stream": "^1.1.0"
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/__build.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | CURR_COMMIT=$(git log --oneline -n 1)
 3 | 
 4 | printf '%s\n' "Copying built files to master repo"
 5 | printf '%s\n' -------------------------
 6 | rsync -rtvu --delete ./build/* $1
 7 | 
 8 | cd $1
 9 | QZDATA_BRANCH=$(git rev-parse --abbrev-ref HEAD)
10 | 
11 | if [[ "$3" = true ]]; then
12 | 	printf '%s\n' "Committing ${CURR_COMMIT} to origin:${QZDATA_BRANCH}"
13 | 	printf '%s\n' -------------------------
14 | 	git add .
15 | 	git commit -m "built: ${2} | ${CURR_COMMIT}"
16 | fi
17 | 
18 | if [[ "$4" = true ]]; then
19 | 	printf '%s\n' "Executing dry run of git push to origin:${QZDATA_BRANCH}"
20 | 	printf '%s\n' -------------------------
21 | 	echo `git push  --dry-run origin ${QZDATA_BRANCH}`
22 | 	printf '%s\n' "That was a dry run to origin:${QZDATA_BRANCH}. Actually push? (y/n)"
23 | 	 read cont </dev/tty
24 | 	if [[ "$cont" != "y" ]]; then
25 | 	  exit
26 | 	fi
27 | 	 printf '%s\n' "Pushing to origin:${QZDATA_BRANCH}"
28 | 	printf '%s\n' -------------------------
29 | 	git push origin ${QZDATA_BRANCH}
30 | 	exit
31 | fi
32 | 


--------------------------------------------------------------------------------
/gulp/config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | 
 3 | var dirs = {
 4 | 	build: './build',
 5 | 	tmp: './.tmp',
 6 | 	src: './src'
 7 | };
 8 | 
 9 | var paths = {
10 | 	src: {
11 | 		data: dirs.src + '/data',
12 | 		img: dirs.src + '/img',
13 | 		jade: dirs.src + '/jade',
14 | 		js: dirs.src + '/js',
15 | 		styl: dirs.src + '/styl',
16 | 		assets: dirs.src + '/assets',
17 | 		fonts: dirs.src + '/fonts'
18 | 	},
19 | 	tmp: {
20 | 		css: dirs.tmp + '/css',
21 | 		data: dirs.tmp + '/data',
22 | 		img: dirs.tmp + '/img',
23 | 		jade: dirs.tmp + '/jade',
24 | 		js: dirs.tmp + '/js',
25 | 		styl: dirs.tmp + '/styl'
26 | 	},
27 | 	build: {
28 | 		css: dirs.build + '/css',
29 | 		data: dirs.build + '/data',
30 | 		img: dirs.build + '/img',
31 | 		jade: dirs.build + '/jade',
32 | 		js: dirs.build + '/js',
33 | 		assets: dirs.build + '/assets',
34 | 		fonts: dirs.build + '/fonts'
35 | 	}
36 | };
37 | 
38 | var server = {
39 | 	port: '8080',
40 | 	root: path.resolve('./'),
41 | };
42 | 
43 | module.exports = {
44 | 	dirs: dirs,
45 | 	paths: paths,
46 | 	server: server
47 | };
48 | 


--------------------------------------------------------------------------------
/src/styl/qz/colors.styl:
--------------------------------------------------------------------------------
 1 | // Quartz color schemes
 2 | // NOTE: higher number = darker
 3 | // Color ramps are at http://data.qz.com/colors
 4 | 
 5 | // Text
 6 | $qz-header-black = #333333
 7 | $qz-body-black = #4C4C4C
 8 | $qz-body-link-blue = #168dd9
 9 | $qz-background-gray = #f9f9f9
10 | 
11 | // Blues
12 | $qz-blue-1 = #51b2e5
13 | $qz-blue-2 = #168dd9
14 | $qz-blue-3 = #00609f
15 | $qz-blue-4 = #154866
16 | 
17 | // Purples
18 | $qz-purp-1 = #d190b6
19 | $qz-purp-2 = #d365ba
20 | $qz-purp-3 = #ab5787
21 | $qz-purp-4 = #703c5c
22 | 
23 | // Grays
24 | $qz-gray-1 = #c4c4c4
25 | $qz-gray-2 = #969696
26 | $qz-gray-3 = #666666
27 | 
28 | // Other data colors
29 | $qz-ora-1 = #E5A451
30 | $qz-ora-2 = #9F5C00
31 | $qz-gre-1 = #94D365
32 | $qz-gre-2 = #3C703C
33 | 
34 | // Map colors
35 | $qz-map-land-fill = #E4E4E4
36 | $qz-map-land-stroke = #FFFFFF
37 | $qz-map-graticule = #EEEEEE
38 | $qz-map-water = $qz-background-gray
39 | $qz-map-water-highlight = #d9ebf6
40 | $qz-map-highlight = $qz-purp-2
41 | 
42 | // Chart colors
43 | $qz-chart-gridline = #EEEEEE
44 | $qz-chart-meta = #CCCCCC
45 | $qz-chart-axis-text = #9C9C9C
46 | $qz-chart-title-text = #333333
47 | $qz-chart-zeroline = #A8A8A8
48 | 
49 | // Misc
50 | $qz-error = #c25250
51 | $qz-success = #1e866c
52 | $color-debug = #ff8080
53 | 


--------------------------------------------------------------------------------
/src/styl/qz/dropdowns.styl:
--------------------------------------------------------------------------------
 1 | qz-dropdown()
 2 | 	text-align center
 3 | 	line-height 1
 4 | 	font-family $qz-serif
 5 | 	margin-top 10px
 6 | 	position relative
 7 | 	height 1em
 8 | 	select
 9 | 		-webkit-appearance none
10 | 		-moz-appearance none
11 | 		-ms-appearance none
12 | 		text-indent 0.01px
13 | 		text-overflow ''
14 | 		appearance none
15 | 		outline none
16 | 		border 0
17 | 		border-bottom 1px dashed $qz-gray-3
18 | 		border-radius 0
19 | 		height 1em
20 | 		position relative
21 | 		min-width 9em
22 | 		top 0
23 | 		left 0
24 | 		opacity 1
25 | 		cursor pointer
26 | 		display inline-block
27 | 		*background-image:none; /* turn bg image for IE7 */
28 | 		background url('../assets/selecticon.gif') no-repeat 100% 0px
29 | 		background-position right center
30 | 		padding 0 2px
31 | 		box-sizing:content-box;
32 | 		-ms-box-sizing:content-box;
33 | 		-moz-box-sizing:content-box;
34 | 		-webkit-box-sizing:content-box;
35 | 		font-family $qz-sans-bold
36 | 		font-weight bold
37 | 
38 | 	// for ie 10/11
39 | 	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
40 | 		select
41 | 			text-indent 0
42 | 			text-overflow clip
43 | 			-ms-appearance normal
44 | 			appearance normal
45 | 			outline initial
46 | 			border initial
47 | 			border-bottom none
48 | 			max-width initial
49 | 			border-radius initial
50 | 			height initial
51 | 			position initial
52 | 			top initial
53 | 			left initial
54 | 			opacity 1
55 | 			cursor initial
56 | 			display initial
57 | 			*background-image none
58 | 			background: none
59 | 			color initial
60 | 			background-position initial
61 | 			padding initial
62 | 			box-sizing initial
63 | 			-ms-box-sizing initial
64 | 			font-size 15px
65 | 			font-weight initial
66 | 


--------------------------------------------------------------------------------
/src/styl/qz/icons.styl:
--------------------------------------------------------------------------------
 1 | .icon
 2 | 	font-family 'QZIcons'
 3 | 	speak none
 4 | 	font-style normal
 5 | 	font-weight normal
 6 | 	font-variant normal
 7 | 	text-transform none
 8 | 	line-height 1
 9 | 	-webkit-font-smoothing antialiased
10 | 	-moz-osx-font-smoothing grayscale
11 | 
12 | .icon-expand-arrow:before
13 | 	content "\e607"
14 | 
15 | .icon-instagram:before
16 | 	content "\e612"
17 | 
18 | .icon-link:before
19 | 	content "\e61b"
20 | 
21 | .icon-share:before
22 | 	content "\e61c"
23 | 
24 | .icon-reply-arrow:before
25 | 	content "\e618"
26 | 
27 | .icon-star:before
28 | 	content "\e619"
29 | 
30 | .icon-www:before
31 | 	content "\e61a"
32 | 
33 | .icon-left-arrow:before
34 | 	content "\e617"
35 | 
36 | .icon-annotations-rollover:before
37 | 	content "\e600"
38 | 
39 | .icon-annotations:before
40 | 	content "\e601"
41 | 
42 | .icon-camera:before
43 | 	content "\e602"
44 | 
45 | .icon-close:before
46 | 	content "\e603"
47 | 
48 | .icon-daily-brief:before
49 | 	content "\e604"
50 | 
51 | .icon-down-arrow:before
52 | 	content "\e605"
53 | 
54 | .icon-email:before
55 | 	content "\e606"
56 | 
57 | .icon-facebook:before
58 | 	content "\e608"
59 | 
60 | .icon-google-plus:before
61 | 	content "\e609"
62 | 
63 | .icon-hamburrow:before
64 | 	content "\e60a"
65 | 
66 | .icon-linkedin:before
67 | 	content "\e60b"
68 | 
69 | .icon-pause:before
70 | 	content "\e60c"
71 | 
72 | .icon-pinterest:before
73 | 	content "\e60d"
74 | 
75 | .icon-play:before
76 | 	content "\e60e"
77 | 
78 | .icon-quartz:before
79 | 	content "\e60f"
80 | 
81 | .icon-search:before
82 | 	content "\e610"
83 | 
84 | .icon-settings:before
85 | 	content "\e611"
86 | 
87 | .icon-sponsored:before
88 | 	content "\e613"
89 | 
90 | .icon-twitter:before
91 | 	content "\e614"
92 | 
93 | .icon-whats-app:before
94 | 	content "\e615"
95 | 
96 | .icon-zoom:before
97 | 	content "\e616"
98 | 


--------------------------------------------------------------------------------
/src/styl/qz/chart-elements.styl:
--------------------------------------------------------------------------------
 1 | $em_size = 20px
 2 | $em_size_small = 14px
 3 | $em_size_large = 36px
 4 | 
 5 | .axis
 6 | 	.domain
 7 | 		display none
 8 | 	.tick
 9 | 		font-family $qz-sans-light
10 | 		&[data-anchor="middle"]
11 | 			text
12 | 				text-anchor middle
13 | 		text
14 | 			fill $qz-chart-axis-text
15 | 			shape-rendering crispEdges
16 | 			text-anchor middle
17 | 		&:first-child
18 | 			text
19 | 				text-anchor middle
20 | 		line
21 | 			fill none
22 | 			stroke $qz-chart-gridline
23 | 			stroke-width 1px
24 | 			shape-rendering crispEdges
25 | 		&.zero
26 | 			line
27 | 				stroke $qz-chart-zeroline
28 | 		rect
29 | 			fill $qz-background-gray
30 | 			shape-rendering crispEdges
31 | 
32 | 	&.leftAxis
33 | 		text
34 | 			text-anchor start
35 | 
36 | 	&.rightAxis
37 | 		text
38 | 			text-anchor end
39 | 	&[data-scale="time"]
40 | 		.tick:not([data-anchor="middle"])
41 | 			text
42 | 				text-anchor start
43 | 			.tick:first-child
44 | 				text
45 | 					text-anchor start
46 | 
47 | .concealer-label
48 | 	font-family $qz-sans-light
49 | 	text
50 | 		fill $qz-chart-axis-text
51 | 	rect
52 | 		fill $qz-background-gray
53 | 
54 | .connectors line
55 | 	fill none
56 | 	stroke-width 1px
57 | 
58 | line.zero
59 | 	stroke $qz-chart-zeroline
60 | 	shape-rendering crispEdges
61 | 
62 | .qz-chart
63 | 	&.line
64 | 		path
65 | 			fill none
66 | 			stroke-width 3px
67 | 			stroke-linecap round
68 | 			stroke-linejoin round
69 | 	&.label
70 | 		font-family $qz-sans-light
71 | 
72 | .column-label
73 | 	fill $qz-chart-axis-text
74 | 
75 | line.no-label-tick
76 | 	fill none
77 | 	stroke $qz-chart-gridline
78 | 	stroke-width 1px
79 | 	shape-rendering crispEdges
80 | 
81 | .qz-chart
82 | 	&.medium
83 | 		font-size $em_size
84 | 		.line
85 | 			path
86 | 				stroke-width 3px
87 | 
88 | 	&.small
89 | 		font-size $em_size_small
90 | 		.line
91 | 			path
92 | 				stroke-width 2px
93 | 
94 | 	&.large
95 | 		font-size $em_size
96 | 		.line
97 | 			path
98 | 				stroke-width 4px
99 | 


--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
 1 | // NPM modules
 2 | var d3 = require('d3');
 3 | 
 4 | /**
 5 |  * Create a SVG tansform for a given translation.
 6 |  */
 7 | function makeTranslate(x, y) {
 8 | 	var transform = d3.transform();
 9 | 
10 | 	transform.translate[0] = x;
11 | 	transform.translate[1] = y;
12 | 
13 | 	return transform.toString();
14 | }
15 | 
16 | /**
17 |  * Use any string to generate a CSS class or id name.
18 |  */
19 | function classify(str) {
20 | 	return str.toLowerCase()
21 | 		.replace(/\s+/g, '-')		 // Replace spaces with -
22 | 		.replace(/[^\w\-]+/g, '') // Remove all non-word chars
23 | 		.replace(/\-\-+/g, '-')	 // Replace multiple - with single -
24 | 		.replace(/^-+/, '')			 // Trim - from start of text
25 | 		.replace(/-+$/, '');			// Trim - from end of text
26 | }
27 | 
28 | /**
29 |  * Throttle a function call.
30 |  */
31 | function throttle(fn, threshold, scope) {
32 | 	threshold || (threshold = 250);
33 | 	var last,
34 | 		deferTimer;
35 | 	return function() {
36 | 		var context = scope || this;
37 | 
38 | 		var now = +new Date(),
39 | 			args = arguments;
40 | 		if (last && now < last + threshold) {
41 | 			// hold on to it
42 | 			clearTimeout(deferTimer);
43 | 			deferTimer = setTimeout(function() {
44 | 				last = now;
45 | 				fn.apply(context, args);
46 | 			}, threshold);
47 | 		} else {
48 | 			last = now;
49 | 			fn.apply(context, args);
50 | 		}
51 | 	};
52 | };
53 | 
54 | /**
55 |  * Move a D3 selection to the top of the rendering stack.
56 |  */
57 | d3.selection.prototype.moveToFront = function() {
58 | 	return this.each(function() {
59 | 		this.parentNode.appendChild(this);
60 | 	});
61 | };
62 | 
63 | /**
64 |  * Move a D3 selection to the bottom of the rendering stack.
65 |  */
66 | d3.selection.prototype.moveToBack = function() {
67 | 	return this.each(function() {
68 | 		var firstChild = this.parentNode.firstChild;
69 | 		if (firstChild) {
70 | 			this.parentNode.insertBefore(this, firstChild);
71 | 		}
72 | 	});
73 | };
74 | 
75 | module.exports = {
76 | 	makeTranslate: makeTranslate,
77 | 	classify: classify,
78 | 	throttle: throttle
79 | }
80 | 


--------------------------------------------------------------------------------
/src/js/share.js:
--------------------------------------------------------------------------------
 1 | var $twitter = $('.icon-twitter');
 2 | var $facebook = $('.icon-facebook');
 3 | var $linkedin = $('.icon-linkedin');
 4 | var $email = $('.icon-email');
 5 | 
 6 | var shareConfig = {
 7 | 	facebook: {
 8 | 		baseUrl: 'https://www.facebook.com/dialog/feed?',
 9 | 		app_id: '676492505769612', // fb app id
10 | 		link: '', // url to story page
11 | 		name: '', // headline
12 | 		picture: '', // url to image file
13 | 		caption: 'qz.com', // little fb credit thing
14 | 		description: '', // text under the headline
15 | 		message: '', // not sure what this does
16 | 		redirect_uri: 'http://qz.com'
17 | 	},
18 | 	twitter: {
19 | 		baseUrl: 'https://twitter.com/intent/tweet?',
20 | 		url: '',
21 | 		text:+ tweetTxt,
22 | 		related: '',
23 | 		via: ''
24 | 	},
25 | 	linkedin: {
26 | 		baseUrl: 'http://linkedin.com/shareArticle?',
27 | 		mini: 'true',
28 | 		url: '',
29 | 		title: '',
30 | 		summary: ''
31 | 	},
32 | 	email: {
33 | 		baseUrl: 'mailto:?',
34 | 		subject: ''
35 | 	}
36 | };
37 | function updateHref (args) {
38 | 	var hrefs = {};
39 | 
40 | 	hrefs.twitter = [
41 | 		shareConfig.twitter.baseUrl,
42 | 		'url=' + shareConfig.twitter.url,
43 | 		'&text=' + shareConfig.twitter.text,
44 | 		'&via=' + shareConfig.twitter.via,
45 | 		'&related=' + shareConfig.twitter.via
46 | 	].join('');
47 | 
48 | 	hrefs.facebook = [
49 | 		shareConfig.facebook.base_url,
50 | 		'app_id=' + shareConfig.facebook.app_id,
51 | 		'&name=' + shareConfig.facebook.name,
52 | 		'&link=' + shareConfig.facebook.link,
53 | 		'&picture=' + shareConfig.facebook.picture,
54 | 		'&caption=' + shareConfig.facebook.caption,
55 | 		'&description=' + shareConfig.facebook.description,
56 | 		'&message=' + shareConfig.facebook.message,
57 | 		'&redirect_uri=' + shareConfig.facebook.redirect_uri
58 | 	].join('');
59 | 
60 | 	hrefs.linkedin = [
61 | 		shareConfig.linkedin.base_url,
62 | 		'mini=' + shareConfig.linkedin.mini,
63 | 		'&url=' + shareConfig.linkedin.url,
64 | 		'&title=' + shareConfig.linkedin.title,
65 | 		'&summary=' + shareConfig.linkedin.summary
66 | 	].join('');
67 | 
68 | 	hrefs.email = [
69 | 		shareConfig.email.base_url,
70 | 		shareConfig.email.subject
71 | 	].join('');
72 | 
73 | 	hrefs = hrefs.map(encodeURI);
74 | 
75 | 	$twitter.attr('href', hrefs.twitter);
76 | 	$facebook.attr('href', hrefs.facebook);
77 | 	$linkedin.attr('href', hrefs.linkedin);
78 | 	$email.attr('href', hrefs.email);
79 | }
80 | 
81 | module.exports = updateHref;
82 | 


--------------------------------------------------------------------------------
/src/styl/qz/type.styl:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 | 	font-family: 'AdelleSans-Bold';
 3 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Bold.eot');
 4 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Bold.eot?#iefix') format('embedded-opentype'),
 5 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Bold.woff') format('woff'),
 6 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Bold.ttf') format('truetype');
 7 | 	font-weight: 700;
 8 | }
 9 | 
10 | @font-face {
11 | 	font-family: 'AdelleSans-Light';
12 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Light.eot');
13 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Light.eot?#iefix') format('embedded-opentype'),
14 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Light.woff') format('woff'),
15 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Light.ttf') format('truetype');
16 | 	font-weight: normal;
17 | 	font-style: normal;
18 | }
19 | 
20 | @font-face {
21 | 	font-family: 'AdelleSans-Regular';
22 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Regular.eot');
23 | 	src: url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Regular.eot?#iefix') format('embedded-opentype'),
24 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Regular.woff') format('woff'),
25 | 			 url('https://app.qz.com/fonts/AdelleSansWeb/AdelleSansBasic_Regular.ttf') format('truetype');
26 | 	font-weight: normal;
27 | 	font-style: normal;
28 | }
29 | 
30 | @font-face {
31 | 	font-family: 'QZIcons';
32 | 	src: url('https://app.qz.com/fonts/qz-icons.eot?v=4');
33 | 	src: url('https://app.qz.com/fonts/qz-icons.eot?v=4#iefix') format('embedded-opentype'),
34 | 			 url('https://app.qz.com/fonts/qz-icons.woff2?v=4') format('woff2'),
35 | 			 url('https://app.qz.com/fonts/qz-icons.woff?v=4') format('woff'),
36 | 			 url('https://app.qz.com/fonts/qz-icons.ttf?v=4') format('truetype'),
37 | 			 url('https://app.qz.com/fonts/qz-icons.svg?v=4') format('svg');
38 | 	font-weight: normal;
39 | 	font-style: normal;
40 | }
41 | 
42 | 
43 | // Fonts
44 | $qz-sans = 'AdelleSans-Regular','Helvetica Neue', 'HelveticaNeue', Helvetica, Arial,sans-serif
45 | $qz-sans-light = 'AdelleSans-Light', 'AdelleSans-Regular','Helvetica Neue Light', 'HelveticaNeue-Light', Helvetica, Arial,sans-serif
46 | $qz-sans-bold = 'AdelleSans-Bold', Helvetica, Arial, sans-serif
47 | $qz-serif = "PT Serif", Georgia, serif
48 | $qz-font-body = $qz-serif
49 | 


--------------------------------------------------------------------------------
/src/styl/responsive.styl:
--------------------------------------------------------------------------------
  1 | // Default breakpoint. Change at will.
  2 | $width-mobile = 600px
  3 | 
  4 | //from https://github.com/Quartz/qzapp/blob/9f387d5ba7e4d08aa7c1c44802e8b96dd2205a8b/less/well/itemBodyElementsDesktop.less
  5 | .item-body
  6 | 	h1, h2, h3, h4, h5, p, li, ol, ul, blockquote
  7 | 		font-smoothing antialiased
  8 | 
  9 | 	ul li, ol li, dl
 10 | 		font 20px/30px $qz-serif
 11 | 		color $qz-body-black
 12 | 
 13 | 	/*	WordPress generated markup styles */
 14 | 	ul
 15 | 		margin 15px auto 0 25px
 16 | 		padding 0
 17 | 		max-width 100%
 18 | 		list-style-type disc
 19 | 
 20 | 		ul
 21 | 			padding-top 15px
 22 | 			li
 23 | 				padding 0 0 15px 0
 24 | 				border 0
 25 | 				-webkit-background-size 10px 9px
 26 | 				-moz-background-size 10px 9px
 27 | 				-ms-background-size 10px 9px
 28 | 				-o-background-size 10px 9px
 29 | 				background-size 10px 9px
 30 | 				color $qz-body-black
 31 | 
 32 | 				&:last-child
 33 | 					padding-bottom 0px
 34 | 	li
 35 | 		padding 0 0 15px 0
 36 | 
 37 | 
 38 | 	ol
 39 | 		list-style-type decimal
 40 | 		margin-left 30px
 41 | 
 42 | 
 43 | 	/* PARAGRAPHS */
 44 | 
 45 | 	p
 46 | 		position relative
 47 | 		/*margin 0 0 22px 0*/
 48 | 		/* temporary for annotations */
 49 | 		/* if this is causing issues remove padding and insert margin */
 50 | 		margin 0 0 0 0
 51 | 		padding 16px 0 16px 0
 52 | 		line-height 1.6
 53 | 		color $qz-body-black
 54 | 		font 20px/30px $qz-serif
 55 | 		.transition(background, 0.5s)
 56 | 
 57 | 		&:last-child
 58 | 			padding 16px 0 0 0
 59 | 
 60 | 
 61 | 		img:only-child
 62 | 			padding:8px 0 8px 0
 63 | 
 64 | 		a
 65 | 			color $qz-body-link-blue
 66 | 			text-decoration none
 67 | 
 68 | 		a:hover
 69 | 			text-decoration underline
 70 | 
 71 | 
 72 | 
 73 | 	blockquote
 74 | 		padding 0 0 0 20px
 75 | 		margin:	16px 0px
 76 | 		position relative
 77 | 
 78 | 		&::before
 79 | 			width 5px
 80 | 			content " "
 81 | 			height 100%
 82 | 			top 7px
 83 | 			background-color $qz-gray-1
 84 | 			left 0
 85 | 			display block
 86 | 			position absolute
 87 | 
 88 | 
 89 | 
 90 | 		p
 91 | 			color $qz-body-black
 92 | 			padding 16px 0px
 93 | 			&:first-child
 94 | 				padding-top 0px
 95 | 				position relative
 96 | 				top 0px
 97 | 
 98 | 
 99 | 
100 | 		ul
101 | 			margin 30px 0 15px 25px
102 | 
103 | 
104 | 
105 | 	h1, h2
106 | 		font 24px/32px $qz-sans-bold
107 | 		font-style bold
108 | 		color $qz-header-black
109 | 		margin 19px 0 17px 0
110 | 
111 | 
112 | 	h3
113 | 		font 20px $qz-serif
114 | 		color $qz-header-black
115 | 		font-weight bold
116 | 
117 | 
118 | 	h4, h5, h6
119 | 		font-family $qz-sans-bold
120 | 
121 | 	h4
122 | 		font-size 18px
123 | 
124 | 
125 | 	h5, h6
126 | 		font-size 16px
127 | 
128 | 
129 | 	p + h2, p + h1, p + h3, p + h4, p + h5, p + h6
130 | 		margin 19px 0 17px 0
131 | 
132 | 
133 | 	blockquote + h2, blockquote + h1, blockquote + h3, blockquote + h4, blockquote + h5, blockquote + h6
134 | 		margin 47px 0 13px 0
135 | 
136 | 
137 | 
138 | // make sure images inside of content aren't too big
139 | 	img
140 | 		max-width 100%
141 | 		height auto
142 | 
143 | 
144 | @media only screen and (max-width $width-mobile)
145 | 	// anything narrow
146 | 	// from https://github.com/Quartz/qzapp/blob/9f387d5ba7e4d08aa7c1c44802e8b96dd2205a8b/less/well/itemBodyElementsMobile.less
147 | 	.item-body
148 | 		img
149 | 			margin 0 0 0 0;
150 | 
151 | 		p
152 | 			font 17px/27px "PT Serif", Georgia, serif;
153 | 			padding 10px 0 10px 0;
154 | 
155 | 			img
156 | 				margin:8px 0 8px 0;
157 | 
158 | 
159 | 		span.pull-quote
160 | 			display none;
161 | 
162 | 
163 | 		span.edition-credit
164 | 			font-size 16px;
165 | 			display inline-block;
166 | 			padding 10px 0;
167 | 
168 | 
169 | 		h1
170 | 			margin 1em 0 0.5em 0;
171 | 
172 | 
173 | 		h1, h2
174 | 			font 18px/24px $qz-sans-bold;
175 | 
176 | 			&:first-child
177 | 				margin 0.3em 0 0.2em 0;
178 | 
179 | 
180 | 		h3
181 | 			font 16px/24px $qz-serif;
182 | 			font-weight bold;
183 | 
184 | 		h4
185 | 			font 15px/23px $qz-sans-bold;
186 | 
187 | 		h5
188 | 			font 14px/22px $qz-sans-bold;
189 | 
190 | 		h6
191 | 			font 12px/20px $qz-sans-bold;
192 | 
193 | 		ol
194 | 			margin-left:25px;
195 | 
196 | 		ol li, ul li, dl
197 | 			font 16px/26px $qz-serif;
198 | 
199 | 		blockquote
200 | 			&::before
201 | 				height 100%;
202 | 				top 7px;
203 | 				background-color @color-gray-light;
204 | 				left -1px;
205 | 


--------------------------------------------------------------------------------
/src/js/fm.js:
--------------------------------------------------------------------------------
  1 | var PARENT_DOMAIN = "qz.com";
  2 | var $interactive = $("#interactive-content");
  3 | var FM = null;
  4 | 
  5 | /**
  6 |  * Setup Frame Messenger and connect to parent.
  7 |  */
  8 | function setupFrameMessenger() {
  9 | 	// Production: use frame messenging (will error if no parent frame)
 10 | 	if (ENV == 'prod') {
 11 | 		FM = frameMessager({
 12 | 			allowFullWindow : false,
 13 | 			parentDomain : PARENT_DOMAIN
 14 | 		});
 15 | 
 16 | 		FM.onMessage("app:activePost", resize);
 17 | 
 18 | 		$("body").css("overflow", "hidden");
 19 | 	// Test environment: no frame messenging
 20 | 	} else {
 21 | 		$("body").css("border", "#ff8080");
 22 | 	}
 23 | }
 24 | 
 25 | /**
 26 |  * Compute the height of the interactive.
 27 |  */
 28 | function documentHeight () {
 29 | 	var body = document.body;
 30 | 	var html = document.documentElement;
 31 | 	var height =	Math.max( body.scrollHeight, body.offsetHeight,
 32 | 						 html.clientHeight, html.scrollHeight, html.offsetHeight );
 33 | 
 34 | 	return height;
 35 | }
 36 | 
 37 | /**
 38 |  * Update parent height.
 39 |  */
 40 | function updateHeight (height) {
 41 | 	if (!FM) {
 42 | 		return;
 43 | 	}
 44 | 
 45 | 	height = height || documentHeight();
 46 | 
 47 | 	FM.triggerMessage("QZParent", "child:updateHeight", {
 48 | 		height : height
 49 | 	});
 50 | 
 51 | 	return;
 52 | }
 53 | 
 54 | /**
 55 |  * Update parent hash.
 56 |  * If FM is not present, update local hash
 57 |  */
 58 | function updateParentHash (hash) {
 59 | 	if (!FM) {
 60 | 		window.location.hash = hash;
 61 | 	} else {
 62 | 		FM.triggerMessage("QZParent", "child:updateHash", {
 63 | 			hash : hash
 64 | 		});
 65 | 	}
 66 | 	return;
 67 | }
 68 | 
 69 | /**
 70 |  * Get properties of the parent window
 71 |  * @returns {object} (see below)
 72 |  * data.windowProps = {
 73 |  *   uri: {
 74 |  *     hash: window.location.hash,
 75 |  *     href: window.location.href,
 76 |  *     origin: window.location.origin,
 77 |  *     pathname: window.location.pathname
 78 |  *   },
 79 |  *   pageOffset: {
 80 |  *     x: window.pageXOffset,
 81 |  *     y: window.pageYOffset
 82 |  *   },
 83 |  *   clientDimensions: {
 84 |  *     height: clientHeight,
 85 |  *     width: clientWidth
 86 |  *   }
 87 |  * }
 88 |  */
 89 | function getParentWindowProps () {
 90 | 	if (!FM) {
 91 | 		return;
 92 | 	}
 93 | 
 94 | 	FM.triggerMessage("QZParent", "child:getWindowProps");
 95 | 
 96 | 	return;
 97 | }
 98 | 
 99 | /**
100 |  * Get the parent's hash
101 |  * @returns {object} data.hash = hash
102 |  */
103 | function getParentHash() {
104 | 	if (!FM) {
105 | 		return;
106 | 	} else {
107 | 		FM.triggerMessage("QZParent", "child:readHash");
108 | 	}
109 | }
110 | 
111 | 
112 | /**
113 |  * Set up a callback that will handle incoming window properties
114 |  * @param {callback} callback - Function that handles object of window properties
115 |  */
116 | function onReadWindowProps(callback) {
117 | 	if (!FM) {
118 | 		callback();
119 | 	} else {
120 | 		FM.onMessage("parent:readWindowProps", callback);
121 | 	}
122 | }
123 | 
124 | /**
125 |  * Set up a callback that will handle incoming parent hash
126 |  * @param {callback} callback - Function that handles incoming hash
127 |  */
128 | function onReadParentHash(callback) {
129 | 	if (!FM) {
130 | 		callback();
131 | 	} else {
132 | 		FM.onMessage("parent:readHash", callback);
133 | 	}
134 | }
135 | 
136 | /**
137 |  * Resize the parent to match the new child height.
138 |  */
139 | function resize () {
140 | 	var height = $interactive.outerHeight(true);
141 | 
142 | 	updateHeight(height);
143 | }
144 | 
145 | /**
146 |  * Scroll the parent window to a given location.
147 |  *
148 |  * Call like this:
149 |  * fm.scrollToPosition($("#scrollToThisDiv").offset().top,500)
150 |  *
151 |  * Where 500 is the duration of the scroll animation
152 |  */
153 | function scrollToPosition (position,duration) {
154 | 	if (!FM) {
155 | 		$("html,body").animate({
156 | 			scrollTop: position
157 | 		}, duration);
158 | 	} else {
159 | 		FM.triggerMessage("QZParent", "child:scrollToPosition", {
160 | 			position : position,
161 | 			duration : 500
162 | 		});
163 | 	}
164 | }
165 | 
166 | /**
167 |  * Has iframe become visible in window AKA
168 |  * Has user scrolled into iframe?
169 |  * Call like this:
170 |  *
171 |  * fm.isVisible(function(d){
172 |  *   if(d.data.visible == true) {
173 |  *     // iframe is in view
174 |  *   }
175 |  * });
176 |  */
177 | function isVisible(callback) {
178 | 	if (!FM) {
179 | 		callback();
180 | 	} else {
181 | 		FM.onMessage("itemWell:scroll", callback);
182 | 	}
183 | }
184 | 
185 | setupFrameMessenger();
186 | 
187 | module.exports = {
188 | 	resize: resize,
189 | 	scrollToPosition: scrollToPosition,
190 | 	getParentHash: getParentHash,
191 | 	getParentWindowProps: getParentWindowProps,
192 | 	onReadParentHash: onReadParentHash,
193 | 	onReadWindowProps: onReadWindowProps,
194 | 	updateParentHash: updateParentHash,
195 |   isVisible: isVisible
196 | };
197 | 


--------------------------------------------------------------------------------
/src/js/thing.js:
--------------------------------------------------------------------------------
  1 | // NPM modules
  2 | var d3 = require('d3');
  3 | var request = require('d3-request');
  4 | 
  5 | // Local modules
  6 | var features = require('./detectFeatures')();
  7 | var fm = require('./fm');
  8 | var utils = require('./utils');
  9 | 
 10 | // Globals
 11 | var DEFAULT_WIDTH = 940;
 12 | var MOBILE_BREAKPOINT = 600;
 13 | 
 14 | var graphicData = null;
 15 | var isMobile = false;
 16 | 
 17 | /**
 18 |  * Initialize the graphic.
 19 |  *
 20 |  * Fetch data, format data, cache HTML references, etc.
 21 |  */
 22 | function init() {
 23 | 	request.csv('data/pct_change_distribution.csv', function(error, data) {
 24 | 		graphicData = formatData(data);
 25 | 
 26 | 		render();
 27 | 		$(window).resize(utils.throttle(onResize, 250));
 28 | 	});
 29 | }
 30 | 
 31 | /**
 32 |  * Format data or generate any derived variables.
 33 |  */
 34 | function formatData(data) {
 35 | 	data.forEach(function(d) {
 36 | 		d['count'] = +d['count'];
 37 | 	});
 38 | 
 39 | 	return data;
 40 | }
 41 | 
 42 | /**
 43 |  * Invoke on resize. By default simply rerenders the graphic.
 44 |  */
 45 | function onResize() {
 46 | 	render();
 47 | }
 48 | 
 49 | /**
 50 |  * Figure out the current frame size and render the graphic.
 51 |  */
 52 | function render() {
 53 | 	var width = $('#interactive-content').width();
 54 | 
 55 | 	if (width <= MOBILE_BREAKPOINT) {
 56 | 		isMobile = true;
 57 | 	} else {
 58 | 		isMobile = false;
 59 | 	}
 60 | 
 61 | 	renderGraphic({
 62 | 		container: '#graphic',
 63 | 		width: width,
 64 | 		data: graphicData
 65 | 	});
 66 | 
 67 | 	// Inform parent frame of new height
 68 | 	fm.resize()
 69 | }
 70 | 
 71 | /*
 72 |  * Render the graphic.
 73 |  */
 74 | function renderGraphic(config) {
 75 | 	/*
 76 | 	 * Setup chart container.
 77 | 	 */
 78 | 	var labelColumn = 'pct_change';
 79 | 	var valueColumn = 'count';
 80 | 
 81 | 	var aspectWidth = isMobile ? 4 : 16;
 82 | 	var aspectHeight = isMobile ? 3 : 9;
 83 | 	var valueGap = 6;
 84 | 
 85 | 	var margins = {
 86 | 		top: 10,
 87 | 		right: 15,
 88 | 		bottom: 30,
 89 | 		left: 40
 90 | 	};
 91 | 
 92 | 	var ticksY = 4;
 93 | 	var roundTicksFactor = 50;
 94 | 
 95 | 	// Calculate actual chart dimensions
 96 | 	var chartWidth = config['width'] - margins['left'] - margins['right'];
 97 | 	var chartHeight = Math.ceil((config['width'] * aspectHeight) / aspectWidth) - margins['top'] - margins['bottom'];
 98 | 
 99 | 	// Clear existing graphic (for redraw)
100 | 	var containerElement = d3.select(config['container']);
101 | 	containerElement.html('');
102 | 
103 | 	/*
104 | 	 * Create the root SVG element.
105 | 	 */
106 | 	var chartWrapper = containerElement.append('div')
107 | 		.attr('class', 'graphic-wrapper');
108 | 
109 | 	var chartElement = chartWrapper.append('svg')
110 | 		.attr('width', chartWidth + margins['left'] + margins['right'])
111 | 		.attr('height', chartHeight + margins['top'] + margins['bottom'])
112 | 		.append('g')
113 | 		.attr('transform', 'translate(' + margins['left'] + ',' + margins['top'] + ')');
114 | 
115 | 	/*
116 | 	 * Create D3 scale objects.
117 | 	 */
118 | 	var ticks = config['data'].map(function (d) {
119 | 		return d[labelColumn];
120 | 	});
121 | 
122 | 	var xScale = d3.scale.ordinal()
123 | 		.rangeRoundBands([0, chartWidth], .1)
124 | 		.domain(ticks);
125 | 
126 | 	var min = d3.min(config['data'], function(d) {
127 | 		return Math.floor(d[valueColumn] / roundTicksFactor) * roundTicksFactor;
128 | 	});
129 | 
130 | 	if (min > 0) {
131 | 		min = 0;
132 | 	}
133 | 
134 | 	var max = d3.max(config['data'], function(d) {
135 | 		return Math.ceil(d[valueColumn] / roundTicksFactor) * roundTicksFactor;
136 | 	});
137 | 
138 | 	var yScale = d3.scale.linear()
139 | 		.domain([min, max])
140 | 		.range([chartHeight, 0]);
141 | 
142 | 	/*
143 | 	 * Create D3 axes.
144 | 	 */
145 | 	var xAxis = d3.svg.axis()
146 | 		.scale(xScale)
147 | 		.orient('bottom')
148 | 		.tickFormat(function(d, i) {
149 | 			var mod = 2;
150 | 
151 | 			if (i % mod == 1) {
152 | 				return d + '%';
153 | 			}
154 | 
155 | 			return '';
156 | 		});
157 | 
158 | 	var yAxis = d3.svg.axis()
159 | 		.scale(yScale)
160 | 		.orient('left')
161 | 		.ticks(ticksY)
162 | 		.tickFormat(function(d) {
163 | 			return d;
164 | 		});
165 | 
166 | 	/*
167 | 	 * Render axes to chart.
168 | 	 */
169 | 	var xTicks = chartElement.append('g')
170 | 		.attr('class', 'x axis')
171 | 		.attr('transform', makeTranslate((xScale.rangeBand() / 2) * 1.1, chartHeight))
172 | 		.call(xAxis);
173 | 
174 | 	chartElement.append('g')
175 | 		.attr('class', 'y axis')
176 | 		.call(yAxis)
177 | 
178 | 	/*
179 | 	 * Render grid to chart.
180 | 	 */
181 | 	var yAxisGrid = function() {
182 | 		return yAxis;
183 | 	};
184 | 
185 | 	var yGrid = chartElement.append('g')
186 | 		.attr('class', 'y grid')
187 | 		.call(yAxisGrid()
188 | 			.tickSize(-chartWidth, 0)
189 | 			.tickFormat('')
190 | 		);
191 | 
192 | 	yGrid.append('line')
193 | 		.attr('class', 'zero')
194 | 		.attr('transform', makeTranslate((xScale.rangeBand()) * 1.05, -xAxis.tickSize()))
195 | 		.attr('x1', xScale('0'))
196 | 		.attr('y1', 0)
197 | 		.attr('x2', xScale('0'))
198 | 		.attr('y2', chartHeight + xAxis.tickSize() * 2);
199 | 
200 | 	xTicks.selectAll('g.tick')
201 | 		.filter(function(d) {
202 | 			return d == '0';
203 | 		})
204 | 		.classed('zero', true)
205 | 
206 | 	var t = xTicks.append('g')
207 | 		.attr('class', 'tick')
208 | 		.attr('transform', makeTranslate(xScale('-15') - (xScale.rangeBand() / 2) * 1.15, 0));
209 | 
210 | 	t.append('line')
211 | 		.attr('y2', 6)
212 | 
213 | 	t.append('text')
214 | 		.attr('dy', '.71em')
215 | 		.attr('y', '9')
216 | 		.style('text-anchor', 'middle')
217 | 		.text('-20%');
218 | 
219 | 	/*
220 | 	 * Render bars to chart.
221 | 	 */
222 | 	chartElement.append('g')
223 | 		.attr('class', 'bars')
224 | 		.selectAll('rect')
225 | 		.data(config['data'])
226 | 		.enter()
227 | 		.append('rect')
228 | 			.attr('x', function(d) {
229 | 				return xScale(d[labelColumn]);
230 | 			})
231 | 			.attr('y', function(d) {
232 | 				if (d[valueColumn] < 0) {
233 | 					return yScale(0);
234 | 				}
235 | 
236 | 				return yScale(d[valueColumn]);
237 | 			})
238 | 			.attr('width', xScale.rangeBand())
239 | 			.attr('height', function(d) {
240 | 				if (d[valueColumn] < 0) {
241 | 					return yScale(d[valueColumn]) - yScale(0);
242 | 				}
243 | 
244 | 				return yScale(0) - yScale(d[valueColumn]);
245 | 			})
246 | 			.attr('class', function(d) {
247 | 				return 'bar bar-' + d[labelColumn];
248 | 			});
249 | 
250 | 	/*
251 | 	 * Render 0 value line.
252 | 	 */
253 | 	if (min < 0) {
254 | 		chartElement.append('line')
255 | 			.attr('class', 'zero-line')
256 | 			.attr('x1', 0)
257 | 			.attr('x2', chartWidth)
258 | 			.attr('y1', yScale(0))
259 | 			.attr('y2', yScale(0));
260 | 	}
261 | }
262 | 
263 | /*
264 |  * Create a SVG tansform for a given translation.
265 |  */
266 | var makeTranslate = function(x, y) {
267 |     var transform = d3.transform();
268 | 
269 |     transform.translate[0] = x;
270 |     transform.translate[1] = y;
271 | 
272 |     return transform.toString();
273 | }
274 | 
275 | // Bind on-load handler
276 | $(document).ready(function() {
277 | 	init();
278 | });
279 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | // Node modules
  2 | var browserify = require("browserify");
  3 | var source = require("vinyl-source-stream");
  4 | var browserSync = require("browser-sync");
  5 | var reload = browserSync.reload;
  6 | var nib = require("nib");
  7 | var del = require("del");
  8 | 
  9 | // Gulp-related
 10 | var gulp = require("gulp");
 11 | var changed = require("gulp-changed");
 12 | var jade = require("gulp-jade");
 13 | var preprocess = require("gulp-preprocess");
 14 | var shell = require("gulp-shell");
 15 | var stylus = require("gulp-stylus");
 16 | 
 17 | // Non-gulp NPM modules
 18 | var fs = require("fs");
 19 | var archieml = require("archieml");
 20 | var request = require('request');
 21 | var http = require('http');
 22 | 
 23 | // Local modules
 24 | var args = require("./gulp/cli").parse();
 25 | var config = require("./gulp/config");
 26 | var utils = require("./gulp/utils");
 27 | 
 28 | // Configuration
 29 | var gdoc_id = "";
 30 | var gdoc_host = "127.0.0.1:6006";
 31 | var gdoc_url = "http://"+gdoc_host+"/"+ gdoc_id;
 32 | var content = {};
 33 | 
 34 | var qzdataPath = process.env.QZDATA_PATH || "~/qzdata";
 35 | var thingName = "county-wages-distribution";
 36 | var thingPath = qzdataPath + "/2017/county-wages-distribution";
 37 | 
 38 | var isProd = args.build ? true : false;
 39 | var preprocessOpts = {
 40 | 	context: {
 41 | 		ENV: isProd ? "prod" : "dev"
 42 | 	}
 43 | };
 44 | 
 45 | var allTasks = [
 46 | 	"get-content",
 47 | 	"jade",
 48 | 	"stylus",
 49 | 	"browserify",
 50 | 	"copy-libs",
 51 | 	"copy-assets",
 52 | 	"copy-fonts",
 53 | 	"copy-data"
 54 | ];
 55 | 
 56 | var shellCmd = utils.generateShellCmd(args.build, thingPath, thingName);
 57 | 
 58 | /**
 59 |  * Reads compiled ArchieML content from the local JSON file.
 60 |  */
 61 | function readContentFromFile(doneCallback) {
 62 | 	fs.readFile("content.json", function(err, data){
 63 | 		if (!err) {
 64 | 			content = JSON.parse(data);
 65 | 			doneCallback();
 66 | 		}
 67 | 		else {
 68 | 			console.log("Cannot load content from file");
 69 | 			doneCallback(err);
 70 | 		}
 71 | 	});
 72 | }
 73 | 
 74 | /**
 75 |  * Fetch ArchieML data from Google Docs.
 76 |  */
 77 | function getContentTask(doneCallback) {
 78 | 	if(gdoc_id !== "") {
 79 | 		request.get({
 80 | 				"url": gdoc_url
 81 | 			},
 82 | 			function(error, resp, body) {
 83 | 				if(!error && resp.statusCode < 400) {
 84 | 					content = JSON.parse(body);
 85 | 					fs.writeFileSync("content.json", JSON.stringify(content, null, 4), "utf-8");
 86 | 					doneCallback();
 87 | 				}
 88 | 				else {
 89 | 					// if the server isn't up load from file
 90 | 					if(resp && resp.statusCode >= 400) {
 91 | 						console.log(body);
 92 | 					}
 93 | 
 94 | 					console.log("Cannot load content from server, loading from file");
 95 | 					readContentFromFile(doneCallback);
 96 | 				}
 97 | 		});
 98 | 	}
 99 | 	else {
100 | 		console.log("No google doc specified, loading from file");
101 | 		readContentFromFile(doneCallback);
102 | 	}
103 | }
104 | 
105 | getContentTask.description = "Fetch ArchieML data from Google Docs";
106 | gulp.task("get-content", getContentTask);
107 | 
108 | /**
109 |  * Compile Jade HTML templates. (Also triggers a refetch of the ArchieML doc.)
110 |  */
111 | function compileJadeTask() {
112 | 	return gulp.src(config.paths.src.jade + "/index.jade")
113 | 		.pipe(jade({ pretty: true, locals: content }))
114 | 		.pipe(gulp.dest(config.dirs.build))
115 | 		.pipe(reload({ stream: true }));
116 | }
117 | 
118 | compileJadeTask.description = "Compile Jade HTML templates (also triggers 'get-content')";
119 | gulp.task("jade", ["get-content"], compileJadeTask);
120 | 
121 | /**
122 |  * Compile Stylus CSS meta-language.
123 |  */
124 | function compileStylusTask() {
125 | 	return gulp.src(config.paths.src.styl + "/main.styl")
126 | 		.pipe(stylus({
127 | 			use: [nib()],
128 | 			"include css": true,
129 | 			errors: true
130 | 		}))
131 | 		.pipe(gulp.dest(config.paths.build.css))
132 | 		.pipe(reload({ stream: true }));
133 | }
134 | 
135 | compileStylusTask.description = "Compile Stylus CSS meta-language";
136 | gulp.task("stylus", compileStylusTask);
137 | 
138 | /**
139 |  * Bundle Javascript with browserify.
140 |  */
141 | function compileJavascriptTask(doneCallback) {
142 | 	var bundler = browserify({
143 | 		entries: [config.paths.src.js + "/thing.js"],
144 | 		debug: !isProd
145 | 	});
146 | 
147 | 	if (isProd && !args["dont-minify"]) {
148 | 		bundler.transform({ global: true }, "uglifyify");
149 | 	}
150 | 
151 | 	return bundler
152 | 		.bundle()
153 | 		.on('error', function(err) {
154 | 			console.error('ERROR IN JS');
155 | 			console.error(err.message);
156 | 			doneCallback();
157 | 		})
158 | 		.pipe(source("thing.js"))
159 | 		.pipe(gulp.dest(config.paths.build.js))
160 | 		.pipe(reload({ stream: true }));
161 | }
162 | 
163 | compileJavascriptTask.description = "Bundle Javascript with browserify";
164 | gulp.task("browserify", ["preprocess"], compileJavascriptTask);
165 | 
166 | /**
167 |  * Clear files from the build directory.
168 |  */
169 | function cleanTask() {
170 | 	return del([
171 | 		config.dirs.build + "/**"
172 | 	]);
173 | }
174 | 
175 | cleanTask.description = "Clear files from the build directory";
176 | gulp.task("clean", cleanTask);
177 | 
178 | /**
179 |  * Copy Javascript libraries to build path.
180 |  */
181 | function copyLibrariesTask() {
182 | 	return gulp.src(config.paths.src.js + "/libs/*")
183 | 		.pipe(gulp.dest(config.paths.build.js + "/libs"))
184 | 		.pipe(reload({ stream: true }));
185 | }
186 | 
187 | copyLibrariesTask.description = "Copy Javascript libraries to build path";
188 | gulp.task("copy-libs", copyLibrariesTask);
189 | 
190 | /**
191 |  * Copy static assets to build path.
192 |  */
193 | function copyAssetsTask() {
194 | 	return gulp.src(config.paths.src.assets + "/**")
195 | 		.pipe(gulp.dest(config.paths.build.assets))
196 | 		.pipe(reload({ stream: true }));
197 | }
198 | 
199 | copyAssetsTask.description = "Copy static assets to build path";
200 | gulp.task("copy-assets", copyAssetsTask);
201 | 
202 | /**
203 |  * Copy font files to build path.
204 |  */
205 | function copyFontsTask() {
206 | 	return gulp.src(config.paths.src.fonts + "/**")
207 | 		.pipe(gulp.dest(config.paths.build.fonts))
208 | 		.pipe(reload({ stream: true }));
209 | }
210 | 
211 | copyFontsTask.description = "Copy font files to build path";
212 | gulp.task("copy-fonts", copyFontsTask);
213 | 
214 | /**
215 |  * Copy data files to build path.
216 |  */
217 | function copyDataTask() {
218 | 	return gulp.src(config.paths.src.data + "/**")
219 | 		.pipe(gulp.dest(config.paths.build.data))
220 | 		.pipe(reload({ stream: true }));
221 | }
222 | 
223 | copyDataTask.description = "Copy data files to build path"
224 | gulp.task("copy-data", copyDataTask);
225 | 
226 | /**
227 |  * Writes environment configuration variables to config.js and puts it in
228 |  * the build directory.
229 |  */
230 | function preprocessTask() {
231 | 	return gulp.src([config.paths.src.js + "/config.js"])
232 | 		.pipe(preprocess(preprocessOpts))
233 | 		.pipe(gulp.dest(config.paths.build.js));
234 | }
235 | 
236 | preprocessTask.description = "Preprocess dev/prod conditional code";
237 | gulp.task("preprocess", preprocessTask);
238 | 
239 | /**
240 |  * Watches project files for changes and runs the appropriate copy/compile
241 |  * tasks.
242 |  */
243 | function watchTask(done) {
244 | 	gulp.watch(config.paths.src.libs + "/**", ["copy-libs"]);
245 | 	gulp.watch(config.paths.src.fonts + "/**", ["copy-fonts"]);
246 | 	gulp.watch(config.paths.src.data + "/**", ["copy-data"]);
247 | 	gulp.watch(config.paths.src.assets + "/**", ["copy-assets"]);
248 | 	gulp.watch(config.paths.src.js + "/**", ["browserify"]);
249 | 	gulp.watch(config.paths.src.styl + "/**", ["stylus"]);
250 | 	gulp.watch(config.paths.src.jade + "/**", ["jade"]);
251 | 	done();
252 | }
253 | 
254 | watchTask.description = "Watch local files for changes and re-build as necessary."
255 | gulp.task("watch", allTasks, watchTask);
256 | 
257 | /**
258 |  * Starts the browsersync server.
259 |  */
260 | function browserSyncTask() {
261 | 	browserSync({
262 | 		server: {
263 | 			baseDir: "build"
264 | 		},
265 | 		open: false
266 | 	});
267 | }
268 | 
269 | browserSyncTask.description = "Serve the built project using BrowserSync";
270 | gulp.task("browser-sync", ["watch"], browserSyncTask);
271 | 
272 | /**
273 |  * Other tasks
274 |  */
275 | gulp.task("shell", allTasks, shell.task(shellCmd));
276 | gulp.task("build", ["shell"]);
277 | 
278 | if (args.build) {
279 | 	gulp.task("default", ["clean"], function () {
280 | 		gulp.start("build");
281 | 	});
282 | } else {
283 | 	gulp.task("default", ["clean"], function () {
284 | 		gulp.start("browser-sync");
285 | 	});
286 | }
287 | 


--------------------------------------------------------------------------------
/src/styl/normalize.styl:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *		user zoom.
  7 |  */
  8 | 
  9 | html
 10 | 	font-family: sans-serif // 1
 11 | 	-ms-text-size-adjust: 100% // 2
 12 | 	-webkit-text-size-adjust: 100% // 2
 13 | 
 14 | /**
 15 |  * Remove default margin.
 16 |  */
 17 | 
 18 | body
 19 | 	margin: 0
 20 | 
 21 | /* HTML5 display definitions
 22 | 	 ========================================================================== */
 23 | 
 24 | /**
 25 |  * Correct `block` display not defined in IE 8/9.
 26 |  */
 27 | 
 28 | article,
 29 | aside,
 30 | details,
 31 | figcaption,
 32 | figure,
 33 | footer,
 34 | header,
 35 | hgroup,
 36 | main,
 37 | nav,
 38 | section,
 39 | summary
 40 | 	display: block
 41 | 
 42 | /**
 43 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 44 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 45 |  */
 46 | 
 47 | audio,
 48 | canvas,
 49 | progress,
 50 | video
 51 | 	display: inline-block // 1
 52 | 	vertical-align: baseline // 2
 53 | 
 54 | /**
 55 |  * Prevent modern browsers from displaying `audio` without controls.
 56 |  * Remove excess height in iOS 5 devices.
 57 |  */
 58 | 
 59 | audio:not([controls])
 60 | 	display: none
 61 | 	height: 0
 62 | 
 63 | /**
 64 |  * Address `[hidden]` styling not present in IE 8/9.
 65 |  * Hide the `template` element in IE, Safari, and Firefox < 22.
 66 |  */
 67 | 
 68 | [hidden],
 69 | template
 70 | 	display: none
 71 | 
 72 | /* Links
 73 | 	 ========================================================================== */
 74 | 
 75 | /**
 76 |  * 1. Remove the gray background color from active links in IE 10.
 77 |  * 2. Improve readability when focused and also mouse hovered in all browsers.
 78 |  */
 79 | 
 80 | a
 81 | 	background: transparent // 1
 82 | 	&:active,
 83 | 	&:hover
 84 | 		outline: 0 // 2
 85 | 
 86 | /* Text-level semantics
 87 | 	 ========================================================================== */
 88 | 
 89 | /**
 90 |  * Address styling not present in IE 8/9, Safari 5, and Chrome.
 91 |  */
 92 | 
 93 | abbr[title]
 94 | 	border-bottom: 1px dotted
 95 | 
 96 | /**
 97 |  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 98 |  */
 99 | 
100 | b,
101 | strong
102 | 	font-weight: bold
103 | 
104 | /**
105 |  * Address styling not present in Safari 5 and Chrome.
106 |  */
107 | 
108 | dfn
109 | 	font-style: italic
110 | 
111 | /**
112 |  * Address variable `h1` font-size and margin within `section` and `article`
113 |  * contexts in Firefox 4+, Safari 5, and Chrome.
114 |  */
115 | 
116 | h1
117 | 	font-size: 2em
118 | 	margin: 0.67em 0
119 | 
120 | /**
121 |  * Address styling not present in IE 8/9.
122 |  */
123 | 
124 | mark
125 | 	background: #ff0
126 | 	color: #000
127 | 
128 | /**
129 |  * Address inconsistent and variable font size in all browsers.
130 |  */
131 | 
132 | small
133 | 	font-size: 80%
134 | 
135 | /**
136 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
137 |  */
138 | 
139 | sub,
140 | sup
141 | 	font-size: 75%
142 | 	line-height: 0
143 | 	position: relative
144 | 	vertical-align: baseline
145 | 
146 | sup
147 | 	top: -0.5em
148 | 
149 | sub
150 | 	bottom: -0.25em
151 | 
152 | /* Embedded content
153 | 	 ========================================================================== */
154 | 
155 | /**
156 |  * Remove border when inside `a` element in IE 8/9.
157 |  */
158 | 
159 | img
160 | 	border: 0
161 | 
162 | /**
163 |  * Correct overflow displayed oddly in IE 9.
164 |  */
165 | 
166 | svg:not(:root)
167 | 	overflow: hidden
168 | 
169 | /* Grouping content
170 | 	 ========================================================================== */
171 | 
172 | /**
173 |  * Address margin not present in IE 8/9 and Safari 5.
174 |  */
175 | 
176 | figure
177 | 	margin: 1em 40px
178 | 
179 | /**
180 |  * Address differences between Firefox and other browsers.
181 |  */
182 | 
183 | hr
184 | 	-moz-box-sizing: content-box
185 | 	box-sizing: content-box
186 | 	height: 0
187 | 
188 | /**
189 |  * Contain overflow in all browsers.
190 |  */
191 | 
192 | pre
193 | 	overflow: auto
194 | 
195 | /**
196 |  * Address odd `em`-unit font size rendering in all browsers.
197 |  */
198 | 
199 | code,
200 | kbd,
201 | pre,
202 | samp
203 | 	font-family: monospace, monospace
204 | 	font-size: 1em
205 | 
206 | /* Forms
207 | 	 ========================================================================== */
208 | 
209 | /**
210 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
211 |  * styling of `select`, unless a `border` property is set.
212 |  */
213 | 
214 | /**
215 |  * 1. Correct color not being inherited.
216 |  *		Known issue: affects color of disabled elements.
217 |  * 2. Correct font properties not being inherited.
218 |  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
219 |  */
220 | 
221 | button,
222 | input,
223 | optgroup,
224 | select,
225 | textarea
226 | 	color: inherit // 1
227 | 	font: inherit // 2
228 | 	margin: 0 // 3
229 | 
230 | /**
231 |  * Address `overflow` set to `hidden` in IE 8/9/10.
232 |  */
233 | 
234 | button
235 | 	overflow: visible
236 | 
237 | /**
238 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
239 |  * All other form control elements do not inherit `text-transform` values.
240 |  * Correct `button` style inheritance in Firefox, IE 8+, and Opera
241 |  * Correct `select` style inheritance in Firefox.
242 |  */
243 | 
244 | button,
245 | select
246 | 	text-transform: none
247 | 
248 | /**
249 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
250 |  *		and `video` controls.
251 |  * 2. Correct inability to style clickable `input` types in iOS.
252 |  * 3. Improve usability and consistency of cursor style between image-type
253 |  *		`input` and others.
254 |  */
255 | 
256 | button,
257 | html input[type="button"], // 1
258 | input[type="reset"],
259 | input[type="submit"]
260 | 	-webkit-appearance: button // 2
261 | 	cursor: pointer // 3
262 | 
263 | /**
264 |  * Re-set default cursor for disabled elements.
265 |  */
266 | 
267 | button[disabled],
268 | html input[disabled]
269 | 	cursor: default
270 | 
271 | /**
272 |  * Remove inner padding and border in Firefox 4+.
273 |  */
274 | 
275 | button::-moz-focus-inner,
276 | input::-moz-focus-inner
277 | 	border: 0
278 | 	padding: 0
279 | 
280 | /**
281 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
282 |  * the UA stylesheet.
283 |  */
284 | 
285 | input
286 | 	line-height: normal
287 | 
288 | /**
289 |  * It's recommended that you don't attempt to style these elements.
290 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
291 |  *
292 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
293 |  * 2. Remove excess padding in IE 8/9/10.
294 |  */
295 | 
296 | input[type="checkbox"],
297 | input[type="radio"]
298 | 	box-sizing: border-box // 1
299 | 	padding: 0 // 2
300 | 
301 | /**
302 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
303 |  * `font-size` values of the `input`, it causes the cursor style of the
304 |  * decrement button to change from `default` to `text`.
305 |  */
306 | 
307 | input[type="number"]::-webkit-inner-spin-button,
308 | input[type="number"]::-webkit-outer-spin-button
309 | 	height: auto
310 | 
311 | /**
312 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
313 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
314 |  *		(include `-moz` to future-proof).
315 |  */
316 | 
317 | input[type="search"]
318 | 	-webkit-appearance: textfield // 1
319 | 	-moz-box-sizing: content-box
320 | 	-webkit-box-sizing: content-box // 2
321 | 	box-sizing: content-box
322 | 
323 | /**
324 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
325 |  * Safari (but not Chrome) clips the cancel button when the search input has
326 |  * padding (and `textfield` appearance).
327 |  */
328 | 
329 | input[type="search"]::-webkit-search-cancel-button,
330 | input[type="search"]::-webkit-search-decoration
331 | 	-webkit-appearance: none
332 | 
333 | /**
334 |  * Define consistent border, margin, and padding.
335 |  */
336 | 
337 | fieldset
338 | 	border: 1px solid #c0c0c0
339 | 	margin: 0 2px
340 | 	padding: 0.35em 0.625em 0.75em
341 | 
342 | /**
343 |  * 1. Correct `color` not being inherited in IE 8/9.
344 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
345 |  */
346 | 
347 | legend
348 | 	border: 0 // 1
349 | 	padding: 0 // 2
350 | 
351 | /**
352 |  * Remove default vertical scrollbar in IE 8/9.
353 |  */
354 | 
355 | textarea
356 | 	overflow: auto
357 | 
358 | /**
359 |  * Don't inherit the `font-weight` (applied by a rule above).
360 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
361 |  */
362 | 
363 | optgroup
364 | 	font-weight: bold
365 | 
366 | /* Tables ================================================================== */
367 | 
368 | /**
369 |  * Remove most spacing between table cells.
370 |  */
371 | 
372 | table
373 | 	border-collapse: collapse
374 | 	border-spacing: 0
375 | 
376 | td,
377 | th
378 | 	padding: 0
379 | 


--------------------------------------------------------------------------------