css/mock1.css

   1 body {
   2   font-family: Arial, Helvetica, sans-serif;
   3 }
   4
   5 /* navbar */
   6 .navbar {
   7   width: 100%;
   8   height: 50px;
   9   background-color: white;
  10   position: fixed;
  11   left: 0;
  12   right: 0;
  13   top: 0;
  14   display: flex;
  15   flex-wrap: nowrap;
  16   justify-content: space-between;
  17   align-items: center;
  18   border-bottom: 1px solid #ccc;
  19   z-index: 100;
  20 }
  21 .nlogo {
  22   height: 40px;
  23 }
  24 .nlink {
  25   text-decoration: none;
  26   color: black;
  27 }
  28
  29 /* main */
  30 .container {
  31   margin-top: 51px;
  32   margin-left: 0;
  33   margin-right: 0;
  34   margin-bottom: 0;
  35   padding: 0;
  36   width: 100%;
  37   margin-left: 0;
  38   margin-right: 0;
  39   position: relative;
  40 }
  41
  42 /* jumbotron */
  43 .jumbotron {
  44   background: rgba(75,235,74,.4);
  45   width: 100%;
  46 }
  47 .child {
  48   text-align: center;
  49 }
  50 .box-container {
  51   display: flex;
  52   flex-wrap: wrap;
  53   justify-content: space-around;
  54   align-items: center;
  55 }
  56 .box {
  57   text-align: center;
  58   text-decoration: none;
  59   color: black;
  60   margin-bottom: 5px;
  61   border: 1px solid #000;
  62   flex-basis: 30%;
  63   height: 120px;
  64   background-color: #fff;
  65 }
  66 .box:hover, .box:active {
  67   background-color: #eee;
  68 }
  69 .title {
  70   text-align: center;
  71 }
  72
  73 /* articles feed */
  74 div.art {
  75   border-bottom: 1px solid #eee;
  76 }
  77 div.art:last-child {
  78   border-bottom: none;
  79 }
  80 h3.art {
  81   margin: 0;
  82 }
  83 p.art {
  84   margin: 0;
  85 }
  86 p.art-ingress {
  87   font-style: italic;
  88   margin: 0;
  89 }
  90 p.art-date {
  91   color: #ccc;
  92   margin-top: 0;
  93 }
  94 a {
  95   color: #0645AD;
  96   text-decoration: none;
  97 }
  98 p.art-link {
  99   margin-top: 0;
 100 }
 101
 102 /* footer */
 103 .footer {
 104   background: #eee;
 105   width: 100%;
 106   margin: 0;
 107   padding: 0;
 108   display: flex;
 109   flex-wrap: wrap;
 110   justify-content: space-between;
 111   align-items: center;
 112 }
 113 .footerline {
 114   border-right: 1px solid #000;
 115   height: 100%;
 116 }