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