////////////////
////// 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_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
-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
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: 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
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
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;