styl.styl

   1 @require 'inc/wfpl/stylus_helpers.styl'
   2 @require '.sha1sums.styl'
   3
   4 // dimensions
   5 site_width = 934px // inside the shadow
   6 site_padding = 30px
   7 content_width = (site_width - (site_padding * 2))
   8 font_size_normal = 15px
   9 font_size_small = 13px
  10 font_size_tiny = 11px
  11 site_column_gap = 40px
  12
  13 // colors
  14 content_bg = #fff
  15 content_fg = #000
  16 window_bg = #e6e7e8
  17
  18 // always show vertical scrollbar, so content doesn't shift around when
  19 // switching from tall to short pages
  20 html
  21         overflow-y: scroll
  22
  23 header, hgroup, section, footer, aside, nav, article, figure, img
  24         display: block
  25
  26 code.html
  27         display: block
  28         font: 12px monospace
  29         border: 1px solid black
  30         background: #ccc
  31
  32 .caption
  33         font-weight: bold
  34         * + &
  35                 margin-top: 15px
  36
  37 .field
  38         padding-top: 3px;
  39
  40 div.field_notes
  41         font-size: 12px
  42         line-height: 16px
  43
  44 fieldset
  45         border: 1px dotted black
  46         padding: 0 15px 15px 15px
  47         margin: 15px 0
  48         position: relative
  49
  50 legend
  51         padding: 0 6px
  52         font-weight: bold
  53
  54 div.error
  55         border: 2px solid red
  56         padding: 13px
  57         margin: 20px
  58         background: #fdd
  59
  60 h1
  61         font-size: 26px
  62         margin: 20px 0 10px
  63
  64 h1 + h4.tagline
  65         margin: -10px 0 10px
  66
  67 h1 + h2
  68         margin-top: -6px
  69
  70 h2
  71         font-size: 20px
  72         margin: 16px 0px 8px
  73
  74 h2 + h4.tagline
  75         margin: -8px 0 8px
  76
  77 h3
  78         font-size: 18px
  79         margin: 12px 0 5px
  80
  81 h3 + h4.tagline
  82         margin: -5px 0 5px
  83
  84 h4
  85         font-size: 14px
  86         margin: 10px 0 3px
  87
  88 h4 + h4.tagline
  89         margin: -3px 0 3px
  90
  91
  92 h1, h2, h3, h4
  93         font-weight: bold
  94
  95 h4.tagline
  96         font-weight: normal
  97
  98
  99 p.quote
 100         font-size: 14px
 101         font-weight: bold
 102         padding-bottom: 1px
 103         margin: 15px 15px 0 15px
 104
 105 p.quote:before, p.quote:after
 106         font-size: 40px
 107         line-height: 0
 108         color: #777
 109         font-weight: bold
 110         display: inline-block
 111         height: 10px
 112         position: relative
 113
 114 p.quote:before
 115         content: '“'
 116         top: 10px
 117
 118 p.quote:after
 119         content: '”'
 120         top: 20px
 121         width: 0; // make sure it doesn't wrap
 122
 123 p.attrib, p.attribution
 124         margin: 0 0 15px 20px
 125         margin-top: 1px
 126         padding-left: 30px
 127         font-size: 12px
 128         font-weight: normal
 129         &:before
 130                 content: "— "
 131
 132 body
 133         margin: 0
 134         padding: 0
 135         background: window_bg
 136         color: content_fg
 137         font: font_size_normal Arimo, Arial, sans-serif
 138
 139 // call this for each ckeditor on each page
 140 ckeditor(basename, element_name, width)
 141         // ckeditor ui, including border around wysiwyg area
 142         #{basename}_body #cke_{element_name}
 143                 margin-left: -15px
 144                 if width < 650px
 145                         width: 680px
 146                 else
 147                         width: width + 30px
 148         // body tag of the wysiwyg area
 149         #{basename}_wysiwyg_{element_name}
 150                 background: content_bg
 151                 width: width
 152                 margin: 0 auto
 153                 if width <= 600px
 154                         min-width: 0
 155                         width: width
 156                         margin: 0 auto
 157                         border-right: 20px solid #eee
 158                         border-left: 20px solid #eee
 159                         border-top: 1px solid #eee
 160                         border-bottom: 1px solid #eee
 161                         min-height: 250px
 162
 163 ckeditor('admin_pages', 'content', content_width)
 164
 165 // outermost div for centering, shadow, etc
 166 #centerer
 167         position: relative
 168         background: content_bg
 169         padding-top: 150px
 170         padding-right: site_padding
 171         padding-bottom: site_padding
 172         padding-left: site_padding
 173         width: site_width - @padding-left - @padding-right
 174         margin: 10px auto
 175
 176 nav#site-nav
 177         padding-bottom: 20px
 178         ul
 179                 li_reset()
 180                 space_evenly()
 181
 182 footer
 183         clear: both
 184         padding-top: 40px
 185         ul
 186                 li_reset()
 187                 li
 188                         li_reset()
 189                         display: inline-block
 190                         margin-right: 10px
 191
 192 #wfpl_messages
 193         background: #ffd
 194         padding: 5px 12px
 195         margin: 0 0 20px 0
 196         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 197         border-radius: 4px
 198         p
 199                 font-size: 120%
 200                 padding: 5px 0
 201                 margin: 0px
 202
 203         hr
 204                 display: block
 205                 height: 1px
 206                 border: 0
 207                 border-top: 1px dotted #ddc;
 208                 margin: 0
 209                 padding: 0
 210
 211
 212 #admin_links
 213         background: #fdd
 214         padding: 3px
 215         margin-bottom: 15px
 216
 217
 218
 219
 220
 221 // floating images (from pastable example code on admin_images)
 222 span.wfpl_ifl
 223         display: block
 224         float: left
 225         clear: left
 226         font-size: 10px
 227         color: black
 228         text-align: right
 229         background-repeat: no-repeat
 230         background-position: left top
 231         margin: 0 10px 2px 0
 232
 233 span.wfpl_ifr
 234         display: block
 235         float: right
 236         clear: right
 237         font-size: 10px
 238         color: black
 239         font-weight: normal
 240         text-align: right
 241         background-repeat: no-repeat
 242         background-position: left top
 243         margin: 0 0 2px 10px
 244
 245 div.wfpl_ic
 246         margin: 15px auto
 247         font-size: 10px
 248         font-weight: normal
 249         text-align: right
 250         background-repeat: no-repeat
 251         background-position: center top
 252
 253
 254 // hack so that vertical margins are only between siblings for the most part
 255 td > :first-child,
 256 th > :first-child,
 257 legend + *,
 258 article > :first-child,
 259 aside > :first-child,
 260 section > :first-child,
 261 nav > :first-child,
 262 div > :first-child,
 263 .first
 264         margin-top: 0px
 265
 266 td > :last-child,
 267 th > :last-child,
 268 fieldset > :last-child,
 269 article > :last-child,
 270 aside > :last-child,
 271 section > :last-child,
 272 nav > :last-child,
 273 div > :last-child,
 274 .last
 275         margin-bottom: 0px
 276
 277 table.evenodd
 278         td, th
 279                 padding: 6px 12px
 280                 text-align: left
 281         > thead, > tbody, &
 282                 > tr:nth-child(2n+1)
 283                         > td, > th
 284                                 background: rgba(0,0,0,0.04)
 285                         &:hover
 286                                 > td, > th
 287                                         background: rgba(0,0,0,0.07)
 288                 > tr:nth-child(2n+0)
 289                         > td, > th
 290                                 background: rgba(0,0,0,0.02)
 291                         &:hover
 292                                 > td, > th
 293                                         background: rgba(0,0,0,0.09)
 294
 295 .field_error
 296         input
 297                 border: 1px solid red
 298
 299 .password_suggestion
 300         & + &
 301                 margin-left: 10px