├── src
    ├── assets
    │   └── .placeholder
    ├── data
    │   ├── .placeholder
    │   ├── graphic.csv
    │   └── indicators.csv
    ├── js
    │   ├── config.js
    │   ├── detectFeatures.js
    │   ├── thing.js
    │   ├── utils.js
    │   ├── share.js
    │   └── fm.js
    ├── jade
    │   ├── includes
    │   │   └── share.jade
    │   ├── thing.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
├── __build.sh
├── package.json
└── gulpfile.js


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


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # family-reunion-table
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 | 


--------------------------------------------------------------------------------
/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/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/data/indicators.csv:
--------------------------------------------------------------------------------
1 | country,ccode,economic_resources
Austria,AT,0
Australia,AU,100
Belgium,BE,0
Bulgaria,BG,50
Canada,CA,50
Switzerland,CH,0
Cyprus,CY,0
Czech Republic,CZ,0
Germany,DE,50
Denmark,DK,0
Estonia,EE,100
Spain,ES,50
Finland,FI,100
France,FR,0
Greece,GR,0
Croatia,HR,0
Hungary,HU,50
Ireland,IE,50
Iceland,IS,0
Italy,IT,0
Japan,JP,50
South Korea,KR,0
Lithuania,LT,50
Luxembourg,LU,100
Latvia,LV,0
Malta,MT,50
Netherlands,NL,0
Norway,NO,50
New Zealand,NZ,0
Poland,PL,100
Portugal,PT,50
Romania,RO,100
Sweden,SE,50
Slovenia,SI,50
Slovakia,SK,100
Turkey,TR,50
United Kingdom,UK,50
USA,US,50


--------------------------------------------------------------------------------
/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/jade/thing.jade:
--------------------------------------------------------------------------------
 1 | h2 How restrictive are income requirements for sponsoring a spouse?
 2 | 
 3 | table#legend
 4 | 	tr.low
 5 | 		td.swatch
 6 | 			b
 7 | 		td.title Low:
 8 | 		td.desc No income threshold for sponsors, or one that’s lower than state support
 9 | 	tr.moderate
10 | 		td.swatch
11 | 			b
12 | 		td.title Moderate:
13 | 		td.desc Sponsor’s income has to be higher than state support
14 | 	tr.high
15 | 		td.swatch
16 | 			b
17 | 		td.title High:
18 | 		td.desc Sponsor’s income can’t come from state support and/or must come from a job
19 | 
20 | table#mipex
21 | 	thead
22 | 		tr
23 | 			th Country
24 | 			th Restrictions
25 | 	tbody
26 | 
27 | div.footnote Data: <a href="http://mipex.eu/">MIPEX</a> (2014)
28 | 


--------------------------------------------------------------------------------
/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 family-reunion-table
 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 | 


--------------------------------------------------------------------------------
/__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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "family-reunion-table",
 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 |     "lodash": "^4.17.4"
