JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
can choose page layouts, edit sidebar, etc
[wfpl-cms.git] / style.styl
1 @require 'inc/wfpl/stylus_helpers.styl'
2 @require '.sha1sums.styl'
3
4 // constants
5 golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
6
7 ////////////////
8 // SETTINGS { //
9 ////////////////
10
11 ////// Dimensions
12 image_float_size = golden_ratio_small
13 narrow_column_ifs = image_float_size * 1.5
14 image_float_min_size = 0.5
15 image_float_margin = 2%
16 mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
17 single_column_max = 600px // switch to single column when screen gets this narrow
18 runaround_max = 370px // center left/right images when _column_ gets this narrow
19 //// Column Dimensions
20 centerer_width = 950px // inside. outside is columns.width
21 sidebar_width = 250px
22 sidebar_gap = 30px
23 columns = wfpl_columns({
24         type: 'node'
25         name: 'centerer'
26         margin: 15px
27         width: centerer_width
28         child: {
29                 type: 'alternatives'
30                 full: {
31                         type: 'node'
32                         name: 'main'
33                 },
34                 with_sidebar: {
35                         type: 'series'
36                         main: {
37                                 type: 'node'
38                                 float: left
39                                 width: centerer_width - sidebar_width - sidebar_gap
40                         },
41                         sidebar: {
42                                 type: 'alternatives'
43                                 plain: {
44                                         type: 'node'
45                                         margin-left: sidebar_gap
46                                         width: sidebar_width
47                                         float: left
48                                 },
49                                 bordered: {
50                                         type: 'node'
51                                         margin-left: sidebar_gap
52                                         border-width: 1px
53                                         border-style: solid
54                                         border-color: red
55                                         padding: 15px
56                                         width: sidebar_width - 2px - 30px
57                                         float: left
58                                 }
59                         }
60                 }
61         }
62 })
63
64 biggest_content_width = columns['widths']['.centerer.full > .main']
65
66 hide_in_one_column_mode = {
67         ".centerer.with_sidebar > .sidebar.plain": 1
68         ".centerer.with_sidebar > .sidebar.bordered": 1
69 }
70
71 // fonts
72 font_size_large = 18px
73 font_size_normal = 15px
74 font_size_small = 13px
75 font_size_tiny = 11px
76
77 // colors
78 content_bg = #fff
79 content_fg = #000
80 window_bg = #fff
81
82 ////////////////////
83 // } END SETTINGS //
84 ////////////////////
85
86
87
88 // always show vertical scrollbar, so content doesn't shift around when
89 // switching from tall to short pages
90 html
91         overflow-y: scroll
92
93 header, hgroup, section, footer, aside, nav, article, figure, img
94         display: block
95
96 code.html
97         display: block
98         font: 12px monospace
99         border: 1px solid black
100         background: #ccc
101
102 .caption
103         font-weight: bold
104         * + &
105                 margin-top: 15px
106
107 .field
108         padding-top: 3px;
109
110 div.field_notes
111         font-size: 12px
112         line-height: 16px
113
114 fieldset
115         border: 1px dotted black
116         padding: 0 15px 15px 15px
117         margin: 15px 0
118         position: relative
119
120 legend
121         padding: 0 6px
122         font-weight: bold
123
124 div.error
125         border: 2px solid red
126         padding: 13px
127         margin: 20px
128         background: #fdd
129
130 h1
131         font-size: 26px
132         margin: 20px 0 10px
133
134 h1 + h4.tagline
135         margin: -10px 0 10px
136
137 h1 + h2
138         margin-top: -6px
139
140 h2
141         font-size: 20px
142         margin: 16px 0px 8px
143
144 h2 + h4.tagline
145         margin: -8px 0 8px
146
147 h3
148         font-size: 18px
149         margin: 12px 0 5px
150
151 h3 + h4.tagline
152         margin: -5px 0 5px
153
154 h4
155         font-size: 14px
156         margin: 10px 0 3px
157
158 h4 + h4.tagline
159         margin: -3px 0 3px
160
161
162 h1, h2, h3, h4
163         font-weight: bold
164
165 h4.tagline
166         font-weight: normal
167
168
169 p.quote
170         font-size: 14px
171         font-weight: bold
172         padding-bottom: 1px
173         margin: 15px 15px 0 15px
174
175 p.quote:before, p.quote:after
176         font-size: 40px
177         line-height: 0
178         color: #777
179         font-weight: bold
180         display: inline-block
181         height: 10px
182         position: relative
183
184 p.quote:before
185         content: '“'
186         top: 10px
187
188 p.quote:after
189         content: '”'
190         top: 20px
191         width: 0; // make sure it doesn't wrap
192
193 p.attrib, p.attribution
194         margin: 0 0 15px 20px
195         margin-top: 1px
196         padding-left: 30px
197         font-size: 12px
198         font-weight: normal
199         &:before
200                 content: "— "
201
202 body
203         margin: 0
204         padding: 0
205         background: window_bg
206         color: content_fg
207         font: font_size_normal Arimo, Arial, sans-serif
208
209 // call this for each ckeditor on each page
210 ckeditor_elements_already = {}
211 ckeditor(basename, element_name, body_id, width)
212         // ckeditor ui, including border around wysiwyg area
213         unless element_name in ckeditor_elements_already
214                 ckeditor_elements_already[element_name] = 1
215                 #{basename}_body #cke_{element_name}
216                         width: biggest_content_width + 30px
217                         margin-right: -30px
218         // body tag of the wysiwyg area
219         #{basename}_wysiwyg_{body_id}
220                 background: content_bg
221                 width: width
222                 margin: 0 auto
223                 min-width: 0
224                 width: width
225                 margin: 0 auto
226                 border: 5px solid #eee
227                 min-height: 50px
228
229 ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
230 ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
231 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
232 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
233
234 // outermost div for centering, shadow, etc
235 #centerer
236         position: relative
237         background: content_bg
238         padding: site_padding
239         margin: 0 auto
240
241 body > .centerer > .nav
242         padding-bottom: 20px
243         ul
244                 li_reset()
245                 space_evenly()
246
247 footer
248         clear: both
249         padding-top: 40px
250         ul
251                 li_reset()
252                 li
253                         li_reset()
254                         display: inline-block
255                         margin-right: 10px
256
257 #wfpl_messages
258         background: #ffd
259         padding: 5px 12px
260         margin: 0 0 20px 0
261         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
262         border-radius: 4px
263         p
264                 font-size: 120%
265                 padding: 5px 0
266                 margin: 0px
267
268         hr
269                 display: block
270                 height: 1px
271                 border: 0
272                 border-top: 1px dotted #ddc;
273                 margin: 0
274                 padding: 0
275
276
277 #admin_links
278         background: #fdd
279         padding: 3px
280         margin-bottom: 15px
281
282
283
284
285
286 // obsolete floating images (from pastable example code on admin_images)
287 span.wfpl_ifl
288         display: block
289         float: left
290         clear: left
291         font-size: 10px
292         color: black
293         text-align: right
294         background-repeat: no-repeat
295         background-position: left top
296         margin: 0 10px 2px 0
297
298 span.wfpl_ifr
299         display: block
300         float: right
301         clear: right
302         font-size: 10px
303         color: black
304         font-weight: normal
305         text-align: right
306         background-repeat: no-repeat
307         background-position: left top
308         margin: 0 0 2px 10px
309
310 div.wfpl_ic
311         margin: 15px auto
312         font-size: 10px
313         font-weight: normal
314         text-align: right
315         background-repeat: no-repeat
316         background-position: center top
317
318
319 // hack so that vertical margins are only between siblings for the most part
320 td > :first-child,
321 th > :first-child,
322 legend + *,
323 article > :first-child,
324 aside > :first-child,
325 section > :first-child,
326 nav > :first-child,
327 div > :first-child,
328 .first
329         margin-top: 0px
330
331 td > :last-child,
332 th > :last-child,
333 fieldset > :last-child,
334 article > :last-child,
335 aside > :last-child,
336 section > :last-child,
337 nav > :last-child,
338 div > :last-child,
339 .last
340         margin-bottom: 0px
341
342 table.evenodd
343         td, th
344                 padding: 6px 12px
345                 text-align: left
346         > thead, > tbody, &
347                 > tr:nth-child(2n+1)
348                         > td, > th
349                                 background: rgba(0,0,0,0.04)
350                         &:hover
351                                 > td, > th
352                                         background: rgba(0,0,0,0.07)
353                 > tr:nth-child(2n+0)
354                         > td, > th
355                                 background: rgba(0,0,0,0.02)
356                         &:hover
357                                 > td, > th
358                                         background: rgba(0,0,0,0.09)
359
360 .field_error
361         input
362                 border: 1px solid red
363
364 .password_suggestion
365         & + &
366                 margin-left: 10px
367
368 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
369         display: block
370         margin-bottom: 1%
371         clear: both
372         font-size: 80%
373         text-align: right
374         .wfpl_i
375                 display: block
376                 width: 100%
377                 background-size: 100% auto
378                 background-repeat: no-repeat
379                 background-position: 50% top
380                 margin-bottom: 3px // padding above caption
381                 // clip line with   (which is there so ckeditor doesn't delete this)
382                 height: 0
383                 overflow: hidden
384 .wfpl_li, .wfpl_ci, .wfpl_ri
385         width: unit(image_float_size * 100, '%') // when window is large
386 .wfpl_li
387         float: left
388         margin-right: image_float_margin // this can be a percent right?
389 .wfpl_ci, .wfpl_fi
390         margin-left: auto
391         margin-right: auto
392 .wfpl_ri
393         float: right
394         margin-left: image_float_margin // this can be a percent right?
395 .wfpl_thumb // note: does not contain a .wfpl_i
396         display: inline-block
397         width: 70px
398         height: 70px
399         background-size: contain
400         background-position: 50% 50%
401         background-repeat: no-repeat
402 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
403         max-width: 100%
404
405
406 // output css from column calculations
407 for selector, css in columns.css
408         body > {selector}
409                 {css}
410 @media screen and (max-width: (columns.width))
411         // output responsive css from column calculations
412         for selector, css in columns.responsive_css
413                 body > {selector}
414                         {css}
415
416         // as big as it can be
417         body > .centerer
418                 width: auto
419
420         // make sure that borders (which won't scale) and rounding errors don't
421         // break the layout
422         body > .centerer.full > .main,
423         body > .centerer.with_sidebar > .sidebar.plain,
424         body > .centerer.with_sidebar > .sidebar.bordered
425                 margin-right: -10px
426
427 // big left/right images
428 for selector, css in columns.css
429         if columns['widths'][selector] > runaround_max
430                 body > {selector}
431                         col_max_width = columns['widths'][selector]
432                         col_min_width = col_max_width / columns.width * single_column_max
433                         .wfpl_li, .wfpl_ri
434                                 width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
435                         .wfpl_ci
436                                 width: col_max_width * image_float_size
437
438 // mixin for making left/right images behave as centered
439 wfpl_li_ri_to_ci(selector, width)
440         {selector}
441                 .wfpl_li, .wfpl_ci, .wfpl_ri
442                         float: none
443                         width: width
444                         margin-right: auto
445                         margin-left: auto
446
447 // convert left/right to centered when columns width <= runaround_max
448 for selector, css in columns.css
449         if columns['widths'][selector] > runaround_max
450                 // calculate screen width when column width is runaround_max
451                 screen_rmax = columns['widths'][selector] / columns.width * runaround_max
452                 @media screen and (max-width: (screen_rmax))
453                         wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
454         else
455                 // no @media, because these colums are always narrower than runaround_max
456                 wfpl_li_ri_to_ci(selector, columns['widths'][selector] * narrow_column_ifs)
457
458 // switch to 1-column layout
459 @media screen and (max-width: (single_column_max))
460         for selector, css in columns.css
461                 body > {selector}
462                         if selector == '.centerer'
463                                 margin-top: 0
464                         else if selector in hide_in_one_column_mode
465                                 display: none
466                         else
467                                 border: none
468                                 float: none
469                                 width: auto
470                                 margin: 0
471                                 padding: 0
472                                 margin-top: columns['responsive_css']['.centerer']['margin']
473
474 #mobile_menu_button
475         display: none;
476 #mobile_menu_check
477         display: none;
478 @media screen and (max-width: (mobile_menu_width))
479         #mobile_menu_check:not(:checked) + div
480                 display: none
481         #mobile_menu_check:checked + div
482                 display: block
483                 position: relative
484                 > ul
485                         z-index: 1000
486                         background: white
487                         background: rgba(255, 255, 255, 0.95)
488                         display: block
489                         position: absolute
490                         top: 100%
491                         width: 96%
492                         left: 2%
493                         margin: 0
494                         padding: 0
495                         border-bottom-left-radius: 4px
496                         border-bottom-right-radius: 4px
497                         box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
498                         li
499                                 padding: 15px
500                                 & + li
501                                         padding-top: 0
502                                 a
503                                         font-size: 18px
504                                 white-space: nowrap
505
506                         // undo space_evenly stuff:
507                         &:before, &:after
508                                 display: none
509                                 content: none
510                                 margin: 0
511                                 padding: 0
512                         > *
513                                 position: static
514                                 top: 0
515
516         body > .centerer > .nav ul > li, #mobile_menu_button
517                 display: block
518                 padding: 3px 10px 4px 17px
519                 font-size: font_size_large
520 #admin_images_body .th_toggle_buttons
521         font-weight: normal
522         color: #777
523         space_evenly()