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
  10     /* backgrounds */
  11     --navbar-bg:    var(--c-dark);
  12     --jumbotron-bg: var(--c-bg-dark);
  13     --copyright-bg: var(--c-dark);
  14
  15     /* link colors */
  16     --link-color:         var(--c-hl-dark);
  17     --link-hover-color:   var(--c-hl-light);
  18     --footer-link-color:  var(--c-light);
  19     --footer-hover-color: #fff;
  20
  21     /* text colors */
  22     --text-color:           var(--c-dark);
  23     --footer-text-color:    var(--c-light);
  24     --copyright-text-color: var(--c-light);
  25     --jumbotron-text-color: var(--c-light);
  26     --art-date-color:       color(var(--c-dark) tint(50%));
  27
  28     /* box colors */
  29     --border-color:    var(--c-dark);
  30     --box-color:       var(--c-bg-light);
  31     --box-hover-color: var(--c-dark);;
  32     --box-round:       10px;
  33
  34     /* other */
  35     --max-width:     1200px;
  36     --max-width-box: 800px;
  37     --margin-box-fa: 5px;
  38 }
  39 @custom-media --max-sm all and (max-width: 600px);
  40 @custom-media --max-md all and (max-width: 800px);
  41 @custom-media --max-rem all and (max-width: 60rem);
  42
  43 /* reset css for browser compat */
  44 * {
  45     margin: 0;
  46     padding: 0;
  47     box-sizing: border-box;
  48 }
  49
  50 /* global */
  51 body {
  52     font-family: 'Open Sans';
  53     font-feature-settings: "lnum";
  54     font-variant-numeric: lining-nums;
  55     color: var(--text-color);
  56     font-size: 14px;
  57     min-height: 100vh;
  58     height: auto;
  59 }
  60
  61 a {
  62     color: var(--link-color);
  63     text-decoration: none;
  64 }
  65
  66 a:hover {
  67     color: var(--link-hover-color);
  68 }
  69 img {
  70     max-width: 100%;
  71 }
  72
  73 /* navbar */
  74 .navbar {
  75     width: 100%;
  76     height: 50px;
  77     background-color: var(--navbar-bg);
  78     box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  79     position: fixed;
  80     left: 0;
  81     right: 0;
  82     top: 0;
  83     display: flex;
  84     flex-wrap: nowrap;
  85     justify-content: space-between;
  86     align-items: center;
  87     border-bottom: 1px solid var(--border-color);
  88     z-index: 100;
  89     padding-right: 5px;
  90 }
  91
  92 @media (--max-sm); {
  93     .navbar {
  94         position: absolute;
  95     }
  96 }
  97
  98 .navbar a {
  99     margin-top: 2px;
 100     height: 40px;
 101 }
 102
 103 .nlogo {
 104     height: 40px;
 105 }
 106
 107 .tlogo {
 108     height: 40px;
 109     margin-bottom: -9px;
 110     margin-left: -10px;
 111     margin-right: -10px;
 112 }
 113
 114 /* main */
 115 .container {
 116     width: 100%;
 117     min-height: 100vh;
 118     padding-top: 50px;
 119     padding-bottom: 12.5rem;
 120 }
 121
 122 .main {
 123     margin: 2em auto;
 124     padding: 0 .75em;
 125     max-width: var(--max-width);
 126     line-height: 1.8;
 127 }
 128
 129 .main h1,
 130 .main h2,
 131 .main h3,
 132 .main h4,
 133 .main li,
 134 .main pre,
 135 .main p {
 136     margin-top: .7em;
 137 }
 138
 139 .main h1 + p,
 140 .main h2 + p,
 141 .main h3 + p,
 142 .main h3 + p {
 143     margin-top: 0;
 144 }
 145
 146 ul {
 147     padding-left: 2em;
 148     list-style-type: disc;
 149 }
 150
 151 ol {
 152     padding-left: 2em;
 153     list-style-type: decimal;
 154 }
 155
 156 hr {
 157     margin-top: .8em;
 158     margin-bottom: .8em;
 159 }
 160
 161 /* jumbotron */
 162 .jumbotron {
 163     position: relative;
 164     width: 100%;
 165     margin-top: -50px;
 166     background: var(--jumbotron-bg);
 167     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 168     color: var(--jumbotron-text-color);
 169     padding: 4em 0 4em 0;
 170 }
 171
 172 .jindex {
 173     z-index: 99;
 174 }
 175
 176 .jlogo {
 177     display: block;
 178     margin: 25px auto;
 179 }
 180
 181 .jpia {
 182     position: absolute;
 183     height: 40px;
 184     right: 0;
 185     top: 0;
 186     margin: 25px;
 187 }
 188
 189 @media (--max-sm) {
 190     .jlogo {
 191         margin: 2em auto -2em auto;
 192     }
 193     .jumbotron {
 194         padding-bottom: 2em;
 195     }
 196 }
 197
 198 .child {
 199     text-align: center;
 200     margin: .5em auto;
 201     font-size: 32px;
 202     line-height: 48px;
 203     max-width: 75%;
 204 }
 205
 206 .box-container {
 207     display: flex;
 208     flex-wrap: wrap;
 209     justify-content: space-around;
 210     align-items: stretch;
 211     max-width: var(--max-width-box);
 212     margin: 0 auto;
 213 }
 214
 215 .box {
 216     text-align: center;
 217     text-decoration: none;
 218     color: var(--jumbotron-text-color);
 219     margin-bottom: 5px;
 220     flex-basis: 30%;
 221     min-width: 26%;
 222     background-color: var(--box-color);
 223     border-radius: var(--box-round);
 224     padding: 1em;
 225 }
 226
 227 .box:hover,.box:active {
 228     color: var(--jumbotron-text-color);
 229     background-color: var(--box-hover-color);
 230 }
 231
 232 .box span {
 233     position: relative;
 234     top: initial;
 235     font-size: 20px;
 236     font-weight: 600;
 237     line-height: 16px;
 238     display: block;
 239     margin-top: .75em;
 240 }
 241
 242 .fa-users {
 243     margin-top: var(--margin-box-fa);
 244 }
 245
 246 .fa-comments,.fa-question {
 247     margin-bottom: var(--margin-box-fa);
 248 }
 249
 250 .title {
 251     text-align: center;
 252 }
 253
 254 @media (--max-md) {
 255     .box {
 256         text-align: center;
 257     }
 258
 259     .child {
 260         font-size: 20px;
 261         line-height: 30px;
 262         padding: 10px 0 5px;
 263     }
 264
 265     .fa-4x {
 266         padding: 0;
 267         margin: 0;
 268         width: 60px;
 269         text-align: center;
 270         font-size: 28px;
 271     }
 272
 273     .box-container {
 274         flex-direction: column;
 275         margin: 0 .5em;
 276     }
 277
 278     .box span {
 279         font-size: 22px;
 280         line-height: 22px;
 281         padding-left: 8px;
 282         font-weight: bold;
 283         position: relative;
 284         display: inline-block;
 285         text-align: center;
 286         margin-top: 0;
 287     }
 288
 289     .box {
 290         text-align: left;
 291         border-radius: calc(var(--box-round) / 2);
 292         margin: 5px 0;
 293     }
 294 }
 295
 296 /* articles */
 297 h1 {
 298     margin: 0;
 299 }
 300
 301 .art-info {
 302     margin-top: 2.1em;
 303     display: flex;
 304     flex-direction: row;
 305     flex-wrap: wrap;
 306     justify-content: space-between;
 307     align-items: baseline;
 308 }
 309
 310 .art-info h1 {
 311     margin-top: 0;
 312     display: inline;
 313     margin-right: 2em;
 314 }
 315
 316 .art-body {
 317     margin-bottom: 1em;
 318 }
 319
 320 .artlist {
 321     max-width: var(--max-width);
 322     margin: 0 auto;
 323     margin-top: .5em;
 324 }
 325
 326 .artlist.heading {
 327     margin: 8em auto 2em auto;
 328     padding: 0 0.75em;
 329 }
 330
 331 .artlist .art-info:not(:first-child) {
 332     border-top: 1px solid var(--border-color);
 333 }
 334
 335 .art-date {
 336     display: inline-block;
 337     vertical-align: baseline;
 338     line-height: 1;
 339     white-space: nowrap;
 340     color: var(--art-date-color);
 341     font-feature-settings: "tnum";
 342     font-variant-numeric: tabular-nums;
 343 }
 344
 345 .art-nav {
 346     display: flex;
 347     flex-direction: row;
 348     justify-content: space-between;
 349     width: 100%;
 350 }
 351
 352 @media (--max-md) {
 353     .main.artlist {
 354         padding-left: 0;
 355         padding-right: 0;
 356     }
 357
 358     .artlist .art-info {
 359         padding: 0 .75em;
 360     }
 361 }
 362
 363 /* faq */
 364 .kb-index {
 365     list-style-type: none;
 366     padding-left: 0;
 367     display: flex;
 368     flex-direction: row;
 369     flex-wrap: wrap;
 370     justify-content: stretch;
 371 }
 372
 373 .kb-index li {
 374     display: block;
 375     flex: 1 1 15em;
 376     height: 7em;
 377     margin: 1em;
 378 }
 379
 380 .kb-index li h2 {
 381     margin-top: 0;
 382 }
 383
 384 .kb-index a {
 385     display: block;
 386     color: var(--text-color);
 387     width: 100%;
 388     height: 100%;
 389 }
 390 .kb-index a h2 {
 391     color: var(--link-color);
 392 }
 393 .kb-index a:hover h2 {
 394     color: var(--link-hover-color);
 395 }
 396
 397 /* footer */
 398 .footers {
 399     /*min-height: 30vh;*/
 400     margin-top: -12rem;
 401     min-height: 12rem;
 402 }
 403
 404 .footer {
 405     background: var(--jumbotron-bg);
 406     color: var(--footer-text-color);
 407     width: 100%;
 408     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 409     min-height: 10.5rem;
 410     padding: 3em 0;
 411 }
 412
 413 .footer-container {
 414     display: flex;
 415     flex-wrap: wrap;
 416     justify-content: center;
 417     align-items: flex-start;
 418     margin: 0 auto;
 419 }
 420
 421 .footerchild {
 422     margin: 0 2em;
 423     margin-top: .5em;
 424     flex-grow: 1;
 425     flex-shrink: 0;
 426 }
 427
 428 .footerchild:last-child {
 429     margin-bottom: .5em;
 430 }
 431
 432 .footer-push {
 433     margin-left: auto;
 434     width: max-content;
 435 }
 436
 437 footer a {
 438     color: var(--footer-link-color);
 439 }
 440
 441 footer a:hover {
 442     color: var(--footer-hover-color);
 443 }
 444
 445 .footer h2 {
 446     margin-bottom: .1em;
 447     display: inline-block;
 448 }
 449
 450 .footerchild ul, .footerchild ul ul {
 451     padding-left: 0;
 452     margin-left: 10px;
 453     margin-right: 10px;
 454     list-style-type: none;
 455 }
 456
 457 .footerchild ul ul {
 458     padding-left: 30px;
 459 }
 460
 461 @media (--max-sm) {
 462     .footer-container {
 463         flex-direction: column;
 464     }
 465
 466     .footer-push {
 467         margin-left: 0;
 468         width: 100%;
 469     }
 470
 471     .footerchild ul li:last-child {
 472         margin-bottom: .5em;
 473     }
 474
 475     .footer-push ul li:last-child {
 476         margin-bottom: .1em;
 477     }
 478
 479     .hdn {
 480         display: none;
 481     }
 482     .footer {
 483         padding: .5em 0;
 484     }
 485     .footer-push ul {
 486         display: flex;
 487         flex-wrap: wrap;
 488         flex-direction: row;
 489         justify-content: space-between;
 490         align-items: flex-start;
 491         text-align: center;
 492     }
 493     .footer-push ul li {
 494         display: inline-block;
 495         font-size: 12vw;
 496     }
 497     .footer-push ul li img {
 498         height: 12vw;
 499     }
 500 }
 501
 502 .footer h2, .footer h3 {
 503     margin-left: 10px;
 504     margin-right: 10px;
 505 }
 506
 507 footer.copyright {
 508     display: flex;
 509     flex-wrap: wrap;
 510     justify-content: space-between;
 511     background: var(--copyright-bg);
 512     min-height: 1.5rem;
 513     color: var(--copyright-text-color);
 514     padding-left: .5em;
 515     padding-right: .5em;
 516     overflow: hidden;
 517 }
 518
 519 footer.copyright div {
 520     display: flex;
 521     align-items: center;
 522     height: 1.5rem;
 523     line-height: 1.5rem;
 524     vertical-align: top;
 525 }
 526
 527 .copyright * {
 528     margin: 0;
 529     height: 1.5rem;
 530     line-height: 1.5rem;
 531 }
 532
 533 .copyright .fa {
 534     height: 100%;
 535     vertical-align: top;
 536     font-size: 1.4em;
 537 }
 538
 539 .copyright .footer-link {
 540     height: 28px;
 541     margin-right: .5em;
 542 }
 543
 544 .copyright img {
 545     height: 1.5rem;
 546     width: auto;
 547 }