X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.styl;h=9e1ebaa198e29c06a4b2abe592943ae338344a17;hb=900e4400fd39e8497ee26717827fec3f920a302c;hp=c883c706c09ab288f161d41f80865160e6ac782d;hpb=829a67d41aacdf529455c0f315665c407ad5d35b;p=wfpl-cms.git diff --git a/style.styl b/style.styl index c883c70..9e1ebaa 100644 --- a/style.styl +++ b/style.styl @@ -9,14 +9,14 @@ 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_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 @@ -25,6 +25,7 @@ columns = wfpl_columns({ name: 'centerer' margin: 15px width: centerer_width + position: relative child: { type: 'alternatives' full: { @@ -210,9 +211,10 @@ body ckeditor_elements_already = {} ckeditor(basename, element_name, body_id, width) // ckeditor ui, including border around wysiwyg area - unless element_name in ckeditor_elements_already - ckeditor_elements_already[element_name] = 1 - #{basename}_body #cke_{element_name} + 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 @@ -231,13 +233,6 @@ ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths' 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 - position: relative - background: content_bg - padding: site_padding - margin: 0 auto - body > .centerer > .nav padding-bottom: 20px ul @@ -407,6 +402,17 @@ table.evenodd 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 @@ -424,20 +430,49 @@ for selector, css in columns.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 @@ -448,28 +483,9 @@ 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;