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 ul {
 247     padding-left: 2em;
 248     list-style-type: disc;
 249 }
 250
 251 ol {
 252     padding-left: 2em;
 253     list-style-type: decimal;
 254 }
 255
 256 hr {
 257     margin-top: .8em;
 258     margin-bottom: .8em;
 259 }
 260
 261 table {
 262     border: 1px solid var(--c-dark);
 263     border-collapse: collapse;
 264 }
 265
 266 th, td {
 267     margin: .2em;
 268 }
 269
 270 th {
 271     background-color: var(--c-bg-dark);
 272     color: var(--c-light);
 273 }
 274
 275 td {
 276     padding: .2em .5em;
 277 }
 278
 279 td:not(:first-child), th:not(:first-child) {
 280     border-left: 1px solid var(--c-dark);
 281 }
 282
 283 tr:nth-child(odd) {
 284     background-color: var(--c-shadow);
 285 }
 286
 287 /* jumbotron */
 288 .jumbotron {
 289     position: relative;
 290     width: 100%;
 291     margin-top: -50px;
 292     background: var(--jumbotron-bg);
 293     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 294     color: var(--jumbotron-text-color);
 295     padding: 4em 0 4em 0;
 296 }
 297
 298 /* j = jumbotron */
 299 .jindex {
 300     z-index: 99;
 301 }
 302
 303 .jlogo {
 304     display: block;
 305     margin: 25px auto;
 306 }
 307
 308 .jpia {
 309     position: absolute;
 310     height: 40px;
 311     right: 0;
 312     top: 0;
 313     margin: 25px;
 314 }
 315
 316 @media (--max-sm) {
 317     .jlogo {
 318         margin: 2em auto -2em auto;
 319     }
 320     .jumbotron {
 321         padding-bottom: 2em;
 322     }
 323 }
 324
 325 .child {
 326     text-align: center;
 327     margin: .5em auto;
 328     font-size: 32px;
 329     line-height: 48px;
 330     max-width: 75%;
 331 }
 332
 333 .box-container {
 334     display: flex;
 335     flex-wrap: wrap;
 336     justify-content: space-around;
 337     align-items: stretch;
 338     max-width: var(--max-width-box);
 339     margin: 0 auto;
 340 }
 341
 342 .box {
 343     text-align: center;
 344     text-decoration: none;
 345     color: var(--jumbotron-text-color);
 346     margin-bottom: 5px;
 347     flex-basis: 30%;
 348     min-width: 26%;
 349     background-color: var(--box-color);
 350     border-radius: var(--box-round);
 351     padding: 1em;
 352 }
 353
 354 .box:hover,.box:active {
 355     color: var(--jumbotron-text-color);
 356     background-color: var(--box-hover-color);
 357 }
 358
 359 .box span {
 360     position: relative;
 361     top: initial;
 362     font-size: 20px;
 363     font-weight: 600;
 364     line-height: 16px;
 365     display: block;
 366     margin-top: .75em;
 367 }
 368
 369 /* fa = font awesome */
 370 .fa-users {
 371     margin-top: var(--margin-box-fa);
 372 }
 373
 374 .fa-comments,.fa-question {
 375     margin-bottom: var(--margin-box-fa);
 376 }
 377
 378 .title {
 379     text-align: center;
 380 }
 381
 382 @media (--max-md) {
 383     .box {
 384         text-align: center;
 385     }
 386
 387     .child {
 388         font-size: 20px;
 389         line-height: 30px;
 390         padding: 10px 0 5px;
 391     }
 392
 393     .fa-4x {
 394         padding: 0;
 395         margin: 0;
 396         width: 60px;
 397         text-align: center;
 398         font-size: 28px;
 399     }
 400
 401     .box-container {
 402         flex-direction: column;
 403         margin: 0 .5em;
 404     }
 405
 406     .box span {
 407         font-size: 22px;
 408         line-height: 22px;
 409         padding-left: 8px;
 410         font-weight: bold;
 411         position: relative;
 412         display: inline-block;
 413         text-align: center;
 414         margin-top: 0;
 415     }
 416
 417     .box {
 418         text-align: left;
 419         border-radius: calc(var(--box-round) / 2);
 420         margin: 5px 0;
 421     }
 422 }
 423
 424 /* articles */
 425 h1 {
 426     margin: 0;
 427 }
 428 /* art = article */
 429 .artlist ul {
 430     padding: 0;
 431     list-style-type: none;
 432 }
 433
 434 .art-info {
 435     display: flex;
 436     flex-direction: row;
 437     flex-wrap: wrap;
 438     justify-content: space-between;
 439     align-items: baseline;
 440 }
 441
 442 .art-info h1 {
 443     margin-top: 0;
 444     display: inline;
 445     margin-right: 2em;
 446 }
 447
 448 .art-warning {
 449     margin-bottom: 2em;
 450     padding: .5em;
 451     border: 1px solid var(--border-color);
 452     color: red;
 453 }
 454
 455 .art-body {
 456     margin-bottom: 1em;
 457 }
 458
 459 @media(--max-sm) {
 460     .artlist .heading {
 461         padding: 0 0.75em;
 462     }
 463 }
 464
 465 .artlist ul {
 466     max-width: var(--max-width);
 467     margin: 2em auto;
 468     margin-top: .5em;
 469 }
 470
 471 .artlist li:not(:first-child) {
 472     border-top: 1px solid var(--border-color);
 473 }
 474
 475 .artlist .art {
 476     font-weight: bold;
 477     font-size: 120%;
 478 }
 479
 480 .art-date {
 481     display: inline-block;
 482     vertical-align: baseline;
 483     line-height: 1;
 484     white-space: nowrap;
 485     color: var(--art-date-color);
 486     font-feature-settings: "tnum";
 487     font-variant-numeric: tabular-nums;
 488 }
 489
 490 .artlist .art-date {
 491     margin-bottom: .5em;
 492 }
 493
 494 .art-nav {
 495     display: flex;
 496     flex-direction: row;
 497     justify-content: space-between;
 498     width: 100%;
 499 }
 500
 501 .art-nav * {
 502     flex-basis: 30%;
 503 }
 504
 505 .art-nav *:nth-child(1) { text-align: left; }
 506 .art-nav *:nth-child(2) { text-align: center; }
 507 .art-nav *:nth-child(3) { text-align: right; }
 508
 509 blockquote {
 510     padding-left: 1em;
 511     display: inline-block;
 512     border-left: .5em solid var(--c-shadow);
 513     font-style: italic;
 514 }
 515
 516 @media (--max-md) {
 517     .main.artlist {
 518         padding-left: 0;
 519         padding-right: 0;
 520     }
 521
 522     .artlist .art-info {
 523         padding: 0 .75em;
 524     }
 525 }
 526
 527 /* faq */
 528 /* kb = knowledge base */
 529 .kb-index {
 530     list-style-type: none;
 531     padding-left: 0;
 532     display: flex;
 533     flex-direction: row;
 534     flex-wrap: wrap;
 535     justify-content: stretch;
 536 }
 537
 538 .kb-index li {
 539     display: block;
 540     flex: 1 1 15em;
 541     height: 3em;
 542     margin: 1em;
 543 }
 544
 545 .kb-index li h2 {
 546     margin-top: 0;
 547 }
 548
 549 .kb-index a {
 550     display: block;
 551     color: var(--text-color);
 552     width: 100%;
 553     height: 100%;
 554 }
 555 .kb-index a h2 {
 556     color: var(--link-color);
 557 }
 558 .kb-index a:hover h2 {
 559     color: var(--link-hover-color);
 560 }
 561
 562 /* footer */
 563 .footers {
 564     /*min-height: 30vh;*/
 565     margin-top: -17rem;
 566     min-height: 17rem;
 567 }
 568
 569 .footer {
 570     background: var(--jumbotron-bg);
 571     color: var(--footer-text-color);
 572     width: 100%;
 573     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 574     min-height: 15.4rem;
 575     padding: 3em 0;
 576 }
 577
 578 .footer .fa-fw {
 579     height: 14px;
 580 }
 581
 582 .footer-container {
 583     display: flex;
 584     flex-wrap: wrap;
 585     justify-content: center;
 586     align-items: flex-start;
 587     margin: 0 auto;
 588 }
 589
 590 .footerchild {
 591     margin: 0 2em;
 592     margin-top: .5em;
 593     flex-grow: 1;
 594     flex-shrink: 0;
 595 }
 596
 597 .footerchild:last-child {
 598     margin-bottom: .5em;
 599 }
 600
 601 .footer-push {
 602     margin-left: auto;
 603     width: max-content;
 604 }
 605
 606 footer a {
 607     color: var(--footer-link-color);
 608 }
 609
 610 footer a:hover {
 611     color: var(--footer-hover-color);
 612 }
 613
 614 .footer h2 {
 615     margin-bottom: .1em;
 616     display: inline-block;
 617 }
 618
 619 .footerchild ul, .footerchild ul ul {
 620     padding-left: 0;
 621     margin-left: 10px;
 622     margin-right: 10px;
 623     list-style-type: none;
 624 }
 625
 626 .footerchild ul ul {
 627     padding-left: 30px;
 628 }
 629
 630 @media (--max-sm) {
 631     .footer-container {
 632         flex-direction: column;
 633     }
 634
 635     .footer-push {
 636         margin-left: 0;
 637         width: 100%;
 638     }
 639
 640     .footerchild ul li:last-child {
 641         margin-bottom: .5em;
 642     }
 643
 644     .footer-push ul li:last-child {
 645         margin-bottom: .1em;
 646     }
 647
 648     /* hdn = hidden */
 649     .hdn {
 650         display: none;
 651     }
 652     .footer {
 653         padding: .5em 0;
 654     }
 655     .footer li a {
 656         line-height: 1.8;
 657     }
 658     .footer-push ul {
 659         display: flex;
 660         flex-wrap: wrap;
 661         flex-direction: row;
 662         justify-content: space-between;
 663         align-items: flex-start;
 664         text-align: center;
 665     }
 666     .footer-push ul li {
 667         display: inline-block;
 668         font-size: 2.5rem;
 669     }
 670     .footerchild ul li img,
 671     .footerchild ul li .fa-fw {
 672         height: 3.5rem;
 673     }
 674 }
 675
 676 .footer h2, .footer h3 {
 677     margin-left: 10px;
 678     margin-right: 10px;
 679 }
 680
 681 footer.copyright {
 682     display: flex;
 683     flex-wrap: wrap;
 684     justify-content: space-between;
 685     background: var(--copyright-bg);
 686     min-height: 1.5rem;
 687     color: var(--copyright-text-color);
 688     padding-left: .5em;
 689     padding-right: .5em;
 690     overflow: hidden;
 691 }
 692
 693 footer.copyright div {
 694     display: flex;
 695     align-items: center;
 696     height: 1.6rem;
 697     line-height: 1.6rem;
 698     vertical-align: top;
 699 }
 700
 701 .copyright * {
 702     margin: 0;
 703     height: 1.6rem;
 704     line-height: 1.6rem;
 705 }
 706
 707 .copyright .fa {
 708     height: 100%;
 709     vertical-align: top;
 710     font-size: 1.4em;
 711 }
 712
 713 .copyright .footer-link {
 714     height: 28px;
 715     margin-right: .5em;
 716 }
 717
 718 .copyright img {
 719     width: auto;
 720 }