make layout mosly responsive

[wfpl-cms.git] / style.styl

diff --git a/style.styl b/style.styl
index 003da09..2807eb5 100644 (file)
--- a/style.styl
+++ b/style.styl
@@ -1,19 +1,40 @@
 @require 'inc/wfpl/stylus_helpers.styl'
 @require '.sha1sums.styl'
 
-// dimensions
-site_width = 934px // inside the shadow
-site_padding = 30px
-content_width = (site_width - (site_padding * 2))
+// constants
+golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
+
+////////////////
+// SETTINGS { //
+////////////////
+
+// dimensions (max. these will scale down for smaller screens except in ie8)
+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
+
+// fonts
 font_size_normal = 15px
 font_size_small = 13px
 font_size_tiny = 11px
-site_column_gap = 40px
 
 // colors
 content_bg = #fff
 content_fg = #000
-window_bg = #e6e7e8
+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
@@ -166,12 +187,9 @@ ckeditor('admin_pages', 'content', content_width)
 #centerer
        position: relative
        background: content_bg
-       padding-top: 150px
-       padding-right: site_padding
-       padding-bottom: site_padding
-       padding-left: site_padding
-       width: site_width - @padding-left - @padding-right
-       margin: 10px auto
+       padding: site_padding
+       max-width: content_width
+       margin: 0 auto
 
 nav#site-nav
        padding-bottom: 20px
@@ -299,3 +317,46 @@ table.evenodd
 .password_suggestion
        & + &
                margin-left: 10px
+
+.wfpl_fr
+       display: block
+       float: right
+       margin-left: sidebar_padding
+       margin-bottom: 1%
+       width: sidebar_width // simple when big, and for ie8 (which ignores media queries)
+
+@media screen and (max-width: (content_width / vw_to_content_width))
+       #centerer
+               width: auto
+               margin: 0
+               padding: unit(site_padding_pct * 100, '%')
+       .wfpl_fr
+               width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
+               margin-left: unit(sidebar_padding_pct * 100, '%')
+@media screen and (max-width: (sidebar_width / vw_to_content_width))
+       .wfpl_fr
+               float: none
+               margin-left: 0
+               margin-bottom: 0
+               width: 100%
+.wfpl_fr > .wfpl_i
+       display: block
+       width: 100%
+       height: auto
+       background-size: contain
+       background-repeat: no-repeat
+       background-position: 50% top
+       font-size: 80%
+       text-align: right
+
+#mobile_menu_button
+       display: none;
+#mobile_menu_check
+       display: none;
+@media screen and (max-width: (mobile_menu_width))
+       #mobile_menu_check:not(:checked) + ul
+               display: none
+       nav#site-nav ul > li, #mobile_menu_button
+               display: block
+               background: #eee
+               padding: 3px 10px 4px 17px