static/css/style.css

   1 /* vars */
   2 :root {
   3     --navbar-bg: #292f2f;
   4     --jumbotron-bg: #3a4346;
   5     --copyright-bg: #292f2f;
   6     --link-color: #2fa6bc;
   7     --footer-link-color: #ecf7fa;
   8     --nlink-col: #000;
   9     --text-color: #292f2f;
  10     --footer-text-color: #ecf7fa;
  11     --copyright-text-color: #ecf7fa;
  12     --jumbotron-text-color: #ecf7fa;
  13     --border-color: #292f2f;
  14     --box-color: #4c5456;
  15     --box-hover-color: #292f2f;
  16     --box-round: 10px;
  17     --max-width: 600px;
  18 }
  19
  20 /* reset css for browser compat */
  21 * {
  22     margin: 0;
  23     padding: 0;
  24     box-sizing: border-box;
  25 }
  26
  27 /* global */
  28 body {
  29     font-family: 'Open Sans';
  30     font-feature-settings: "lnum";
  31     font-variant-numeric: lining-nums;
  32     color: var(--text-color);
  33     font-size: 14px;
  34     min-height: 100vh;
  35     height: auto;
  36 }
  37
  38 a {
  39     color: var(--link-color);
  40     text-decoration: none;
  41 }
  42
  43 /* navbar */
  44 .navbar {
  45     width: 100%;
  46     height: 50px;
  47     background-color: var(--navbar-bg);
  48     box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  49     position: fixed;
  50     left: 0;
  51     right: 0;
  52     top: 0;
  53     display: flex;
  54     flex-wrap: nowrap;
  55     justify-content: space-between;
  56     align-items: center;
  57     border-bottom: 1px solid var(--border-color);
  58     z-index: 100;
  59     padding-right: 5px;
  60 }
  61 [class*='fn-'] {
  62     margin-top: auto;
  63     margin-bottom: auto;
  64     font-size: 30px;
  65     color: #E6E6E6;
  66     text-shadow: .5px .5px #000;
  67 }
  68 .green {
  69     color: #4BEB4A;
  70 }
  71
  72 @media all and (max-width: 600px) {
  73     .navbar {
  74         position: absolute;
  75     }
  76 }
  77
  78 .navbar a {
  79     margin-top: 2px;
  80     height: 40px;
  81 }
  82
  83 .nlogo {
  84     height: 40px;
  85 }
  86
  87 .navlinks {
  88     display: flex;
  89     justify-content: space-around;
  90     flex-wrap: nowrap;
  91 }
  92
  93 .nlink {
  94     text-decoration: none;
  95     color: var(--nlink-col);
  96 }
  97
  98 /* main */
  99 .container {
 100     width: 100%;
 101     min-height: 98vh;
 102     padding-top: 50px;
 103     padding-bottom: 11.5rem;
 104 }
 105
 106 .main {
 107     margin: 0 auto;
 108     margin-top: .75em;
 109     padding: 0 .75em;
 110     max-width: var(--max-width);
 111     line-height: 1.4;
 112 }
 113
 114 .main h1,
 115 .main h2,
 116 .main h3,
 117 .main h4,
 118 .main li,
 119 .main pre,
 120 .main p {
 121     margin-top: .7em;
 122 }
 123
 124 .main h1 + p,
 125 .main h2 + p,
 126 .main h3 + p,
 127 .main h3 + p {
 128     margin-top: 0;
 129 }
 130
 131 ul {
 132     padding-left: 2em;
 133     list-style-type: disc;
 134 }
 135
 136 hr {
 137     margin-top: .8em;
 138     margin-bottom: .8em;
 139 }
 140
 141 /* jumbotron */
 142 .jumbotron {
 143     position: relative;
 144     width: 100%;
 145     margin-top: -16px;
 146     background: var(--jumbotron-bg);
 147     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 148     color: var(--jumbotron-text-color);
 149     padding: 2em 0;
 150 }
 151
 152 .child {
 153     text-align: center;
 154     margin: .5em auto;
 155     font-size: 32px;
 156     line-height: 48px;
 157     max-width: 75%;
 158 }
 159
 160 .box-container {
 161     display: flex;
 162     flex-wrap: wrap;
 163     justify-content: space-around;
 164     align-items: stretch;
 165     max-width: 800px;
 166     margin: 0 auto;
 167 }
 168
 169 .box {
 170     text-align: center;
 171     text-decoration: none;
 172     color: var(--jumbotron-text-color);
 173     margin-bottom: 5px;
 174     flex-basis: 30%;
 175     min-width: 26%;
 176     background-color: var(--box-color);
 177     border-radius: var(--box-round);
 178     padding: 1em;
 179 }
 180
 181 .box:hover,.box:active {
 182     background-color: var(--box-hover-color);
 183 }
 184
 185 .box div{
 186     position: relative;
 187     top: initial;
 188     font-size: 20px;
 189     font-weight: 600;
 190     line-height: 16px;
 191     display: block;
 192     margin-top: .75em;
 193 }
 194
 195 .fa-users {
 196     margin-top: 5px;
 197 }
 198
 199 .fa-comment,.fa-question {
 200     margin-bottom: 5px;
 201 }
 202
 203 .title {
 204     text-align: center;
 205 }
 206
 207 /* articles */
 208 h1 {
 209     margin: 0;
 210 }
 211
 212 .art-info {
 213     line-height: 1.6;
 214     display: flex;
 215     flex-direction: row;
 216     flex-wrap: wrap;
 217     justify-content: space-between;
 218     align-items: baseline;
 219 }
 220
 221 .art-info h1 {
 222     margin-top: 0;
 223     display: inline;
 224 }
 225
 226 .art-body {
 227     margin-bottom: 1em;
 228 }
 229
 230 .artlist {
 231     max-width: var(--max-width);
 232     margin: 0 auto;
 233     margin-top: .5em;
 234 }
 235
 236 .artlist .art-info:not(:first-child) {
 237     border-top: 1px solid var(--border-color);
 238 }
 239
 240 .art-date {
 241     display: inline-block;
 242     text-align: baseline;
 243     line-height: 1;
 244     white-space: nowrap;
 245     color: #bdbcbc;
 246     font-feature-settings: "tnum";
 247     font-variant-numeric: tabular-nums;
 248 }
 249
 250 .art-nav {
 251     display: flex;
 252     flex-direction: row;
 253     justify-content: space-between;
 254     width: 100%;
 255 }
 256
 257 @media all and (max-width: 600px) {
 258     .main.artlist {
 259         padding-left: 0;
 260         padding-right: 0;
 261     }
 262
 263     .artlist .art-info {
 264         padding: 0 .75em;
 265     }
 266 }
 267
 268 /* help */
 269 .hmain {
 270     display: flex;
 271     flex-wrap: wrap;
 272     justify-content: space-around;
 273     align-items: stretch;
 274 }
 275
 276 a.hchild {
 277     color: var(--text-color);
 278 /*height: 40px;*/
 279     width: 95%;
 280     text-align: center;
 281     border-top: 1px solid var(--border-color);
 282     border-left: 1px solid var(--border-color);
 283     border-right: 1px solid var(--border-color);
 284 }
 285
 286 a.hchild:hover,a.hchild:active {
 287     background-color: var(--box-hover-color);
 288 }
 289
 290 .hchild:first-child {
 291     margin-top: 10px;
 292     -webkit-border-top-left-radius: var(--box-round);
 293     -webkit-border-top-right-radius: var(--box-round);
 294     -moz-border-radius-topleft: var(--box-round);
 295     -moz-border-radius-topright: var(--box-round);
 296     border-top-left-radius: var(--box-round);
 297     border-top-right-radius: var(--box-round);
 298 }
 299
 300 .hchild:last-child {
 301     margin-bottom: 10px;
 302     border-bottom: 1px solid var(--border-color);
 303     -webkit-border-bottom-right-radius: var(--box-round);
 304     -webkit-border-bottom-left-radius: var(--box-round);
 305     -moz-border-radius-bottomright: var(--box-round);
 306     -moz-border-radius-bottomleft: var(--box-round);
 307     border-bottom-right-radius: var(--box-round);
 308     border-bottom-left-radius: var(--box-round);
 309 }
 310
 311 /* faq */
 312 .faq-index {
 313     list-style-type: none;
 314     padding-left: 0;
 315 }
 316
 317 .faq-index li {
 318     font-size: 120%;
 319 }
 320
 321 /* footer */
 322 .footers {
 323     /*min-height: 30vh;*/
 324     margin-top: -11rem;
 325     min-height: 11rem;
 326 }
 327
 328 .footer {
 329     background: var(--jumbotron-bg);
 330     color: var(--footer-text-color);
 331     width: 100%;
 332     margin-top: 2vh;
 333     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 334     min-height: 9.5rem;
 335 }
 336
 337 .footer-container {
 338     display: flex;
 339     flex-wrap: wrap;
 340     justify-content: space-between;
 341     align-items: flex-start;
 342     margin: 0 auto;
 343 }
 344
 345 .footerchild {
 346     margin: 0 2em;
 347     margin-top: .5em;
 348 }
 349
 350 .footerchild:last-child {
 351     margin-bottom: 1em;
 352 }
 353
 354 @media all and (max-width: 60rem) {
 355     .footer-push {
 356         margin-left: auto;
 357         width: max-content;
 358     }
 359 }
 360
 361 footer a {
 362     color: var(--footer-link-color);
 363 }
 364
 365 footer a:hover {
 366     color: #fff;
 367 }
 368
 369 .footer h2 {
 370     margin-bottom: .1em;
 371     display: inline-block;
 372 }
 373
 374 .footerchild ul, .footerchild ul ul {
 375     padding-left: 0;
 376     margin-left: 10px;
 377     margin-right: 10px;
 378     list-style-type: none;
 379 }
 380
 381 .footerchild ul ul {
 382     padding-left: 30px;
 383 }
 384
 385 @media all and (max-width: 600px) {
 386     .footer {
 387         flex-direction: column;
 388     }
 389
 390     .footerchild {
 391         width: 100%;
 392     }
 393
 394     .footer-push {
 395         margin-left: 0;
 396     }
 397
 398     .footerchild ul li:last-child {
 399         margin-bottom: .5em;
 400     }
 401
 402     .hdn {
 403         display: none;
 404     }
 405
 406     .box {
 407         text-align: center;
 408     }
 409
 410     .child {
 411         font-size: 20px;
 412         line-height: 30px;
 413         padding: 10px 0 5px;
 414     }
 415
 416     .fa-4x {
 417         padding: 0;
 418         margin: 0;
 419         width: 60px;
 420         text-align: center;
 421         font-size: 28px;
 422     }
 423
 424     .box-container {
 425         flex-direction: column;
 426         margin: 0 .5em;
 427     }
 428
 429     .box div {
 430         font-size: 22px;
 431         line-height: 22px;
 432         padding-left: 8px;
 433         font-weight: 700;
 434         position: relative;
 435         display: inline;
 436         text-align: center;
 437
 438     }
 439
 440     .box {
 441         text-align: left;
 442         border-radius: calc(var(--box-round) / 2);
 443         margin: 5px 0;
 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 }
 481
 482 .copyright .footer-link {
 483     height: 28px;
 484     margin-right: .5em;
 485 }
 486
 487 .copyright img {
 488     height: 1.5rem;
 489     width: auto;
 490 }