<commit_before>//		  _					   _    _ _ _ _
//		 | |				  | |  | (_| | | 
//		 | | ___   ___ _   _  | |__| |_| | | ___ _ __
//	 _   | |/ _ \ / _ | | | | |  __  | | | |/ _ | '__|
//	| |__| | (_) |  __| |_| | | |  | | | | |  __| |
//	 \____/ \___/ \___|\__, | |_|  |_|_|_|_|\___|_|
//						__/ |
//		Stylus CSS	   |___/         (c)2014

// vendor-prefixes ?= webkit moz official
@import 'nib'

blackColor = #222

proximaFamily = "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif

borderThickness = .25em
borderAnimTime = .35s

// ==================================
// ***** MEDIA QUERIES FUNCTION *****
// Via http://kizu.ru/en/issues/new-stylus-features/

// Define the cache and the aliases
$media_cache = {}
$media_aliases = {
	bigscreen:	'(min-width: 75em)'
	tablet: 	'(max-width: 48em)'
	phones: 	'(max-width: 20em)'
}

// Mixin for caching breakpoint styles
media($condition)
	helper($condition)
		unless $media_cache[$condition]
			$media_cache[$condition] = ()
		push($media_cache[$condition], block)

	+helper($condition)
		{selector() + ''}
			{block}

// Function to call the cached styles
apply_media_cache()
	for $media, $blocks in $media_cache
		$media = unquote($media_aliases[$media] || $media)
		$media = '(%s)' % $media unless match('\(', $media)
		$media = 'only screen and %s' % $media
		@media $media
			for $block in $blocks
				{$block}

// *****   END MEDIA QUERIES    *****
// ==================================

body
	padding: 0
	margin: 0
	background: #fff
	color: blackColor
	font: 16px/1.5 proximaFamily

.pageframe
	position: absolute
	box-sizing: border-box
	z-index: 10000
	.t, .r, .b, .l
		position: fixed
		width: 0
		height: 0
		border: (borderThickness/2) solid blackColor
		transition: all borderAnimTime ease-in-out
	.t, .b
		width: 100%
	.r, .l
		height: 100%
	.t
		top: 0
		right: 0
		transform: translateX(-50%) 
	.r
		bottom: 0
		right: 0
		transform: translateY(-100%)
		transition-delay: borderAnimTime
	.b
		bottom: 0
		left: 0
		transform: translateX(-100%)
		transition-delay: borderAnimTime
	.l
		top: 0
		left: 0
		transform: translateY(-50%)
	&.headeranim .t
		animation-name: mockload
		animation-duration: 15s
		animation-timing-function: ease-in
		animation-iteration-count: 1
		animation-fill-mode: forwards
		animation-delay: .5s
	&.loaded .t, &.loaded .b
		transform: translateX(0) 
	&.loaded .r, &.loaded .l
		transform: translateY(0)

@keyframes mockload
	0% 
		transform: translateX(-90%)
	2% 
		transform: translateX(-94%)
	8%, 10% 
		transform: translateX(-85%)
	16% 
		transform: translateX(-70%)
	50% 
		transform: translateX(-55%)
	100% 
		transform: translateX(-50%)

p,
h1,
h2,
h3,
h4,
h5,
h6,
span
	opacity: 0
	transition: opacity .2s ease-out

.wf-active p, .wf-inactive p,
.wf-active h1, .wf-inactive h1,
.wf-active h2, .wf-inactive h2,
.wf-active h3, .wf-inactive h3,
.wf-active h4, .wf-inactive h4,
.wf-active h5, .wf-inactive h5,
.wf-active h6, .wf-inactive h6,
.wf-active span, .wf-inactive span
	opacity: 1

p > a 
	color: #555
	ransition: color .2s ease
	&:hover
		color: #888

.browsehappy
	margin: 0 0 .2em
	background: #D52626
	color: #FFF
	padding: .75em 5em
	a
		border-bottom: 2px solid #fff
		color: #FFF
		text-decoration: none
		font-weight: bold
		&:hover
			border-bottom: 3px solid #fff

