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   margin: 0;
 101   background: #000;
 102   background: rgb(238,238,238);
 103   box-shadow: 0 3px 5px rgba(150,150,150,.36);
 104   color: #333;
 105 }
 106
 107 .child {
 108   text-align: center;
 109   margin: .5em;
 110 }
 111
 112 .box-container {
 113   display: -webkit-box;
 114   display: -webkit-flex;
 115   display: -ms-flexbox;
 116   display: flex;
 117   -webkit-flex-wrap: wrap;
 118   -ms-flex-wrap: wrap;
 119   flex-wrap: wrap;
 120   -webkit-justify-content: space-around;
 121   -ms-flex-pack: distribute;
 122   justify-content: space-around;
 123   -webkit-box-align: stretch;
 124   -webkit-align-items: stretch;
 125   -ms-flex-align: stretch;
 126   align-items: stretch;
 127 }
 128
 129 .box {
 130   text-align: center;
 131   text-decoration: none;
 132   color: #333;
 133   margin-bottom: 5px;
 134   -webkit-flex-basis: 30%;
 135   -ms-flex-preferred-size: 30%;
 136   flex-basis: 30%;
 137   background-color: #fff;
 138   border-radius: 10px;
 139   -webkit-border-radius: 10px;
 140   -moz-border-radius: 10px;
 141 }
 142
 143 .box:hover,
 144 .box:active {
 145   background-color: #eee;
 146 }
 147
 148 .fa-users {
 149   margin-top: 5px;
 150 }
 151
 152 .fa-comment,
 153 .fa-question {
 154   margin-bottom: 5px;
 155 }
 156
 157 .title {
 158   text-align: center;
 159 }
 160
 161 /* articles feed */
 162
 163 h1 {
 164   margin: 0;
 165 }
 166
 167 div.art {
 168   border-bottom: 1px solid rgba(0,0,0,.3);
 169 }
 170
 171 div.art:last-child {
 172   border-bottom: none;
 173 }
 174
 175 b.art {
 176   margin-bottom: 0;
 177   font-size: 18px;
 178 }
 179
 180 p.art {
 181   margin: 0;
 182 }
 183
 184 p.art-ingress {
 185   font-style: italic;
 186   margin: 0;
 187 }
 188
 189 .art-date {
 190   color: #ccc;
 191   margin: 0;
 192 }
 193
 194 p.heading {
 195   white-space: nowrap;
 196 }
 197
 198 p.art-link {
 199   margin-top: 0;
 200 }
 201
 202 /* help */
 203
 204 .hmain {
 205   display: -webkit-box;
 206   display: -webkit-flex;
 207   display: -ms-flexbox;
 208   display: flex;
 209   -webkit-flex-wrap: wrap;
 210   -ms-flex-wrap: wrap;
 211   flex-wrap: wrap;
 212   -webkit-justify-content: space-around;
 213   -ms-flex-pack: distribute;
 214   justify-content: space-around;
 215   -webkit-box-align: stretch;
 216   -webkit-align-items: stretch;
 217   -ms-flex-align: stretch;
 218   align-items: stretch;
 219 }
 220
 221 a.hchild {
 222   color: #333;
 223   /*height: 40px;*/
 224   width: 95%;
 225   text-align: center;
 226   border-top: 1px solid rgba(0,0,0,.6);
 227   border-left: 1px solid rgba(0,0,0,.6);
 228   border-right: 1px solid rgba(0,0,0,.6);
 229 }
 230
 231 a.hchild:hover,
 232 a.hchild:active {
 233   background-color: #eee;
 234 }
 235
 236 .hchild:first-child {
 237   margin-top: 10px;
 238   -webkit-border-top-left-radius: 10px;
 239   -webkit-border-top-right-radius: 10px;
 240   -moz-border-radius-topleft: 10px;
 241   -moz-border-radius-topright: 10px;
 242   border-top-left-radius: 10px;
 243   border-top-right-radius: 10px;
 244 }
 245
 246 .hchild:last-child {
 247   margin-bottom: 10px;
 248   border-bottom: 1px solid rgba(0,0,0,.6);
 249   -webkit-border-bottom-right-radius: 10px;
 250   -webkit-border-bottom-left-radius: 10px;
 251   -moz-border-radius-bottomright: 10px;
 252   -moz-border-radius-bottomleft: 10px;
 253   border-bottom-right-radius: 10px;
 254   border-bottom-left-radius: 10px;
 255 }
 256
 257 /* footer */
 258
 259 .footer {
 260   background: rgb(238,238,238);
 261   color: rgba(51,51,51,.9);
 262   margin-top: 1em;
 263   display: -webkit-box;
 264   display: -webkit-flex;
 265   display: -ms-flexbox;
 266   display: flex;
 267   -webkit-flex-wrap: nowrap;
 268   -ms-flex-wrap: nowrap;
 269   flex-wrap: nowrap;
 270   -webkit-box-pack: justify;
 271   -webkit-justify-content: space-between;
 272   -ms-flex-pack: justify;
 273   justify-content: space-between;
 274   -webkit-box-align: start;
 275   -webkit-align-items: flex-start;
 276   -ms-flex-align: start;
 277   align-items: flex-start;
 278   box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 279 }
 280
 281 .footerchild {
 282   margin-top: .5em;
 283 }
 284
 285 .footer a {
 286   color: #000;
 287 }
 288
 289 .footerchild ul,
 290 .footerchild ul ul {
 291   margin-left: 10px;
 292   margin-right: 10px;
 293   list-style-type: none;
 294 }
 295
 296 .footerchild ul ul {
 297   padding-left: 30px;
 298 }
 299
 300 @media all and (max-width: 500px) {
 301   .footer {
 302     -webkit-box-orient: vertical;
 303     -webkit-box-direction: normal;
 304     -webkit-flex-direction: column;
 305     -ms-flex-direction: column;
 306     flex-direction: column;
 307   }
 308
 309   .footerchild {
 310     width: 100%;
 311     border-bottom: 1px solid rgba(51,51,51,.5);
 312   }
 313
 314   .footerchild:last-child {
 315     border: none;
 316   }
 317
 318   .footerchild ul li:last-child {
 319     margin-bottom: .5em;
 320   }
 321
 322   .hdn {
 323     display: none;
 324   }
 325 }
 326
 327 .footer h2,
 328 .footer h3 {
 329   margin-left: 10px;
 330   margin-right: 10px;
 331 }
 332
 333 .copyright {
 334   display: -webkit-box;
 335   display: -webkit-flex;
 336   display: -ms-flexbox;
 337   display: flex;
 338   -webkit-flex-wrap: nowrap;
 339   -ms-flex-wrap: nowrap;
 340   flex-wrap: nowrap;
 341   -webkit-box-pack: justify;
 342   -webkit-justify-content: space-between;
 343   -ms-flex-pack: justify;
 344   justify-content: space-between;
 345   -webkit-box-align: center;
 346   -webkit-align-items: center;
 347   -ms-flex-align: center;
 348   align-items: center;
 349   background: rgba(170,178,171,.5);
 350   height: 31px;
 351   color: rgba(0,0,0,.8);
 352 }
 353
 354 a.copyright {
 355   background: rgba(170,178,171,.5);
 356   margin-bottom: 0;
 357   margin-top: 0;
 358   margin-left: .5em;
 359   margin-right: .5em;
 360 }