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         ul
 254                 li_reset()
 255                 space_evenly(line_height)
 256
 257 footer
 258         clear: both
 259         padding-top: 40px
 260         ul
 261                 li_reset()
 262                 li
 263                         li_reset()
 264                         display: inline-block
 265                         margin-right: 10px
 266
 267 #wfpl_messages
 268         background: #ffd
 269         padding: 5px 12px
 270         margin: 0 0 20px 0
 271         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 272         border-radius: 4px
 273         p
 274                 font-size: 120%
 275                 padding: 5px 0
 276                 margin: 0px
 277
 278         hr
 279                 display: block
 280                 height: 1px
 281                 border: 0
 282                 border-top: 1px dotted #ddc;
 283                 margin: 0
 284                 padding: 0
 285
 286
 287 #admin_links
 288         font-size: font_size_small
 289         background: rgba(255, 244, 244, 0.5)
 290         border: 1px dotted #000
 291         padding: 3px
 292         position: absolute
 293         top: 0
 294         right: 0
 295
 296 // obsolete floating images (from pastable example code on admin_images)
 297 span.wfpl_ifl
 298         display: block
 299         float: left
 300         clear: left
 301         font-size: 10px
 302         color: black
 303         text-align: right
 304         background-repeat: no-repeat
 305         background-position: left top
 306         margin: 0 10px 2px 0
 307
 308 span.wfpl_ifr
 309         display: block
 310         float: right
 311         clear: right
 312         font-size: 10px
 313         color: black
 314         font-weight: normal
 315         text-align: right
 316         background-repeat: no-repeat
 317         background-position: left top
 318         margin: 0 0 2px 10px
 319
 320 div.wfpl_ic
 321         margin: 15px auto
 322         font-size: 10px
 323         font-weight: normal
 324         text-align: right
 325         background-repeat: no-repeat
 326         background-position: center top
 327
 328
 329 // hack so that vertical margins are only between siblings for the most part
 330 td > :first-child,
 331 th > :first-child,
 332 legend + *,
 333 article > :first-child,
 334 aside > :first-child,
 335 section > :first-child,
 336 nav > :first-child,
 337 div > :first-child,
 338 .first
 339         margin-top: 0px
 340
 341 td > :last-child,
 342 th > :last-child,
 343 fieldset > :last-child,
 344 article > :last-child,
 345 aside > :last-child,
 346 section > :last-child,
 347 nav > :last-child,
 348 div > :last-child,
 349 .last
 350         margin-bottom: 0px
 351
 352 table.evenodd
 353         td, th
 354                 padding: 6px 12px
 355                 text-align: left
 356         > thead, > tbody, &
 357                 > tr:nth-child(2n+1)
 358                         > td, > th
 359                                 background: rgba(0,0,0,0.04)
 360                         &:hover
 361                                 > td, > th
 362                                         background: rgba(0,0,0,0.07)
 363                 > tr:nth-child(2n+0)
 364                         > td, > th
 365                                 background: rgba(0,0,0,0.02)
 366                         &:hover
 367                                 > td, > th
 368                                         background: rgba(0,0,0,0.09)
 369
 370 .field_error
 371         input
 372                 border: 1px solid red
 373
 374 .password_suggestion
 375         & + &
 376                 margin-left: 10px
 377
 378 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
 379         display: block
 380         margin-bottom: 1%
 381         clear: both
 382         font-size: 80%
 383         text-align: right
 384         .wfpl_i
 385                 display: block
 386                 width: 100%
 387                 background-size: 100% auto
 388                 background-repeat: no-repeat
 389                 background-position: 50% top
 390                 margin-bottom: 3px // padding above caption
 391                 // clip line with &nbsp; (which is there so ckeditor doesn't delete this)
 392                 height: 0
 393                 overflow: hidden
 394 .wfpl_li, .wfpl_ci, .wfpl_ri
 395         width: unit(image_float_size * 100, '%') // when window is large
 396 .wfpl_li
 397         float: left
 398         margin-right: image_float_margin // this can be a percent right?
 399 .wfpl_ci, .wfpl_fi
 400         margin-left: auto
 401         margin-right: auto
 402 .wfpl_ri
 403         float: right
 404         margin-left: image_float_margin // this can be a percent right?
 405 .wfpl_thumb // note: does not contain a .wfpl_i
 406         display: inline-block
 407         width: 70px
 408         height: 70px
 409         background-size: contain
 410         background-position: 50% 50%
 411         background-repeat: no-repeat
 412 .wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb
 413         max-width: 100%
 414
 415
 416 // output css from column calculations
 417 for selector, css in columns.css
 418         body > {selector}
 419                 {css}
 420                 if columns['widths'][selector] < runaround_max
 421                         .wfpl_li, .wfpl_ri
 422                                 width: narrow_col_lr_width
 423                         .wfpl_ci
 424                                 width: narrow_col_ci_width
 425
 426 // center when big
 427 body > .centerer
 428         margin-left: auto
 429         margin-right: auto
 430
 431 // small enough that things are scaling, big enough that we have all columns
 432 @media screen and (max-width: (columns.width))
 433         // output responsive css from column calculations
 434         for selector, css in columns.responsive_css
 435                 body > {selector}
 436                         {css}
 437
 438         // as big as it can be
 439         body > .centerer
 440                 width: auto
 441
 442         // big left/right images
 443         for selector, css in columns.css
 444                 if columns['widths'][selector] > runaround_max
 445                         body > {selector}
 446                                 col_max_width = columns['widths'][selector]
 447                                 col_min_width = runaround_max
 448                                 .wfpl_li, .wfpl_ri
 449                                         width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
 450                                 .wfpl_ci
 451                                         width: col_max_width * image_float_size
 452
 453 // switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images
 454 single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max
 455 body
 456         color: #001
 457         background-position: columns.width columns['widths']['.centerer.with_sidebar > .main']
 458         background-position: runaround_max single_column_max
 459 @media screen and (max-width: (single_column_max))
 460         for selector, css in columns.css
 461                 body > {selector}
 462                         if selector == '.centerer'
 463                                 // margin-top: 0
 464                         else if selector in hide_in_one_column_mode
 465                                 display: none
 466                         else
 467                                 border: none
 468                                 float: none
 469                                 width: auto
 470                                 margin-left: 0
 471                                 margin-right: 0
 472                                 padding-left: 0
 473                                 padding-right: 0
 474                                 margin-top: columns['responsive_css']['.centerer']['margin']
 475
 476                                 // make image sizing act like it's the "full"/only column
 477                                 col_max_width = columns['widths']['.centerer.full > .main']
 478                                 col_min_width = runaround_max
 479                                 .wfpl_li, .wfpl_ri
 480                                         width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size)
 481                                 .wfpl_ci
 482                                         width: col_max_width * image_float_size
 483
 484 // mixin for making left/right images behave as centered
 485 wfpl_li_ri_to_ci(selector, width)
 486         body > {selector}
 487                 .wfpl_li, .wfpl_ci, .wfpl_ri
 488                         float: none
 489                         width: width
 490                         margin-right: auto
 491                         margin-left: auto
 492
 493 // convert left/right images to centered when columns width <= runaround_max
 494 for selector, css in columns.css
 495         if columns['widths'][selector] > runaround_max
 496                 // calculate screen width when column width is runaround_max
 497                 screen_rmax = columns.width / columns['widths']['.centerer.full > .main'] * runaround_max
 498                 @media screen and (max-width: (screen_rmax))
 499                         wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size)
 500
 501 #mobile_menu_button
 502         display: none;
 503 #mobile_menu_check
 504         display: none;
 505 @media screen and (max-width: (mobile_menu_width))
 506         body nav.nav > form
 507                 margin-top: 0
 508         #mobile_menu_check:not(:checked) + div
 509                 display: none
 510         #mobile_menu_check:checked + div
 511                 display: block
 512                 position: relative
 513                 > ul
 514                         z-index: 1000
 515                         background: white
 516                         background: rgba(255, 255, 255, 0.95)
 517                         display: block
 518                         position: absolute
 519                         top: 100%
 520                         width: 96%
 521                         left: 2%
 522                         margin: 0
 523                         padding: 0
 524                         border-bottom-left-radius: 4px
 525                         border-bottom-right-radius: 4px
 526                         box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
 527                         li
 528                                 padding: 15px
 529                                 & + li
 530                                         padding-top: 0
 531                                 a
 532                                         font-size: 18px
 533                                 white-space: nowrap
 534
 535                         // undo space_evenly stuff:
 536                         &:before, &:after
 537                                 display: none
 538                                 content: none
 539                                 margin: 0
 540                                 padding: 0
 541                         > *
 542                                 position: static
 543                                 top: 0
 544
 545         body > .centerer > .nav ul > li, #mobile_menu_button
 546                 display: block
 547                 padding: 3px 10px 4px 17px
 548                 font-size: font_size_large
 549 #admin_images_body .th_toggle_buttons
 550         font-weight: normal
 551         color: #777
 552         space_evenly(line_height)