X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=5f9daaebc79ebd27da3030210d03d9c935859251;hp=b4754d43d8fe847aea478e7fe31b3bca07d9a9dc;hb=26e88a8fcd1bcbb101245a2243c6fb9cfeda3500;hpb=90689f5dec6ac705b5ad645d365f95170ce8c1fd diff --git a/style.styl b/style.styl index b4754d4..5f9daae 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,7 +25,6 @@ columns = wfpl_columns({ name: 'centerer' margin: 15px width: centerer_width - position: relative child: { type: 'alternatives' full: { @@ -39,29 +38,38 @@ columns = wfpl_columns({ float: left width: centerer_width - sidebar_width - sidebar_gap }, + gap: { + type: 'node' + width: sidebar_gap + } sidebar: { type: 'alternatives' plain: { type: 'node' - margin-left: sidebar_gap - width: sidebar_width - float: left + outer_width: sidebar_width + float: right }, 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 + outer_width: sidebar_width + float: right } } } } }) +// the gap is used for checking the width calculations, but has no dom element. +// This space is left blank (by floating main to the left and sidebar to the +// right) and might save the layout if there are borders (which don't scale) or +// rounding errors +remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap') +remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap') + biggest_content_width = columns['widths']['.centerer.full > .main'] hide_in_one_column_mode = { @@ -70,6 +78,7 @@ hide_in_one_column_mode = { } // fonts +line_height = 1.2 font_size_large = 18px font_size_normal = 15px font_size_small = 13px @@ -206,6 +215,7 @@ body background: window_bg color: content_fg font: font_size_normal Arimo, Arial, sans-serif + line-height: line_height // call this for each ckeditor on each page ckeditor_elements_already = {} @@ -233,11 +243,17 @@ 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']) +body > .centerer + position: relative + +header#site_header + margin-bottom: 15px + body > .centerer > .nav - padding-bottom: 20px + margin-bottom: 15px ul li_reset() - space_evenly() + space_evenly(line_height) footer clear: both @@ -270,13 +286,13 @@ footer #admin_links - background: #fdd + font-size: font_size_small + background: rgba(255, 244, 244, 0.5) + border: 1px dotted #000 padding: 3px - margin-bottom: 15px - - - - + position: absolute + top: 0 + right: 0 // obsolete floating images (from pastable example code on admin_images) span.wfpl_ifl @@ -402,11 +418,18 @@ 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 + margin-left: auto + margin-right: 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 @@ -417,65 +440,72 @@ body > .centerer 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 + // 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-left: 0 + margin-right: 0 + padding-left: 0 + padding-right: 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 margin-right: auto margin-left: auto -// convert left/right to centered when columns width <= runaround_max +// convert left/right images 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 + 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; #mobile_menu_check display: none; @media screen and (max-width: (mobile_menu_width)) + body nav.nav > form + margin-top: 0 #mobile_menu_check:not(:checked) + div display: none #mobile_menu_check:checked + div @@ -515,9 +545,9 @@ for selector, css in columns.css body > .centerer > .nav ul > li, #mobile_menu_button display: block - padding: 3px 10px 4px 17px + padding: 0px 10px 0px 17px font-size: font_size_large #admin_images_body .th_toggle_buttons font-weight: normal color: #777 - space_evenly() + space_evenly(line_height)