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