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   --box-round: 10px;
  12 }
  13
  14 /* global */
  15 body {
  16   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  17   color: var(--text-color);
  18 }
  19 a {
  20   color: var(--link-color);
  21   text-decoration: none;
  22 }
  23
  24 /* order */
  25 .jumbotron {
  26   order: 0;
  27 }
  28 .navkinks {
  29   order:1;
  30 }
  31 .main {
  32   order: 2;
  33 }
  34
  35 /* navbar */
  36 .navbar {
  37   width: 100%;
  38   height: 50px;
  39   background-color: var(--navbar-bg);
  40   position: fixed;
  41   left: 0;
  42   right: 0;
  43   top: 0;
  44   display: flex;
  45   flex-wrap: nowrap;
  46   justify-content: space-between;
  47   align-items: center;
  48   border-bottom: 1px solid rgba(var(--border-color),.3);
  49   z-index: 100;
  50 }
  51 .nlogo {
  52   height: 40px;
  53 }
  54 .navlinks {
  55   display: flex;
  56   justify-content: space-around;
  57   fkex-wrap: nowrap;
  58 }
  59 .nlink {
  60   text-decoration: none;
  61   color: var(--nlink-col);
  62 }
  63
  64 /* main */
  65 .container {
  66   margin-top: 51px;
  67   margin-left: 0;
  68   margin-right: 0;
  69   margin-bottom: 0;
  70   padding: 0;
  71   width: 100%;
  72   margin-left: 0;
  73   margin-right: 0;
  74   display: flex;
  75   flex-direction: column;
  76   fkex-wrap: wrap;
  77   justify-content: space-between;
  78 }
  79
  80 /* jumbotron */
  81 .jumbotron {
  82   background: var(--jumbotron-bg);
  83   width: 100%;
  84   flex-basis: 100%;
  85   -webkit-border-bottom-right-radius: var(--box-round);
  86   -webkit-border-bottom-left-radius: var(--box-round);
  87   -moz-border-radius-bottomright: var(--box-round);
  88   -moz-border-radius-bottomleft: var(--box-round);
  89   border-bottom-right-radius: var(--box-round);
  90   border-bottom-left-radius: var(--box-round);
  91 }
  92 .child {
  93   text-align: center;
  94 }
  95 .box-container {
  96   display: flex;
  97   flex-wrap: wrap;
  98   justify-content: space-around;
  99   align-items: center;
 100 }
 101 .box {
 102   text-align: center;
 103   text-decoration: none;
 104   color: var(--text-color);
 105   margin-bottom: 5px;
 106   border: 1px solid rgb(var(--border-color));
 107   flex-basis: 30%;
 108   height: 105px;
 109   background-color: #fff;
 110   border-radius: var(--box-round);
 111   -webkit-border-radius: var(--box-round);
 112   -moz-border-radius: var(--box-round);
 113 }
 114 .box:hover,
 115 .box:active {
 116   background-color: var(--box-hover-color);
 117 }
 118 .box-center {
 119   margin-top: 22.5px;
 120   margin-left: 5px;
 121   margin-right: 5px;
 122 }
 123 .title {
 124   text-align: center;
 125 }
 126
 127 /* articles feed */
 128 h1 {
 129   margin: 0;
 130 }
 131 div.art {
 132   border-bottom: 1px solid rgba(var(--border-color),.3);
 133 }
 134 div.art:last-child {
 135   border-bottom: none;
 136 }
 137 h3.art {
 138   margin-bottom: 0;
 139 }
 140 p.art {
 141   margin: 0;
 142 }
 143 p.art-ingress {
 144   font-style: italic;
 145   margin: 0;
 146 }
 147 p.art-date {
 148   color: #ccc;
 149   margin: 0;
 150 }
 151 p.art-link {
 152   margin-top: 0;
 153 }
 154
 155 /* help */
 156 .hmain {
 157   display: flex;
 158   flex-wrap: wrap;
 159   justify-content: space-around;
 160 }
 161 a.hchild {
 162   color: var(--text-color);
 163   height: 40px;
 164   width: 95%;
 165   text-align: center;
 166   border-top: 1px solid rgba(var(--border-color),.6);
 167   border-left: 1px solid rgba(var(--border-color),.6);
 168   border-right: 1px solid rgba(var(--border-color),.6);
 169 }
 170 a.hchild:hover,
 171 a.hchild:active {
 172   background-color: var(--box-hover-color);
 173 }
 174 .hchild:first-child {
 175   margin-top: 10px;
 176   -webkit-border-top-left-radius: var(--box-round);
 177   -webkit-border-top-right-radius: var(--box-round);
 178   -moz-border-radius-topleft: var(--box-round);
 179   -moz-border-radius-topright: var(--box-round);
 180   border-top-left-radius: var(--box-round);
 181   border-top-right-radius: var(--box-round);
 182 }
 183 .hchild:last-child {
 184   margin-bottom: 10px;
 185   border-bottom: 1px solid rgba(var(--border-color),.6);
 186   -webkit-border-bottom-right-radius: var(--box-round);
 187   -webkit-border-bottom-left-radius: var(--box-round);
 188   -moz-border-radius-bottomright: var(--box-round);
 189   -moz-border-radius-bottomleft: var(--box-round);
 190   border-bottom-right-radius: var(--box-round);
 191   border-bottom-left-radius: var(--box-round);
 192 }
 193
 194 /* footer */
 195 .footer {
 196   background: var(--footer-bg);
 197   width: device-width;
 198   margin: 0;
 199   padding: 0;
 200   display: flex;
 201   flex-wrap: wrap;
 202   justify-content: space-between;
 203   align-items: flex-start;
 204 /*  -webkit-border-top-left-radius: var(--box-round);
 205   -webkit-border-top-right-radius: var(--box-round);
 206   -moz-border-radius-topleft: var(--box-round);
 207   -moz-border-radius-topright: var(--box-round);
 208   border-top-left-radius: var(--box-round);
 209   border-top-right-radius: var(--box-round);*/
 210 }
 211 .footer .footerchild p {
 212   margin: 0;
 213 }
 214 .footerline {
 215   border-right: 1px solid #000;
 216   height: 100%;
 217 }