header 
	buttonSize = 2.4em
	position: fixed
	margin: borderThickness 0 0 borderThickness
	height: buttonSize + borderThickness
	overflow: hidden
	z-index: 9002
	top: 0
	left: 0
	transform-origin: top left
	.menuButton 
		position: absolute
		z-index: 10
		width: buttonSize
		height: buttonSize
		border: borderThickness solid blackColor
		border-top: none
		border-left: none
		background: #fff
		cursor: pointer
		transform: translateZ(0)
		&:before, &:after 
			position: absolute
			top: .45*buttonSize
			left: (buttonSize/6)
			background-color: blackColor
			content: ""
			transition: .2s ease			
		&:before 
			width: ((2*buttonSize)/3)
			height: (buttonSize/12)
			transform: rotate(90deg)
		&:after 
			width: ((2*buttonSize)/3)
			height: (buttonSize/12)
	&.active 
		.menuButton:before 
			transform: rotate(0)
	&.menu ul 
		position: relative
		left: -100% //
		z-index: 5
		display: inline-block
		float: left
		margin-top: -1*borderThickness
		padding-top: 0
		width: auto // Seems to work okay with this and left: -100%
		height: buttonSize
		border: borderThickness solid blackColor
		background-color: #fff
		list-style: none
		transition: left .75s cubic-bezier(0,.5,.5,1) //Check the validity of the curve.
		transform: translateZ(0)
		+media(phones) 
			min-width: 17.5em
	&.menu
		&.active ul 
			left: 0
	li 
		display: inline-block
		margin-top: ((2*buttonSize)/15)
		padding: 0 ((8*buttonSize)/15)
		a 
			border-bottom: 1px solid #fff
			color: blackColor
			text-decoration: none
			transition: border-bottom .3s ease
			font-size: 1em *.8
			&:hover 
				border-bottom: 1px solid blackColor
		&.active a
			color: blackColor + 50%
			&:hover 
				border-bottom: 1px solid transparent

.mainContainer
	position: relative
	display: block

section
	position: relative
	// clearfix()

section.masthead
	height: 50em
	margin-bottom: -15em
	background-size: 40em !important
	transition: all 1s ease
	z-index: -1
	+media('tablet')
		height: 40em
		margin-bottom: -16em
		background-size: 35em !important
	+media('phones')
		height: 30em
		margin-bottom: -12em
		background-size: 25em !important
	.title
		position: absolute
		bottom: 60%
		left: 30%
		margin: 0
		min-width: 60%
		border-bottom: 1rem solid blackColor
		text-transform: uppercase
		letter-spacing: -.05em
		font-weight: 300
		font-size: 5em
		font-family: Quicksand, sans-serif
		line-height: 1em
		transition: padding 1s, bottom 1s, border 1s, line-height 1s, font-size 1s
		transition-timing-function: ease
		+media('tablet')
			font-size: 2.5em
			border-bottom: .5rem solid blackColor
		+media('phones')
			left: 5%
			font-size: 2rem
			border-bottom: .25rem solid blackColor

section.homeImage
	overflow-y: hidden
	margin-bottom: 2.5rem
	width: 100%
	height: 13em
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 2rem
		height: 8rem 
	+media('phones')
		margin-bottom: 1rem
		height: 6rem
	.caption
		display: inline-block
		padding-right: 3px
		width: 30%
		border-right: .15rem solid black
		vertical-align: top
		text-align: right
		text-transform: uppercase
		font-size: 11px
		+media('phones')
			border: none
		p, h3
			margin: 0
			padding: 0 
			max-width: 70%
			float: right
			clear: both
			+media('tablet')
				max-width: 90%
	img
		width: 60%
		+media('phones')
			padding-left: 2.5%







