Skip to content
This repository
Browse code

updating colors as per simurai's thoughts

  • Loading branch information...
commit 21c565560a0b939f4193ed4186ec37b52237be76 1 parent b716178
Divya Manian authored

Showing 3 changed files with 48 additions and 49 deletions. Show diff stats Hide diff stats

  1. +44 44 css/style.css
  2. +3 3 sass/_vars.scss
  3. +1 2  sass/style.scss
88 css/style.css
@@ -276,11 +276,11 @@ html {
276 276 background-color: #232927;
277 277 background-image: url('../img/denim.png?1324008221');
278 278 color: #e3d7bf;
279   - background: -webkit-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -webkit-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -webkit-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -webkit-radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, rgba(128, 128, 0, 0) 8em), -webkit-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -webkit-radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, rgba(0, 0, 0, 0) 5em), url('../img/denim.png?1324008221');
280   - background: -moz-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -moz-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -moz-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -moz-radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, rgba(128, 128, 0, 0) 8em), -moz-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -moz-radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, rgba(0, 0, 0, 0) 5em), url('../img/denim.png?1324008221');
281   - background: -o-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -o-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -o-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -o-radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, rgba(128, 128, 0, 0) 8em), -o-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -o-radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, rgba(0, 0, 0, 0) 5em), url('../img/denim.png?1324008221');
282   - background: -ms-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -ms-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -ms-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -ms-radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, rgba(128, 128, 0, 0) 8em), -ms-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -ms-radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, rgba(0, 0, 0, 0) 5em), url('../img/denim.png?1324008221');
283   - background: radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, rgba(128, 128, 0, 0) 8em), radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, rgba(0, 0, 0, 0) 5em), url('../img/denim.png?1324008221');
  279 + background: -webkit-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -webkit-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -webkit-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -webkit-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -webkit-radial-gradient(35em 45em, circle cover, rgba(0, 0, 0, 0.2) 7em, rgba(0, 0, 0, 0) 7em), url('../img/denim.png?1324008221');
  280 + background: -moz-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -moz-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -moz-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -moz-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -moz-radial-gradient(35em 45em, circle cover, rgba(0, 0, 0, 0.2) 7em, rgba(0, 0, 0, 0) 7em), url('../img/denim.png?1324008221');
  281 + background: -o-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -o-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -o-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -o-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -o-radial-gradient(35em 45em, circle cover, rgba(0, 0, 0, 0.2) 7em, rgba(0, 0, 0, 0) 7em), url('../img/denim.png?1324008221');
  282 + background: -ms-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), -ms-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), -ms-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), -ms-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), -ms-radial-gradient(35em 45em, circle cover, rgba(0, 0, 0, 0.2) 7em, rgba(0, 0, 0, 0) 7em), url('../img/denim.png?1324008221');
  283 + background: radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, rgba(32, 124, 202, 0) 10em), radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, rgba(205, 92, 92, 0) 5em), radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, rgba(255, 255, 255, 0) 15em), radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, rgba(32, 124, 202, 0) 5em), radial-gradient(35em 45em, circle cover, rgba(0, 0, 0, 0.2) 7em, rgba(0, 0, 0, 0) 7em), url('../img/denim.png?1324008221');
