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 // expand the ckeditor widget so there's space for the content to be exactly
 137 // the size of the content outside the editor
 138 .cke
 139         margin-right: -15px
 140         margin-left: -15px
 141 // <body> tag within ckeditor
 142 #admin_pages_wysiwyg_content
 143         background: content_bg
 144         width: content_width
 145         margin: 0 auto
 146
 147 // outermost div for centering, shadow, etc
 148 #centerer
 149         position: relative
 150         background: content_bg
 151         padding-top: 150px
 152         padding-right: site_padding
 153         padding-bottom: site_padding
 154         padding-left: site_padding
 155         width: site_width - @padding-left - @padding-right
 156         margin: 10px auto
 157
 158 nav#site-nav
 159         padding-bottom: 20px
 160         ul
 161                 li_reset()
 162                 space_evenly()
 163
 164 footer
 165         clear: both
 166         padding-top: 40px
 167         ul
 168                 li_reset()
 169                 li
 170                         li_reset()
 171                         display: inline-block
 172                         margin-right: 10px
 173
 174 #wfpl_messages
 175         background: #ffd
 176         padding: 5px 12px
 177         margin: 0 0 20px 0
 178         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 179         border-radius: 4px
 180         p
 181                 font-size: 120%
 182                 padding: 5px 0
 183                 margin: 0px
 184
 185         hr
 186                 display: block
 187                 height: 1px
 188                 border: 0
 189                 border-top: 1px dotted #ddc;
 190                 margin: 0
 191                 padding: 0
 192
 193
 194 #admin_links
 195         background: #fdd
 196         padding: 3px
 197         margin-bottom: 15px
 198
 199
 200
 201
 202
 203 // floating images (from pastable example code on admin_images)
 204 span.wfpl_ifl
 205         display: block
 206         float: left
 207         clear: left
 208         font-size: 10px
 209         color: black
 210         text-align: right
 211         background-repeat: no-repeat
 212         background-position: left top
 213         margin: 0 10px 2px 0
 214
 215 span.wfpl_ifr
 216         display: block
 217         float: right
 218         clear: right
 219         font-size: 10px
 220         color: black
 221         font-weight: normal
 222         text-align: right
 223         background-repeat: no-repeat
 224         background-position: left top
 225         margin: 0 0 2px 10px
 226
 227 div.wfpl_ic
 228         margin: 15px auto
 229         font-size: 10px
 230         font-weight: normal
 231         text-align: right
 232         background-repeat: no-repeat
 233         background-position: center top
 234
 235
 236 // hack so that vertical margins are only between siblings for the most part
 237 td > :first-child,
 238 th > :first-child,
 239 legend + *,
 240 article > :first-child,
 241 aside > :first-child,
 242 section > :first-child,
 243 nav > :first-child,
 244 div > :first-child,
 245 .first
 246         margin-top: 0px
 247
 248 td > :last-child,
 249 th > :last-child,
 250 fieldset > :last-child,
 251 article > :last-child,
 252 aside > :last-child,
 253 section > :last-child,
 254 nav > :last-child,
 255 div > :last-child,
 256 .last
 257         margin-bottom: 0px
 258
 259 table.evenodd
 260         td, th
 261                 padding: 6px 12px
 262                 text-align: left
 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)
 276
 277 .field_error
 278         input
 279                 border: 1px solid red
 280
 281 .password_suggestion
 282         & + &
 283                 margin-left: 10px