17 |   },
18 |   "devDependencies": {
19 |     "archieml": "^0.3.1",
20 |     "browser-sync": "^2.9.11",
21 |     "browserify": "^12.0.1",
22 |     "d3": "^3.5.6",
23 |     "d3-geo-projection": "^1.0.3",
24 |     "d3-request": "^0.4.7",
25 |     "del": "^2.0.2",
26 |     "gulp": "^3.6.2",
27 |     "gulp-changed": "^1.3.0",
28 |     "gulp-jade": "^1.1.0",
29 |     "gulp-preprocess": "^1.2.0",
30 |     "gulp-shell": "^0.2.5",
31 |     "gulp-stylus": "^2.1.0",
32 |     "nib": "^1.0.2",
33 |     "nomnom": "^1.8.0",
34 |     "request": "^2.65.0",
35 |     "topojson": "1.6.27",
36 |     "uglifyify": "^3.0.1",
37 |     "vinyl-source-stream": "^1.1.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/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/js/thing.js:
--------------------------------------------------------------------------------
 1 | // NPM modules
 2 | var d3 = require('d3');
 3 | var request = require('d3-request');
 4 | var _ = require('lodash');
 5 | 
 6 | // Local modules
 7 | var features = require('./detectFeatures')();
 8 | var fm = require('./fm');
 9 | var utils = require('./utils');
10 | 
11 | // Globals
12 | var DEFAULT_WIDTH = 940;
13 | var MOBILE_BREAKPOINT = 600;
14 | 
15 | var indicatorData = null;
16 | 
17 | var rowTemplate = _.template('\
18 | <td class="name"><%= country %></td>\
19 | <% if (economic_resources == \'100\') { %>\
20 | 	<td class="value low">Low</td>\
21 | <% } else if (economic_resources == \'50\') { %>\
22 | 	<td class="value moderate">Moderate</td>\
23 | <% } else { %>\
24 | 	<td class="value high">High</td>\
25 | <% } %>\
26 | ')
27 | 
28 | 
29 | /**
30 |  * Initialize the graphic.
31 |  *
32 |  * Fetch data, format data, cache HTML references, etc.
33 |  */
34 | function init() {
35 | 	d3.csv('data/indicators.csv', function(error, data) {
36 | 		indicatorData = data;
37 | 
38 | 		render();
39 | 		$(window).resize(utils.throttle(onResize, 250));
40 | 	});
41 | }
42 | 
43 | /**
44 |  * Invoke on resize. Update child size.
45 |  */
46 | function onResize() {
47 | 	fm.resize();
48 | }
49 | 
50 | /**
51 |  * Figure out the current frame size and render the graphic.
52 |  */
53 | function render() {
54 | 	console.log(indicatorData);
55 | 
56 | 	d3.select('table#mipex tbody')
57 | 		.selectAll('tr')
58 | 		.data(indicatorData)
59 | 		.enter()
60 | 		.append('tr')
61 | 			.html(rowTemplate);
62 | 
63 | 	// Inform parent frame of new height
64 | 	fm.resize()
65 | }
66 | 
67 | 
68 | // Bind on-load handler
69 | $(document).ready(function() {
70 | 	init();
71 | });
72 | 


--------------------------------------------------------------------------------
/src/styl/thing.styl:
--------------------------------------------------------------------------------
 1 | // Interactive-specific css here
 2 | 
 3 | $low = #f3ceed
 4 | $moderate = #f1b4e3
 5 | $high = #ef9ad8
 6 | 
 7 | table#legend
 8 |     margin: 15px 0
 9 | 
10 |     tr
11 |         td
12 |             vertical-align: top
13 | 
14 |             &.swatch
15 |                 white-space: nowrap;
16 | 
17 |                 b
18 |                     display: block
19 |                     width: 17px
20 |                     height: 17px
21 |                     border: 1px solid $qz-map-graticule
22 | 
23 |             &.title
24 |                 font-weight bold
25 | 
26 |             &.desc
27 |                 line-height 20px
28 | 
29 |         &.low b
30 |             background-color: $low
31 | 
32 |         &.moderate b
33 |             background-color: $moderate
34 | 
35 |         &.high b
36 |             background-color: $high
37 | 
38 | table
39 |     width 100%
40 |     font-family $qz-sans
41 | 
42 |     thead
43 |         th
44 |             padding 4px
45 |             text-align left
46 | 
47 |     tbody
48 |         tr
49 |             td
50 |                 padding 4px
51 |                 border-top 1px solid $qz-background-gray
52 | 
53 |                 &.name
54 |                     width 40%
55 | 
56 |                 &.value
57 |                     width 60%
58 | 
59 |                 &.low
60 |                     background-color $low
61 | 
62 |                 &.moderate
63 |                     background-color $moderate
64 | 
65 |                 &.high
66 |                     background-color $high
67 | 
68 | .footnote
69 |     margin-top 20px
70 |     padding-bottom 20px
71 |     font-family $qz-sans
72 |     color: $qz-gray-2;
73 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 = "family-reunion-table";
 36 | var thingPath = qzdataPath + "/2017/family-reunion-table";
 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 | 


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