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