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