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