section.singleImage
	margin-bottom: 1.5rem
	width: 100%
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 1rem
	+media('phones')
		margin-bottom: .5rem
	img
		margin-left: 30%
		width: 60%
		position: relative
		+media('phones')
			margin: 0 auto
			width: 95%
			padding-left: 2.5%
	&.scalable img
		transition: all .25s ease
		transform: translateZ(0)
		cursor: pointer
		cursor: -moz-zoom-in
		cursor: -webkit-zoom-in
		cursor: zoom-in
		+media('phones')
			cursor: default
			transform: none
			transition: none
		&.active
			margin-left: 5%
			transform: scale(1.5)
			transform-origin: 0% 5%
			box-shadow: 0 25px 50px rgba(20,20,20,.2)
			cursor: -moz-zoom-out
			cursor: -webkit-zoom-out
			cursor: zoom-out
			z-index: 9001
			+media('phones')
				transform: scale(1)
				cursor: default
				box-shadow: none
				transform-origin: 50% 50%
				margin-left: 0
	&.caption img
		margin-bottom: -.5em
	p.caption
		margin: 0 0 0 30%
		line-height: 1em
		font-size: .75em
		border-bottom: 1px solid #bbb
		display: inline-block
		padding: .5em 1em .25em
		min-width: 30%
		max-width: 60%
		box-sizing: border-box
		+media('phones')
			max-width: 90%
			margin-left: 2.5%

section.doubleImage
	margin-bottom: 0
	width: 100%
	transition: margin 1s ease, height 1s ease
	clear: both
	.doubleWrapper
		width: 60%
		margin-left: 30%
		height: auto
		position: static
		display: block
		+media('phones')
			width: 90%
			margin-left: 5%
		.singleWrapper
			width: 49%
			height: 100%
			display: inline-block
			vertical-align: top
			position: static
			&:nth-child(2n+2):not(.active)
				margin-left: 1%
			img
				width: 100%
				position: relative
				+media('phones')
					margin: 0 auto
					width: 95%
					padding-left: 2.5%
			p.caption
				line-height: 1em
				font-size: 0.75em
				border-bottom: 1px solid #bbb
				display: inline-block
				padding: 0.5em 1em 0.25em
				min-width: 30%
				max-width: 90%
				box-sizing: border-box
				position: relative
				bottom: 0
				+media('phones')
					max-width: 90%
					margin-left: 2.5%
	&.scalable img
		transition: all .25s ease
		transform: translateZ(0)
		cursor: pointer
		cursor: -moz-zoom-in
		cursor: -webkit-zoom-in
		cursor: zoom-in
		+media('phones')
			cursor: default
			transform: none
			transition: none
		&:hover, &:active 
			z-index: 9000 //hack to keep them from flashing
		&.active
			position: absolute
			left: 0
			margin-left: 5%
			transform: scale(.9)
			transform-origin: 0 0
			box-shadow: 0 25px 50px rgba(20,20,20,.2)
			cursor: -moz-zoom-out
			cursor: -webkit-zoom-out
			cursor: zoom-out
			z-index: 9001
			+media('phones')
				transform: scale(1)
				cursor: default
				box-shadow: none
				transform-origin: 50% 50%
				margin-left: 0
			&.caption img
				margin-bottom: -.5em

section.textBlock
	margin-bottom: 1.5rem
	width: 100%
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 1rem
	+media('phones')
		margin-bottom: .5rem
	p, h2
		margin: 0 0 0.25em 30%
		width: 60%
		font-weight: 400
		+media('phones')
			margin: 0 auto
			width: 90%
			margin-left: 5%
	h2
		margin: 0 0 0.5em 30%
		line-height: 1em




footer
	position: fixed
	bottom: borderThickness
	left: borderThickness * 2
	a
		text-decoration: none
		color: #bbb
		font-size: 10px
		&:hover
			color: #aaa



