static/css/style.css

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