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 (max. these will scale down for smaller screens except in ie8)
  12 site_width = 900px
  13 site_padding = 15px
  14 sidebar_padding = 20px
  15 sidebar_width = (site_width - sidebar_padding) * golden_ratio_small
  16 mobile_menu_width = 600px // switch to mobile menu when screen gets this small
  17
  18 // fonts
  19 font_size_normal = 15px
  20 font_size_small = 13px
  21 font_size_tiny = 11px
  22
  23 // colors
  24 content_bg = #fff
  25 content_fg = #000
  26 window_bg = #fff
  27
  28 ////////////////////
  29 // } END SETTINGS //
  30 ////////////////////
  31
  32 // the auto-calculated bits
  33 content_width = site_width
  34 // some math for responsive mode (when the above dimensions don't fit)
  35 site_padding_pct = site_padding / (site_width + 2 * site_padding)
  36 sidebar_padding_pct = sidebar_padding / content_width
  37 vw_to_content_width = 1 - 2 * site_padding_pct
  38
  39 // always show vertical scrollbar, so content doesn't shift around when
  40 // switching from tall to short pages
  41 html
  42         overflow-y: scroll
  43
  44 header, hgroup, section, footer, aside, nav, article, figure, img
  45         display: block
  46
  47 code.html
  48         display: block
  49         font: 12px monospace
  50         border: 1px solid black
  51         background: #ccc
  52
  53 .caption
  54         font-weight: bold
  55         * + &
  56                 margin-top: 15px
  57
  58 .field
  59         padding-top: 3px;
  60
  61 div.field_notes
  62         font-size: 12px
  63         line-height: 16px
  64
  65 fieldset
  66         border: 1px dotted black
  67         padding: 0 15px 15px 15px
  68         margin: 15px 0
  69         position: relative
  70
  71 legend
  72         padding: 0 6px
  73         font-weight: bold
  74
  75 div.error
  76         border: 2px solid red
  77         padding: 13px
  78         margin: 20px
  79         background: #fdd
  80
  81 h1
  82         font-size: 26px
  83         margin: 20px 0 10px
  84
  85 h1 + h4.tagline
  86         margin: -10px 0 10px
  87
  88 h1 + h2
  89         margin-top: -6px
  90
  91 h2
  92         font-size: 20px
  93         margin: 16px 0px 8px
  94
  95 h2 + h4.tagline
  96         margin: -8px 0 8px
  97
  98 h3
  99         font-size: 18px
 100         margin: 12px 0 5px
 101
 102 h3 + h4.tagline
 103         margin: -5px 0 5px
 104
 105 h4
 106         font-size: 14px
 107         margin: 10px 0 3px
 108
 109 h4 + h4.tagline
 110         margin: -3px 0 3px
 111
 112
 113 h1, h2, h3, h4
 114         font-weight: bold
 115
 116 h4.tagline
 117         font-weight: normal
 118
 119
 120 p.quote
 121         font-size: 14px
 122         font-weight: bold
 123         padding-bottom: 1px
 124         margin: 15px 15px 0 15px
 125
 126 p.quote:before, p.quote:after
 127         font-size: 40px
 128         line-height: 0
 129         color: #777
 130         font-weight: bold
 131         display: inline-block
 132         height: 10px
 133         position: relative
 134
 135 p.quote:before
 136         content: '“'
 137         top: 10px
 138
 139 p.quote:after
 140         content: '”'
 141         top: 20px
 142         width: 0; // make sure it doesn't wrap
 143
 144 p.attrib, p.attribution
 145         margin: 0 0 15px 20px
 146         margin-top: 1px
 147         padding-left: 30px
 148         font-size: 12px
 149         font-weight: normal
 150         &:before
 151                 content: "— "
 152
 153 body
 154         margin: 0
 155         padding: 0
 156         background: window_bg
 157         color: content_fg
 158         font: font_size_normal Arimo, Arial, sans-serif
 159
 160 // call this for each ckeditor on each page
 161 ckeditor(basename, element_name, width)
 162         // ckeditor ui, including border around wysiwyg area
 163         #{basename}_body #cke_{element_name}
 164                 margin-left: -15px
 165                 if width < 650px
 166                         width: 680px
 167                 else
 168                         width: width + 30px
 169         // body tag of the wysiwyg area
 170         #{basename}_wysiwyg_{element_name}
 171                 background: content_bg
 172                 width: width
 173                 margin: 0 auto
 174                 if width <= 600px
 175                         min-width: 0
 176                         width: width
 177                         margin: 0 auto
 178                         border-right: 20px solid #eee
 179                         border-left: 20px solid #eee
 180                         border-top: 1px solid #eee
 181                         border-bottom: 1px solid #eee
 182                         min-height: 250px
 183
 184 ckeditor('admin_pages', 'content', content_width)
 185
 186 // outermost div for centering, shadow, etc
 187 #centerer
 188         position: relative
 189         background: content_bg
 190         padding: site_padding
 191         max-width: content_width
 192         margin: 0 auto
 193
 194 nav#site-nav
 195         padding-bottom: 20px
 196         ul
 197                 li_reset()
 198                 space_evenly()
 199
 200 footer
 201         clear: both
 202         padding-top: 40px
 203         ul
 204                 li_reset()
 205                 li
 206                         li_reset()
 207                         display: inline-block
 208                         margin-right: 10px
 209
 210 #wfpl_messages
 211         background: #ffd
 212         padding: 5px 12px
 213         margin: 0 0 20px 0
 214         box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4)
 215         border-radius: 4px
 216         p
 217                 font-size: 120%
 218                 padding: 5px 0
 219                 margin: 0px
 220
 221         hr
 222                 display: block
 223                 height: 1px
 224                 border: 0
 225                 border-top: 1px dotted #ddc;
 226                 margin: 0
 227                 padding: 0
 228
 229
 230 #admin_links
 231         background: #fdd
 232         padding: 3px
 233         margin-bottom: 15px
 234
 235
 236
 237
 238
 239 // floating images (from pastable example code on admin_images)
 240 span.wfpl_ifl
 241         display: block
 242         float: left
 243         clear: left
 244         font-size: 10px
 245         color: black
 246         text-align: right
 247         background-repeat: no-repeat
 248         background-position: left top
 249         margin: 0 10px 2px 0
 250
 251 span.wfpl_ifr
 252         display: block
 253         float: right
 254         clear: right
 255         font-size: 10px
 256         color: black
 257         font-weight: normal
 258         text-align: right
 259         background-repeat: no-repeat
 260         background-position: left top
 261         margin: 0 0 2px 10px
 262
 263 div.wfpl_ic
 264         margin: 15px auto
 265         font-size: 10px
 266         font-weight: normal
 267         text-align: right
 268         background-repeat: no-repeat
 269         background-position: center top
 270
 271
 272 // hack so that vertical margins are only between siblings for the most part
 273 td > :first-child,
 274 th > :first-child,
 275 legend + *,
 276 article > :first-child,
 277 aside > :first-child,
 278 section > :first-child,
 279 nav > :first-child,
 280 div > :first-child,
 281 .first
 282         margin-top: 0px
 283
 284 td > :last-child,
 285 th > :last-child,
 286 fieldset > :last-child,
 287 article > :last-child,
 288 aside > :last-child,
 289 section > :last-child,
 290 nav > :last-child,
 291 div > :last-child,
 292 .last
 293         margin-bottom: 0px
 294
 295 table.evenodd
 296         td, th
 297                 padding: 6px 12px
 298                 text-align: left
 299         > thead, > tbody, &
 300                 > tr:nth-child(2n+1)
 301                         > td, > th
 302                                 background: rgba(0,0,0,0.04)
 303                         &:hover
 304                                 > td, > th
 305                                         background: rgba(0,0,0,0.07)
 306                 > tr:nth-child(2n+0)
 307                         > td, > th
 308                                 background: rgba(0,0,0,0.02)
 309                         &:hover
 310                                 > td, > th
 311                                         background: rgba(0,0,0,0.09)
 312
 313 .field_error
 314         input
 315                 border: 1px solid red
 316
 317 .password_suggestion
 318         & + &
 319                 margin-left: 10px
 320
 321 .wfpl_fr
 322         display: block
 323         float: right
 324         margin-left: sidebar_padding
 325         margin-bottom: 1%
 326         width: sidebar_width // simple when big, and for ie8 (which ignores media queries)
 327
 328 @media screen and (max-width: (content_width / vw_to_content_width))
 329         #centerer
 330                 width: auto
 331                 margin: 0
 332                 padding: unit(site_padding_pct * 100, '%')
 333         .wfpl_fr
 334                 width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
 335                 margin-left: unit(sidebar_padding_pct * 100, '%')
 336 @media screen and (max-width: (sidebar_width / vw_to_content_width))
 337         .wfpl_fr
 338                 float: none
 339                 margin-left: 0
 340                 margin-bottom: 0
 341                 width: 100%
 342 .wfpl_fr > .wfpl_i
 343         display: block
 344         width: 100%
 345         height: auto
 346         background-size: contain
 347         background-repeat: no-repeat
 348         background-position: 50% top
 349         font-size: 80%
 350         text-align: right
 351
 352 #mobile_menu_button
 353         display: none;
 354 #mobile_menu_check
 355         display: none;
 356 @media screen and (max-width: (mobile_menu_width))
 357         #mobile_menu_check:not(:checked) + ul
 358                 display: none
 359         nav#site-nav ul > li, #mobile_menu_button
 360                 display: block
 361                 background: #eee
 362                 padding: 3px 10px 4px 17px