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