static/css/source.css

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