X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.styl;h=9e99de02ec0beeebb31dd0ecfc1e4028575c41e5;hb=138ee12f78af5b3c8075b6d92c77eb5820d81d4a;hp=88d0420cc5d58aa20bc3e8ebca2a83106a0a39e7;hpb=e7424acd48ed670f1b8bd8d7c1ff69b37ce6334b;p=wfpl-cms.git diff --git a/style.styl b/style.styl index 88d0420..9e99de0 100644 --- a/style.styl +++ b/style.styl @@ -8,13 +8,66 @@ 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 + 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 @@ -31,12 +84,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 @@ -160,40 +208,31 @@ body 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 + unless element_name in ckeditor_elements_already + ckeditor_elements_already[element_name] = 1 + #{basename}_body #cke_{element_name} + 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() @@ -337,43 +376,99 @@ 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 -.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; @@ -417,7 +512,11 @@ 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 +#admin_images_body .th_toggle_buttons + font-weight: normal + color: #777 + space_evenly()