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 h3.art {
 176   margin-bottom: 0;
 177 }
 178
 179 p.art {
 180   margin: 0;
 181 }
 182
 183 p.art-ingress {
 184   font-style: italic;
 185   margin: 0;
 186 }
 187
 188 .art-date {
 189   color: #ccc;
 190   margin: 0;
 191 }
 192
 193 p.art-link {
 194   margin-top: 0;
 195 }
 196
 197 /* help */
 198
 199 .hmain {
 200   display: -webkit-box;
 201   display: -webkit-flex;
 202   display: -ms-flexbox;
 203   display: flex;
 204   -webkit-flex-wrap: wrap;
 205   -ms-flex-wrap: wrap;
 206   flex-wrap: wrap;
 207   -webkit-justify-content: space-around;
 208   -ms-flex-pack: distribute;
 209   justify-content: space-around;
 210   -webkit-box-align: stretch;
 211   -webkit-align-items: stretch;
 212   -ms-flex-align: stretch;
 213   align-items: stretch;
 214 }
 215
 216 a.hchild {
 217   color: #333;
 218   /*height: 40px;*/
 219   width: 95%;
 220   text-align: center;
 221   border-top: 1px solid rgba(0,0,0,.6);
 222   border-left: 1px solid rgba(0,0,0,.6);
 223   border-right: 1px solid rgba(0,0,0,.6);
 224 }
 225
 226 a.hchild:hover,
 227 a.hchild:active {
 228   background-color: #eee;
 229 }
 230
 231 .hchild:first-child {
 232   margin-top: 10px;
 233   -webkit-border-top-left-radius: 10px;
 234   -webkit-border-top-right-radius: 10px;
 235   -moz-border-radius-topleft: 10px;
 236   -moz-border-radius-topright: 10px;
 237   border-top-left-radius: 10px;
 238   border-top-right-radius: 10px;
 239 }
 240
 241 .hchild:last-child {
 242   margin-bottom: 10px;
 243   border-bottom: 1px solid rgba(0,0,0,.6);
 244   -webkit-border-bottom-right-radius: 10px;
 245   -webkit-border-bottom-left-radius: 10px;
 246   -moz-border-radius-bottomright: 10px;
 247   -moz-border-radius-bottomleft: 10px;
 248   border-bottom-right-radius: 10px;
 249   border-bottom-left-radius: 10px;
 250 }
 251
 252 /* footer */
 253
 254 .footer {
 255   background: rgb(238,238,238);
 256   color: rgba(51,51,51,.9);
 257   margin-top: 1em;
 258   display: -webkit-box;
 259   display: -webkit-flex;
 260   display: -ms-flexbox;
 261   display: flex;
 262   -webkit-flex-wrap: nowrap;
 263   -ms-flex-wrap: nowrap;
 264   flex-wrap: nowrap;
 265   -webkit-box-pack: justify;
 266   -webkit-justify-content: space-between;
 267   -ms-flex-pack: justify;
 268   justify-content: space-between;
 269   -webkit-box-align: start;
 270   -webkit-align-items: flex-start;
 271   -ms-flex-align: start;
 272   align-items: flex-start;
 273   box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 274 }
 275
 276 .footerchild {
 277   margin-top: .5em;
 278 }
 279
 280 .footer a {
 281   color: #000;
 282 }
 283
 284 .footerchild ul,
 285 .footerchild ul ul {
 286   margin-left: 10px;
 287   margin-right: 10px;
 288   list-style-type: none;
 289 }
 290
 291 .footerchild ul ul {
 292   padding-left: 30px;
 293 }
 294
 295 @media all and (max-width: 500px) {
 296   .footer {
 297     -webkit-box-orient: vertical;
 298     -webkit-box-direction: normal;
 299     -webkit-flex-direction: column;
 300     -ms-flex-direction: column;
 301     flex-direction: column;
 302   }
 303
 304   .footerchild {
 305     width: 100%;
 306     border-bottom: 1px solid rgba(51,51,51,.5);
 307   }
 308
 309   .footerchild:last-child {
 310     border: none;
 311   }
 312
 313   .footerchild ul li:last-child {
 314     margin-bottom: .5em;
 315   }
 316
 317   .hdn {
 318     display: none;
 319   }
 320 }
 321
 322 .footer h2,
 323 .footer h3 {
 324   margin-left: 10px;
 325   margin-right: 10px;
 326 }
 327
 328 .copyright {
 329   display: -webkit-box;
 330   display: -webkit-flex;
 331   display: -ms-flexbox;
 332   display: flex;
 333   -webkit-flex-wrap: nowrap;
 334   -ms-flex-wrap: nowrap;
 335   flex-wrap: nowrap;
 336   -webkit-box-pack: justify;
 337   -webkit-justify-content: space-between;
 338   -ms-flex-pack: justify;
 339   justify-content: space-between;
 340   -webkit-box-align: center;
 341   -webkit-align-items: center;
 342   -ms-flex-align: center;
 343   align-items: center;
 344   background: rgba(170,178,171,.5);
 345   height: 31px;
 346   color: rgba(0,0,0,.8);
 347 }
 348
 349 a.copyright {
 350   background: rgba(170,178,171,.5);
 351   margin-bottom: 0;
 352   margin-top: 0;
 353   margin-left: .5em;
 354   margin-right: .5em;
 355 }