1 @require 'inc/wfpl/stylus_helpers.styl'
2 @require '.sha1sums.styl'
5 golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
11 // dimensions (max. these will scale down for smaller screens except in ie8)
14 sidebar_padding = 20px
15 sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
16 mobile_menu_width = 600px // switch to mobile menu when screen gets this small
19 font_size_large = 18px
20 font_size_normal = 15px
21 font_size_small = 13px
33 // the auto-calculated bits
34 content_width = site_width
35 // some math for responsive mode (when the above dimensions don't fit)
36 site_padding_pct = site_padding / (site_width + 2 * site_padding)
37 sidebar_padding_pct = sidebar_padding / content_width
38 vw_to_content_width = 1 - 2 * site_padding_pct
40 // always show vertical scrollbar, so content doesn't shift around when
41 // switching from tall to short pages
45 header, hgroup, section, footer, aside, nav, article, figure, img
51 border: 1px solid black
67 border: 1px dotted black
68 padding: 0 15px 15px 15px
125 margin: 15px 15px 0 15px
127 p.quote:before, p.quote:after
132 display: inline-block
143 width: 0; // make sure it doesn't wrap
145 p.attrib, p.attribution
146 margin: 0 0 15px 20px
157 background: window_bg
159 font: font_size_normal Arimo, Arial, sans-serif
161 // call this for each ckeditor on each page
162 ckeditor(basename, element_name, width)
163 // ckeditor ui, including border around wysiwyg area
164 #{basename}_body #cke_{element_name}
170 // body tag of the wysiwyg area
171 #{basename}_wysiwyg_{element_name}
172 background: content_bg
179 border-right: 20px solid #eee
180 border-left: 20px solid #eee
181 border-top: 1px solid #eee
182 border-bottom: 1px solid #eee
185 ckeditor('admin_pages', 'content', content_width)
187 // outermost div for centering, shadow, etc
190 background: content_bg
191 padding: site_padding
192 max-width: content_width
208 display: inline-block
215 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
226 border-top: 1px dotted #ddc;
240 // floating images (from pastable example code on admin_images)
248 background-repeat: no-repeat
249 background-position: left top
260 background-repeat: no-repeat
261 background-position: left top
269 background-repeat: no-repeat
270 background-position: center top
273 // hack so that vertical margins are only between siblings for the most part
277 article > :first-child,
278 aside > :first-child,
279 section > :first-child,
287 fieldset > :last-child,
288 article > :last-child,
290 section > :last-child,
303 background: rgba(0,0,0,0.04)
306 background: rgba(0,0,0,0.07)
309 background: rgba(0,0,0,0.02)
312 background: rgba(0,0,0,0.09)
316 border: 1px solid red
325 margin-left: sidebar_padding
327 width: sidebar_width // simple when big, and for ie8 (which ignores media queries)
329 @media screen and (max-width: (content_width / vw_to_content_width))
333 padding: unit(site_padding_pct * 100, '%')
335 width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
336 margin-left: unit(sidebar_padding_pct * 100, '%')
337 @media screen and (max-width: (sidebar_width / vw_to_content_width))
347 background-size: contain
348 background-repeat: no-repeat
349 background-position: 50% top
357 @media screen and (max-width: (mobile_menu_width))
358 #mobile_menu_check:not(:checked) + div
360 #mobile_menu_check:checked + div
366 background: rgba(255, 255, 255, 0.95)
374 border-bottom-left-radius: 4px
375 border-bottom-right-radius: 4px
376 box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
385 // undo space_evenly stuff:
395 nav#site-nav ul > li, #mobile_menu_button
397 padding: 3px 10px 4px 17px
398 font-size: font_size_large