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