style.styl

   1 @require 'inc/wfpl/stylus_helpers.styl'
   2 @require '.sha1sums.styl'
   3
   4 // constants
   5 golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
   6
   7 ////////////////
   8 // SETTINGS { //
   9 ////////////////
  10
  11 // dimensions (max. these will scale down for smaller screens except in ie8)
  12 site_width = 900px
  13 site_padding = 15px
  14 sidebar_padding = 20px
  15 sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
  16 mobile_menu_width = 600px // switch to mobile menu when screen gets this small
  17
  18 // fonts
  19 font_size_large = 18px
  20 font_size_normal = 15px
  21 font_size_small = 13px
  22 font_size_tiny = 11px
  23
  24 // colors
  25 content_bg = #fff
  26 content_fg = #000
  27 window_bg = #fff
  28
  29 ////////////////////
  30 // } END SETTINGS //
  31 ////////////////////
  32
  33 // the auto-calculated bits
  34 content_width = site_width
  35 // some math for responsive mode (when the above dimensions don't fit)
  36 site_padding_pct = site_padding / (site_width + 2 * site_padding)
  37 sidebar_padding_pct = sidebar_padding / content_width
  38 vw_to_content_width = 1 - 2 * site_padding_pct
  39
  40 // always show vertical scrollbar, so content doesn't shift around when
  41 // switching from tall to short pages
  42 html
  43         overflow-y: scroll
  44
  45 header, hgroup, section, footer, aside, nav, article, figure, img
  46         display: block
  47
  48 code.html
  49         display: block
  50         font: 12px monospace
  51         border: 1px solid black
  52         background: #ccc
  53
  54 .caption
  55         font-weight: bold
  56         * + &
  57                 margin-top: 15px
  58
  59 .field
  60         padding-top: 3px;
  61
  62 div.field_notes
  63         font-size: 12px
  64         line-height: 16px
  65
  66 fieldset
  67         border: 1px dotted black
  68         padding: 0 15px 15px 15px
  69         margin: 15px 0
  70         position: relative
  71
  72 legend
  73         padding: 0 6px
  74         font-weight: bold
  75
  76 div.error
  77         border: 2px solid red
  78         padding: 13px
  79         margin: 20px
  80         background: #fdd
  81
  82 h1
  83         font-size: 26px
  84         margin: 20px 0 10px
  85
  86 h1 + h4.tagline
  87         margin: -10px 0 10px
  88
  89 h1 + h2
  90         margin-top: -6px
  91
  92 h2
  93         font-size: 20px
  94         margin: 16px 0px 8px
  95
  96 h2 + h4.tagline
  97         margin: -8px 0 8px
  98
  99 h3
 100         font-size: 18px
 101         margin: 12px 0 5px
 102
 103 h3 + h4.tagline
 104         margin: -5px 0 5px
 105
 106 h4
 107         font-size: 14px
 108         margin: 10px 0 3px
 109
 110 h4 + h4.tagline
 111         margin: -3px 0 3px
 112
 113
 114 h1, h2, h3, h4
 115         font-weight: bold
 116
 117 h4.tagline
 118         font-weight: normal
 119
 120
 121 p.quote
 122         font-size: 14px
 123         font-weight: bold
 124         padding-bottom: 1px
 125         margin: 15px 15px 0 15px
 126
 127 p.quote:before, p.quote:after
 128         font-size: 40px
 129         line-height: 0
 130         color: #777
 131         font-weight: bold
 132         display: inline-block
 133         height: 10px
 134         position: relative
 135
 136 p.quote:before
 137         content: '“'
 138         top: 10px
 139
 140 p.quote:after
 141         content: '”'
 142         top: 20px
 143         width: 0; // make sure it doesn't wrap
 144
 145 p.attrib, p.attribution
 146         margin: 0 0 15px 20px
 147         margin-top: 1px
 148         padding-left: 30px
 149         font-size: 12px
 150         font-weight: normal
 151         &:before
 152                 content: "— "
 153
 154 body
 155         margin: 0
 156         padding: 0
 157         background: window_bg
 158         color: content_fg
 159         font: font_size_normal Arimo, Arial, sans-serif
 160
 161 // call this for each ckeditor on each page
 162 ckeditor(basename, element_name, width)
 163         // ckeditor ui, including border around wysiwyg area
 164         #{basename}_body #cke_{element_name}
 165                 margin-left: -15px
 166                 if width < 650px
 167                         width: 680px
 168                 else
 169                         width: width + 30px
 170         // body tag of the wysiwyg area
 171         #{basename}_wysiwyg_{element_name}
 172                 background: content_bg
 173                 width: width
 174                 margin: 0 auto
 175                 if width <= 600px
 176                         min-width: 0
 177                         width: width
 178                         margin: 0 auto
 179                         border-right: 20px solid #eee
 180                         border-left: 20px solid #eee
 181                         border-top: 1px solid #eee
 182                         border-bottom: 1px solid #eee
 183                         min-height: 250px
 184
 185 ckeditor('admin_pages', 'content', content_width)
 186
 187 // outermost div for centering, shadow, etc
 188 #centerer
 189         position: relative
 190         background: content_bg
 191         padding: site_padding
 192         max-width: content_width
 193         margin: 0 auto
 194
 195 nav#site-nav
 196         padding-bottom: 20px
 197         ul
 198                 li_reset()
 199                 space_evenly()
 200
 201 footer
 202         clear: both
 203         padding-top: 40px
 204         ul
 205                 li_reset()
 206                 li
 207                         li_reset()
 208                         display: inline-block
 209                         margin-right: 10px
 210
 211 #wfpl_messages
 212         background: #ffd
 213         padding: 5px 12px
 214         margin: 0 0 20px 0
 215         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 216         border-radius: 4px
 217         p
 218                 font-size: 120%
 219                 padding: 5px 0
 220                 margin: 0px
 221
 222         hr
 223                 display: block
 224                 height: 1px
 225                 border: 0
 226                 border-top: 1px dotted #ddc;
 227                 margin: 0
 228                 padding: 0
 229
 230
 231 #admin_links
 232         background: #fdd
 233         padding: 3px
 234         margin-bottom: 15px
 235
 236
 237
 238
 239
 240 // floating images (from pastable example code on admin_images)
 241 span.wfpl_ifl
 242         display: block
 243         float: left
 244         clear: left
 245         font-size: 10px
 246         color: black
 247         text-align: right
 248         background-repeat: no-repeat
 249         background-position: left top
 250         margin: 0 10px 2px 0
 251
 252 span.wfpl_ifr
 253         display: block
 254         float: right
 255         clear: right
 256         font-size: 10px
 257         color: black
 258         font-weight: normal
 259         text-align: right
 260         background-repeat: no-repeat
 261         background-position: left top
 262         margin: 0 0 2px 10px
 263
 264 div.wfpl_ic
 265         margin: 15px auto
 266         font-size: 10px
 267         font-weight: normal
 268         text-align: right
 269         background-repeat: no-repeat
 270         background-position: center top
 271
 272
 273 // hack so that vertical margins are only between siblings for the most part
 274 td > :first-child,
 275 th > :first-child,
 276 legend + *,
 277 article > :first-child,
 278 aside > :first-child,
 279 section > :first-child,
 280 nav > :first-child,
 281 div > :first-child,
 282 .first
 283         margin-top: 0px
 284
 285 td > :last-child,
 286 th > :last-child,
 287 fieldset > :last-child,
 288 article > :last-child,
 289 aside > :last-child,
 290 section > :last-child,
 291 nav > :last-child,
 292 div > :last-child,
 293 .last
 294         margin-bottom: 0px
 295
 296 table.evenodd
 297         td, th
 298                 padding: 6px 12px
 299                 text-align: left
 300         > thead, > tbody, &
 301                 > tr:nth-child(2n+1)
 302                         > td, > th
 303                                 background: rgba(0,0,0,0.04)
 304                         &:hover
 305                                 > td, > th
 306                                         background: rgba(0,0,0,0.07)
 307                 > tr:nth-child(2n+0)
 308                         > td, > th
 309                                 background: rgba(0,0,0,0.02)
 310                         &:hover
 311                                 > td, > th
 312                                         background: rgba(0,0,0,0.09)
 313
 314 .field_error
 315         input
 316                 border: 1px solid red
 317
 318 .password_suggestion
 319         & + &
 320                 margin-left: 10px
 321
 322 .wfpl_fr
 323         display: block
 324         float: right
 325         margin-left: sidebar_padding
 326         margin-bottom: 1%
 327         width: sidebar_width // simple when big, and for ie8 (which ignores media queries)
 328
 329 @media screen and (max-width: (content_width / vw_to_content_width))
 330         #centerer
 331                 width: auto
 332                 margin: 0
 333                 padding: unit(site_padding_pct * 100, '%')
 334         .wfpl_fr
 335                 width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
 336                 margin-left: unit(sidebar_padding_pct * 100, '%')
 337 @media screen and (max-width: (sidebar_width / vw_to_content_width))
 338         .wfpl_fr
 339                 float: none
 340                 margin-left: 0
 341                 margin-bottom: 0
 342                 width: 100%
 343 .wfpl_fr > .wfpl_i
 344         display: block
 345         width: 100%
 346         height: auto
 347         background-size: contain
 348         background-repeat: no-repeat
 349         background-position: 50% top
 350         font-size: 80%
 351         text-align: right
 352
 353 #mobile_menu_button
 354         display: none;
 355 #mobile_menu_check
 356         display: none;
 357 @media screen and (max-width: (mobile_menu_width))
 358         #mobile_menu_check:not(:checked) + div
 359                 display: none
 360         #mobile_menu_check:checked + div
 361                 display: block
 362                 position: relative
 363                 > ul
 364                         z-index: 1000
 365                         background: white
 366                         background: rgba(255, 255, 255, 0.95)
 367                         display: block
 368                         position: absolute
 369                         top: 100%
 370                         width: 96%
 371                         left: 2%
 372                         margin: 0
 373                         padding: 0
 374                         border-bottom-left-radius: 4px
 375                         border-bottom-right-radius: 4px
 376                         box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
 377                         li
 378                                 padding: 15px
 379                                 & + li
 380                                         padding-top: 0
 381                                 a
 382                                         font-size: 18px
 383                                 white-space: nowrap
 384
 385                         // undo space_evenly stuff:
 386                         &:before, &:after
 387                                 display: none
 388                                 content: none
 389                                 margin: 0
 390                                 padding: 0
 391                         > *
 392                                 position: static
 393                                 top: 0
 394
 395         nav#site-nav ul > li, #mobile_menu_button
 396                 display: block
 397                 padding: 3px 10px 4px 17px
 398                 font-size: font_size_large