// 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
+////// Dimensions
+image_float_size = golden_ratio_small
+narrow_column_ifs = image_float_size * 1.5
+image_float_min_size = 0.5
+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
+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
+ position: relative
+ child: {
+ type: 'alternatives'
+ full: {
+ type: 'node'
+ name: 'main'
+ },
+ with_sidebar: {
+ type: 'series'
+ main: {
+ type: 'node'
+ float: left
+ width: centerer_width - sidebar_width - sidebar_gap
+ },
+ sidebar: {
+ type: 'alternatives'
+ plain: {
+ type: 'node'
+ margin-left: sidebar_gap
+ width: sidebar_width
+ float: left
+ },
+ bordered: {
+ type: 'node'
+ margin-left: sidebar_gap
+ border-width: 1px
+ border-style: solid
+ border-color: red
+ padding: 15px
+ width: sidebar_width - 2px - 30px
+ float: left
+ }
+ }
+ }
+ }
+})
+
+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
font_size_large = 18px
// } 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
font: font_size_normal Arimo, Arial, sans-serif
// 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
-
-ckeditor('admin_pages', 'content', content_width)
+ min-width: 0
+ width: width
+ margin: 0 auto
+ border: 5px solid #eee
+ min-height: 50px
-// outermost div for centering, shadow, etc
-#centerer
- position: relative
- background: content_bg
- padding: site_padding
- max-width: content_width
- margin: 0 auto
+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'])
-nav#site-nav
+body > .centerer > .nav
padding-bottom: 20px
ul
li_reset()
height: 0
overflow: hidden
.wfpl_li, .wfpl_ci, .wfpl_ri
- width: sidebar_width // when window is large
+ width: unit(image_float_size * 100, '%') // when window is large
.wfpl_li
float: left
- margin-right: sidebar_padding
-.wfpl_ci
+ 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: 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
+ 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;
+ 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}
+
+// center when big
+body > .centerer
+ margin: 0 auto
+
+@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
+
+ // make sure that borders (which won't scale) and rounding errors don't
+ // break the layout
+ body > .centerer.full > .main,
+ body > .centerer.with_sidebar > .sidebar.plain,
+ 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
+ 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
+
+// mixin for making left/right images behave as centered
+wfpl_li_ri_to_ci(selector, width)
+ {selector}
+ .wfpl_li, .wfpl_ci, .wfpl_ri
+ float: none
+ width: width
+ margin-right: auto
+ margin-left: auto
+
+// convert left/right 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['widths'][selector] / columns.width * 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;
position: static
top: 0
- nav#site-nav ul > li, #mobile_menu_button
+ body > .centerer > .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()