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