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     width: 100%;
  81     height: 50px;
  82     background-color: var(--navbar-bg);
  83     box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  84     position: fixed;
  85     left: 0;
  86     right: 0;
  87     top: 0;
  88     display: flex;
  89     flex-wrap: nowrap;
  90     justify-content: space-between;
  91     align-items: center;
  92     border-bottom: 1px solid var(--border-color);
  93     z-index: 100;
  94     padding-right: 5px;
  95 }
  96
  97 @media (--max-sm) {
  98     .navbar {
  99         position: absolute;
 100     }
 101 }
 102
 103 .navbar a {
 104     margin-top: 2px;
 105     height: 40px;
 106 }
 107
 108 .nlogo {
 109     height: 40px;
 110 }
 111
 112 .tlogo {
 113     height: 40px;
 114     margin-bottom: -9px;
 115     margin-left: -10px;
 116     margin-right: -10px;
 117 }
 118
 119 /* main */
 120 .container {
 121     width: 100%;
 122     min-height: 100vh;
 123     padding-top: 50px;
 124     padding-bottom: 17.5rem;
 125 }
 126
 127 .main {
 128     margin: 2em auto;
 129     padding: 0 .75em;
 130     max-width: var(--max-width);
 131     line-height: 1.8;
 132 }
 133
 134 .main h1,
 135 .main h2,
 136 .main h3,
 137 .main h4,
 138 .main li,
 139 .main pre,
 140 .main p,
 141 .main blockquote {
 142     margin-top: .7em;
 143 }
 144
 145 .artlist li {
 146     margin-top: 0;
 147 }
 148
 149 .main h1 + p,
 150 .main h2 + p,
 151 .main h3 + p,
 152 .main h3 + p,
 153 .main blockquote > p:first-child {
 154     margin-top: 0;
 155 }
 156
 157 ul {
 158     padding-left: 2em;
 159     list-style-type: disc;
 160 }
 161
 162 ol {
 163     padding-left: 2em;
 164     list-style-type: decimal;
 165 }
 166
 167 hr {
 168     margin-top: .8em;
 169     margin-bottom: .8em;
 170 }
 171
 172 table {
 173     border: 1px solid var(--c-dark);
 174     border-collapse: collapse;
 175 }
 176
 177 th, td {
 178     margin: .2em;
 179 }
 180
 181 th {
 182     background-color: var(--c-bg-dark);
 183     color: var(--c-light);
 184 }
 185
 186 td {
 187     padding: .2em .5em;
 188 }
 189
 190 td:not(:first-child), th:not(:first-child) {
 191     border-left: 1px solid var(--c-dark);
 192 }
 193
 194 tr:nth-child(odd) {
 195     background-color: var(--c-shadow);
 196 }
 197
 198 /* jumbotron */
 199 .jumbotron {
 200     position: relative;
 201     width: 100%;
 202     margin-top: -50px;
 203     background: var(--jumbotron-bg);
 204     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 205     color: var(--jumbotron-text-color);
 206     padding: 4em 0 4em 0;
 207 }
 208
 209 .jindex {
 210     z-index: 99;
 211 }
 212
 213 .jlogo {
 214     display: block;
 215     margin: 25px auto;
 216 }
 217
 218 .jpia {
 219     position: absolute;
 220     height: 40px;
 221     right: 0;
 222     top: 0;
 223     margin: 25px;
 224 }
 225
 226 @media (--max-sm) {
 227     .jlogo {
 228         margin: 2em auto -2em auto;
 229     }
 230     .jumbotron {
 231         padding-bottom: 2em;
 232     }
 233 }
 234
 235 .child {
 236     text-align: center;
 237     margin: .5em auto;
 238     font-size: 32px;
 239     line-height: 48px;
 240     max-width: 75%;
 241 }
 242
 243 .box-container {
 244     display: flex;
 245     flex-wrap: wrap;
 246     justify-content: space-around;
 247     align-items: stretch;
 248     max-width: var(--max-width-box);
 249     margin: 0 auto;
 250 }
 251
 252 .box {
 253     text-align: center;
 254     text-decoration: none;
 255     color: var(--jumbotron-text-color);
 256     margin-bottom: 5px;
 257     flex-basis: 30%;
 258     min-width: 26%;
 259     background-color: var(--box-color);
 260     border-radius: var(--box-round);
 261     padding: 1em;
 262 }
 263
 264 .box:hover,.box:active {
 265     color: var(--jumbotron-text-color);
 266     background-color: var(--box-hover-color);
 267 }
 268
 269 .box span {
 270     position: relative;
 271     top: initial;
 272     font-size: 20px;
 273     font-weight: 600;
 274     line-height: 16px;
 275     display: block;
 276     margin-top: .75em;
 277 }
 278
 279 .fa-users {
 280     margin-top: var(--margin-box-fa);
 281 }
 282
 283 .fa-comments,.fa-question {
 284     margin-bottom: var(--margin-box-fa);
 285 }
 286
 287 .title {
 288     text-align: center;
 289 }
 290
 291 @media (--max-md) {
 292     .box {
 293         text-align: center;
 294     }
 295
 296     .child {
 297         font-size: 20px;
 298         line-height: 30px;
 299         padding: 10px 0 5px;
 300     }
 301
 302     .fa-4x {
 303         padding: 0;
 304         margin: 0;
 305         width: 60px;
 306         text-align: center;
 307         font-size: 28px;
 308     }
 309
 310     .box-container {
 311         flex-direction: column;
 312         margin: 0 .5em;
 313     }
 314
 315     .box span {
 316         font-size: 22px;
 317         line-height: 22px;
 318         padding-left: 8px;
 319         font-weight: bold;
 320         position: relative;
 321         display: inline-block;
 322         text-align: center;
 323         margin-top: 0;
 324     }
 325
 326     .box {
 327         text-align: left;
 328         border-radius: calc(var(--box-round) / 2);
 329         margin: 5px 0;
 330     }
 331 }
 332
 333 /* articles */
 334 h1 {
 335     margin: 0;
 336 }
 337
 338 .artlist ul {
 339     padding: 0;
 340     list-style-type: none;
 341 }
 342
 343 .art-info {
 344     display: flex;
 345     flex-direction: row;
 346     flex-wrap: wrap;
 347     justify-content: space-between;
 348     align-items: baseline;
 349 }
 350
 351 .art-info h1 {
 352     margin-top: 0;
 353     display: inline;
 354     margin-right: 2em;
 355 }
 356
 357 .art-body {
 358     margin-bottom: 1em;
 359 }
 360
 361 @media(--max-sm) {
 362     .artlist .heading {
 363         padding: 0 0.75em;
 364     }
 365 }
 366
 367 .artlist ul {
 368     max-width: var(--max-width);
 369     margin: 2em auto;
 370     margin-top: .5em;
 371 }
 372
 373 .artlist li:not(:first-child) {
 374     border-top: 1px solid var(--border-color);
 375 }
 376
 377 .artlist .art {
 378     font-weight: bold;
 379     font-size: 120%;
 380 }
 381
 382 .art-date {
 383     display: inline-block;
 384     vertical-align: baseline;
 385     line-height: 1;
 386     white-space: nowrap;
 387     color: var(--art-date-color);
 388     font-feature-settings: "tnum";
 389     font-variant-numeric: tabular-nums;
 390 }
 391
 392 .artlist .art-date {
 393     margin-bottom: .5em;
 394 }
 395
 396 .art-nav {
 397     display: flex;
 398     flex-direction: row;
 399     justify-content: space-between;
 400     width: 100%;
 401 }
 402
 403 .art-nav * {
 404     flex-basis: 30%;
 405 }
 406
 407 .art-nav *:nth-child(1) { text-align: left; }
 408 .art-nav *:nth-child(2) { text-align: center; }
 409 .art-nav *:nth-child(3) { text-align: right; }
 410
 411 blockquote {
 412     padding-left: 1em;
 413     max-width: calc(var(--max-width) - .7em);
 414     display: inline-block;
 415     border-left: .5em solid var(--c-shadow);
 416     font-style: italic;
 417 }
 418
 419 @media (--max-md) {
 420     .main.artlist {
 421         padding-left: 0;
 422         padding-right: 0;
 423     }
 424
 425     .artlist .art-info {
 426         padding: 0 .75em;
 427     }
 428 }
 429
 430 /* faq */
 431 .kb-index {
 432     list-style-type: none;
 433     padding-left: 0;
 434     display: flex;
 435     flex-direction: row;
 436     flex-wrap: wrap;
 437     justify-content: stretch;
 438 }
 439
 440 .kb-index li {
 441     display: block;
 442     flex: 1 1 15em;
 443     height: 3em;
 444     margin: 1em;
 445 }
 446
 447 .kb-index li h2 {
 448     margin-top: 0;
 449 }
 450
 451 .kb-index a {
 452     display: block;
 453     color: var(--text-color);
 454     width: 100%;
 455     height: 100%;
 456 }
 457 .kb-index a h2 {
 458     color: var(--link-color);
 459 }
 460 .kb-index a:hover h2 {
 461     color: var(--link-hover-color);
 462 }
 463
 464 /* footer */
 465 .footers {
 466     /*min-height: 30vh;*/
 467     margin-top: -17rem;
 468     min-height: 17rem;
 469 }
 470
 471 .footer {
 472     background: var(--jumbotron-bg);
 473     color: var(--footer-text-color);
 474     width: 100%;
 475     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 476     min-height: 15.4rem;
 477     padding: 3em 0;
 478 }
 479
 480 .footer .fa-fw {
 481     height: 14px;
 482 }
 483
 484 .footer-container {
 485     display: flex;
 486     flex-wrap: wrap;
 487     justify-content: center;
 488     align-items: flex-start;
 489     margin: 0 auto;
 490 }
 491
 492 .footerchild {
 493     margin: 0 2em;
 494     margin-top: .5em;
 495     flex-grow: 1;
 496     flex-shrink: 0;
 497 }
 498
 499 .footerchild:last-child {
 500     margin-bottom: .5em;
 501 }
 502
 503 .footer-push {
 504     margin-left: auto;
 505     width: max-content;
 506 }
 507
 508 footer a {
 509     color: var(--footer-link-color);
 510 }
 511
 512 footer a:hover {
 513     color: var(--footer-hover-color);
 514 }
 515
 516 .footer h2 {
 517     margin-bottom: .1em;
 518     display: inline-block;
 519 }
 520
 521 .footerchild ul, .footerchild ul ul {
 522     padding-left: 0;
 523     margin-left: 10px;
 524     margin-right: 10px;
 525     list-style-type: none;
 526 }
 527
 528 .footerchild ul ul {
 529     padding-left: 30px;
 530 }
 531
 532 @media (--max-sm) {
 533     .footer-container {
 534         flex-direction: column;
 535     }
 536
 537     .footer-push {
 538         margin-left: 0;
 539         width: 100%;
 540     }
 541
 542     .footerchild ul li:last-child {
 543         margin-bottom: .5em;
 544     }
 545
 546     .footer-push ul li:last-child {
 547         margin-bottom: .1em;
 548     }
 549
 550     .hdn {
 551         display: none;
 552     }
 553     .footer {
 554         padding: .5em 0;
 555     }
 556     .footer li a {
 557         line-height: 1.8;
 558     }
 559     .footer-push ul {
 560         display: flex;
 561         flex-wrap: wrap;
 562         flex-direction: row;
 563         justify-content: space-between;
 564         align-items: flex-start;
 565         text-align: center;
 566     }
 567     .footer-push ul li {
 568         display: inline-block;
 569         font-size: 2.5rem;
 570     }
 571     .footerchild ul li img,
 572     .footerchild ul li .fa-fw {
 573         height: 2.5rem;
 574     }
 575 }
 576
 577 .footer h2, .footer h3 {
 578     margin-left: 10px;
 579     margin-right: 10px;
 580 }
 581
 582 footer.copyright {
 583     display: flex;
 584     flex-wrap: wrap;
 585     justify-content: space-between;
 586     background: var(--copyright-bg);
 587     min-height: 1.5rem;
 588     color: var(--copyright-text-color);
 589     padding-left: .5em;
 590     padding-right: .5em;
 591     overflow: hidden;
 592 }
 593
 594 footer.copyright div {
 595     display: flex;
 596     align-items: center;
 597     height: 1.6rem;
 598     line-height: 1.6rem;
 599     vertical-align: top;
 600 }
 601
 602 .copyright * {
 603     margin: 0;
 604     height: 1.6rem;
 605     line-height: 1.6rem;
 606 }
 607
 608 .copyright .fa {
 609     height: 100%;
 610     vertical-align: top;
 611     font-size: 1.4em;
 612 }
 613
 614 .copyright .footer-link {
 615     height: 28px;
 616     margin-right: .5em;
 617 }
 618
 619 .copyright img {
 620     height: 1.5rem;
 621     width: auto;
 622 }