css/mock1.css

   1 /* vars */
   2 :root {
   3   --navbar-bg: white;
   4   --jumbotron-bg: 15,75,14;
   5   --jumbotron-bg-fall: 65,225,64;
   6   --footer-bg: 36,62,22;
   7   --copyright-bg: 0,0,0;
   8   --link-color: 66,139,202;
   9   --nlink-col: black;
  10   --text-color: #333;
  11   --footer-text-color: 255,255,255;
  12   --border-color: 0,0,0;
  13   --footer-border-color: 255,255,255;
  14   --box-hover-color: #eee;
  15   --box-round: 10px;
  16 }
  17
  18 /* reset css for browser compat */
  19 * {
  20     margin: 0;
  21     padding: 0;
  22     box-sizing: border-box;
  23 }
  24
  25 /* global */
  26 body {
  27   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  28   color: var(--text-color);
  29 }
  30 a {
  31   color: rgb(var(--link-color));
  32   text-decoration: none;
  33 }
  34
  35 /* order */
  36 .jumbotron {
  37   order: 0;
  38 }
  39 .navkinks {
  40   order:1;
  41 }
  42 .main {
  43   order: 2;
  44 }
  45
  46 /* navbar */
  47 .navbar {
  48   width: 100%;
  49   height: 50px;
  50   background-color: var(--navbar-bg);
  51   position: fixed;
  52   left: 0;
  53   right: 0;
  54   top: 0;
  55   display: flex;
  56   flex-wrap: nowrap;
  57   justify-content: space-between;
  58   align-items: center;
  59   border-bottom: 1px solid rgba(var(--border-color),.3);
  60   z-index: 100;
  61 }
  62 .nlogo {
  63   height: 40px;
  64 }
  65 .navlinks {
  66   display: flex;
  67   justify-content: space-around;
  68   fkex-wrap: nowrap;
  69 }
  70 .nlink {
  71   text-decoration: none;
  72   color: var(--nlink-col);
  73 }
  74
  75 /* main */
  76 .container {
  77   margin: 50px 0 0 0;
  78   padding: 0;
  79   width: 100%;
  80   margin-left: 0;
  81   margin-right: 0;
  82   display: flex;
  83   flex-direction: column;
  84   fkex-wrap: wrap;
  85   justify-content: space-between;
  86   min-height: 100%;
  87 }
  88
  89 /* jumbotron */
  90 .jumbotron {
  91   position: relative;
  92   border-bottom: 1px solid #888;
  93   width: 100%;
  94   background: rgb(var(--jumotron-bg-fall));
  95   background: rgba(var(--jumbotron-bg),.6);
  96   box-shadow: 0 3px 5px rgba(0,0,0, 0.36);
  97   color: white;
  98   flex-basis: 100%;
  99   -webkit-border-bottom-right-radius: var(--box-round);
 100   -webkit-border-bottom-left-radius: var(--box-round);
 101   -moz-border-radius-bottomright: var(--box-round);
 102   -moz-border-radius-bottomleft: var(--box-round);
 103   border-bottom-right-radius: var(--box-round);
 104   border-bottom-left-radius: var(--box-round);
 105 }
 106 .child {
 107   text-align: center;
 108 }
 109 .box-container {
 110   display: flex;
 111   flex-wrap: wrap;
 112   justify-content: space-around;
 113   align-items: center;
 114 }
 115 .box {
 116   text-align: center;
 117   text-decoration: none;
 118   color: var(--text-color);
 119   margin-bottom: 5px;
 120   border: 1px solid rgb(var(--border-color));
 121   flex-basis: 30%;
 122   height: 105px;
 123   background-color: #fff;
 124   border-radius: var(--box-round);
 125   -webkit-border-radius: var(--box-round);
 126   -moz-border-radius: var(--box-round);
 127 }
 128 .box:hover,
 129 .box:active {
 130   background-color: var(--box-hover-color);
 131 }
 132 .box-center {
 133   margin-top: 22.5px;
 134   margin-left: 5px;
 135   margin-right: 5px;
 136 }
 137 .title {
 138   text-align: center;
 139 }
 140
 141 /* articles feed */
 142 h1 {
 143   margin: 0;
 144 }
 145 div.art {
 146   border-bottom: 1px solid rgba(var(--border-color),.3);
 147 }
 148 div.art:last-child {
 149   border-bottom: none;
 150 }
 151 h3.art {
 152   margin-bottom: 0;
 153 }
 154 p.art {
 155   margin: 0;
 156 }
 157 p.art-ingress {
 158   font-style: italic;
 159   margin: 0;
 160 }
 161 p.art-date {
 162   color: #ccc;
 163   margin: 0;
 164 }
 165 p.art-link {
 166   margin-top: 0;
 167 }
 168
 169 /* help */
 170 .hmain {
 171   display: flex;
 172   flex-wrap: wrap;
 173   justify-content: space-around;
 174 }
 175 a.hchild {
 176   color: var(--text-color);
 177   height: 40px;
 178   width: 95%;
 179   text-align: center;
 180   border-top: 1px solid rgba(var(--border-color),.6);
 181   border-left: 1px solid rgba(var(--border-color),.6);
 182   border-right: 1px solid rgba(var(--border-color),.6);
 183 }
 184 a.hchild:hover,
 185 a.hchild:active {
 186   background-color: var(--box-hover-color);
 187 }
 188 .hchild:first-child {
 189   margin-top: 10px;
 190   -webkit-border-top-left-radius: var(--box-round);
 191   -webkit-border-top-right-radius: var(--box-round);
 192   -moz-border-radius-topleft: var(--box-round);
 193   -moz-border-radius-topright: var(--box-round);
 194   border-top-left-radius: var(--box-round);
 195   border-top-right-radius: var(--box-round);
 196 }
 197 .hchild:last-child {
 198   margin-bottom: 10px;
 199   border-bottom: 1px solid rgba(var(--border-color),.6);
 200   -webkit-border-bottom-right-radius: var(--box-round);
 201   -webkit-border-bottom-left-radius: var(--box-round);
 202   -moz-border-radius-bottomright: var(--box-round);
 203   -moz-border-radius-bottomleft: var(--box-round);
 204   border-bottom-right-radius: var(--box-round);
 205   border-bottom-left-radius: var(--box-round);
 206 }
 207
 208 /* footer */
 209 .footer {
 210   background: rgb(var(--footer-bg));
 211   color: rgb(var(--footer-text-color));
 212   width: device-width;
 213   margin: 0;
 214   padding: 0;
 215   display: flex;
 216   flex-wrap: nowrap;
 217   justify-content: space-between;
 218   align-items: flex-start;
 219 }
 220 .footer a {
 221   color: rgba(var(--link-color),.9);
 222 }
 223 @media all and (max-width: 500px) {
 224   .footer {
 225     flex-direction: column;
 226   }
 227   .footerchild {
 228     width: 100%;
 229     border-bottom: 1px solid rgba(var(--footer-border-color),.5);
 230   }
 231   .footerchild:last-child {
 232   border: none;
 233   }
 234 }
 235 .footerchild ul,
 236 .footerchild ul ul {
 237   margin: 0;
 238   padding: 0;
 239   list-style-type: none;
 240 }
 241 .footerchild ul ul {
 242   padding-left: 2em;
 243 }
 244 .footer h2, .footer h3 {
 245 margin: 0;
 246 }
 247 .footer .footerchild p {
 248   margin: 0;
 249 }
 250 .copyright {
 251   display: flex;
 252   flex-wrap: nowrap;
 253   justify-content: space-between;
 254   align-items: center;
 255   background: rgba(var(--copyright-bg),.5);
 256   height: 31px;
 257   color: rgba(var(--footer-text-color),.9);
 258 }
 259 a.copyright {
 260   background: rgba(var(--copyright-bg),.5);
 261   padding: 0;
 262   margin: 0;
 263 }