// Output Breakpoint Styles
apply_media_cache()
<commit_msg>Fixed heading margin on mobile breakpoint<commit_after>//		  _					   _    _ _ _ _
//		 | |				  | |  | (_| | | 
//		 | | ___   ___ _   _  | |__| |_| | | ___ _ __
//	 _   | |/ _ \ / _ | | | | |  __  | | | |/ _ | '__|
//	| |__| | (_) |  __| |_| | | |  | | | | |  __| |
//	 \____/ \___/ \___|\__, | |_|  |_|_|_|_|\___|_|
//						__/ |
//		Stylus CSS	   |___/         (c)2014

// vendor-prefixes ?= webkit moz official
@import 'nib'

blackColor = #222

proximaFamily = "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif

borderThickness = .25em
borderAnimTime = .35s

// ==================================
// ***** MEDIA QUERIES FUNCTION *****
// Via http://kizu.ru/en/issues/new-stylus-features/

// Define the cache and the aliases
$media_cache = {}
$media_aliases = {
	bigscreen:	'(min-width: 75em)'
	tablet: 	'(max-width: 48em)'
	phones: 	'(max-width: 20em)'
}

// Mixin for caching breakpoint styles
media($condition)
	helper($condition)
		unless $media_cache[$condition]
			$media_cache[$condition] = ()
		push($media_cache[$condition], block)

	+helper($condition)
		{selector() + ''}
			{block}

// Function to call the cached styles
apply_media_cache()
	for $media, $blocks in $media_cache
		$media = unquote($media_aliases[$media] || $media)
		$media = '(%s)' % $media unless match('\(', $media)
		$media = 'only screen and %s' % $media
		@media $media
			for $block in $blocks
				{$block}

// *****   END MEDIA QUERIES    *****
// ==================================

body
	padding: 0
	margin: 0
	background: #fff
	color: blackColor
	font: 16px/1.5 proximaFamily

.pageframe
	position: absolute
	box-sizing: border-box
	z-index: 10000
	.t, .r, .b, .l
		position: fixed
		width: 0
		height: 0
		border: (borderThickness/2) solid blackColor
		transition: all borderAnimTime ease-in-out
	.t, .b
		width: 100%
	.r, .l
		height: 100%
	.t
		top: 0
		right: 0
		transform: translateX(-50%) 
	.r
		bottom: 0
		right: 0
		transform: translateY(-100%)
		transition-delay: borderAnimTime
	.b
		bottom: 0
		left: 0
		transform: translateX(-100%)
		transition-delay: borderAnimTime
	.l
		top: 0
		left: 0
		transform: translateY(-50%)
	&.headeranim .t
		animation-name: mockload
		animation-duration: 15s
		animation-timing-function: ease-in
		animation-iteration-count: 1
		animation-fill-mode: forwards
		animation-delay: .5s
	&.loaded .t, &.loaded .b
		transform: translateX(0) 
	&.loaded .r, &.loaded .l
		transform: translateY(0)

@keyframes mockload
	0% 
		transform: translateX(-90%)
	2% 
		transform: translateX(-94%)
	8%, 10% 
		transform: translateX(-85%)
	16% 
		transform: translateX(-70%)
	50% 
		transform: translateX(-55%)
	100% 
		transform: translateX(-50%)

p,
h1,
h2,
h3,
h4,
h5,
h6,
span
	opacity: 0
	transition: opacity .2s ease-out

.wf-active p, .wf-inactive p,
.wf-active h1, .wf-inactive h1,
.wf-active h2, .wf-inactive h2,
.wf-active h3, .wf-inactive h3,
.wf-active h4, .wf-inactive h4,
.wf-active h5, .wf-inactive h5,
.wf-active h6, .wf-inactive h6,
.wf-active span, .wf-inactive span
	opacity: 1

p > a 
	color: #555
	ransition: color .2s ease
	&:hover
		color: #888

.browsehappy
	margin: 0 0 .2em
	background: #D52626
	color: #FFF
	padding: .75em 5em
	a
		border-bottom: 2px solid #fff
		color: #FFF
		text-decoration: none
		font-weight: bold
		&:hover
			border-bottom: 3px solid #fff

