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