css/style.css

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