css/mock1.css

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