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