@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
#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
.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
<html lang="en">
<head>
<title>~$title html~~$cms_title html~</title>
+ <meta name="viewport" content="width=device-width, user-scalable=no" />
<!--[if lt IE 9]>
~$running_locally {~<script src="/javascript/html5.js"></script>~}~
~$running_locally unset {~<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>~}~
</header>
<!--~$navbar_items once_if {~-->
<nav id="site-nav">
+ <form action="#" method="get">
+ <label for="mobile_menu_check" id="mobile_menu_button">☰ Menu</label>
+ <input type="checkbox" name="mobile_menu_check" id="mobile_menu_check">
<ul><!--~$navbar_items {~-->
<li><a href="~filename~">~title html~</a></li><!--~}~-->
</ul>
+ </form>
</nav>
<!--~}~-->
Got questions, comments, patches, etc.? Contact Jason Woofenden