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