X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=a758cd516008edbffe53b0ee1021810609dff932;hp=0d767db633a5ed2fc8d79ab579605ed6b27b8802;hb=75ac4ad08bdca7f026d518698ed2a05860016e0d;hpb=7b5d2000778d73d50cf3af48b497fb4e8f01dca2 diff --git a/style.styl b/style.styl index 0d767db..a758cd5 100644 --- a/style.styl +++ b/style.styl @@ -10,7 +10,8 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part ////// Dimensions image_float_size = golden_ratio_small // at col max width: ratio to image width -narrow_column_ifs = image_float_size * 1.5 // img width ratio for always-small columns +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 @@ -24,7 +25,6 @@ columns = wfpl_columns({ name: 'centerer' margin: 15px width: centerer_width - position: relative child: { type: 'alternatives' full: { @@ -38,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 = { @@ -69,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 @@ -79,10 +89,52 @@ content_bg = #fff content_fg = #000 window_bg = #fff +// sprites +wfpl_spritesheets({ + main: { + image: sha1['images/sprites.min.svg'] + y_origin: 'bottom' // inkscape rulers are backwards + w: 200 + h: 408 + sprites: { + ".icon": { + y: 408 + w: 50 + h: 50 + gap: 1 + hover: 'right' + column: 'three' 'four' 'five' 'six' 'seven' + } + ".top_button": { + y: 153 + w: 25 + h: 25 + gap: 1 + row: '0' '1' '2' '3' '4' + hover: 'down' + } + ".main_logo": { + y: 101 + w: 200 + h: 50 + gap: 1 + hover: 'down' + } + } + } +}) + + //////////////////// // } END SETTINGS // //////////////////// +.icon + display: inline-block + width: 40% +.top_button + display: inline-block + width: 30% // always show vertical scrollbar, so content doesn't shift around when @@ -205,6 +257,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 = {} @@ -232,21 +285,22 @@ 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 +footer#site_footer clear: both padding-top: 40px - ul - li_reset() - li - li_reset() - display: inline-block - margin-right: 10px + font-size: font_size_small #wfpl_messages background: #ffd @@ -269,13 +323,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 @@ -401,10 +455,16 @@ 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)) @@ -417,13 +477,6 @@ 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 @@ -445,15 +498,17 @@ body for selector, css in columns.css body > {selector} if selector == '.centerer' - margin-top: 0 + // 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-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 @@ -473,22 +528,21 @@ wfpl_li_ri_to_ci(selector, 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.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) #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 @@ -528,9 +582,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)