X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=a758cd516008edbffe53b0ee1021810609dff932;hp=003da09ab2e5c537bc50137ced154d9d90207ef7;hb=75ac4ad08bdca7f026d518698ed2a05860016e0d;hpb=f2f0ae126ce56ba2eb42fee9a44afe848c74cab8

diff --git a/style.styl b/style.styl
index 003da09..a758cd5 100644
--- a/style.styl
+++ b/style.styl
@@ -1,19 +1,141 @@
 @require 'inc/wfpl/stylus_helpers.styl'
 @require '.sha1sums.styl'
 
-// dimensions
-site_width = 934px // inside the shadow
-site_padding = 30px
-content_width = (site_width - (site_padding * 2))
+// 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
+remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap')
+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
-site_column_gap = 40px
 
 // colors
 content_bg = #fff
 content_fg = #000
-window_bg = #e6e7e8
+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
@@ -135,59 +257,50 @@ body
 	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(basename, element_name, width)
+ckeditor_elements_already = {}
+ckeditor(basename, element_name, body_id, 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
+	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_{element_name}
+	#{basename}_wysiwyg_{body_id}
 		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
+		min-width: 0
+		width: width
+		margin: 0 auto
+		border: 5px solid #eee
+		min-height: 50px
 
-ckeditor('admin_pages', 'content', content_width)
+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'])
 
-// outermost div for centering, shadow, etc
-#centerer
+body > .centerer
 	position: relative
-	background: content_bg
-	padding-top: 150px
-	padding-right: site_padding
-	padding-bottom: site_padding
-	padding-left: site_padding
-	width: site_width - @padding-left - @padding-right
-	margin: 10px auto
-
-nav#site-nav
-	padding-bottom: 20px
+
+header#site_header
+	margin-bottom: 15px
+
+body > .centerer > .nav
+	margin-bottom: 15px
 	ul
 		li_reset()
-		space_evenly()
+		space_evenly(line_height)
 
-footer
+footer#site_footer
 	clear: both
 	padding-top: 40px
-	ul
-		li_reset()
-		li
-			li_reset()
-			display: inline-block
-			margin-right: 10px
+	font-size: font_size_small
 
 #wfpl_messages
 	background: #ffd
@@ -210,15 +323,15 @@ footer
 
 
 #admin_links
-	background: #fdd
+	font-size: font_size_small
+	background: rgba(255, 244, 244, 0.5)
+	border: 1px dotted #000
 	padding: 3px
-	margin-bottom: 15px
-
-
-
+	position: absolute
+	top: 0
+	right: 0
 
-
-// floating images (from pastable example code on admin_images)
+// obsolete floating images (from pastable example code on admin_images)
 span.wfpl_ifl
 	display: block
 	float: left
@@ -299,3 +412,179 @@ table.evenodd
 .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: 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)