////////////////
// 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
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
-// 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
& + &
margin-left: 10px
-.wfpl_fr
+.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, .wfpl_fi
+ margin-left: auto
+ margin-right: auto
+.wfpl_ri
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
+ .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_fr
+ .wfpl_li, .wfpl_ci, .wfpl_ri
float: none
margin-left: 0
- margin-bottom: 0
+ margin-right: 0
width: 100%
-.wfpl_fr > .wfpl_i
- display: block
- width: 100%
- height: auto
+
+// 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
- 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
+ #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
- background: #eee
padding: 3px 10px 4px 17px
+ font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+ font-weight: normal
+ color: #777
+ space_evenly()