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