1 @require 'inc/wfpl/stylus_helpers.styl'
2 @require '.sha1sums.styl'
5 golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
12 image_float_size = golden_ratio_small
13 narrow_column_ifs = image_float_size * 1.5
14 image_float_min_size = 0.5
15 image_float_margin = 2%
16 mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
17 single_column_max = 600px // switch to single column when screen gets this narrow
18 runaround_max = 370px // center left/right images when _column_ gets this narrow
19 //// Column Dimensions
20 centerer_width = 950px // inside. outside is columns.width
23 columns = wfpl_columns({
39 width: centerer_width - sidebar_width - sidebar_gap
45 margin-left: sidebar_gap
51 margin-left: sidebar_gap
56 width: sidebar_width - 2px - 30px
64 biggest_content_width = columns['widths']['.centerer.full > .main']
66 hide_in_one_column_mode = {
67 ".centerer.with_sidebar > .sidebar.plain": 1
68 ".centerer.with_sidebar > .sidebar.bordered": 1
72 font_size_large = 18px
73 font_size_normal = 15px
74 font_size_small = 13px
88 // always show vertical scrollbar, so content doesn't shift around when
89 // switching from tall to short pages
93 header, hgroup, section, footer, aside, nav, article, figure, img
99 border: 1px solid black
115 border: 1px dotted black
116 padding: 0 15px 15px 15px
125 border: 2px solid red
173 margin: 15px 15px 0 15px
175 p.quote:before, p.quote:after
180 display: inline-block
191 width: 0; // make sure it doesn't wrap
193 p.attrib, p.attribution
194 margin: 0 0 15px 20px
205 background: window_bg
207 font: font_size_normal Arimo, Arial, sans-serif
209 // call this for each ckeditor on each page
210 ckeditor_elements_already = {}
211 ckeditor(basename, element_name, body_id, width)
212 // ckeditor ui, including border around wysiwyg area
213 unless element_name in ckeditor_elements_already
214 ckeditor_elements_already[element_name] = 1
215 #{basename}_body #cke_{element_name}
216 width: biggest_content_width + 30px
218 // body tag of the wysiwyg area
219 #{basename}_wysiwyg_{body_id}
220 background: content_bg
226 border: 5px solid #eee
229 ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
230 ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
231 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
232 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
234 // outermost div for centering, shadow, etc
237 background: content_bg
238 padding: site_padding
241 body > .centerer > .nav
254 display: inline-block
261 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
272 border-top: 1px dotted #ddc;
286 // obsolete floating images (from pastable example code on admin_images)
294 background-repeat: no-repeat
295 background-position: left top
306 background-repeat: no-repeat
307 background-position: left top
315 background-repeat: no-repeat
316 background-position: center top
319 // hack so that vertical margins are only between siblings for the most part
323 article > :first-child,
324 aside > :first-child,
325 section > :first-child,
333 fieldset > :last-child,
334 article > :last-child,
336 section > :last-child,
349 background: rgba(0,0,0,0.04)
352 background: rgba(0,0,0,0.07)
355 background: rgba(0,0,0,0.02)
358 background: rgba(0,0,0,0.09)
362 border: 1px solid red
368 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
377 background-size: 100% auto
378 background-repeat: no-repeat
379 background-position: 50% top
380 margin-bottom: 3px // padding above caption
381 // clip line with (which is there so ckeditor doesn't delete this)
384 .wfpl_li, .wfpl_ci, .wfpl_ri
385 width: unit(image_float_size * 100, '%') // when window is large
388 margin-right: image_float_margin // this can be a percent right?
394 margin-left: image_float_margin // this can be a percent right?
395 .wfpl_thumb // note: does not contain a .wfpl_i
396 display: inline-block
399 background-size: contain
400 background-position: 50% 50%
401 background-repeat: no-repeat
402 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
406 // output css from column calculations
407 for selector, css in columns.css
410 @media screen and (max-width: (columns.width))
411 // output responsive css from column calculations
412 for selector, css in columns.responsive_css
416 // as big as it can be
420 // make sure that borders (which won't scale) and rounding errors don't
422 body > .centerer.full > .main,
423 body > .centerer.with_sidebar > .sidebar.plain,
424 body > .centerer.with_sidebar > .sidebar.bordered
427 // big left/right images
428 for selector, css in columns.css
429 if columns['widths'][selector] > runaround_max
431 col_max_width = columns['widths'][selector]
432 col_min_width = col_max_width / columns.width * single_column_max
434 width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
436 width: col_max_width * image_float_size
438 // mixin for making left/right images behave as centered
439 wfpl_li_ri_to_ci(selector, width)
441 .wfpl_li, .wfpl_ci, .wfpl_ri
447 // convert left/right to centered when columns width <= runaround_max
448 for selector, css in columns.css
449 if columns['widths'][selector] > runaround_max
450 // calculate screen width when column width is runaround_max
451 screen_rmax = columns['widths'][selector] / columns.width * runaround_max
452 @media screen and (max-width: (screen_rmax))
453 wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
455 // no @media, because these colums are always narrower than runaround_max
456 wfpl_li_ri_to_ci(selector, columns['widths'][selector] * narrow_column_ifs)
458 // switch to 1-column layout
459 @media screen and (max-width: (single_column_max))
460 for selector, css in columns.css
462 if selector == '.centerer'
464 else if selector in hide_in_one_column_mode
472 margin-top: columns['responsive_css']['.centerer']['margin']
478 @media screen and (max-width: (mobile_menu_width))
479 #mobile_menu_check:not(:checked) + div
481 #mobile_menu_check:checked + div
487 background: rgba(255, 255, 255, 0.95)
495 border-bottom-left-radius: 4px
496 border-bottom-right-radius: 4px
497 box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
506 // undo space_evenly stuff:
516 body > .centerer > .nav ul > li, #mobile_menu_button
518 padding: 3px 10px 4px 17px
519 font-size: font_size_large
520 #admin_images_body .th_toggle_buttons