static/css/style.css

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