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