css/mock1.css

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