X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=blobdiff_plain;f=style.styl;h=854fbb23ef0589bd67c90cfd56a07e05d588adaf;hp=22fccb6502a9125b8801d9f20c6be455a75774d7;hb=948d843003f8f9f70e830e73ecd3e53bf231f247;hpb=a4d3bf06e886c8d0bd4f973ffd03adddf42e1647 diff --git a/style.styl b/style.styl index 22fccb6..854fbb2 100644 --- a/style.styl +++ b/style.styl @@ -25,7 +25,6 @@ columns = wfpl_columns({ name: 'centerer' margin: 15px width: centerer_width - position: relative child: { type: 'alternatives' full: { @@ -39,28 +38,36 @@ 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 +a = remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap') +a = remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap') biggest_content_width = columns['widths']['.centerer.full > .main'] @@ -70,6 +77,7 @@ hide_in_one_column_mode = { } // fonts +line_height = 1.2 font_size_large = 18px font_size_normal = 15px font_size_small = 13px @@ -80,10 +88,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 @@ -206,6 +256,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,21 +284,33 @@ 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 + +#site_header + margin: 0 auto 15px auto + position: relative +#site_header:before + display: block + background-size: 100% +#site_header:after + display: block + position: absolute + bottom: 0 + right: 0 + padding: 4px + text-align: right + 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 @@ -270,13 +333,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 @@ -424,13 +487,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 @@ -452,15 +508,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 @@ -480,7 +538,7 @@ 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 @@ -493,6 +551,8 @@ for selector, css in columns.css #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 @@ -532,9 +592,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)