284 284 min-height: 100%;
285 285 max-width: 100%;
286 286 font: 16px/1.5 "Open Sans", sans-serif;
@@ -499,7 +499,7 @@ article.expanded div.more {
499 499 }
500 500
501 501 .status {
502   - background: #ac2822;
  502 + background: #d92626;
503 503 font-size: 2em;
504 504 border-radius: 0 0.2rem 0.2rem 0;
505 505 padding: 0 1rem 0 0.5rem;
@@ -507,8 +507,8 @@ article.expanded div.more {
507 507 text-shadow: 1px 1px 1px black;
508 508 position: relative;
509 509 float: right;
510   - box-shadow: -4px 0px 6px #791c18 inset;
511   - border-right: 1px solid #4e120f;
  510 + box-shadow: -4px 0px 6px #a51d1d inset;
  511 + border-right: 1px solid #7a1515;
512 512 pointer-events: none;
513 513 }
514 514 .status:before, .status:after {
@@ -517,22 +517,22 @@ article.expanded div.more {
517 517 width: 0.8em;
518 518 position: absolute;
519 519 left: -0.8em;
520   - background: -webkit-linear-gradient(34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
521   - background: -moz-linear-gradient(34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
522   - background: -o-linear-gradient(34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
523   - background: -ms-linear-gradient(34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
524   - background: linear-gradient(34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
  520 + background: -webkit-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  521 + background: -moz-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  522 + background: -o-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  523 + background: -ms-linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  524 + background: linear-gradient(34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
525 525 }
526 526 .status:before {
527 527 top: 0;
528 528 }
529 529 .status:after {
530 530 bottom: 0;
531   - background: -webkit-linear-gradient(-34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
532   - background: -moz-linear-gradient(-34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
533   - background: -o-linear-gradient(-34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
534   - background: -ms-linear-gradient(-34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
535   - background: linear-gradient(-34deg, rgba(172, 40, 34, 0), rgba(172, 40, 34, 0) 50%, #811e1a 53%, #ac2822 56%);
  531 + background: -webkit-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  532 + background: -moz-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  533 + background: -o-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  534 + background: -ms-linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
  535 + background: linear-gradient(-34deg, rgba(217, 38, 38, 0), rgba(217, 38, 38, 0) 50%, #ae1e1e 53%, #d92626 56%);
536 536 }
537 537 .status i {
538 538 font-size: 0.3em;
@@ -545,42 +545,42 @@ article.expanded div.more {
545 545 font-size: 1.5em;
546 546 }
547 547 .status.use {
548   - background: #437c2b;
549   - box-shadow: -4px 0px 4px #396924 inset;
550   - border-right-color: #2a4f1b;
  548 + background: #60ac39;
  549 + box-shadow: -4px 0px 4px #559933 inset;
  550 + border-right-color: #467e2a;
551 551 }
552 552 .status.use:before {
553   - background: -webkit-linear-gradient(34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
554   - background: -moz-linear-gradient(34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
555   - background: -o-linear-gradient(34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
556   - background: -ms-linear-gradient(34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
557   - background: linear-gradient(34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
  553 + background: -webkit-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  554 + background: -moz-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  555 + background: -o-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  556 + background: -ms-linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  557 + background: linear-gradient(34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
558 558 }
559 559 .status.use:after {
560   - background: -webkit-linear-gradient(-34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
561   - background: -moz-linear-gradient(-34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
562   - background: -o-linear-gradient(-34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
563   - background: -ms-linear-gradient(-34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
564   - background: linear-gradient(-34deg, rgba(67, 124, 43, 0), rgba(67, 124, 43, 0) 50%, #396924 53%, #437c2b 56%);
  560 + background: -webkit-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  561 + background: -moz-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  562 + background: -o-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  563 + background: -ms-linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
  564 + background: linear-gradient(-34deg, rgba(96, 172, 57, 0), rgba(96, 172, 57, 0) 50%, #559933 53%, #60ac39 56%);
565 565 }
566 566 .status.caution {
567   - background: #cd8400;
568   - box-shadow: -4px 0 6px #a96d00 inset;
569   - border-right-color: #764c00;
  567 + background: #e69900;
  568 + box-shadow: -4px 0 6px #c28100 inset;
  569 + border-right-color: #8f5f00;
570 570 }
571 571 .status.caution:before {
572   - background: -webkit-linear-gradient(34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
573   - background: -moz-linear-gradient(34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
574   - background: -o-linear-gradient(34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
575   - background: -ms-linear-gradient(34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
576   - background: linear-gradient(34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
  572 + background: -webkit-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  573 + background: -moz-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  574 + background: -o-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  575 + background: -ms-linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  576 + background: linear-gradient(34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
577 577 }
578 578 .status.caution:after {
579   - background: -webkit-linear-gradient(-34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
580   - background: -moz-linear-gradient(-34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
581   - background: -o-linear-gradient(-34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
582   - background: -ms-linear-gradient(-34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
583   - background: linear-gradient(-34deg, rgba(230, 149, 0, 0), rgba(230, 149, 0, 0) 50%, #e69500 53%, #cd8400 56%);
  579 + background: -webkit-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  580 + background: -moz-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  581 + background: -o-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  582 + background: -ms-linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
  583 + background: linear-gradient(-34deg, rgba(255, 170, 0, 0), rgba(255, 170, 0, 0) 50%, #ffaa00 53%, #e69900 56%);
584 584 }
585 585
586 586 code {
6 sass/_vars.scss
@@ -21,6 +21,6 @@ $default-font-family: 'Open Sans', sans-serif;
21 21
22 22 $index-font-family: 'Francois One', sans-serif;
23 23
24   -$avoid: #ac2822;
25   -$use: #437c2b;
26   -$caution: rgb(230, 149, 0);
  24 +$avoid: #D92626;
  25 +$use: #60AC39;
  26 +$caution: #fa0;
3  sass/style.scss
@@ -189,9 +189,8 @@ html {
189 189 radial-gradient(20em 20em, circle cover, transparentize(#207cca, 0.9) 10em, transparentize(#207cca, 1) 10em),
190 190 radial-gradient(30em 30em, circle cover, transparentize(#cd5c5c, 0.8) 5em, transparentize(#cd5c5c, 1) 5em),
191 191 radial-gradient(60em 40em, circle cover, transparentize(white, 0.9) 15em, transparentize(white, 1) 15em),
192   - radial-gradient(80em 60em, circle cover, transparentize(olive, 0.8) 8em, transparentize(olive, 1) 8em),
193 192 radial-gradient(40em 60em, circle cover, transparentize(#207cca, 0.8) 5em, transparentize(#207cca, 1) 5em),
194   - radial-gradient(40em 50em, circle cover, transparentize(black, 0.8) 5em, transparentize(black, 1) 5em),
  193 + radial-gradient(35em 45em, circle cover, transparentize(black, 0.8) 7em, transparentize(black, 1) 7em),
195 194 image-url('denim.png')
196 195 );
197 196 min-height: 100%;

0 comments on commit 21c5655

Please sign in to comment.
Something went wrong with that request. Please try again.