static/css/style.css

   1 /* vars */
   2 :root {
   3     --c-dark:     #292f2f;
   4     --c-bg-dark:  #3a4346;
   5     --c-bg-light: #4c5456;
   6     --c-light:    #ecf7fa;
   7     --c-hl-dark:  #008499;
   8     --c-hl-light: #3baec4;
   9     --c-shadow:   #dae5e2;
  10
  11     /* backgrounds */
  12     --navbar-bg:    var(--c-dark);
  13     --jumbotron-bg: var(--c-bg-dark);
  14     --copyright-bg: var(--c-dark);
  15
  16     /* link colors */
  17     --link-color:         var(--c-hl-dark);
  18     --link-hover-color:   var(--c-hl-light);
  19     --footer-link-color:  var(--c-light);
  20     --footer-hover-color: #fff;
  21
  22     /* text colors */
  23     --text-color:           var(--c-dark);
  24     --footer-text-color:    var(--c-light);
  25     --copyright-text-color: var(--c-light);
  26     --jumbotron-text-color: var(--c-light);
  27     --art-date-color:       color(var(--c-dark) tint(50%));
  28
  29     /* box colors */
  30     --border-color:    var(--c-dark);
  31     --box-color:       var(--c-bg-light);
  32     --box-hover-color: var(--c-dark);;
  33     --box-round:       10px;
  34
  35     /* other */
  36     --max-width:     600px;
  37     --max-width-box: 800px;
  38     --margin-box-fa: 5px;
  39 }
  40 @custom-media --max-sm all and (max-width: 600px);
  41 @custom-media --max-md all and (max-width: 800px);
  42 @custom-media --max-rem all and (max-width: 60rem);
  43
  44 /* reset css for browser compat */
  45 * {
  46     margin: 0;
  47     padding: 0;
  48     box-sizing: border-box;
  49 }
  50
  51 /* global */
  52 body {
  53     font-family: 'Open Sans', sans-serif;
  54     font-feature-settings: "lnum";
  55     font-variant-numeric: lining-nums;
  56     color: var(--text-color);
  57     font-size: 14px;
  58     min-height: 100vh;
  59     height: auto;
  60 }
  61
  62 .invisible {
  63     display: none;
  64 }
  65
  66 a {
  67     color: var(--link-color);
  68     text-decoration: none;
  69 }
  70
  71 a:hover {
  72     color: var(--link-hover-color);
  73 }
  74 img {
  75     max-width: 100%;
  76 }
  77
  78 /* navbar */
  79 .navbar {
  80     color: var(--c-light);
  81     width: 100%;
  82     height: 50px;
  83     background-color: var(--navbar-bg);
  84     box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  85     position: fixed;
  86     left: 0;
  87     right: 0;
  88     top: 0;
  89     display: flex;
  90     flex-wrap: nowrap;
  91     justify-content: space-between;
  92     align-items: center;
  93     border-bottom: 1px solid var(--border-color);
  94     z-index: 100;
  95     padding-right: 5px;
  96 }
  97
  98 @media (--max-sm) {
  99     .navbar {
 100         position: absolute;
 101     }
 102 }
 103
 104 .navbar a {
 105     margin-top: 2px;
 106     height: 40px;
 107 }
 108
 109 #nav-logo { order: 10; }
 110 #nav-pia  { order: 30; }
 111
 112 #nav-jump { order: 1000; }
 113
 114 #nav-search {
 115     order: 20;
 116     margin-left: auto;
 117     line-height: 35px;
 118 }
 119
 120 #nav-search input {
 121     background-color: var(--c-bg-dark);
 122     border-style: none;
 123     border-radius: 2px;
 124     color: var(--c-light);
 125     padding: .5em;
 126     padding-right: 2em;
 127     margin-right: -2em;
 128 }
 129
 130 #nav-label {
 131     display: inline-block;
 132     width: 2em;
 133     margin-right: .7em;
 134 }
 135
 136 @media (--max-sm) {
 137     #nav-search {
 138         order: 100;
 139         margin: 0 .5em;
 140     }
 141
 142     #nav-pia {
 143         margin-left: auto;
 144     }
 145
 146     #nav-label {
 147         width: auto;
 148         margin: 0 .5em;
 149     }
 150
 151     #nav-searchbox:not(:focus) {
 152         display: inline-block;
 153         position: absolute;
 154         height: 0;
 155         width: 0;
 156         padding: 0;
 157         margin: 0;
 158         background: transparent;
 159         overflow: hidden;
 160     }
 161
 162     #nav-searchbox:focus {
 163         position: absolute;
 164         visibility: visible;
 165         outline: none;
 166         top: 0;
 167         left: 0;
 168         right: 0;
 169         height: 50px;
 170         line-height: 50px;
 171         font-size: 1.5em;
 172         padding-right: 2.5em;
 173         width: 100%;
 174     }
 175
 176     #nav-searchbox:focus + #nav-label {
 177         display: block;
 178         position: absolute;
 179         pointer-events: none;
 180         top: 0;
 181         right: 0;
 182         width: 1.5em;
 183         font-size: 2em;
 184         line-height: 50px;
 185         padding-top: -.1em;
 186         margin: 0;
 187     }
 188 }
 189
 190 .nlogo {
 191     height: 40px;
 192 }
 193
 194 .tlogo {
 195     height: 2.4ex;
 196     margin-bottom: -.47ex;
 197     margin-left: -10px;
 198     margin-right: -10px;
 199 }
 200
 201 /* main */
 202 .container {
 203     width: 100%;
 204     min-height: 100vh;
 205     padding-top: 50px;
 206     padding-bottom: 17.5rem;
 207 }
 208
 209 .main {
 210     margin: 2em auto;
 211     padding: 0 .75em;
 212     max-width: var(--max-width);
 213     line-height: 1.8;
 214 }
 215
 216 .main h1,
 217 .main h2,
 218 .main h3,
 219 .main h4,
 220 .main h5,
 221 .main h6,
 222 .main li,
 223 .main pre,
 224 .main p,
 225 .main blockquote {
 226     margin-top: .7em;
 227 }
 228
 229 .artlist li {
 230     margin-top: 0;
 231 }
 232
 233 .main h1 + p,
 234 .main h2 + p,
 235 .main h3 + p,
 236 .main h4 + p,
 237 .main h5 + p,
 238 .main h6 + p,
 239 .main blockquote > p:first-child {
 240     margin-top: 0;
 241 }
 242
 243 ul {
 244     padding-left: 2em;
 245     list-style-type: disc;
 246 }
 247
 248 ol {
 249     padding-left: 2em;
 250     list-style-type: decimal;
 251 }
 252
 253 hr {
 254     margin-top: .8em;
 255     margin-bottom: .8em;
 256 }
 257
 258 table {
 259     border: 1px solid var(--c-dark);
 260     border-collapse: collapse;
 261 }
 262
 263 th, td {
 264     margin: .2em;
 265 }
 266
 267 th {
 268     background-color: var(--c-bg-dark);
 269     color: var(--c-light);
 270 }
 271
 272 td {
 273     padding: .2em .5em;
 274 }
 275
 276 td:not(:first-child), th:not(:first-child) {
 277     border-left: 1px solid var(--c-dark);
 278 }
 279
 280 tr:nth-child(odd) {
 281     background-color: var(--c-shadow);
 282 }
 283
 284 /* jumbotron */
 285 .jumbotron {
 286     position: relative;
 287     width: 100%;
 288     margin-top: -50px;
 289     background: var(--jumbotron-bg);
 290     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 291     color: var(--jumbotron-text-color);
 292     padding: 4em 0 4em 0;
 293 }
 294
 295 .jindex {
 296     z-index: 99;
 297 }
 298
 299 .jlogo {
 300     display: block;
 301     margin: 25px auto;
 302 }
 303
 304 .jpia {
 305     position: absolute;
 306     height: 40px;
 307     right: 0;
 308     top: 0;
 309     margin: 25px;
 310 }
 311
 312 @media (--max-sm) {
 313     .jlogo {
 314         margin: 2em auto -2em auto;
 315     }
 316     .jumbotron {
 317         padding-bottom: 2em;
 318     }
 319 }
 320
 321 .child {
 322     text-align: center;
 323     margin: .5em auto;
 324     font-size: 32px;
 325     line-height: 48px;
 326     max-width: 75%;
 327 }
 328
 329 .box-container {
 330     display: flex;
 331     flex-wrap: wrap;
 332     justify-content: space-around;
 333     align-items: stretch;
 334     max-width: var(--max-width-box);
 335     margin: 0 auto;
 336 }
 337
 338 .box {
 339     text-align: center;
 340     text-decoration: none;
 341     color: var(--jumbotron-text-color);
 342     margin-bottom: 5px;
 343     flex-basis: 30%;
 344     min-width: 26%;
 345     background-color: var(--box-color);
 346     border-radius: var(--box-round);
 347     padding: 1em;
 348 }
 349
 350 .box:hover,.box:active {
 351     color: var(--jumbotron-text-color);
 352     background-color: var(--box-hover-color);
 353 }
 354
 355 .box span {
 356     position: relative;
 357     top: initial;
 358     font-size: 20px;
 359     font-weight: 600;
 360     line-height: 16px;
 361     display: block;
 362     margin-top: .75em;
 363 }
 364
 365 .fa-users {
 366     margin-top: var(--margin-box-fa);
 367 }
 368
 369 .fa-comments,.fa-question {
 370     margin-bottom: var(--margin-box-fa);
 371 }
 372
 373 .title {
 374     text-align: center;
 375 }
 376
 377 @media (--max-md) {
 378     .box {
 379         text-align: center;
 380     }
 381
 382     .child {
 383         font-size: 20px;
 384         line-height: 30px;
 385         padding: 10px 0 5px;
 386     }
 387
 388     .fa-4x {
 389         padding: 0;
 390         margin: 0;
 391         width: 60px;
 392         text-align: center;
 393         font-size: 28px;
 394     }
 395
 396     .box-container {
 397         flex-direction: column;
 398         margin: 0 .5em;
 399     }
 400
 401     .box span {
 402         font-size: 22px;
 403         line-height: 22px;
 404         padding-left: 8px;
 405         font-weight: bold;
 406         position: relative;
 407         display: inline-block;
 408         text-align: center;
 409         margin-top: 0;
 410     }
 411
 412     .box {
 413         text-align: left;
 414         border-radius: calc(var(--box-round) / 2);
 415         margin: 5px 0;
 416     }
 417 }
 418
 419 /* articles */
 420 h1 {
 421     margin: 0;
 422 }
 423
 424 .artlist ul {
 425     padding: 0;
 426     list-style-type: none;
 427 }
 428
 429 .art-info {
 430     display: flex;
 431     flex-direction: row;
 432     flex-wrap: wrap;
 433     justify-content: space-between;
 434     align-items: baseline;
 435 }
 436
 437 .art-info h1 {
 438     margin-top: 0;
 439     display: inline;
 440     margin-right: 2em;
 441 }
 442
 443 .art-body {
 444     margin-bottom: 1em;
 445 }
 446
 447 @media(--max-sm) {
 448     .artlist .heading {
 449         padding: 0 0.75em;
 450     }
 451 }
 452
 453 .artlist ul {
 454     max-width: var(--max-width);
 455     margin: 2em auto;
 456     margin-top: .5em;
 457 }
 458
 459 .artlist li:not(:first-child) {
 460     border-top: 1px solid var(--border-color);
 461 }
 462
 463 .artlist .art {
 464     font-weight: bold;
 465     font-size: 120%;
 466 }
 467
 468 .art-date {
 469     display: inline-block;
 470     vertical-align: baseline;
 471     line-height: 1;
 472     white-space: nowrap;
 473     color: var(--art-date-color);
 474     font-feature-settings: "tnum";
 475     font-variant-numeric: tabular-nums;
 476 }
 477
 478 .artlist .art-date {
 479     margin-bottom: .5em;
 480 }
 481
 482 .art-nav {
 483     display: flex;
 484     flex-direction: row;
 485     justify-content: space-between;
 486     width: 100%;
 487 }
 488
 489 .art-nav * {
 490     flex-basis: 30%;
 491 }
 492
 493 .art-nav *:nth-child(1) { text-align: left; }
 494 .art-nav *:nth-child(2) { text-align: center; }
 495 .art-nav *:nth-child(3) { text-align: right; }
 496
 497 blockquote {
 498     padding-left: 1em;
 499     display: inline-block;
 500     border-left: .5em solid var(--c-shadow);
 501     font-style: italic;
 502 }
 503
 504 @media (--max-md) {
 505     .main.artlist {
 506         padding-left: 0;
 507         padding-right: 0;
 508     }
 509
 510     .artlist .art-info {
 511         padding: 0 .75em;
 512     }
 513 }
 514
 515 /* faq */
 516 .kb-index {
 517     list-style-type: none;
 518     padding-left: 0;
 519     display: flex;
 520     flex-direction: row;
 521     flex-wrap: wrap;
 522     justify-content: stretch;
 523 }
 524
 525 .kb-index li {
 526     display: block;
 527     flex: 1 1 15em;
 528     height: 3em;
 529     margin: 1em;
 530 }
 531
 532 .kb-index li h2 {
 533     margin-top: 0;
 534 }
 535
 536 .kb-index a {
 537     display: block;
 538     color: var(--text-color);
 539     width: 100%;
 540     height: 100%;
 541 }
 542 .kb-index a h2 {
 543     color: var(--link-color);
 544 }
 545 .kb-index a:hover h2 {
 546     color: var(--link-hover-color);
 547 }
 548
 549 /* footer */
 550 .footers {
 551     /*min-height: 30vh;*/
 552     margin-top: -17rem;
 553     min-height: 17rem;
 554 }
 555
 556 .footer {
 557     background: var(--jumbotron-bg);
 558     color: var(--footer-text-color);
 559     width: 100%;
 560     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 561     min-height: 15.4rem;
 562     padding: 3em 0;
 563 }
 564
 565 .footer .fa-fw {
 566     height: 14px;
 567 }
 568
 569 .footer-container {
 570     display: flex;
 571     flex-wrap: wrap;
 572     justify-content: center;
 573     align-items: flex-start;
 574     margin: 0 auto;
 575 }
 576
 577 .footerchild {
 578     margin: 0 2em;
 579     margin-top: .5em;
 580     flex-grow: 1;
 581     flex-shrink: 0;
 582 }
 583
 584 .footerchild:last-child {
 585     margin-bottom: .5em;
 586 }
 587
 588 .footer-push {
 589     margin-left: auto;
 590     width: max-content;
 591 }
 592
 593 footer a {
 594     color: var(--footer-link-color);
 595 }
 596
 597 footer a:hover {
 598     color: var(--footer-hover-color);
 599 }
 600
 601 .footer h2 {
 602     margin-bottom: .1em;
 603     display: inline-block;
 604 }
 605
 606 .footerchild ul, .footerchild ul ul {
 607     padding-left: 0;
 608     margin-left: 10px;
 609     margin-right: 10px;
 610     list-style-type: none;
 611 }
 612
 613 .footerchild ul ul {
 614     padding-left: 30px;
 615 }
 616
 617 @media (--max-sm) {
 618     .footer-container {
 619         flex-direction: column;
 620     }
 621
 622     .footer-push {
 623         margin-left: 0;
 624         width: 100%;
 625     }
 626
 627     .footerchild ul li:last-child {
 628         margin-bottom: .5em;
 629     }
 630
 631     .footer-push ul li:last-child {
 632         margin-bottom: .1em;
 633     }
 634
 635     .hdn {
 636         display: none;
 637     }
 638     .footer {
 639         padding: .5em 0;
 640     }
 641     .footer li a {
 642         line-height: 1.8;
 643     }
 644     .footer-push ul {
 645         display: flex;
 646         flex-wrap: wrap;
 647         flex-direction: row;
 648         justify-content: space-between;
 649         align-items: flex-start;
 650         text-align: center;
 651     }
 652     .footer-push ul li {
 653         display: inline-block;
 654         font-size: 2.5rem;
 655     }
 656     .footerchild ul li img,
 657     .footerchild ul li .fa-fw {
 658         height: 2.5rem;
 659     }
 660 }
 661
 662 .footer h2, .footer h3 {
 663     margin-left: 10px;
 664     margin-right: 10px;
 665 }
 666
 667 footer.copyright {
 668     display: flex;
 669     flex-wrap: wrap;
 670     justify-content: space-between;
 671     background: var(--copyright-bg);
 672     min-height: 1.5rem;
 673     color: var(--copyright-text-color);
 674     padding-left: .5em;
 675     padding-right: .5em;
 676     overflow: hidden;
 677 }
 678
 679 footer.copyright div {
 680     display: flex;
 681     align-items: center;
 682     height: 1.6rem;
 683     line-height: 1.6rem;
 684     vertical-align: top;
 685 }
 686
 687 .copyright * {
 688     margin: 0;
 689     height: 1.6rem;
 690     line-height: 1.6rem;
 691 }
 692
 693 .copyright .fa {
 694     height: 100%;
 695     vertical-align: top;
 696     font-size: 1.4em;
 697 }
 698
 699 .copyright .footer-link {
 700     height: 28px;
 701     margin-right: .5em;
 702 }
 703
 704 .copyright img {
 705     height: 1.5rem;
 706     width: auto;
 707 }