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 .art-info .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     flex-basis: 30%;
 399     width: 100%;
 400 }
 401
 402 @media (--max-md) {
 403     .main.artlist {
 404         padding-left: 0;
 405         padding-right: 0;
 406     }
 407
 408     .artlist .art-info {
 409         padding: 0 .75em;
 410     }
 411 }
 412
 413 /* faq */
 414 .kb-index {
 415     list-style-type: none;
 416     padding-left: 0;
 417     display: flex;
 418     flex-direction: row;
 419     flex-wrap: wrap;
 420     justify-content: stretch;
 421 }
 422
 423 .kb-index li {
 424     display: block;
 425     flex: 1 1 15em;
 426     height: 7em;
 427     margin: 1em;
 428 }
 429
 430 .kb-index li h2 {
 431     margin-top: 0;
 432 }
 433
 434 .kb-index a {
 435     display: block;
 436     color: var(--text-color);
 437     width: 100%;
 438     height: 100%;
 439 }
 440 .kb-index a h2 {
 441     color: var(--link-color);
 442 }
 443 .kb-index a:hover h2 {
 444     color: var(--link-hover-color);
 445 }
 446
 447 /* footer */
 448 .footers {
 449     /*min-height: 30vh;*/
 450     margin-top: -17rem;
 451     min-height: 17rem;
 452 }
 453
 454 .footer {
 455     background: var(--jumbotron-bg);
 456     color: var(--footer-text-color);
 457     width: 100%;
 458     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 459     min-height: 15.4rem;
 460     padding: 3em 0;
 461 }
 462
 463 .footer .fa-fw {
 464     height: 14px;
 465 }
 466
 467 .footer-container {
 468     display: flex;
 469     flex-wrap: wrap;
 470     justify-content: center;
 471     align-items: flex-start;
 472     margin: 0 auto;
 473 }
 474
 475 .footerchild {
 476     margin: 0 2em;
 477     margin-top: .5em;
 478     flex-grow: 1;
 479     flex-shrink: 0;
 480 }
 481
 482 .footerchild:last-child {
 483     margin-bottom: .5em;
 484 }
 485
 486 .footer-push {
 487     margin-left: auto;
 488     width: max-content;
 489 }
 490
 491 footer a {
 492     color: var(--footer-link-color);
 493 }
 494
 495 footer a:hover {
 496     color: var(--footer-hover-color);
 497 }
 498
 499 .footer h2 {
 500     margin-bottom: .1em;
 501     display: inline-block;
 502 }
 503
 504 .footerchild ul, .footerchild ul ul {
 505     padding-left: 0;
 506     margin-left: 10px;
 507     margin-right: 10px;
 508     list-style-type: none;
 509 }
 510
 511 .footerchild ul ul {
 512     padding-left: 30px;
 513 }
 514
 515 @media (--max-sm) {
 516     .footer-container {
 517         flex-direction: column;
 518     }
 519
 520     .footer-push {
 521         margin-left: 0;
 522         width: 100%;
 523     }
 524
 525     .footerchild ul li:last-child {
 526         margin-bottom: .5em;
 527     }
 528
 529     .footer-push ul li:last-child {
 530         margin-bottom: .1em;
 531     }
 532
 533     .hdn {
 534         display: none;
 535     }
 536     .footer {
 537         padding: .5em 0;
 538     }
 539     .footer li a {
 540         line-height: 1.8;
 541     }
 542     .footer-push ul {
 543         display: flex;
 544         flex-wrap: wrap;
 545         flex-direction: row;
 546         justify-content: space-between;
 547         align-items: flex-start;
 548         text-align: center;
 549     }
 550     .footer-push ul li {
 551         display: inline-block;
 552         font-size: 2.5rem;
 553     }
 554     .footerchild ul li img,
 555     .footerchild ul li .fa-fw {
 556         height: 2.5rem;
 557     }
 558 }
 559
 560 .footer h2, .footer h3 {
 561     margin-left: 10px;
 562     margin-right: 10px;
 563 }
 564
 565 footer.copyright {
 566     display: flex;
 567     flex-wrap: wrap;
 568     justify-content: space-between;
 569     background: var(--copyright-bg);
 570     min-height: 1.5rem;
 571     color: var(--copyright-text-color);
 572     padding-left: .5em;
 573     padding-right: .5em;
 574     overflow: hidden;
 575 }
 576
 577 footer.copyright div {
 578     display: flex;
 579     align-items: center;
 580     height: 1.6rem;
 581     line-height: 1.6rem;
 582     vertical-align: top;
 583 }
 584
 585 .copyright * {
 586     margin: 0;
 587     height: 1.6rem;
 588     line-height: 1.6rem;
 589 }
 590
 591 .copyright .fa {
 592     height: 100%;
 593     vertical-align: top;
 594     font-size: 1.4em;
 595 }
 596
 597 .copyright .footer-link {
 598     height: 28px;
 599     margin-right: .5em;
 600 }
 601
 602 .copyright img {
 603     height: 1.5rem;
 604     width: auto;
 605 }