X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=style.styl;h=be2aebbaf25b7f90a01d403f11f1a6291e88510c;hb=347ef230f00cab6cf3de1829fa716c7bdf57d389;hp=22fccb6502a9125b8801d9f20c6be455a75774d7;hpb=a4d3bf06e886c8d0bd4f973ffd03adddf42e1647;p=wfpl-cms.git diff --git a/style.styl b/style.styl index 22fccb6..be2aebb 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,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 @@ -270,13 +322,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 +476,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 +497,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 +527,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 +540,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 +581,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)