static/css/style.css

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