@require 'inc/wfpl/stylus_helpers.styl'
@require '.sha1sums.styl'

// constants
golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part

////////////////
// SETTINGS { //
////////////////

// dimensions (max. these will scale down for smaller screens except in ie8)
// if you change these, update config.php too
site_width = 900px
site_padding = 15px
sidebar_padding = 20px
sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
mobile_menu_width = 600px // switch to mobile menu when screen gets this small

// fonts
font_size_large = 18px
font_size_normal = 15px
font_size_small = 13px
font_size_tiny = 11px

// colors
content_bg = #fff
content_fg = #000
window_bg = #fff

////////////////////
// } END SETTINGS //
////////////////////

// the auto-calculated bits
content_width = site_width
// some math for responsive mode (when the above dimensions don't fit)
site_padding_pct = site_padding / (site_width + 2 * site_padding)
sidebar_padding_pct = sidebar_padding / content_width
vw_to_content_width = 1 - 2 * site_padding_pct

// always show vertical scrollbar, so content doesn't shift around when
// switching from tall to short pages
html
	overflow-y: scroll

header, hgroup, section, footer, aside, nav, article, figure, img
	display: block

code.html
	display: block
	font: 12px monospace
	border: 1px solid black
	background: #ccc

.caption
	font-weight: bold
	* + &
		margin-top: 15px

.field
	padding-top: 3px;

div.field_notes
	font-size: 12px
	line-height: 16px

fieldset
	border: 1px dotted black
	padding: 0 15px 15px 15px
	margin: 15px 0
	position: relative

legend
	padding: 0 6px
	font-weight: bold

div.error
	border: 2px solid red
	padding: 13px
	margin: 20px
	background: #fdd

h1
	font-size: 26px
	margin: 20px 0 10px

h1 + h4.tagline
	margin: -10px 0 10px

h1 + h2
	margin-top: -6px

h2
	font-size: 20px
	margin: 16px 0px 8px

h2 + h4.tagline
	margin: -8px 0 8px

h3
	font-size: 18px
	margin: 12px 0 5px

h3 + h4.tagline
	margin: -5px 0 5px

h4
	font-size: 14px
	margin: 10px 0 3px

h4 + h4.tagline
	margin: -3px 0 3px


h1, h2, h3, h4
	font-weight: bold

h4.tagline
	font-weight: normal


p.quote
	font-size: 14px
	font-weight: bold
	padding-bottom: 1px
	margin: 15px 15px 0 15px

p.quote:before, p.quote:after
	font-size: 40px
	line-height: 0
	color: #777
	font-weight: bold
	display: inline-block
	height: 10px
	position: relative

p.quote:before
	content: '“'
	top: 10px

p.quote:after
	content: '”'
	top: 20px
	width: 0; // make sure it doesn't wrap

p.attrib, p.attribution
	margin: 0 0 15px 20px
	margin-top: 1px
	padding-left: 30px
	font-size: 12px
	font-weight: normal
	&:before
		content: "— "

body
	margin: 0
	padding: 0
	background: window_bg
	color: content_fg
	font: font_size_normal Arimo, Arial, sans-serif

// call this for each ckeditor on each page
ckeditor(basename, element_name, width)
	// ckeditor ui, including border around wysiwyg area
	#{basename}_body #cke_{element_name}
		margin-left: -15px
		if width < 650px
			width: 680px
		else
			width: width + 30px
	// body tag of the wysiwyg area
	#{basename}_wysiwyg_{element_name}
		background: content_bg
		width: width
		margin: 0 auto
		if width <= 600px
			min-width: 0
			width: width
			margin: 0 auto
			border-right: 20px solid #eee
			border-left: 20px solid #eee
			border-top: 1px solid #eee
			border-bottom: 1px solid #eee
			min-height: 250px

ckeditor('admin_pages', 'content', content_width)

// outermost div for centering, shadow, etc
#centerer
	position: relative
	background: content_bg
	padding: site_padding
	max-width: content_width
	margin: 0 auto

nav#site-nav
	padding-bottom: 20px
	ul
		li_reset()
		space_evenly()

footer
	clear: both
	padding-top: 40px
	ul
		li_reset()
		li
			li_reset()
			display: inline-block
			margin-right: 10px

#wfpl_messages
	background: #ffd
	padding: 5px 12px
	margin: 0 0 20px 0
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
	border-radius: 4px
	p
		font-size: 120%
		padding: 5px 0
		margin: 0px

	hr
		display: block
		height: 1px
		border: 0
		border-top: 1px dotted #ddc;
		margin: 0
		padding: 0


