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