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