sane/flexible stylus for columns

diff --git a/inc/wfpl b/inc/wfpl
index 33b391f..ae37366 160000 (submodule)
--- a/inc/wfpl
+++ b/inc/wfpl
@@ -1 +1 @@
-Subproject commit 33b391fa326b3a118fcfb004807ab02432a68992
+Subproject commit ae37366f1b03740b795fb5ed68447bb60840f540

diff --git a/style.styl b/style.styl
index 3e4645c..140571a 100644 (file)
--- a/style.styl
+++ b/style.styl
@@ -8,13 +8,63 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
 // SETTINGS { //
 ////////////////
 
-// dimensions (max. these will scale down for smaller screens except in ie8)
-// if you change these, update config.php too
-site_width = 900px
-site_padding = 15px
-sidebar_padding = 20px
-sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
-mobile_menu_width = 600px // switch to mobile menu when screen gets this small
+////// Dimensions
+image_float_size = golden_ratio_small
+narrow_column_ifs = image_float_size * 1.5
+image_float_min_size = 0.5
+image_float_margin = 2%
+mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
+single_column_max = 600px // switch to single column when screen gets this narrow
+runaround_max = 370px // center left/right images when _column_ gets this narrow
+//// Column Dimensions
+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
+                       },
+                       sidebar: {
+                               type: 'alternatives'
+                               plain: {
+                                       type: 'node'
+                                       margin-left: sidebar_gap
+                                       width: sidebar_width
+                                       float: left
+                               },
+                               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
+                               }
+                       }
+               }
+       }
+})
+
+hide_in_one_column_mode = {
+       ".centerer.with_sidebar > .sidebar.plain": 1
+       ".centerer.with_sidebar > .sidebar.bordered": 1
+}
 
 // fonts
 font_size_large = 18px
@@ -31,12 +81,7 @@ window_bg = #fff
 // } END SETTINGS //
 ////////////////////
 
-// the auto-calculated bits
-content_width = site_width
-// some math for responsive mode (when the above dimensions don't fit)
-site_padding_pct = site_padding / (site_width + 2 * site_padding)
-sidebar_padding_pct = sidebar_padding / content_width
-vw_to_content_width = 1 - 2 * site_padding_pct
+
 
 // always show vertical scrollbar, so content doesn't shift around when
 // switching from tall to short pages
@@ -183,17 +228,17 @@ ckeditor(basename, element_name, width)
                        border-bottom: 1px solid #eee
                        min-height: 250px
 
-ckeditor('admin_pages', 'content', content_width)
+// FIXME fix this for layouts
+ckeditor('admin_pages', 'content', columns.width)
 
 // outermost div for centering, shadow, etc
 #centerer
        position: relative
        background: content_bg
        padding: site_padding
-       max-width: content_width
        margin: 0 auto
 
-nav#site-nav
+body > .centerer > .nav
        padding-bottom: 20px
        ul
                li_reset()
@@ -337,43 +382,94 @@ table.evenodd
                height: 0
                overflow: hidden
 .wfpl_li, .wfpl_ci, .wfpl_ri
-       width: sidebar_width // when window is large
+       width: unit(image_float_size * 100, '%') // when window is large
 .wfpl_li
        float: left
-       margin-right: sidebar_padding
+       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: sidebar_padding
-
-@media screen and (max-width: (content_width / vw_to_content_width))
-       #centerer
-               width: auto
-               margin: 0
-               padding: unit(site_padding_pct * 100, '%')
-       .wfpl_li, .wfpl_ri
-               width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
-       .wfpl_ri
-               margin-left: unit(sidebar_padding_pct * 100, '%')
-       .wfpl_li
-               margin-right: unit(sidebar_padding_pct * 100, '%')
-@media screen and (max-width: (sidebar_width / vw_to_content_width))
-       .wfpl_li, .wfpl_ci, .wfpl_ri
-               float: none
-               margin-left: 0
-               margin-right: 0
-               width: 100%
-
-// does not contain a .wfpl_i
-.wfpl_thumb
+       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;
+       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}
+@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
+
+       // 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
+               body > {selector}
+                       col_max_width = columns['widths'][selector]
+                       col_min_width = col_max_width / columns.width * single_column_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)
+       {selector}
+               .wfpl_li, .wfpl_ci, .wfpl_ri
+                       float: none
+                       width: width
+                       margin-right: auto
+                       margin-left: auto
+
+// convert left/right 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['widths'][selector] / columns.width * runaround_max
+               @media screen and (max-width: (screen_rmax))
+                       wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
+       else
+               // no @media, because these colums are always narrower than runaround_max
+               wfpl_li_ri_to_ci(selector, columns['widths'][selector] * narrow_column_ifs)
+
+// switch to 1-column layout
+@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: 0
+                               padding: 0
+                               margin-top: columns['responsive_css']['.centerer']['margin']
 
 #mobile_menu_button
        display: none;
@@ -417,7 +513,7 @@ table.evenodd
                                position: static
                                top: 0
 
-       nav#site-nav ul > li, #mobile_menu_button
+       body > .centerer > .nav ul > li, #mobile_menu_button
                display: block
                padding: 3px 10px 4px 17px
                font-size: font_size_large

diff --git a/template.html b/template.html
index c7793d8..e3fa035 100644 (file)
--- a/template.html
+++ b/template.html
@@ -14,12 +14,12 @@
 </head>
 
 <body id="~$basename~_body" class="real_body_tag">
-       <div id="centerer">
+       <div class="centerer with_sidebar">
                <header>
                        header image here
                </header>
                <!--~$navbar_items once_if {~-->
-                       <nav id="site-nav">
+                       <nav class="nav">
                                <form action="#" method="get">
                                        <label for="mobile_menu_check" id="mobile_menu_button">&#9776; Menu</label>
                                        <input type="checkbox" name="mobile_menu_check" id="mobile_menu_check">
@@ -32,7 +32,7 @@
                        </nav>
                <!--~}~-->
 
-               <div id="main-body">
+               <div class="main">
                        <!--~$admin_links {~-->
                                <div id="admin_links">You are logged in as an administrator. &nbsp; <a href="admin_pages?~$edit_page_id {~edit_id=~$edit_page_id~~}~~$edit_page_id unset {~&amp;new=1&amp;new_filename=~$basename~~}~">Edit this page</a> &mdash; <a href="admin">Control panel</a> &mdash; <a href="logout">Log out</a></div>
                        <!--~}~-->
@@ -53,6 +53,13 @@
                                ~$body~
                        </article>
                </div>
+
+<div class="sidebar bordered">
+       <h1>Sidebar!</h1>
+       <!--~$cms_body~-->
+</div>
+<div style="clear: both"></div>
+
                <footer>
                        footer text here
                </footer>