JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
update .git-ftp include (for css rename)
[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 (max. these will scale down for smaller screens except in ie8)
12 // if you change these, update config.php too
13 site_width = 900px
14 site_padding = 15px
15 sidebar_padding = 20px
16 sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
17 mobile_menu_width = 600px // switch to mobile menu when screen gets this small
18
19 // fonts
20 font_size_large = 18px
21 font_size_normal = 15px
22 font_size_small = 13px
23 font_size_tiny = 11px
24
25 // colors
26 content_bg = #fff
27 content_fg = #000
28 window_bg = #fff
29
30 ////////////////////
31 // } END SETTINGS //
32 ////////////////////
33
34 // the auto-calculated bits
35 content_width = site_width
36 // some math for responsive mode (when the above dimensions don't fit)
37 site_padding_pct = site_padding / (site_width + 2 * site_padding)
38 sidebar_padding_pct = sidebar_padding / content_width
39 vw_to_content_width = 1 - 2 * site_padding_pct
40
41 // always show vertical scrollbar, so content doesn't shift around when
42 // switching from tall to short pages
43 html
44         overflow-y: scroll
45
46 header, hgroup, section, footer, aside, nav, article, figure, img
47         display: block
48
49 code.html
50         display: block
51         font: 12px monospace
52         border: 1px solid black
53         background: #ccc
54
55 .caption
56         font-weight: bold
57         * + &
58                 margin-top: 15px
59
60 .field
61         padding-top: 3px;
62
63 div.field_notes
64         font-size: 12px
65         line-height: 16px
66
67 fieldset
68         border: 1px dotted black
69         padding: 0 15px 15px 15px
70         margin: 15px 0
71         position: relative
72
73 legend
74         padding: 0 6px
75         font-weight: bold
76
77 div.error
78         border: 2px solid red
79         padding: 13px
80         margin: 20px
81         background: #fdd
82
83 h1
84         font-size: 26px
85         margin: 20px 0 10px
86
87 h1 + h4.tagline
88         margin: -10px 0 10px
89
90 h1 + h2
91         margin-top: -6px
92
93 h2
94         font-size: 20px
95         margin: 16px 0px 8px
96
97 h2 + h4.tagline
98         margin: -8px 0 8px
99
100 h3
101         font-size: 18px
102         margin: 12px 0 5px
103
104 h3 + h4.tagline
105         margin: -5px 0 5px
106
107 h4
108         font-size: 14px
109         margin: 10px 0 3px
110
111 h4 + h4.tagline
112         margin: -3px 0 3px
113
114
115 h1, h2, h3, h4
116         font-weight: bold
117
118 h4.tagline
119         font-weight: normal
120
121
122 p.quote
123         font-size: 14px
124         font-weight: bold
125         padding-bottom: 1px
126         margin: 15px 15px 0 15px
127
128 p.quote:before, p.quote:after
129         font-size: 40px
130         line-height: 0
131         color: #777
132         font-weight: bold
133         display: inline-block
134         height: 10px
135         position: relative
136
137 p.quote:before
138         content: '“'
139         top: 10px
140
141 p.quote:after
142         content: '”'
143         top: 20px
144         width: 0; // make sure it doesn't wrap
145
146 p.attrib, p.attribution
147         margin: 0 0 15px 20px
148         margin-top: 1px
149         padding-left: 30px
150         font-size: 12px
151         font-weight: normal
152         &:before
153                 content: "— "
154
155 body
156         margin: 0
157         padding: 0
158         background: window_bg
159         color: content_fg
160         font: font_size_normal Arimo, Arial, sans-serif
161
162 // call this for each ckeditor on each page
163 ckeditor(basename, element_name, width)
164         // ckeditor ui, including border around wysiwyg area
165         #{basename}_body #cke_{element_name}
166                 margin-left: -15px
167                 if width < 650px
168                         width: 680px
169                 else
170                         width: width + 30px
171         // body tag of the wysiwyg area
172         #{basename}_wysiwyg_{element_name}
173                 background: content_bg
174                 width: width
175                 margin: 0 auto
176                 if width <= 600px
177                         min-width: 0
178                         width: width
179                         margin: 0 auto
180                         border-right: 20px solid #eee
181                         border-left: 20px solid #eee
182                         border-top: 1px solid #eee
183                         border-bottom: 1px solid #eee
184                         min-height: 250px
185
186 ckeditor('admin_pages', 'content', content_width)
187
188 // outermost div for centering, shadow, etc
189 #centerer
190         position: relative
191         background: content_bg
192         padding: site_padding
193         max-width: content_width
194         margin: 0 auto
195
196 nav#site-nav
197         padding-bottom: 20px
198         ul
199                 li_reset()
200                 space_evenly()
201
202 footer
203         clear: both
204         padding-top: 40px
205         ul
206                 li_reset()
207                 li
208                         li_reset()
209                         display: inline-block
210                         margin-right: 10px
211
212 #wfpl_messages
213         background: #ffd
214         padding: 5px 12px
215         margin: 0 0 20px 0
216         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
217         border-radius: 4px
218         p
219                 font-size: 120%
220                 padding: 5px 0
221                 margin: 0px
222
223         hr
224                 display: block
225                 height: 1px
226                 border: 0
227                 border-top: 1px dotted #ddc;
228                 margin: 0
229                 padding: 0
230
231
232 #admin_links
233         background: #fdd
234         padding: 3px
235         margin-bottom: 15px
236
237
238
239
240
241 // obsolete floating images (from pastable example code on admin_images)
242 span.wfpl_ifl
243         display: block
244         float: left
245         clear: left
246         font-size: 10px
247         color: black
248         text-align: right
249         background-repeat: no-repeat
250         background-position: left top
251         margin: 0 10px 2px 0
252
253 span.wfpl_ifr
254         display: block
255         float: right
256         clear: right
257         font-size: 10px
258         color: black
259         font-weight: normal
260         text-align: right
261         background-repeat: no-repeat
262         background-position: left top
263         margin: 0 0 2px 10px
264
265 div.wfpl_ic
266         margin: 15px auto
267         font-size: 10px
268         font-weight: normal
269         text-align: right
270         background-repeat: no-repeat
271         background-position: center top
272
273
274 // hack so that vertical margins are only between siblings for the most part
275 td > :first-child,
276 th > :first-child,
277 legend + *,
278 article > :first-child,
279 aside > :first-child,
280 section > :first-child,
281 nav > :first-child,
282 div > :first-child,
283 .first
284         margin-top: 0px
285
286 td > :last-child,
287 th > :last-child,
288 fieldset > :last-child,
289 article > :last-child,
290 aside > :last-child,
291 section > :last-child,
292 nav > :last-child,
293 div > :last-child,
294 .last
295         margin-bottom: 0px
296
297 table.evenodd
298         td, th
299                 padding: 6px 12px
300                 text-align: left
301         > thead, > tbody, &
302                 > tr:nth-child(2n+1)
303                         > td, > th
304                                 background: rgba(0,0,0,0.04)
305                         &:hover
306                                 > td, > th
307                                         background: rgba(0,0,0,0.07)
308                 > tr:nth-child(2n+0)
309                         > td, > th
310                                 background: rgba(0,0,0,0.02)
311                         &:hover
312                                 > td, > th
313                                         background: rgba(0,0,0,0.09)
314
315 .field_error
316         input
317                 border: 1px solid red
318
319 .password_suggestion
320         & + &
321                 margin-left: 10px
322
323 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
324         display: block
325         margin-bottom: 1%
326         clear: both
327         font-size: 80%
328         text-align: right
329         .wfpl_i
330                 display: block
331                 width: 100%
332                 background-size: 100% auto
333                 background-repeat: no-repeat
334                 background-position: 50% top
335                 margin-bottom: 3px // padding above caption
336                 // clip line with &nbsp; (which is there so ckeditor doesn't delete this)
337                 height: 0
338                 overflow: hidden
339 .wfpl_li, .wfpl_ci, .wfpl_ri
340         width: sidebar_width // when window is large
341 .wfpl_li
342         float: left
343         margin-right: sidebar_padding
344 .wfpl_ci, .wfpl_fi
345         margin-left: auto
346         margin-right: auto
347 .wfpl_ri
348         float: right
349         margin-left: sidebar_padding
350
351 @media screen and (max-width: (content_width / vw_to_content_width))
352         #centerer
353                 width: auto
354                 margin: 0
355                 padding: unit(site_padding_pct * 100, '%')
356         .wfpl_li, .wfpl_ri
357                 width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
358         .wfpl_ri
359                 margin-left: unit(sidebar_padding_pct * 100, '%')
360         .wfpl_li
361                 margin-right: unit(sidebar_padding_pct * 100, '%')
362 @media screen and (max-width: (sidebar_width / vw_to_content_width))
363         .wfpl_li, .wfpl_ci, .wfpl_ri
364                 float: none
365                 margin-left: 0
366                 margin-right: 0
367                 width: 100%
368
369 // does not contain a .wfpl_i
370 .wfpl_thumb
371         display: inline-block
372         width: 70px
373         height: 70px;
374         background-size: contain
375         background-position: 50% 50%
376         background-repeat: no-repeat
377
378 #mobile_menu_button
379         display: none;
380 #mobile_menu_check
381         display: none;
382 @media screen and (max-width: (mobile_menu_width))
383         #mobile_menu_check:not(:checked) + div
384                 display: none
385         #mobile_menu_check:checked + div
386                 display: block
387                 position: relative
388                 > ul
389                         z-index: 1000
390                         background: white
391                         background: rgba(255, 255, 255, 0.95)
392                         display: block
393                         position: absolute
394                         top: 100%
395                         width: 96%
396                         left: 2%
397                         margin: 0
398                         padding: 0
399                         border-bottom-left-radius: 4px
400                         border-bottom-right-radius: 4px
401                         box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
402                         li
403                                 padding: 15px
404                                 & + li
405                                         padding-top: 0
406                                 a
407                                         font-size: 18px
408                                 white-space: nowrap
409
410                         // undo space_evenly stuff:
411                         &:before, &:after
412                                 display: none
413                                 content: none
414                                 margin: 0
415                                 padding: 0
416                         > *
417                                 position: static
418                                 top: 0
419
420         nav#site-nav ul > li, #mobile_menu_button
421                 display: block
422                 padding: 3px 10px 4px 17px
423                 font-size: font_size_large
424 #admin_images_body .th_toggle_buttons
425         font-weight: normal
426         color: #777
427         space_evenly()