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 // at col max width: ratio to image width
13 narrow_col_lr_width = 50% // width of left/right images in always-narrow columns
14 narrow_col_ci_width = 70% // width of centered images in always-narrow columns
15 image_float_min_size = 0.5 // ratio to image width when cols are scaled to min width
16 image_float_margin = 2%
17 mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
19 runaround_max = 370px // narrowest column that can have left/right images
20 centerer_width = 950px // inside. outside is columns.width
23 columns = wfpl_columns({
39 width: centerer_width - sidebar_width - sidebar_gap
49 outer_width: sidebar_width
58 outer_width: sidebar_width
65 // the gap is used for checking the width calculations, but has no dom element.
66 // This space is left blank (by floating main to the left and sidebar to the
67 // right) and might save the layout if there are borders (which don't scale) or
69 a = remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap')
70 a = remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap')
72 biggest_content_width = columns['widths']['.centerer.full > .main']
74 hide_in_one_column_mode = {
75 ".centerer.with_sidebar > .sidebar.plain": 1
76 ".centerer.with_sidebar > .sidebar.bordered": 1
81 font_size_large = 18px
82 font_size_normal = 15px
83 font_size_small = 13px
94 // image: sha1['images/sprites.min.svg']
95 // y_origin: 'bottom' // inkscape rulers are backwards
105 // column: 'three' 'four' 'five' 'six' 'seven'
112 // row: '0' '1' '2' '3' '4'
132 display: inline-block
135 display: inline-block
139 // always show vertical scrollbar, so content doesn't shift around when
140 // switching from tall to short pages
144 header, hgroup, section, footer, aside, nav, article, figure, img
150 border: 1px solid black
166 border: 1px dotted black
167 padding: 0 15px 15px 15px
176 border: 2px solid red
224 margin: 15px 15px 0 15px
226 p.quote:before, p.quote:after
231 display: inline-block
242 width: 0; // make sure it doesn't wrap
244 p.attrib, p.attribution
245 margin: 0 0 15px 20px
256 background: window_bg
258 font: font_size_normal Arimo, Arial, sans-serif
259 line-height: line_height
261 // call this for each ckeditor on each page
262 ckeditor_elements_already = {}
263 ckeditor(basename, element_name, body_id, width)
264 // ckeditor ui, including border around wysiwyg area
265 outer_selector = '#' + basename + '_body #cke_' + element_name
266 unless outer_selector in ckeditor_elements_already
267 ckeditor_elements_already[outer_selector] = 1
269 width: biggest_content_width + 30px
271 // body tag of the wysiwyg area
272 #{basename}_wysiwyg_{body_id}
273 background: content_bg
279 border: 5px solid #eee
282 ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
283 ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
284 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
285 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
291 margin: 0 auto 15px auto
295 background-size: 100%
304 body > .centerer > .nav
308 space_evenly(line_height)
313 font-size: font_size_small
319 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
330 border-top: 1px dotted #ddc;
336 font-size: font_size_small
337 background: rgba(255, 244, 244, 0.5)
338 border: 1px dotted #000
344 // obsolete floating images (from pastable example code on admin_images)
352 background-repeat: no-repeat
353 background-position: left top
364 background-repeat: no-repeat
365 background-position: left top
373 background-repeat: no-repeat
374 background-position: center top
377 // hack so that vertical margins are only between siblings for the most part
381 article > :first-child,
382 aside > :first-child,
383 section > :first-child,
391 fieldset > :last-child,
392 article > :last-child,
394 section > :last-child,
407 background: rgba(0,0,0,0.04)
410 background: rgba(0,0,0,0.07)
413 background: rgba(0,0,0,0.02)
416 background: rgba(0,0,0,0.09)
420 border: 1px solid red
426 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
435 background-size: 100% auto
436 background-repeat: no-repeat
437 background-position: 50% top
438 margin-bottom: 3px // padding above caption
439 // clip line with (which is there so ckeditor doesn't delete this)
442 .wfpl_li, .wfpl_ci, .wfpl_ri
443 width: unit(image_float_size * 100, '%') // when window is large
446 margin-right: image_float_margin // this can be a percent right?
452 margin-left: image_float_margin // this can be a percent right?
453 .wfpl_thumb // note: does not contain a .wfpl_i
454 display: inline-block
457 background-size: contain
458 background-position: 50% 50%
459 background-repeat: no-repeat
460 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
464 // output css from column calculations
465 for selector, css in columns.css
468 if columns['widths'][selector] < runaround_max
470 width: narrow_col_lr_width
472 width: narrow_col_ci_width
479 // small enough that things are scaling, big enough that we have all columns
480 @media screen and (max-width: (columns.width))
481 // output responsive css from column calculations
482 for selector, css in columns.responsive_css
486 // as big as it can be
490 // big left/right images
491 for selector, css in columns.css
492 if columns['widths'][selector] > runaround_max
494 col_max_width = columns['widths'][selector]
495 col_min_width = runaround_max
497 width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
499 width: col_max_width * image_float_size
501 // switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images
502 single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max
505 background-position: columns.width columns['widths']['.centerer.with_sidebar > .main']
506 background-position: runaround_max single_column_max
507 @media screen and (max-width: (single_column_max))
508 for selector, css in columns.css
510 if selector == '.centerer'
512 else if selector in hide_in_one_column_mode
522 margin-top: columns['responsive_css']['.centerer']['margin']
524 // make image sizing act like it's the "full"/only column
525 col_max_width = columns['widths']['.centerer.full > .main']
526 col_min_width = runaround_max
528 width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
530 width: col_max_width * image_float_size
532 // mixin for making left/right images behave as centered
533 wfpl_li_ri_to_ci(selector, width)
535 .wfpl_li, .wfpl_ci, .wfpl_ri
541 // convert left/right images to centered when columns width <= runaround_max
542 for selector, css in columns.css
543 if columns['widths'][selector] > runaround_max
544 // calculate screen width when column width is runaround_max
545 screen_rmax = columns.width / columns['widths']['.centerer.full > .main'] * runaround_max
546 @media screen and (max-width: (screen_rmax))
547 wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
553 @media screen and (max-width: (mobile_menu_width))
556 #mobile_menu_check:not(:checked) + div
558 #mobile_menu_check:checked + div
564 background: rgba(255, 255, 255, 0.95)
572 border-bottom-left-radius: 4px
573 border-bottom-right-radius: 4px
574 box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
583 // undo space_evenly stuff:
593 body > .centerer > .nav ul > li, #mobile_menu_button
595 padding: 0px 10px 0px 17px
596 font-size: font_size_large
597 #admin_images_body .th_toggle_buttons
600 space_evenly(line_height)