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#site_footer
 259         clear: both
 260         padding-top: 40px
 261         font-size: font_size_small
 262
 263 #wfpl_messages
 264         background: #ffd
 265         padding: 5px 12px
 266         margin: 0 0 20px 0
 267         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 268         border-radius: 4px
 269         p
 270                 font-size: 120%
 271                 padding: 5px 0
 272                 margin: 0px
 273
 274         hr
 275                 display: block
 276                 height: 1px
 277                 border: 0
 278                 border-top: 1px dotted #ddc;
 279                 margin: 0
 280                 padding: 0
 281
 282
 283 #admin_links
 284         font-size: font_size_small
 285         background: rgba(255, 244, 244, 0.5)
 286         border: 1px dotted #000
 287         padding: 3px
 288         position: absolute
 289         top: 0
 290         right: 0
 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: 0px 10px 0px 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)