header 
	buttonSize = 2.4em
	position: fixed
	margin: borderThickness 0 0 borderThickness
	height: buttonSize + borderThickness
	overflow: hidden
	z-index: 9002
	top: 0
	left: 0
	transform-origin: top left
	.menuButton 
		position: absolute
		z-index: 10
		width: buttonSize
		height: buttonSize
		border: borderThickness solid blackColor
		border-top: none
		border-left: none
		background: #fff
		cursor: pointer
		transform: translateZ(0)
		&:before, &:after 
			position: absolute
			top: .45*buttonSize
			left: (buttonSize/6)
			background-color: blackColor
			content: ""
			transition: .2s ease			
		&:before 
			width: ((2*buttonSize)/3)
			height: (buttonSize/12)
			transform: rotate(90deg)
		&:after 
			width: ((2*buttonSize)/3)
			height: (buttonSize/12)
	&.active 
		.menuButton:before 
			transform: rotate(0)
	&.menu ul 
		position: relative
		left: -100% //
		z-index: 5
		display: inline-block
		float: left
		margin-top: -1*borderThickness
		padding-top: 0
		width: auto // Seems to work okay with this and left: -100%
		height: buttonSize
		border: borderThickness solid blackColor
		background-color: #fff
		list-style: none
		transition: left .75s cubic-bezier(0,.5,.5,1) //Check the validity of the curve.
		transform: translateZ(0)
		+media(phones) 
			min-width: 17.5em
	&.menu
		&.active ul 
			left: 0
	li 
		display: inline-block
		margin-top: ((2*buttonSize)/15)
		padding: 0 ((8*buttonSize)/15)
		a 
			border-bottom: 1px solid #fff
			color: blackColor
			text-decoration: none
			transition: border-bottom .3s ease
			font-size: 1em *.8
			&:hover 
				border-bottom: 1px solid blackColor
		&.active a
			color: blackColor + 50%
			&:hover 
				border-bottom: 1px solid transparent

.mainContainer
	position: relative
	display: block

section
	position: relative
	// clearfix()

section.masthead
	height: 50em
	margin-bottom: -15em
	background-size: 40em !important
	transition: all 1s ease
	z-index: -1
	+media('tablet')
		height: 40em
		margin-bottom: -16em
		background-size: 35em !important
	+media('phones')
		height: 30em
		margin-bottom: -12em
		background-size: 25em !important
	.title
		position: absolute
		bottom: 60%
		left: 30%
		margin: 0
		min-width: 60%
		border-bottom: 1rem solid blackColor
		text-transform: uppercase
		letter-spacing: -.05em
		font-weight: 300
		font-size: 5em
		font-family: Quicksand, sans-serif
		line-height: 1em
		transition: padding 1s, bottom 1s, border 1s, line-height 1s, font-size 1s
		transition-timing-function: ease
		+media('tablet')
			font-size: 2.5em
			border-bottom: .5rem solid blackColor
		+media('phones')
			left: 5%
			font-size: 2rem
			border-bottom: .25rem solid blackColor

section.homeImage
	overflow-y: hidden
	margin-bottom: 2.5rem
	width: 100%
	height: 13em
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 2rem
		height: 8rem 
	+media('phones')
		margin-bottom: 1rem
		height: 6rem
	.caption
		display: inline-block
		padding-right: 3px
		width: 30%
		border-right: .15rem solid black
		vertical-align: top
		text-align: right
		text-transform: uppercase
		font-size: 11px
		+media('phones')
			border: none
		p, h3
			margin: 0
			padding: 0 
			max-width: 70%
			float: right
			clear: both
			+media('tablet')
				max-width: 90%
	img
		width: 60%
		+media('phones')
			padding-left: 2.5%







