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
  12 image_float_size = golden_ratio_small // at col max width: ratio to image width
  13 narrow_col_lr_width = 50% // width of left/right images in always-narrow columns
  14 narrow_col_ci_width = 70% // width of centered images in always-narrow columns
  15 image_float_min_size = 0.5 // ratio to image width when cols are scaled to min width
  16 image_float_margin = 2%
  17 mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow
  18 // Column Dimensions
  19 runaround_max = 370px // narrowest column that can have left/right images
  20 centerer_width = 950px // inside. outside is columns.width
  21 sidebar_width = 250px
  22 sidebar_gap = 30px
  23 columns = wfpl_columns({
  24         type: 'node'
  25         name: 'centerer'
  26         margin: 15px
  27         width: centerer_width
  28         child: {
  29                 type: 'alternatives'
  30                 full: {
  31                         type: 'node'
  32                         name: 'main'
  33                 },
  34                 with_sidebar: {
  35                         type: 'series'
  36                         main: {
  37                                 type: 'node'
  38                                 float: left
  39                                 width: centerer_width - sidebar_width - sidebar_gap
  40                         },
  41                         gap: {
  42                                 type: 'node'
  43                                 width: sidebar_gap
  44                         }
  45                         sidebar: {
  46                                 type: 'alternatives'
  47                                 plain: {
  48                                         type: 'node'
  49                                         outer_width: sidebar_width
  50                                         float: right
  51                                 },
  52                                 bordered: {
  53                                         type: 'node'
  54                                         border-width: 1px
  55                                         border-style: solid
  56                                         border-color: red
  57                                         padding: 15px
  58                                         outer_width: sidebar_width
  59                                         float: right
  60                                 }
  61                         }
  62                 }
  63         }
  64 })
  65
  66 // the gap is used for checking the width calculations, but has no dom element.
  67 // This space is left blank (by floating main to the left and sidebar to the
  68 // right) and might save the layout if there are borders (which don't scale) or
  69 // rounding errors
  70 remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap')
  71 remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap')
  72
  73 biggest_content_width = columns['widths']['.centerer.full > .main']
  74
  75 hide_in_one_column_mode = {
  76         ".centerer.with_sidebar > .sidebar.plain": 1
  77         ".centerer.with_sidebar > .sidebar.bordered": 1
  78 }
  79
  80 // fonts
  81 line_height = 1.2
  82 font_size_large = 18px
  83 font_size_normal = 15px
  84 font_size_small = 13px
  85 font_size_tiny = 11px
  86
  87 // colors
  88 content_bg = #fff
  89 content_fg = #000
  90 window_bg = #fff
  91
  92 ////////////////////
  93 // } END SETTINGS //
  94 ////////////////////
  95
  96
  97
  98 // always show vertical scrollbar, so content doesn't shift around when
  99 // switching from tall to short pages
 100 html
 101         overflow-y: scroll
 102
 103 header, hgroup, section, footer, aside, nav, article, figure, img
 104         display: block
 105
 106 code.html
 107         display: block
 108         font: 12px monospace
 109         border: 1px solid black
 110         background: #ccc
 111
 112 .caption
 113         font-weight: bold
 114         * + &
 115                 margin-top: 15px
 116
 117 .field
 118         padding-top: 3px;
 119
 120 div.field_notes
 121         font-size: 12px
 122         line-height: 16px
 123
 124 fieldset
 125         border: 1px dotted black
 126         padding: 0 15px 15px 15px
 127         margin: 15px 0
 128         position: relative
 129
 130 legend
 131         padding: 0 6px
 132         font-weight: bold
 133
 134 div.error
 135         border: 2px solid red
 136         padding: 13px
 137         margin: 20px
 138         background: #fdd
 139
 140 h1
 141         font-size: 26px
 142         margin: 20px 0 10px
 143
 144 h1 + h4.tagline
 145         margin: -10px 0 10px
 146
 147 h1 + h2
 148         margin-top: -6px
 149
 150 h2
 151         font-size: 20px
 152         margin: 16px 0px 8px
 153
 154 h2 + h4.tagline
 155         margin: -8px 0 8px
 156
 157 h3
 158         font-size: 18px
 159         margin: 12px 0 5px
 160
 161 h3 + h4.tagline
 162         margin: -5px 0 5px
 163
 164 h4
 165         font-size: 14px
 166         margin: 10px 0 3px
 167
 168 h4 + h4.tagline
 169         margin: -3px 0 3px
 170
 171
 172 h1, h2, h3, h4
 173         font-weight: bold
 174
 175 h4.tagline
 176         font-weight: normal
 177
 178
 179 p.quote
 180         font-size: 14px
 181         font-weight: bold
 182         padding-bottom: 1px
 183         margin: 15px 15px 0 15px
 184
 185 p.quote:before, p.quote:after
 186         font-size: 40px
 187         line-height: 0
 188         color: #777
 189         font-weight: bold
 190         display: inline-block
 191         height: 10px
 192         position: relative
 193
 194 p.quote:before
 195         content: '“'
 196         top: 10px
 197
 198 p.quote:after
 199         content: '”'
 200         top: 20px
 201         width: 0; // make sure it doesn't wrap
 202
 203 p.attrib, p.attribution
 204         margin: 0 0 15px 20px
 205         margin-top: 1px
 206         padding-left: 30px
 207         font-size: 12px
 208         font-weight: normal
 209         &:before
 210                 content: "— "
 211
 212 body
 213         margin: 0
 214         padding: 0
 215         background: window_bg
 216         color: content_fg
 217         font: font_size_normal Arimo, Arial, sans-serif
 218         line-height: line_height
 219
 220 // call this for each ckeditor on each page
 221 ckeditor_elements_already = {}
 222 ckeditor(basename, element_name, body_id, width)
 223         // ckeditor ui, including border around wysiwyg area
 224         outer_selector = '#' + basename + '_body #cke_' + element_name
 225         unless outer_selector in ckeditor_elements_already
 226                 ckeditor_elements_already[outer_selector] = 1
 227                 {outer_selector}
 228                         width: biggest_content_width + 30px
 229                         margin-right: -30px
 230         // body tag of the wysiwyg area
 231         #{basename}_wysiwyg_{body_id}
 232                 background: content_bg
 233                 width: width
 234                 margin: 0 auto
 235                 min-width: 0
 236                 width: width
 237                 margin: 0 auto
 238                 border: 5px solid #eee
 239                 min-height: 50px
 240
 241 ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main'])
 242 ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main'])
 243 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain'])
 244 ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered'])
 245
 246 body > .centerer
 247         position: relative
 248
 249 header#site_header
 250         margin-bottom: 15px
 251
 252 body > .centerer > .nav
 253         margin-bottom: 15px
 254         ul
 255                 li_reset()
 256                 space_evenly(line_height)
 257
 258 footer
 259         clear: both
 260         padding-top: 40px
 261         ul
 262                 li_reset()
 263                 li
 264                         li_reset()
 265                         display: inline-block
 266                         margin-right: 10px
 267
 268 #wfpl_messages
 269         background: #ffd
 270         padding: 5px 12px
 271         margin: 0 0 20px 0
 272         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 273         border-radius: 4px
 274         p
 275                 font-size: 120%
 276                 padding: 5px 0
 277                 margin: 0px
 278
 279         hr
 280                 display: block
 281                 height: 1px
 282                 border: 0
 283                 border-top: 1px dotted #ddc;
 284                 margin: 0
 285                 padding: 0
 286
 287
 288 #admin_links
 289         font-size: font_size_small
 290         background: rgba(255, 244, 244, 0.5)
 291         border: 1px dotted #000
 292         padding: 3px
 293         position: absolute
 294         top: 0
 295         right: 0
 296
 297 // obsolete floating images (from pastable example code on admin_images)
 298 span.wfpl_ifl
 299         display: block
 300         float: left
 301         clear: left
 302         font-size: 10px
 303         color: black
 304         text-align: right
 305         background-repeat: no-repeat
 306         background-position: left top
 307         margin: 0 10px 2px 0
 308
 309 span.wfpl_ifr
 310         display: block
 311         float: right
 312         clear: right
 313         font-size: 10px
 314         color: black
 315         font-weight: normal
 316         text-align: right
 317         background-repeat: no-repeat
 318         background-position: left top
 319         margin: 0 0 2px 10px
 320
 321 div.wfpl_ic
 322         margin: 15px auto
 323         font-size: 10px
 324         font-weight: normal
 325         text-align: right
 326         background-repeat: no-repeat
 327         background-position: center top
 328
 329
 330 // hack so that vertical margins are only between siblings for the most part
 331 td > :first-child,
 332 th > :first-child,
 333 legend + *,
 334 article > :first-child,
 335 aside > :first-child,
 336 section > :first-child,
 337 nav > :first-child,
 338 div > :first-child,
 339 .first
 340         margin-top: 0px
 341
 342 td > :last-child,
 343 th > :last-child,
 344 fieldset > :last-child,
 345 article > :last-child,
 346 aside > :last-child,
 347 section > :last-child,
 348 nav > :last-child,
 349 div > :last-child,
 350 .last
 351         margin-bottom: 0px
 352
 353 table.evenodd
 354         td, th
 355                 padding: 6px 12px
 356                 text-align: left
 357         > thead, > tbody, &
 358                 > tr:nth-child(2n+1)
 359                         > td, > th
 360                                 background: rgba(0,0,0,0.04)
 361                         &:hover
 362                                 > td, > th
 363                                         background: rgba(0,0,0,0.07)
 364                 > tr:nth-child(2n+0)
 365                         > td, > th
 366                                 background: rgba(0,0,0,0.02)
 367                         &:hover
 368                                 > td, > th
 369                                         background: rgba(0,0,0,0.09)
 370
 371 .field_error
 372         input
 373                 border: 1px solid red
 374
 375 .password_suggestion
 376         & + &
 377                 margin-left: 10px
 378
 379 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
 380         display: block
 381         margin-bottom: 1%
 382         clear: both
 383         font-size: 80%
 384         text-align: right
 385         .wfpl_i
 386                 display: block
 387                 width: 100%
 388                 background-size: 100% auto
 389                 background-repeat: no-repeat
 390                 background-position: 50% top
 391                 margin-bottom: 3px // padding above caption
 392                 // clip line with &nbsp; (which is there so ckeditor doesn't delete this)
 393                 height: 0
 394                 overflow: hidden
 395 .wfpl_li, .wfpl_ci, .wfpl_ri
 396         width: unit(image_float_size * 100, '%') // when window is large
 397 .wfpl_li
 398         float: left
 399         margin-right: image_float_margin // this can be a percent right?
 400 .wfpl_ci, .wfpl_fi
 401         margin-left: auto
 402         margin-right: auto
 403 .wfpl_ri
 404         float: right
 405         margin-left: image_float_margin // this can be a percent right?
 406 .wfpl_thumb // note: does not contain a .wfpl_i
 407         display: inline-block
 408         width: 70px
 409         height: 70px
 410         background-size: contain
 411         background-position: 50% 50%
 412         background-repeat: no-repeat
 413 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
 414         max-width: 100%
 415
 416
 417 // output css from column calculations
 418 for selector, css in columns.css
 419         body > {selector}
 420                 {css}
 421                 if columns['widths'][selector] < runaround_max
 422                         .wfpl_li, .wfpl_ri
 423                                 width: narrow_col_lr_width
 424                         .wfpl_ci
 425                                 width: narrow_col_ci_width
 426
 427 // center when big
 428 body > .centerer
 429         margin-left: auto
 430         margin-right: auto
 431
 432 // small enough that things are scaling, big enough that we have all columns
 433 @media screen and (max-width: (columns.width))
 434         // output responsive css from column calculations
 435         for selector, css in columns.responsive_css
 436                 body > {selector}
 437                         {css}
 438
 439         // as big as it can be
 440         body > .centerer
 441                 width: auto
 442
 443         // big left/right images
 444         for selector, css in columns.css
 445                 if columns['widths'][selector] > runaround_max
 446                         body > {selector}
 447                                 col_max_width = columns['widths'][selector]
 448                                 col_min_width = runaround_max
 449                                 .wfpl_li, .wfpl_ri
 450                                         width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
 451                                 .wfpl_ci
 452                                         width: col_max_width * image_float_size
 453
 454 // switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images
 455 single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max
 456 body
 457         color: #001
 458         background-position: columns.width columns['widths']['.centerer.with_sidebar > .main']
 459         background-position: runaround_max single_column_max
 460 @media screen and (max-width: (single_column_max))
 461         for selector, css in columns.css
 462                 body > {selector}
 463                         if selector == '.centerer'
 464                                 // margin-top: 0
 465                         else if selector in hide_in_one_column_mode
 466                                 display: none
 467                         else
 468                                 border: none
 469                                 float: none
 470                                 width: auto
 471                                 margin-left: 0
 472                                 margin-right: 0
 473                                 padding-left: 0
 474                                 padding-right: 0
 475                                 margin-top: columns['responsive_css']['.centerer']['margin']
 476
 477                                 // make image sizing act like it's the "full"/only column
 478                                 col_max_width = columns['widths']['.centerer.full > .main']
 479                                 col_min_width = runaround_max
 480                                 .wfpl_li, .wfpl_ri
 481                                         width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
 482                                 .wfpl_ci
 483                                         width: col_max_width * image_float_size
 484
 485 // mixin for making left/right images behave as centered
 486 wfpl_li_ri_to_ci(selector, width)
 487         body > {selector}
 488                 .wfpl_li, .wfpl_ci, .wfpl_ri
 489                         float: none
 490                         width: width
 491                         margin-right: auto
 492                         margin-left: auto
 493
 494 // convert left/right images to centered when columns width <= runaround_max
 495 for selector, css in columns.css
 496         if columns['widths'][selector] > runaround_max
 497                 // calculate screen width when column width is runaround_max
 498                 screen_rmax = columns.width / columns['widths']['.centerer.full > .main'] * runaround_max
 499                 @media screen and (max-width: (screen_rmax))
 500                         wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
 501
 502 #mobile_menu_button
 503         display: none;
 504 #mobile_menu_check
 505         display: none;
 506 @media screen and (max-width: (mobile_menu_width))
 507         body nav.nav > form
 508                 margin-top: 0
 509         #mobile_menu_check:not(:checked) + div
 510                 display: none
 511         #mobile_menu_check:checked + div
 512                 display: block
 513                 position: relative
 514                 > ul
 515                         z-index: 1000
 516                         background: white
 517                         background: rgba(255, 255, 255, 0.95)
 518                         display: block
 519                         position: absolute
 520                         top: 100%
 521                         width: 96%
 522                         left: 2%
 523                         margin: 0
 524                         padding: 0
 525                         border-bottom-left-radius: 4px
 526                         border-bottom-right-radius: 4px
 527                         box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
 528                         li
 529                                 padding: 15px
 530                                 & + li
 531                                         padding-top: 0
 532                                 a
 533                                         font-size: 18px
 534                                 white-space: nowrap
 535
 536                         // undo space_evenly stuff:
 537                         &:before, &:after
 538                                 display: none
 539                                 content: none
 540                                 margin: 0
 541                                 padding: 0
 542                         > *
 543                                 position: static
 544                                 top: 0
 545
 546         body > .centerer > .nav ul > li, #mobile_menu_button
 547                 display: block
 548                 padding: 0px 10px 0px 17px
 549                 font-size: font_size_large
 550 #admin_images_body .th_toggle_buttons
 551         font-weight: normal
 552         color: #777
 553         space_evenly(line_height)