name: 'centerer'
margin: 15px
width: centerer_width
- position: relative
child: {
type: 'alternatives'
full: {
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']
}
// 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 //
////////////////////
+.icon
+ display: inline-block
+ width: 40%
+.top_button
+ display: inline-block
+ width: 30%
// always show vertical scrollbar, so content doesn't shift around when
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_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
#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
// 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))
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
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)