section.singleImage
	margin-bottom: 1.5rem
	width: 100%
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 1rem
	+media('phones')
		margin-bottom: .5rem
	img
		margin-left: 30%
		width: 60%
		position: relative
		+media('phones')
			margin: 0 auto
			width: 95%
			padding-left: 2.5%
	&.scalable img
		transition: all .25s ease
		transform: translateZ(0)
		cursor: pointer
		cursor: -moz-zoom-in
		cursor: -webkit-zoom-in
		cursor: zoom-in
		+media('phones')
			cursor: default
			transform: none
			transition: none
		&.active
			margin-left: 5%
			transform: scale(1.5)
			transform-origin: 0% 5%
			box-shadow: 0 25px 50px rgba(20,20,20,.2)
			cursor: -moz-zoom-out
			cursor: -webkit-zoom-out
			cursor: zoom-out
			z-index: 9001
			+media('phones')
				transform: scale(1)
				cursor: default
				box-shadow: none
				transform-origin: 50% 50%
				margin-left: 0
	&.caption img
		margin-bottom: -.5em
	p.caption
		margin: 0 0 0 30%
		line-height: 1em
		font-size: .75em
		border-bottom: 1px solid #bbb
		display: inline-block
		padding: .5em 1em .25em
		min-width: 30%
		max-width: 60%
		box-sizing: border-box
		+media('phones')
			max-width: 90%
			margin-left: 2.5%

section.doubleImage
	margin-bottom: 0
	width: 100%
	transition: margin 1s ease, height 1s ease
	clear: both
	.doubleWrapper
		width: 60%
		margin-left: 30%
		height: auto
		position: static
		display: block
		+media('phones')
			width: 90%
			margin-left: 5%
		.singleWrapper
			width: 49%
			height: 100%
			display: inline-block
			vertical-align: top
			position: static
			&:nth-child(2n+2):not(.active)
				margin-left: 1%
			img
				width: 100%
				position: relative
				+media('phones')
					margin: 0 auto
					width: 95%
					padding-left: 2.5%
			p.caption
				line-height: 1em
				font-size: 0.75em
				border-bottom: 1px solid #bbb
				display: inline-block
				padding: 0.5em 1em 0.25em
				min-width: 30%
				max-width: 90%
				box-sizing: border-box
				position: relative
				bottom: 0
				+media('phones')
					max-width: 90%
					margin-left: 2.5%
	&.scalable img
		transition: all .25s ease
		transform: translateZ(0)
		cursor: pointer
		cursor: -moz-zoom-in
		cursor: -webkit-zoom-in
		cursor: zoom-in
		+media('phones')
			cursor: default
			transform: none
			transition: none
		&:hover, &:active 
			z-index: 9000 //hack to keep them from flashing
		&.active
			position: absolute
			left: 0
			margin-left: 5%
			transform: scale(.9)
			transform-origin: 0 0
			box-shadow: 0 25px 50px rgba(20,20,20,.2)
			cursor: -moz-zoom-out
			cursor: -webkit-zoom-out
			cursor: zoom-out
			z-index: 9001
			+media('phones')
				transform: scale(1)
				cursor: default
				box-shadow: none
				transform-origin: 50% 50%
				margin-left: 0
			&.caption img
				margin-bottom: -.5em

section.textBlock
	margin-bottom: 1.5rem
	width: 100%
	transition: margin 1s ease, height 1s ease
	+media('tablet')
		margin-bottom: 1rem
	+media('phones')
		margin-bottom: .5rem
	p, h2
		margin: 0 0 0.25em 30%
		width: 60%
		font-weight: 400
		+media('phones')
			margin: 0 auto
			width: 90%
			margin-left: 5%
	h2
		margin: 0 0 0.5em 30%
		line-height: 1em
		+media('phones')
			margin-bottom: 1rem




footer
	position: fixed
	bottom: borderThickness
	left: borderThickness * 2
	a
		text-decoration: none
		color: #bbb
		font-size: 10px
		&:hover
			color: #aaa



// Output Breakpoint Styles
apply_media_cache()

{'fraction_non_alphanumeric': 0.13873667430507122, 'fraction_numerical': 0.0456809803726213, 'mean_word_length': 2.987090367428004, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1855567', 'n_tokens_mistral': 9300, 'n_tokens_neox': 7495, 'n_words': 2006}