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