JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
API CHANGE: new DB structure for sessions
[wfpl.git] / metaform / styl.styl
1 @require 'inc/wfpl/stylus-helpers.styl'
2 @require '.image-mtimes.styl'
3
4 // dimensions
5 site-width = 934px // inside the shadow
6 site-padding = 30px
7 sidebar-width = 220px
8 content-width = (site-width - (site-padding * 3) - sidebar-width)
9 font-size-normal = 15px
10 font-size-small = 13px
11 font-size-tiny = 11px
12 site-column-gap = 40px
13 spritesheet-height = 1050px // for sprites near bottom
14
15 // colors
16 content-bg = #fff
17 content-fg = #000
18 window-bg = #e6e7e8
19
20 // always show vertical scrollbar, so content doesn't shift around when
21 // switching from tall to short pages
22 html
23     overflow-y: scroll
24
25 header, hgroup, section, footer, aside, nav, article, figure, img
26         display: block
27
28 code.html
29         display: block
30         font: 12px monospace
31         border: 1px solid black
32         background: #ccc
33
34 .caption
35         font-weight: bold
36         * + &
37                 margin-top: 15px
38
39 .field
40         padding-top: 3px
41
42 div.field_notes
43         font-size: 12px
44         line-height: 16px
45
46 fieldset
47         border: 1px dotted black
48         padding: 0 15px 15px 15px
49         margin: 15px 0
50         position: relative
51
52 legend
53         padding: 0 6px
54         font-weight: bold
55
56 div.error
57         border: 2px solid red
58         padding: 13px
59         margin: 20px
60         background: #fdd
61
62 h1
63         font-size: 22px
64         margin: 20px 0 10px
65
66 h1 + h4.tagline
67         margin: -10px 0 10px
68
69 h2
70         font-size: 19px
71         margin: 30px 0px 8px
72
73 h2 + h4.tagline
74         margin: -8px 0 8px
75
76 h3
77         font-size: 16px
78         margin: 12px 0 5px
79
80 h3 + h4.tagline
81         margin: -5px 0 5px
82
83 h4
84         font-size: 12px
85         margin: 10px 0 3px
86
87 h4 + h4.tagline
88         margin: -3px 0 3px
89
90
91 h1, h2, h3, h4
92         font-weight: bold
93
94 h4.tagline
95         font-weight: normal
96
97
98 p.quote
99         font-size: 14px
100         font-weight: bold
101         padding-bottom: 1px
102         margin: 15px 15px 0 15px
103
104 p.quote:before, p.quote:after
105         font-size: 40px
106         line-height: 0
107         color: #777
108         font-weight: bold
109         display: inline-block
110         height: 10px
111         position: relative
112
113 p.quote:before
114         content: '“'
115         top: 10px
116
117 p.quote:after
118         content: '”'
119         top: 20px
120         width: 0; // make sure it doesn't wrap
121
122 p.attrib, p.attribution
123         margin: 0 0 15px 20px
124         margin-top: 1px
125         padding-left: 30px
126         font-size: 12px
127         font-weight: normal
128         &:before
129                 content: "— "
130
131 body
132         margin: 0
133         padding: 0
134         color: content-fg
135         font: font-size-normal Arimo, Arial, sans-serif
136
137         // Styles for the <body> tag within ckeditor
138         background: content-bg
139         width: content-width
140         margin: 0 auto
141         &.real_body_tag // revert the above for the <body> on the real site
142                 background: window-bg
143                 width: auto
144                 margin: 0
145
146 // expand the ckeditor widget so there's space for the content to be exactly
147 // the size of the content outside the editor
148 #cke_content
149         margin-right: -15px
150         margin-left: -15px
151
152 // outermost div for centering, shadow, etc
153 #centerer
154         position: relative
155         background: content-bg
156         padding-top: 150px
157         padding-right: site-padding
158         padding-bottom: site-padding
159         padding-left: site-padding
160         width: site-width - @padding-left - @padding-right
161         margin: 10px auto
162
163 nav#site-nav
164         padding-bottom: 20px
165         ul
166                 li-reset()
167                 space-evenly()
168
169 footer
170         clear: both
171         padding-top: 40px
172         ul
173                 li-reset()
174                 li
175                         li-reset()
176                         display: inline-block
177                         margin-right: 10px
178
179 #wfpl_messages
180         background: #ffd
181         padding: 5px 12px
182         margin: 0 0 20px 0
183         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
184         border-radius: 4px
185         p
186                 font-size: 120%
187                 padding: 5px 0
188                 margin: 0px
189
190         hr
191                 display: block
192                 height: 1px
193                 border: 0
194                 border-top: 1px dotted #ddc
195                 margin: 0
196                 padding: 0
197
198
199 #admin_links
200         background: #fdd
201         padding: 3px
202         margin-bottom: 15px
203
204
205
206
207
208 // floating images (from pastable example code on admin_images)
209 span.wfpl_ifl
210         display: block
211         float: left
212         clear: left
213         font-size: 10px
214         color: black
215         text-align: right
216         background-repeat: no-repeat
217         background-position: left top
218         margin: 0 10px 2px 0
219
220 span.wfpl_ifr
221         display: block
222         float: right
223         clear: right
224         font-size: 10px
225         color: black
226         font-weight: normal
227         text-align: right
228         background-repeat: no-repeat
229         background-position: left top
230         margin: 0 0 2px 10px
231
232 div.wfpl_ic
233         margin: 15px auto
234         font-size: 10px
235         font-weight: normal
236         text-align: right
237         background-repeat: no-repeat
238         background-position: center top
239
240
241 // hack so that vertical margins are only between siblings for the most part
242 td > :first-child,
243 th > :first-child,
244 legend + *,
245 article > :first-child,
246 section > :first-child,
247 nav > :first-child,
248 div > :first-child,
249 .first
250         margin-top: 0px
251
252 td > :last-child,
253 th > :last-child,
254 fieldset > :last-child,
255 article > :last-child,
256 section > :last-child,
257 nav > :last-child,
258 div > :last-child,
259 .last
260         margin-bottom: 0px
261
262 table.evenodd
263         > thead, > tbody, &
264                 > tr:nth-child(2n+1)
265                         > td, > th
266                                 background: rgba(0,0,0,0.04)
267                         &:hover
268                                 > td, > th
269                                         background: rgba(0,0,0,0.07)
270                 > tr:nth-child(2n+0)
271                         > td, > th
272                                 background: rgba(0,0,0,0.02)
273                         &:hover
274                                 > td, > th
275                                         background: rgba(0,0,0,0.09)