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