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