css/style.scss

   1 $bodyBg: #fff;
   2 $textColor: #000;
   3 $desktopMinWidth: 700px;
   4 $siteMaxWidth: 1100px;
   5
   6 html, body {
   7     margin: 0;
   8     padding: 0;
   9 }
  10 html {
  11     overflow-y: scroll;
  12 }
  13 body {
  14     background: $bodyBg;
  15     color: $textColor;
  16 }
  17
  18 h1:first-child, h2:first-child, h3:first-child {
  19     margin-top: 0;
  20 }
  21
  22 .siteOuter {
  23     box-sizing: border-box;
  24     //min-height: 100vh;
  25     padding: 2vmin;
  26     max-width: $siteMaxWidth;
  27     margin: 0 auto;
  28 }
  29
  30 .siteAdminHeader {
  31     padding: 2vmin 2vmin 0 2vmin;
  32     max-width: $siteMaxWidth;
  33     margin: 0 auto;
  34 }
  35
  36 .siteOuter.siteLayoutFull {
  37     grid-kiss:
  38         "+-----------+       +--------------+      "
  39         "| .siteLogo |       | .siteContent | 0fr  "
  40         "+-----------+       |              |      "
  41         "                    |              | 2vmin"
  42         "+-----------+       |              |      "
  43         "| .siteNav  |       |              | 1fr  "
  44         "+-----------+       +--------------+      "
  45         "                                     2vmin"
  46         "+----------------------------------+      "
  47         "|          .siteFooter             | 0fr  "
  48         "+----------------------------------+      "
  49         "    200px     2vmin       2fr             ";
  50 }
  51 .siteOuter.siteLayoutSidebar {
  52     grid-kiss:
  53         "+-----------+       +--------------+       +--------------+      "
  54         "| .siteLogo |       | .siteContent |       | .siteSidebar | 0fr  "
  55         "+-----------+       |              |       |              |      "
  56         "                    |              |       |              | 2vmin"
  57         "+-----------+       |              |       |              |      "
  58         "| .siteNav  |       |              |       |              | 1fr  "
  59         "+-----------+       +--------------+       +--------------+      "
  60         "                                                            2vmin"
  61         "+---------------------------------------------------------+      "
  62         "|                      .siteFooter                        | 0fr  "
  63         "+---------------------------------------------------------+      "
  64         "    200px     2vmin       2fr        2vmin       2fr             ";
  65 }
  66
  67 @media (max-width: $desktopMinWidth) {
  68     .siteOuter {
  69         grid-kiss:
  70             "+--------------+       "
  71             "| .siteLogo    |  0fr  "
  72             "+--------------+       "
  73             "                  2vmin"
  74             "+--------------+       "
  75             "| .siteContent |  1fr  "
  76             "+--------------+       "
  77             "                  2vmin"
  78             "+--------------+       "
  79             "| .siteFooter  |  1fr  "
  80             "+--------------+       "
  81             "        1fr            ";
  82     }
  83     .siteNav {
  84         display: none;
  85     }
  86 }
  87
  88
  89 // from back in the day (the rest of the file from here down)
  90 .icon {
  91     display: inline-block;
  92     width: 40%;
  93 }
  94 .top_button {
  95     display: inline-block;
  96     width: 30%;
  97 }
  98 html {
  99     overflow-y: scroll;
 100 }
 101 header,
 102 hgroup,
 103 section,
 104 footer,
 105 aside,
 106 nav,
 107 article,
 108 figure,
 109 img {
 110     display: block;
 111 }
 112 code.html {
 113     display: block;
 114     font: 12px monospace;
 115     border: 1px solid #000;
 116     background: #ccc;
 117 }
 118 .caption {
 119     font-weight: bold;
 120 }
 121 * + .caption {
 122     margin-top: 15px;
 123 }
 124 .field {
 125     padding-top: 3px;
 126 }
 127 div.field_notes {
 128     font-size: 12px;
 129     line-height: 16px;
 130 }
 131 fieldset {
 132     border: 1px dotted #000;
 133     padding: 0 15px 15px 15px;
 134     margin: 15px 0;
 135     position: relative;
 136 }
 137 legend {
 138     padding: 0 6px;
 139     font-weight: bold;
 140 }
 141 div.error {
 142     border: 2px solid #f00;
 143     padding: 13px;
 144     margin: 20px;
 145     background: #fdd;
 146 }
 147 h1 {
 148     font-size: 26px;
 149     margin: 20px 0 10px;
 150 }
 151 h1 + h4.tagline {
 152     margin: -10px 0 10px;
 153 }
 154 h1 + h2 {
 155     margin-top: -6px;
 156 }
 157 h2 {
 158     font-size: 20px;
 159     margin: 16px 0px 8px;
 160 }
 161 h2 + h4.tagline {
 162     margin: -8px 0 8px;
 163 }
 164 h3 {
 165     font-size: 18px;
 166     margin: 12px 0 5px;
 167 }
 168 h3 + h4.tagline {
 169     margin: -5px 0 5px;
 170 }
 171 h4 {
 172     font-size: 14px;
 173     margin: 10px 0 3px;
 174 }
 175 h4 + h4.tagline {
 176     margin: -3px 0 3px;
 177 }
 178 h1, h2, h3, h4 {
 179     font-weight: bold;
 180 }
 181 h4.tagline {
 182     font-weight: normal;
 183 }
 184 p.quote {
 185     font-size: 14px;
 186     font-weight: bold;
 187     padding-bottom: 1px;
 188     margin: 15px 15px 0 15px;
 189 }
 190 p.quote:before,
 191 p.quote:after {
 192     font-size: 40px;
 193     line-height: 0;
 194     color: #777;
 195     font-weight: bold;
 196     display: inline-block;
 197     height: 10px;
 198     position: relative;
 199 }
 200 p.quote:before {
 201     content: '“';
 202     top: 10px;
 203 }
 204 p.quote:after {
 205     content: '”';
 206     top: 20px;
 207     width: 0;
 208 }
 209 p.attrib,
 210 p.attribution {
 211     margin: 0 0 15px 20px;
 212     margin-top: 1px;
 213     padding-left: 30px;
 214     font-size: 12px;
 215     font-weight: normal;
 216 }
 217 p.attrib:before,
 218 p.attribution:before {
 219     content: "— ";
 220 }
 221 body {
 222     margin: 0;
 223     padding: 0;
 224     background: #fff;
 225     color: #000;
 226     font: 15px Arimo, Arial, sans-serif;
 227     line-height: 1.2;
 228 }
 229 #admin_pages_body #cke_content {
 230     width: 980px;
 231     margin-right: -30px;
 232 }
 233 #admin_pages_wysiwyg_content_full_main {
 234     background: #fff;
 235     width: 950px;
 236     margin: 0 auto;
 237     min-width: 0;
 238     width: 950px;
 239     margin: 0 auto;
 240     border: 5px solid #eee;
 241     min-height: 50px;
 242 }
 243 #admin_pages_wysiwyg_content_with_sidebar_main {
 244     background: #fff;
 245     width: 670px;
 246     margin: 0 auto;
 247     min-width: 0;
 248     width: 670px;
 249     margin: 0 auto;
 250     border: 5px solid #eee;
 251     min-height: 50px;
 252 }
 253 #admin_pages_body #cke_sidebar_content {
 254     width: 980px;
 255     margin-right: -30px;
 256 }
 257 #admin_pages_wysiwyg_content_with_sidebar_sidebar_plain {
 258     background: #fff;
 259     width: 250px;
 260     margin: 0 auto;
 261     min-width: 0;
 262     width: 250px;
 263     margin: 0 auto;
 264     border: 5px solid #eee;
 265     min-height: 50px;
 266 }
 267 #admin_pages_wysiwyg_content_with_sidebar_sidebar_bordered {
 268     background: #fff;
 269     width: 218px;
 270     margin: 0 auto;
 271     min-width: 0;
 272     width: 218px;
 273     margin: 0 auto;
 274     border: 5px solid #eee;
 275     min-height: 50px;
 276 }
 277 body > .centerer {
 278     position: relative;
 279 }
 280 #site_header {
 281     margin: 0 auto 15px auto;
 282     position: relative;
 283 }
 284 #site_header:before {
 285     display: block;
 286     background-size: 100%;
 287 }
 288 #site_header:after {
 289     display: block;
 290     position: absolute;
 291     bottom: 0;
 292     right: 0;
 293     padding: 4px;
 294     text-align: right;
 295 }
 296 .siteNav {
 297     margin-bottom: 15px;
 298 }
 299 .siteNav ul {
 300     margin: 0;
 301     padding: 0;
 302     list-style: none;
 303     text-align: justify;
 304 }
 305 .siteNav ul > * {
 306     display: inline-block;
 307     position: relative;
 308     top: 1.2em;
 309 }
 310 .siteNav ul:before {
 311     content: '';
 312     display: block;
 313     width: 100%;
 314     margin-bottom: -1.2em;
 315 }
 316 .siteNav ul:after {
 317     content: '';
 318     display: inline-block;
 319     width: 100%;
 320 }
 321 footer#site_footer {
 322     clear: both;
 323     padding-top: 40px;
 324     font-size: 13px;
 325 }
 326 #wfpl_messages {
 327     background: #ffd;
 328     padding: 5px 12px;
 329     margin: 0 0 20px 0;
 330     -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 331     box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
 332     -webkit-border-radius: 4px;
 333     border-radius: 4px;
 334 }
 335 #wfpl_messages p {
 336     font-size: 120%;
 337     padding: 5px 0;
 338     margin: 0px;
 339 }
 340 #wfpl_messages hr {
 341     display: block;
 342     height: 1px;
 343     border: 0;
 344     border-top: 1px dotted #ddc;
 345     margin: 0;
 346     padding: 0;
 347 }
 348 #admin_links {
 349     font-size: 13px;
 350     background: rgba(255,244,244,0.5);
 351     border: 1px dotted #000;
 352     padding: 3px;
 353     text-align: right;
 354 }
 355 span.wfpl_ifl {
 356     display: block;
 357     float: left;
 358     clear: left;
 359     font-size: 10px;
 360     color: #000;
 361     text-align: right;
 362     background-repeat: no-repeat;
 363     background-position: left top;
 364     margin: 0 10px 2px 0;
 365 }
 366 span.wfpl_ifr {
 367     display: block;
 368     float: right;
 369     clear: right;
 370     font-size: 10px;
 371     color: #000;
 372     font-weight: normal;
 373     text-align: right;
 374     background-repeat: no-repeat;
 375     background-position: left top;
 376     margin: 0 0 2px 10px;
 377 }
 378 div.wfpl_ic {
 379     margin: 15px auto;
 380     font-size: 10px;
 381     font-weight: normal;
 382     text-align: right;
 383     background-repeat: no-repeat;
 384     background-position: center top;
 385 }
 386 td > :first-child,
 387 th > :first-child,
 388 legend + *,
 389 article > :first-child,
 390 aside > :first-child,
 391 section > :first-child,
 392 nav > :first-child,
 393 div > :first-child,
 394 .first {
 395     margin-top: 0px;
 396 }
 397 td > :last-child,
 398 th > :last-child,
 399 fieldset > :last-child,
 400 article > :last-child,
 401 aside > :last-child,
 402 section > :last-child,
 403 nav > :last-child,
 404 div > :last-child,
 405 .last {
 406     margin-bottom: 0px;
 407 }
 408 table.evenodd td,
 409 table.evenodd th {
 410     padding: 6px 12px;
 411     text-align: left;
 412 }
 413 table.evenodd > thead > tr:nth-child(2n+1) > td,
 414 table.evenodd > tbody > tr:nth-child(2n+1) > td,
 415 table.evenodd > tr:nth-child(2n+1) > td,
 416 table.evenodd > thead > tr:nth-child(2n+1) > th,
 417 table.evenodd > tbody > tr:nth-child(2n+1) > th,
 418 table.evenodd > tr:nth-child(2n+1) > th {
 419     background: rgba(0,0,0,0.04);
 420 }
 421 table.evenodd > thead > tr:nth-child(2n+1):hover > td,
 422 table.evenodd > tbody > tr:nth-child(2n+1):hover > td,
 423 table.evenodd > tr:nth-child(2n+1):hover > td,
 424 table.evenodd > thead > tr:nth-child(2n+1):hover > th,
 425 table.evenodd > tbody > tr:nth-child(2n+1):hover > th,
 426 table.evenodd > tr:nth-child(2n+1):hover > th {
 427     background: rgba(0,0,0,0.07);
 428 }
 429 table.evenodd > thead > tr:nth-child(2n+0) > td,
 430 table.evenodd > tbody > tr:nth-child(2n+0) > td,
 431 table.evenodd > tr:nth-child(2n+0) > td,
 432 table.evenodd > thead > tr:nth-child(2n+0) > th,
 433 table.evenodd > tbody > tr:nth-child(2n+0) > th,
 434 table.evenodd > tr:nth-child(2n+0) > th {
 435     background: rgba(0,0,0,0.02);
 436 }
 437 table.evenodd > thead > tr:nth-child(2n+0):hover > td,
 438 table.evenodd > tbody > tr:nth-child(2n+0):hover > td,
 439 table.evenodd > tr:nth-child(2n+0):hover > td,
 440 table.evenodd > thead > tr:nth-child(2n+0):hover > th,
 441 table.evenodd > tbody > tr:nth-child(2n+0):hover > th,
 442 table.evenodd > tr:nth-child(2n+0):hover > th {
 443     background: rgba(0,0,0,0.09);
 444 }
 445 .field_error input {
 446     border: 1px solid #f00;
 447 }
 448 .password_suggestion + .password_suggestion {
 449     margin-left: 10px;
 450 }
 451 .wfpl_li,
 452 .wfpl_ci,
 453 .wfpl_ri,
 454 .wfpl_fi {
 455     display: block;
 456     margin-bottom: 1%;
 457     clear: both;
 458     font-size: 80%;
 459     text-align: right;
 460 }
 461 .wfpl_li .wfpl_i,
 462 .wfpl_ci .wfpl_i,
 463 .wfpl_ri .wfpl_i,
 464 .wfpl_fi .wfpl_i {
 465     display: block;
 466     width: 100%;
 467     background-size: 100% auto;
 468     background-repeat: no-repeat;
 469     background-position: 50% top;
 470     margin-bottom: 3px;
 471     height: 0;
 472     overflow: hidden;
 473 }
 474 .wfpl_li,
 475 .wfpl_ci,
 476 .wfpl_ri {
 477     width: 38.19660112501052%;
 478 }
 479 .wfpl_li {
 480     float: left;
 481     margin-right: 2%;
 482 }
 483 .wfpl_ci,
 484 .wfpl_fi {
 485     margin-left: auto;
 486     margin-right: auto;
 487 }
 488 .wfpl_ri {
 489     float: right;
 490     margin-left: 2%;
 491 }
 492 .wfpl_thumb {
 493     display: inline-block;
 494     width: 70px;
 495     height: 70px;
 496     background-size: contain;
 497     background-position: 50% 50%;
 498     background-repeat: no-repeat;
 499 }
 500 .wfpl_li,
 501 .wfpl_ci,
 502 .wfpl_ri,
 503 .wfpl_fi,
 504 .wfpl_thumb {
 505     max-width: 100%;
 506 }
 507 body > .centerer {
 508     margin: 15px;
 509     width: 950px;
 510 }
 511 body > .centerer.with_sidebar > .main {
 512     float: left;
 513     width: 670px;
 514 }
 515 body > .centerer.with_sidebar > .gap {
 516     width: 30px;
 517 }
 518 body > .centerer.with_sidebar > .gap .wfpl_li,
 519 body > .centerer.with_sidebar > .gap .wfpl_ri {
 520     width: 50%;
 521 }
 522 body > .centerer.with_sidebar > .gap .wfpl_ci {
 523     width: 70%;
 524 }
 525 body > .centerer.with_sidebar > .sidebar.plain {
 526     float: right;
 527     width: 250px;
 528 }
 529 body > .centerer.with_sidebar > .sidebar.plain .wfpl_li,
 530 body > .centerer.with_sidebar > .sidebar.plain .wfpl_ri {
 531     width: 50%;
 532 }
 533 body > .centerer.with_sidebar > .sidebar.plain .wfpl_ci {
 534     width: 70%;
 535 }
 536 body > .centerer.with_sidebar > .sidebar.bordered {
 537     border-width: 1px;
 538     border-style: solid;
 539     border-color: #f00;
 540     padding: 15px;
 541     float: right;
 542     width: 218px;
 543 }
 544 body > .centerer.with_sidebar > .sidebar.bordered .wfpl_li,
 545 body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ri {
 546     width: 50%;
 547 }
 548 body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ci {
 549     width: 70%;
 550 }
 551 body > .centerer {
 552     margin-left: auto;
 553     margin-right: auto;
 554 }
 555 @media screen and (max-width: 980px) {
 556     body > .centerer {
 557         margin: 1.5306%;
 558         width: 96.9387%;
 559     }
 560     body > .centerer.with_sidebar > .main {
 561         width: 70.5263%;
 562     }
 563     body > .centerer.with_sidebar > .gap {
 564         width: 3.1578%;
 565     }
 566     body > .centerer.with_sidebar > .sidebar.plain {
 567         width: 26.3157%;
 568     }
 569     body > .centerer.with_sidebar > .sidebar.bordered {
 570         padding: 1.5789%;
 571         width: 22.9473%;
 572     }
 573     body > .centerer {
 574         width: auto;
 575     }
 576     body > .centerer .wfpl_li,
 577     body > .centerer .wfpl_ri {
 578         width: calc(71.5326673199794px + 30.666846670275838%);
 579     }
 580     body > .centerer .wfpl_ci {
 581         width: 362.86771068759987px;
 582     }
 583     body > .centerer.full > .main .wfpl_li,
 584     body > .centerer.full > .main .wfpl_ri {
 585         width: calc(71.5326673199794px + 30.666846670275838%);
 586     }
 587     body > .centerer.full > .main .wfpl_ci {
 588         width: 362.86771068759987px;
 589     }
 590     body > .centerer.with_sidebar > .main .wfpl_li,
 591     body > .centerer.with_sidebar > .main .wfpl_ri {
 592         width: calc(97.53541937032978px + 23.63907584585682%);
 593     }
 594     body > .centerer.with_sidebar > .main .wfpl_ci {
 595         width: 255.91722753757045px;
 596     }
 597 }
 598 body {
 599     color: #001;
 600     background-position: 980px 670px;
 601     background-position: 370px 541.1940298507462px;
 602 }
 603 @media screen and (max-width: 541.1940298507462px) {
 604     body > .centerer.full > .main {
 605         border: none;
 606         float: none;
 607         width: auto;
 608         margin-left: 0;
 609         margin-right: 0;
 610         padding-left: 0;
 611         padding-right: 0;
 612         margin-top: 1.5306%;
 613     }
 614     body > .centerer.full > .main .wfpl_li,
 615     body > .centerer.full > .main .wfpl_ri {
 616         width: calc(71.5326673199794px + 30.666846670275838%);
 617     }
 618     body > .centerer.full > .main .wfpl_ci {
 619         width: 362.86771068759987px;
 620     }
 621     body > .centerer.with_sidebar > .main {
 622         border: none;
 623         float: none;
 624         width: auto;
 625         margin-left: 0;
 626         margin-right: 0;
 627         padding-left: 0;
 628         padding-right: 0;
 629         margin-top: 1.5306%;
 630     }
 631     body > .centerer.with_sidebar > .main .wfpl_li,
 632     body > .centerer.with_sidebar > .main .wfpl_ri {
 633         width: calc(71.5326673199794px + 30.666846670275838%);
 634     }
 635     body > .centerer.with_sidebar > .main .wfpl_ci {
 636         width: 362.86771068759987px;
 637     }
 638     body > .centerer.with_sidebar > .gap {
 639         border: none;
 640         float: none;
 641         width: auto;
 642         margin-left: 0;
 643         margin-right: 0;
 644         padding-left: 0;
 645         padding-right: 0;
 646         margin-top: 1.5306%;
 647     }
 648     body > .centerer.with_sidebar > .gap .wfpl_li,
 649     body > .centerer.with_sidebar > .gap .wfpl_ri {
 650         width: calc(71.5326673199794px + 30.666846670275838%);
 651     }
 652     body > .centerer.with_sidebar > .gap .wfpl_ci {
 653         width: 362.86771068759987px;
 654     }
 655     body > .centerer.with_sidebar > .sidebar.plain {
 656         display: none;
 657     }
 658     body > .centerer.with_sidebar > .sidebar.bordered {
 659         display: none;
 660     }
 661 }
 662 @media screen and (max-width: 381.68421052631584px) {
 663     body > .centerer .wfpl_li,
 664     body > .centerer .wfpl_ci,
 665     body > .centerer .wfpl_ri {
 666         float: none;
 667         width: 362.86771068759987px;
 668         margin-right: auto;
 669         margin-left: auto;
 670     }
 671 }
 672 @media screen and (max-width: 381.68421052631584px) {
 673     body > .centerer.full > .main .wfpl_li,
 674     body > .centerer.full > .main .wfpl_ci,
 675     body > .centerer.full > .main .wfpl_ri {
 676         float: none;
 677         width: 362.86771068759987px;
 678         margin-right: auto;
 679         margin-left: auto;
 680     }
 681 }
 682 @media screen and (max-width: 381.68421052631584px) {
 683     body > .centerer.with_sidebar > .main .wfpl_li,
 684     body > .centerer.with_sidebar > .main .wfpl_ci,
 685     body > .centerer.with_sidebar > .main .wfpl_ri {
 686         float: none;
 687         width: 255.91722753757045px;
 688         margin-right: auto;
 689         margin-left: auto;
 690     }
 691 }
 692 #mobile_menu_button {
 693     display: none;
 694 }
 695 #mobile_menu_check {
 696     display: none;
 697 }
 698 @media screen and (max-width: 600px) {
 699     .siteNav > form {
 700         margin-top: 0;
 701     }
 702     #mobile_menu_check:not(:checked) + div {
 703         display: none;
 704     }
 705     #mobile_menu_check:checked + div {
 706         display: block;
 707         position: relative;
 708     }
 709     #mobile_menu_check:checked + div > ul {
 710         z-index: 1000;
 711         background: #fff;
 712         background: rgba(255,255,255,0.95);
 713         display: block;
 714         position: absolute;
 715         top: 100%;
 716         width: 96%;
 717         left: 2%;
 718         margin: 0;
 719         padding: 0;
 720         border-bottom-left-radius: 4px;
 721         border-bottom-right-radius: 4px;
 722         -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
 723         box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
 724     }
 725     #mobile_menu_check:checked + div > ul li {
 726         padding: 15px;
 727         white-space: nowrap;
 728     }
 729     #mobile_menu_check:checked + div > ul li + li {
 730         padding-top: 0;
 731     }
 732     #mobile_menu_check:checked + div > ul li a {
 733         font-size: 18px;
 734     }
 735     #mobile_menu_check:checked + div > ul:before,
 736     #mobile_menu_check:checked + div > ul:after {
 737         display: none;
 738         content: none;
 739         margin: 0;
 740         padding: 0;
 741     }
 742     #mobile_menu_check:checked + div > ul > * {
 743         position: static;
 744         top: 0;
 745     }
 746     .siteNav ul > li,
 747     #mobile_menu_button {
 748         display: block;
 749         padding: 0px 10px 0px 17px;
 750         font-size: 18px;
 751     }
 752 }
 753 #admin_images_body .th_toggle_buttons {
 754     font-weight: normal;
 755     color: #777;
 756     text-align: justify;
 757 }
 758 #admin_images_body .th_toggle_buttons > * {
 759     display: inline-block;
 760     position: relative;
 761     top: 1.2em;
 762 }
 763 #admin_images_body .th_toggle_buttons:before {
 764     content: '';
 765     display: block;
 766     width: 100%;
 767     margin-bottom: -1.2em;
 768 }
 769 #admin_images_body .th_toggle_buttons:after {
 770     content: '';
 771     display: inline-block;
 772     width: 100%;
 773 }