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 = {
}
// fonts
+line_height = 1.2
font_size_large = 18px
font_size_normal = 15px
font_size_small = 13px
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 = {}
ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
body > .centerer > .nav
- padding-bottom: 20px
ul
li_reset()
- space_evenly()
+ space_evenly(line_height)
footer
clear: both
#admin_links
+ font-size: font_size_small
background: #fdd
padding: 3px
margin-bottom: 15px
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
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
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
#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
#admin_images_body .th_toggle_buttons
font-weight: normal
color: #777
- space_evenly()
+ space_evenly(line_height)