static/css/style.css

   1 /* vars */
   2 :root {
   3     --c-dark:     #292f2f;
   4     --c-bg-dark:  #3a4346;
   5     --c-bg-light: #4c5456;
   6     --c-light:    #ecf7fa;
   7     --c-hl-dark:  #008499;
   8     --c-hl-light: #3baec4;
   9
  10     /* backgrounds */
  11     --navbar-bg:    var(--c-dark);
  12     --jumbotron-bg: var(--c-bg-dark);
  13     --copyright-bg: var(--c-dark);
  14
  15     /* link colors */
  16     --link-color:         var(--c-hl-dark);
  17     --link-hover-color:   var(--c-hl-light);
  18     --footer-link-color:  var(--c-light);
  19     --footer-hover-color: #fff;
  20
  21     /* text colors */
  22     --text-color:           var(--c-dark);
  23     --footer-text-color:    var(--c-light);
  24     --copyright-text-color: var(--c-light);
  25     --jumbotron-text-color: var(--c-light);
  26     --art-date-color:       color(var(--c-dark) tint(50%));
  27
  28     /* box colors */
  29     --border-color:    var(--c-dark);
  30     --box-color:       var(--c-bg-light);
  31     --box-hover-color: var(--c-dark);;
  32     --box-round:       10px;
  33
  34     /* other */
  35     --max-width:     600px;
  36     --max-width-box: 800px;
  37     --margin-box-fa: 5px;
  38 }
  39 @custom-media --max-sm all and (max-width: 600px);
  40 @custom-media --max-md all and (max-width: 800px);
  41 @custom-media --max-rem all and (max-width: 60rem);
  42
  43 /* reset css for browser compat */
  44 * {
  45     margin: 0;
  46     padding: 0;
  47     box-sizing: border-box;
  48 }
  49
  50 /* global */
  51 body {
  52     font-family: 'Open Sans';
  53     font-feature-settings: "lnum";
  54     font-variant-numeric: lining-nums;
  55     color: var(--text-color);
  56     font-size: 14px;
  57     min-height: 100vh;
  58     height: auto;
  59 }
  60
  61 a {
  62     color: var(--link-color);
  63     text-decoration: none;
  64 }
  65
  66 a:hover {
  67     color: var(--link-hover-color);
  68 }
  69
  70 /* navbar */
  71 .navbar {
  72     width: 100%;
  73     height: 50px;
  74     background-color: var(--navbar-bg);
  75     box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);
  76     position: fixed;
  77     left: 0;
  78     right: 0;
  79     top: 0;
  80     display: flex;
  81     flex-wrap: nowrap;
  82     justify-content: space-between;
  83     align-items: center;
  84     border-bottom: 1px solid var(--border-color);
  85     z-index: 100;
  86     padding-right: 5px;
  87 }
  88
  89 @media (--max-sm); {
  90     .navbar {
  91         position: absolute;
  92     }
  93 }
  94
  95 .navbar a {
  96     margin-top: 2px;
  97     height: 40px;
  98 }
  99
 100 .nlogo {
 101     height: 40px;
 102 }
 103
 104 /* main */
 105 .container {
 106     width: 100%;
 107     min-height: 98vh;
 108     padding-top: 50px;
 109     padding-bottom: 11.5rem;
 110 }
 111
 112 .main {
 113     margin: 0 auto;
 114     margin-top: .75em;
 115     padding: 0 .75em;
 116     max-width: var(--max-width);
 117     line-height: 1.4;
 118 }
 119
 120 .main h1,
 121 .main h2,
 122 .main h3,
 123 .main h4,
 124 .main li,
 125 .main pre,
 126 .main p {
 127     margin-top: .7em;
 128 }
 129
 130 .main h1 + p,
 131 .main h2 + p,
 132 .main h3 + p,
 133 .main h3 + p {
 134     margin-top: 0;
 135 }
 136
 137 ul {
 138     padding-left: 2em;
 139     list-style-type: disc;
 140 }
 141
 142 hr {
 143     margin-top: .8em;
 144     margin-bottom: .8em;
 145 }
 146
 147 /* jumbotron */
 148 .jumbotron {
 149     position: relative;
 150     width: 100%;
 151     margin-top: -16px;
 152     background: var(--jumbotron-bg);
 153     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
 154     color: var(--jumbotron-text-color);
 155     padding: 2em 0;
 156 }
 157
 158 .child {
 159     text-align: center;
 160     margin: .5em auto;
 161     font-size: 32px;
 162     line-height: 48px;
 163     max-width: 75%;
 164 }
 165
 166 .box-container {
 167     display: flex;
 168     flex-wrap: wrap;
 169     justify-content: space-around;
 170     align-items: stretch;
 171     max-width: var(--max-width-box);
 172     margin: 0 auto;
 173 }
 174
 175 .box {
 176     text-align: center;
 177     text-decoration: none;
 178     color: var(--jumbotron-text-color);
 179     margin-bottom: 5px;
 180     flex-basis: 30%;
 181     min-width: 26%;
 182     background-color: var(--box-color);
 183     border-radius: var(--box-round);
 184     padding: 1em;
 185 }
 186
 187 .box:hover,.box:active {
 188     color: var(--jumbotron-text-color);
 189     background-color: var(--box-hover-color);
 190 }
 191
 192 .box div{
 193     position: relative;
 194     top: initial;
 195     font-size: 20px;
 196     font-weight: 600;
 197     line-height: 16px;
 198     display: block;
 199     margin-top: .75em;
 200 }
 201
 202 .fa-users {
 203     margin-top: var(--margin-box-fa);
 204 }
 205
 206 .fa-comment,.fa-question {
 207     margin-bottom: var(--margin-box-fa);
 208 }
 209
 210 .title {
 211     text-align: center;
 212 }
 213
 214 @media (--max-md) {
 215     .box {
 216         text-align: center;
 217     }
 218
 219     .child {
 220         font-size: 20px;
 221         line-height: 30px;
 222         padding: 10px 0 5px;
 223     }
 224
 225     .fa-4x {
 226         padding: 0;
 227         margin: 0;
 228         width: 60px;
 229         text-align: center;
 230         font-size: 28px;
 231     }
 232
 233     .box-container {
 234         flex-direction: column;
 235         margin: 0 .5em;
 236     }
 237
 238     .box div {
 239         font-size: 22px;
 240         line-height: 22px;
 241         padding-left: 8px;
 242         font-weight: 700;
 243         position: relative;
 244         display: inline;
 245         text-align: center;
 246     }
 247
 248     .box {
 249         text-align: left;
 250         border-radius: calc(var(--box-round) / 2);
 251         margin: 5px 0;
 252     }
 253 }
 254
 255 /* articles */
 256 h1 {
 257     margin: 0;
 258 }
 259
 260 .art-info {
 261     line-height: 1.6;
 262     display: flex;
 263     flex-direction: row;
 264     flex-wrap: wrap;
 265     justify-content: space-between;
 266     align-items: baseline;
 267 }
 268
 269 .art-info h1 {
 270     margin-top: 0;
 271     display: inline;
 272 }
 273
 274 .art-body {
 275     margin-bottom: 1em;
 276 }
 277
 278 .artlist {
 279     max-width: var(--max-width);
 280     margin: 0 auto;
 281     margin-top: .5em;
 282 }
 283
 284 .artlist .art-info:not(:first-child) {
 285     border-top: 1px solid var(--border-color);
 286 }
 287
 288 .art-date {
 289     display: inline-block;
 290     text-align: baseline;
 291     line-height: 1;
 292     white-space: nowrap;
 293     color: var(--art-date-color);
 294     font-feature-settings: "tnum";
 295     font-variant-numeric: tabular-nums;
 296 }
 297
 298 .art-nav {
 299     display: flex;
 300     flex-direction: row;
 301     justify-content: space-between;
 302     width: 100%;
 303 }
 304
 305 @media (--max-md) {
 306     .main.artlist {
 307         padding-left: 0;
 308         padding-right: 0;
 309     }
 310
 311     .artlist .art-info {
 312         padding: 0 .75em;
 313     }
 314 }
 315
 316 /* faq */
 317 .faq-index {
 318     list-style-type: none;
 319     padding-left: 0;
 320 }
 321
 322 .faq-index li {
 323     font-size: 120%;
 324 }
 325
 326 /* footer */
 327 .footers {
 328     /*min-height: 30vh;*/
 329     margin-top: -11rem;
 330     min-height: 11rem;
 331 }
 332
 333 .footer {
 334     background: var(--jumbotron-bg);
 335     color: var(--footer-text-color);
 336     width: 100%;
 337     margin-top: 2vh;
 338     box-shadow: 0 -3px 5px rgba(150,150,150,.36);
 339     min-height: 9.5rem;
 340 }
 341
 342 .footer-container {
 343     display: flex;
 344     flex-wrap: wrap;
 345     justify-content: space-between;
 346     align-items: flex-start;
 347     margin: 0 auto;
 348 }
 349
 350 .footerchild {
 351     margin: 0 2em;
 352     margin-top: .5em;
 353 }
 354
 355 .footerchild:last-child {
 356     margin-bottom: 1em;
 357 }
 358
 359 @media (--max-rem) {
 360     .footer-push {
 361         margin-left: auto;
 362         width: max-content;
 363     }
 364 }
 365
 366 footer a {
 367     color: var(--footer-link-color);
 368 }
 369
 370 footer a:hover {
 371     color: var(--footer-hover-color);
 372 }
 373
 374 .footer h2 {
 375     margin-bottom: .1em;
 376     display: inline-block;
 377 }
 378
 379 .footerchild ul, .footerchild ul ul {
 380     padding-left: 0;
 381     margin-left: 10px;
 382     margin-right: 10px;
 383     list-style-type: none;
 384 }
 385
 386 .footerchild ul ul {
 387     padding-left: 30px;
 388 }
 389
 390 @media (--max-md) {
 391     .footer {
 392         flex-direction: column;
 393     }
 394
 395     .footerchild {
 396         width: 100%;
 397     }
 398
 399     .footer-push {
 400         margin-left: 0;
 401     }
 402
 403     .footerchild ul li:last-child {
 404         margin-bottom: .5em;
 405     }
 406
 407     .hdn {
 408         display: none;
 409     }
 410 }
 411
 412 .footer h2, .footer h3 {
 413     margin-left: 10px;
 414     margin-right: 10px;
 415 }
 416
 417 footer.copyright {
 418     display: flex;
 419     flex-wrap: wrap;
 420     justify-content: space-between;
 421     background: var(--copyright-bg);
 422     min-height: 1.5rem;
 423     color: var(--copyright-text-color);
 424     padding-left: .5em;
 425     padding-right: .5em;
 426     overflow: hidden;
 427 }
 428
 429 footer.copyright div {
 430     display: flex;
 431     align-items: center;
 432     height: 1.5rem;
 433     line-height: 1.5rem;
 434     vertical-align: top;
 435 }
 436
 437 .copyright * {
 438     margin: 0;
 439     height: 1.5rem;
 440     line-height: 1.5rem;
 441 }
 442
 443 .copyright .fa {
 444     height: 100%;
 445     vertical-align: top;
 446     font-size: 1.4em;
 447 }
 448
 449 .copyright .footer-link {
 450     height: 28px;
 451     margin-right: .5em;
 452 }
 453
 454 .copyright img {
 455     height: 1.5rem;
 456     width: auto;
 457 }