From 6dd4794cb652ed15a8d3867f58f422bce1a313d3 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Thu, 31 Dec 2015 18:44:05 -0500 Subject: [PATCH] sane/flexible stylus for columns --- inc/wfpl | 2 +- style.styl | 180 +++++++++++++++++++++++++++++++++++++++++++-------------- template.html | 13 ++++- 3 files changed, 149 insertions(+), 46 deletions(-) diff --git a/inc/wfpl b/inc/wfpl index 33b391f..ae37366 160000 --- a/inc/wfpl +++ b/inc/wfpl @@ -1 +1 @@ -Subproject commit 33b391fa326b3a118fcfb004807ab02432a68992 +Subproject commit ae37366f1b03740b795fb5ed68447bb60840f540 diff --git a/style.styl b/style.styl index 3e4645c..140571a 100644 --- a/style.styl +++ b/style.styl @@ -8,13 +8,63 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part // 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 + 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 + } + } + } + } +}) + +hide_in_one_column_mode = { + ".centerer.with_sidebar > .sidebar.plain": 1 + ".centerer.with_sidebar > .sidebar.bordered": 1 +} // fonts font_size_large = 18px @@ -31,12 +81,7 @@ window_bg = #fff // } 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 @@ -183,17 +228,17 @@ ckeditor(basename, element_name, width) border-bottom: 1px solid #eee min-height: 250px -ckeditor('admin_pages', 'content', content_width) +// FIXME fix this for layouts +ckeditor('admin_pages', 'content', columns.width) // outermost div for centering, shadow, etc #centerer position: relative background: content_bg padding: site_padding - max-width: content_width margin: 0 auto -nav#site-nav +body > .centerer > .nav padding-bottom: 20px ul li_reset() @@ -337,43 +382,94 @@ table.evenodd 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 + 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} +@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; @@ -417,7 +513,7 @@ table.evenodd 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 diff --git a/template.html b/template.html index c7793d8..e3fa035 100644 --- a/template.html +++ b/template.html @@ -14,12 +14,12 @@ -
+
header image here
-