metaform/styl.styl

   1 @require 'code/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)