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