#admin_links
	background: #fdd
	padding: 3px
	margin-bottom: 15px





// obsolete floating images (from pastable example code on admin_images)
span.wfpl_ifl
	display: block
	float: left
	clear: left
	font-size: 10px
	color: black
	text-align: right
	background-repeat: no-repeat
	background-position: left top
	margin: 0 10px 2px 0

span.wfpl_ifr
	display: block
	float: right
	clear: right
	font-size: 10px
	color: black
	font-weight: normal
	text-align: right
	background-repeat: no-repeat
	background-position: left top
	margin: 0 0 2px 10px

div.wfpl_ic
	margin: 15px auto
	font-size: 10px
	font-weight: normal
	text-align: right
	background-repeat: no-repeat
	background-position: center top


// hack so that vertical margins are only between siblings for the most part
td > :first-child,
th > :first-child,
legend + *,
article > :first-child,
aside > :first-child,
section > :first-child,
nav > :first-child,
div > :first-child,
.first
	margin-top: 0px

td > :last-child,
th > :last-child,
fieldset > :last-child,
article > :last-child,
aside > :last-child,
section > :last-child,
nav > :last-child,
div > :last-child,
.last
	margin-bottom: 0px

table.evenodd
	td, th
		padding: 6px 12px
		text-align: left
	> thead, > tbody, &
		> tr:nth-child(2n+1)
			> td, > th
				background: rgba(0,0,0,0.04)
			&:hover
				> td, > th
					background: rgba(0,0,0,0.07)
		> tr:nth-child(2n+0)
			> td, > th
				background: rgba(0,0,0,0.02)
			&:hover
				> td, > th
					background: rgba(0,0,0,0.09)

.field_error
	input
		border: 1px solid red

.password_suggestion
	& + &
		margin-left: 10px

.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
	display: block
	margin-bottom: 1%
	clear: both
	font-size: 80%
	text-align: right
	.wfpl_i
		display: block
		width: 100%
		background-size: 100% auto
		background-repeat: no-repeat
		background-position: 50% top
		margin-bottom: 3px // padding above caption
		// clip line with &nbsp; (which is there so ckeditor doesn't delete this)
		height: 0
		overflow: hidden
.wfpl_li, .wfpl_ci, .wfpl_ri
	width: sidebar_width // when window is large
.wfpl_li
	float: left
	margin-right: sidebar_padding
.wfpl_ci, .wfpl_fi
	margin-left: auto
	margin-right: auto
.wfpl_ri
	float: right
	margin-left: sidebar_padding

@media screen and (max-width: (content_width / vw_to_content_width))
	#centerer
		width: auto
		margin: 0
		padding: unit(site_padding_pct * 100, '%')
	.wfpl_li, .wfpl_ri
		width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
	.wfpl_ri
		margin-left: unit(sidebar_padding_pct * 100, '%')
	.wfpl_li
		margin-right: unit(sidebar_padding_pct * 100, '%')
@media screen and (max-width: (sidebar_width / vw_to_content_width))
	.wfpl_li, .wfpl_ci, .wfpl_ri
		float: none
		margin-left: 0
		margin-right: 0
		width: 100%

// does not contain a .wfpl_i
.wfpl_thumb
	display: inline-block
	width: 70px
	height: 70px;
	background-size: contain
	background-position: 50% 50%
	background-repeat: no-repeat

#mobile_menu_button
	display: none;
#mobile_menu_check
	display: none;
@media screen and (max-width: (mobile_menu_width))
	#mobile_menu_check:not(:checked) + div
		display: none
	#mobile_menu_check:checked + div
		display: block
		position: relative
		> ul
			z-index: 1000
			background: white
			background: rgba(255, 255, 255, 0.95)
			display: block
			position: absolute
			top: 100%
			width: 96%
			left: 2%
			margin: 0
			padding: 0
			border-bottom-left-radius: 4px
			border-bottom-right-radius: 4px
			box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
			li
				padding: 15px
				& + li
					padding-top: 0
				a
					font-size: 18px
				white-space: nowrap

			// undo space_evenly stuff:
			&:before, &:after
				display: none
				content: none
				margin: 0
				padding: 0
			> *
				position: static
				top: 0

	nav#site-nav ul > li, #mobile_menu_button
		display: block
		padding: 3px 10px 4px 17px
		font-size: font_size_large
#admin_images_body .th_toggle_buttons
	font-weight: normal
	color: #777
	space_evenly()