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

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

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

////// Dimensions
image_float_size = golden_ratio_small // at col max width: ratio to image width
narrow_col_lr_width = 50% // width of left/right images in always-narrow columns
narrow_col_ci_width = 70% // width of centered images in always-narrow columns
image_float_min_size = 0.5 // ratio to image width when cols are scaled to min width
image_float_margin = 2%
mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
// Column Dimensions
runaround_max = 370px // narrowest column that can have left/right images
centerer_width = 950px // inside. outside is columns.width
sidebar_width = 250px
sidebar_gap = 30px
columns = wfpl_columns({
	type: 'node'
	name: 'centerer'
	margin: 15px
	width: centerer_width
	child: {
		type: 'alternatives'
		full: {
			type: 'node'
			name: 'main'
		},
		with_sidebar: {
			type: 'series'
			main: {
				type: 'node'
				float: left
				width: centerer_width - sidebar_width - sidebar_gap
			},
			gap: {
				type: 'node'
				width: sidebar_gap
			}
			sidebar: {
				type: 'alternatives'
				plain: {
					type: 'node'
					outer_width: sidebar_width
					float: right
				},
				bordered: {
					type: 'node'
					border-width: 1px
					border-style: solid
					border-color: red
					padding: 15px
					outer_width: sidebar_width
					float: right
				}
			}
		}
	}
})
// the gap is used for checking the width calculations, but has no dom element.
// This space is left blank (by floating main to the left and sidebar to the
// right) and might save the layout if there are borders (which don't scale) or
// rounding errors
a = remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap')
a = remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap')

biggest_content_width = columns['widths']['.centerer.full > .main']

hide_in_one_column_mode = {
	".centerer.with_sidebar > .sidebar.plain": 1
	".centerer.with_sidebar > .sidebar.bordered": 1
}

// fonts
line_height = 1.2
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

// sprites
//wfpl_spritesheets({
//	main: {
//		image: sha1['images/sprites.min.svg']
//		y_origin: 'bottom' // inkscape rulers are backwards
//		w: 200
//		h: 408
//		sprites: {
//			".icon": {
//				y: 408
//				w: 50
//				h: 50
//				gap: 1
//				hover: 'right'
//				column: 'three' 'four' 'five' 'six' 'seven'
//			}
//			".top_button": {
//				y: 153
//				w: 25
//				h: 25
//				gap: 1
//				row: '0' '1' '2' '3' '4'
//				hover: 'down'
//			}
//			".main_logo": {
//				y: 101
//				w: 200
//				h: 50
//				gap: 1
//				hover: 'down'
//			}
//		}
//	}
//})


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

.icon
	display: inline-block
	width: 40%
.top_button
	display: inline-block
	width: 30%


// 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
	line-height: line_height

// call this for each ckeditor on each page
ckeditor_elements_already = {}
ckeditor(basename, element_name, body_id, width)
	// ckeditor ui, including border around wysiwyg area
	outer_selector = '#' + basename + '_body #cke_' + element_name
	unless outer_selector in ckeditor_elements_already
		ckeditor_elements_already[outer_selector] = 1
		{outer_selector}
			width: biggest_content_width + 30px
			margin-right: -30px
	// body tag of the wysiwyg area
	#{basename}_wysiwyg_{body_id}
		background: content_bg
		width: width
		margin: 0 auto
		min-width: 0
		width: width
		margin: 0 auto
		border: 5px solid #eee
		min-height: 50px

ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])

body > .centerer
	position: relative

#site_header
	margin: 0 auto 15px auto
	position: relative
#site_header:before
	display: block
	background-size: 100%
#site_header:after
	display: block
	position: absolute
	bottom: 0
	right: 0
	padding: 4px
	text-align: right

body > .centerer > .nav
	margin-bottom: 15px
	ul
		li_reset()
		space_evenly(line_height)

footer#site_footer
	clear: both
	padding-top: 40px
	font-size: font_size_small

#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
	font-size: font_size_small
	background: rgba(255, 244, 244, 0.5)
	border: 1px dotted #000
	padding: 3px
	position: absolute
	top: 0
	right: 0

// 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   (which is there so ckeditor doesn't delete this)
		height: 0
		overflow: hidden
.wfpl_li, .wfpl_ci, .wfpl_ri
	width: unit(image_float_size * 100, '%') // when window is large
.wfpl_li
	float: left
	margin-right: image_float_margin // this can be a percent right?
.wfpl_ci, .wfpl_fi
	margin-left: auto
	margin-right: auto
.wfpl_ri
	float: right
	margin-left: image_float_margin // this can be a percent right?
.wfpl_thumb // note: does not contain a .wfpl_i
	display: inline-block
	width: 70px
	height: 70px
	background-size: contain
	background-position: 50% 50%
	background-repeat: no-repeat
.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
	max-width: 100%


// output css from column calculations
for selector, css in columns.css
	body > {selector}
		{css}
		if columns['widths'][selector] < runaround_max
			.wfpl_li, .wfpl_ri
				width: narrow_col_lr_width
			.wfpl_ci
				width: narrow_col_ci_width

// center when big
body > .centerer
	margin-left: auto
	margin-right: auto

// small enough that things are scaling, big enough that we have all columns
@media screen and (max-width: (columns.width))
	// output responsive css from column calculations
	for selector, css in columns.responsive_css
		body > {selector}
			{css}

	// as big as it can be
	body > .centerer
		width: auto

	// big left/right images
	for selector, css in columns.css
		if columns['widths'][selector] > runaround_max
			body > {selector}
				col_max_width = columns['widths'][selector]
				col_min_width = runaround_max
				.wfpl_li, .wfpl_ri
					width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
				.wfpl_ci
					width: col_max_width * image_float_size

// switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images
single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max
body
	color: #001
	background-position: columns.width columns['widths']['.centerer.with_sidebar > .main']
	background-position: runaround_max single_column_max
@media screen and (max-width: (single_column_max))
	for selector, css in columns.css
		body > {selector}
			if selector == '.centerer'
				// margin-top: 0
			else if selector in hide_in_one_column_mode
				display: none
			else
				border: none
				float: none
				width: auto
				margin-left: 0
				margin-right: 0
				padding-left: 0
				padding-right: 0
				margin-top: columns['responsive_css']['.centerer']['margin']

				// make image sizing act like it's the "full"/only column
				col_max_width = columns['widths']['.centerer.full > .main']
				col_min_width = runaround_max
				.wfpl_li, .wfpl_ri
					width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
				.wfpl_ci
					width: col_max_width * image_float_size

// mixin for making left/right images behave as centered
wfpl_li_ri_to_ci(selector, width)
	body > {selector}
		.wfpl_li, .wfpl_ci, .wfpl_ri
			float: none
			width: width
			margin-right: auto
			margin-left: auto

// convert left/right images to centered when columns width <= runaround_max
for selector, css in columns.css
	if columns['widths'][selector] > runaround_max
		// calculate screen width when column width is runaround_max
		screen_rmax = columns.width / columns['widths']['.centerer.full > .main'] * runaround_max
		@media screen and (max-width: (screen_rmax))
			wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)

#mobile_menu_button
	display: none;
#mobile_menu_check
	display: none;
@media screen and (max-width: (mobile_menu_width))
	body nav.nav > form
		margin-top: 0
	#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

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