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