@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)
+// 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
+
+// fonts
+font_size_large = 18px
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
-// floating images (from pastable example code on admin_images)
+// obsolete floating images (from pastable example code on admin_images)
span.wfpl_ifl
display: block
float: left
.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: sidebar_width // when window is large
+.wfpl_li
+ float: left
+ margin-right: sidebar_padding
+.wfpl_ci
+ 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
+ display: inline-block
+ width: 70px
+ height: 70px;
+ background-size: contain
+ background-position: 50% 50%
+ background-repeat: no-repeat
+
+#mobile_menu_button
+ display: none;
+#mobile_menu_check
+ display: none;
+@media screen and (max-width: (mobile_menu_width))
+ #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
+
+ nav#site-nav ul > li, #mobile_menu_button
+ display: block
+ padding: 3px 10px 4px 17px
+ font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+ font-weight: normal
+ color: #777
+ space_evenly()