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