+++ /dev/null
-@require 'inc/wfpl/stylus_helpers.styl'
-@require '.sha1sums.styl'
-
-// constants
-golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
-
-////////////////
-// SETTINGS { //
-////////////////
-
-////// 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
-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']
-
-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
-font_size_tiny = 11px
-
-// colors
-content_bg = #fff
-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
-// switching from tall to short pages
-html
- overflow-y: scroll
-
-header, hgroup, section, footer, aside, nav, article, figure, img
- display: block
-
-code.html
- display: block
- font: 12px monospace
- border: 1px solid black
- background: #ccc
-
-.caption
- font-weight: bold
- * + &
- margin-top: 15px
-
-.field
- padding-top: 3px;
-
-div.field_notes
- font-size: 12px
- line-height: 16px
-
-fieldset
- border: 1px dotted black
- padding: 0 15px 15px 15px
- margin: 15px 0
- position: relative
-
-legend
- padding: 0 6px
- font-weight: bold
-
-div.error
- border: 2px solid red
- padding: 13px
- margin: 20px
- background: #fdd
-
-h1
- font-size: 26px
- margin: 20px 0 10px
-
-h1 + h4.tagline
- margin: -10px 0 10px
-
-h1 + h2
- margin-top: -6px
-
-h2
- font-size: 20px
- margin: 16px 0px 8px
-
-h2 + h4.tagline
- margin: -8px 0 8px
-
-h3
- font-size: 18px
- margin: 12px 0 5px
-
-h3 + h4.tagline
- margin: -5px 0 5px
-
-h4
- font-size: 14px
- margin: 10px 0 3px
-
-h4 + h4.tagline
- margin: -3px 0 3px
-
-
-h1, h2, h3, h4
- font-weight: bold
-
-h4.tagline
- font-weight: normal
-
-
-p.quote
- font-size: 14px
- font-weight: bold
- padding-bottom: 1px
- margin: 15px 15px 0 15px
-
-p.quote:before, p.quote:after
- font-size: 40px
- line-height: 0
- color: #777
- font-weight: bold
- display: inline-block
- height: 10px
- position: relative
-
-p.quote:before
- content: '“'
- top: 10px
-
-p.quote:after
- content: '”'
- top: 20px
- width: 0; // make sure it doesn't wrap
-
-p.attrib, p.attribution
- margin: 0 0 15px 20px
- margin-top: 1px
- padding-left: 30px
- font-size: 12px
- font-weight: normal
- &:before
- content: "— "
-
-body
- margin: 0
- padding: 0
- 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(basename, element_name, body_id, width)
- // ckeditor ui, including border around wysiwyg area
- 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_{body_id}
- background: content_bg
- width: width
- margin: 0 auto
- min-width: 0
- width: width
- margin: 0 auto
- border: 5px solid #eee
- min-height: 50px
-
-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'])
-
-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
- margin-bottom: 15px
- ul
- li_reset()
- space_evenly(line_height)
-
-footer#site_footer
- clear: both
- padding-top: 40px
- font-size: font_size_small
-
-#wfpl_messages
- background: #ffd
- padding: 5px 12px
- margin: 0 0 20px 0
- box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
- border-radius: 4px
- p
- font-size: 120%
- padding: 5px 0
- margin: 0px
-
- hr
- display: block
- height: 1px
- border: 0
- border-top: 1px dotted #ddc;
- margin: 0
- padding: 0
-
-
-#admin_links
- font-size: font_size_small
- background: rgba(255, 244, 244, 0.5)
- border: 1px dotted #000
- padding: 3px
- position: absolute
- top: 0
- right: 0
-
-// obsolete floating images (from pastable example code on admin_images)
-span.wfpl_ifl
- display: block
- float: left
- clear: left
- font-size: 10px
- color: black
- text-align: right
- background-repeat: no-repeat
- background-position: left top
- margin: 0 10px 2px 0
-
-span.wfpl_ifr
- display: block
- float: right
- clear: right
- font-size: 10px
- color: black
- font-weight: normal
- text-align: right
- background-repeat: no-repeat
- background-position: left top
- margin: 0 0 2px 10px
-
-div.wfpl_ic
- margin: 15px auto
- font-size: 10px
- font-weight: normal
- text-align: right
- background-repeat: no-repeat
- background-position: center top
-
-
-// hack so that vertical margins are only between siblings for the most part
-td > :first-child,
-th > :first-child,
-legend + *,
-article > :first-child,
-aside > :first-child,
-section > :first-child,
-nav > :first-child,
-div > :first-child,
-.first
- margin-top: 0px
-
-td > :last-child,
-th > :last-child,
-fieldset > :last-child,
-article > :last-child,
-aside > :last-child,
-section > :last-child,
-nav > :last-child,
-div > :last-child,
-.last
- margin-bottom: 0px
-
-table.evenodd
- td, th
- padding: 6px 12px
- text-align: left
- > thead, > tbody, &
- > tr:nth-child(2n+1)
- > td, > th
- background: rgba(0,0,0,0.04)
- &:hover
- > td, > th
- background: rgba(0,0,0,0.07)
- > tr:nth-child(2n+0)
- > td, > th
- background: rgba(0,0,0,0.02)
- &:hover
- > td, > th
- background: rgba(0,0,0,0.09)
-
-.field_error
- input
- border: 1px solid red
-
-.password_suggestion
- & + &
- margin-left: 10px
-
-.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
- display: block
- margin-bottom: 1%
- clear: both
- font-size: 80%
- text-align: right
- .wfpl_i
- display: block
- width: 100%
- background-size: 100% auto
- background-repeat: no-repeat
- background-position: 50% top
- margin-bottom: 3px // padding above caption
- // clip line with (which is there so ckeditor doesn't delete this)
- height: 0
- overflow: hidden
-.wfpl_li, .wfpl_ci, .wfpl_ri
- width: unit(image_float_size * 100, '%') // when window is large
-.wfpl_li
- float: left
- 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: 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
- 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
- display: block
- position: relative
- > ul
- z-index: 1000
- background: white
- background: rgba(255, 255, 255, 0.95)
- display: block
- position: absolute
- top: 100%
- width: 96%
- left: 2%
- margin: 0
- padding: 0
- border-bottom-left-radius: 4px
- border-bottom-right-radius: 4px
- box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
- li
- padding: 15px
- & + li
- padding-top: 0
- a
- font-size: 18px
- white-space: nowrap
-
- // undo space_evenly stuff:
- &:before, &:after
- display: none
- content: none
- margin: 0
- padding: 0
- > *
- position: static
- top: 0
-
- body > .centerer > .nav ul > li, #mobile_menu_button
- display: block
- 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