// 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 // 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
+// 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
+columns = wfpl_columns({
+ type: 'node'
+ name: 'centerer'
+ margin: 15px
+ width: centerer_width
+ child: {
+ type: 'alternatives'
+ full: {
+ type: 'node'
+ name: 'main'
+ },
+ with_sidebar: {
+ type: 'series'
+ main: {
+ type: 'node'
+ float: left
+ width: centerer_width - sidebar_width - sidebar_gap
+ },
+ gap: {
+ type: 'node'
+ width: sidebar_gap
+ }
+ sidebar: {
+ type: 'alternatives'
+ plain: {
+ type: 'node'
+ outer_width: sidebar_width
+ float: right
+ },
+ bordered: {
+ type: 'node'
+ border-width: 1px
+ border-style: solid
+ border-color: red
+ padding: 15px
+ 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 = {
+ ".centerer.with_sidebar > .sidebar.plain": 1
+ ".centerer.with_sidebar > .sidebar.bordered": 1
+}
// fonts
+line_height = 1.2
font_size_large = 18px
font_size_normal = 15px
font_size_small = 13px
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 //
////////////////////
-// 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
+.icon
+ display: inline-block
+ width: 40%
+.top_button
+ display: inline-block
+ width: 30%
+
// always show vertical scrollbar, so content doesn't shift around when
// switching from tall to short pages
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(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
+ outer_selector = '#' + basename + '_body #cke_' + element_name
+ unless outer_selector in ckeditor_elements_already
+ ckeditor_elements_already[outer_selector] = 1
+ {outer_selector}
+ 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
+ min-width: 0
+ width: width
+ margin: 0 auto
+ border: 5px solid #eee
+ min-height: 50px
-ckeditor('admin_pages', 'content', content_width)
+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'])
-// outermost div for centering, shadow, etc
-#centerer
+body > .centerer
position: relative
- background: content_bg
- padding: site_padding
- max-width: content_width
- margin: 0 auto
-nav#site-nav
- padding-bottom: 20px
+header#site_header
+ margin-bottom: 15px
+
+body > .centerer > .nav
+ 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
#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
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}
+ 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-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
+ body > {selector}
+ {css}
+
+ // as big as it can be
+ body > .centerer
+ width: auto
+
+ // 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}
+ 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)
+ body > {selector}
+ .wfpl_li, .wfpl_ci, .wfpl_ri
+ float: none
+ width: width
+ margin-right: auto
+ margin-left: auto
+
+// 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)
#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
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
+ padding: 0px 10px 0px 17px
font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+ font-weight: normal
+ color: #777
+ space_evenly(line_height)
Got questions, comments, patches, etc.? Contact Jason Woofenden