From: Jason Woofenden <jason@jasonwoof.com>
Date: Sun, 14 Feb 2016 00:26:36 +0000 (-0500)
Subject: scaling finally correct?!?
X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=commitdiff_plain;h=7b5d2000778d73d50cf3af48b497fb4e8f01dca2

scaling finally correct?!?
---

diff --git a/style.styl b/style.styl
index b4754d4..0d767db 100644
--- a/style.styl
+++ b/style.styl
@@ -9,14 +9,13 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
 ////////////////
 
 ////// Dimensions
-image_float_size = golden_ratio_small
-narrow_column_ifs = image_float_size * 1.5
-image_float_min_size = 0.5
+image_float_size = golden_ratio_small // at col max width: ratio to image width
+narrow_column_ifs = image_float_size * 1.5 // img width ratio for always-small 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
-single_column_max = 600px // switch to single column when screen gets this narrow
-runaround_max = 370px // center left/right images when _column_ gets this narrow
-//// Column Dimensions
+// 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
@@ -407,6 +406,7 @@ for selector, css in columns.css
 body > .centerer
 	margin: 0 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
@@ -424,20 +424,49 @@ body > .centerer
 	body > .centerer.with_sidebar > .sidebar.bordered
 		margin-right: -10px
 
-// big left/right images
-for selector, css in columns.css
-	if columns['widths'][selector] > runaround_max
+	// 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}
-			col_max_width = columns['widths'][selector]
-			col_min_width = col_max_width / columns.width * single_column_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
+			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: 0
+				padding: 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)
-	{selector}
+	body > {selector}
 		.wfpl_li, .wfpl_ci, .wfpl_ri
 			float: none
 			width: width
@@ -448,29 +477,13 @@ wfpl_li_ri_to_ci(selector, width)
 for selector, css in columns.css
 	if columns['widths'][selector] > runaround_max
 		// calculate screen width when column width is runaround_max
-		screen_rmax = columns['widths'][selector] / columns.width * 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)
 	else
 		// no @media, because these colums are always narrower than runaround_max
 		wfpl_li_ri_to_ci(selector, columns['widths'][selector] * narrow_column_ifs)
 
-// switch to 1-column layout
-@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: 0
-				padding: 0
-				margin-top: columns['responsive_css']['.centerer']['margin']
-
 #mobile_menu_button
 	display: none;
 #mobile_menu_check