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