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