Merge pull request numpy#209 from numpy/feature/48-colors

[WIP] Updates colors to only colors in the NumPy color palette

Author: joelachance

README.md

@@ -54,5 +54,14 @@ So you can use some random number instead of `TRAVIS_PULL_REQUEST` variable.
 
 You also can run the docker image in daemon mode and then interact with the container and run the hugo server.
 
+## User Experience (UX)
 
+### NumPy Color Palette
 
+#FFC553 Mustard
+#4DABCF Maximum Blue
+#4D77CF Han Blue
+#FFFFFF White
+#EEEEEE Isabelline
+#6C7A89 Aurometalsaurus
+#013243 Warm Black

static/css/section2.css

@@ -22,7 +22,7 @@
     align-items: baseline;
     justify-content: space-around;
     font-size: 14px;
-    background-color: #f2f1ef;
+    background-color: #EEEEEE;
     text-decoration: none !important;
     border-radius: 3px;
     padding: 8px 15px;
@@ -31,7 +31,7 @@
 
 .section2-header-link-title {
     padding: 2px 5px 0 0;
-    color: #333;
+    color: #013243;
 }
 
 section2-header-link i {
@@ -44,23 +44,24 @@ section2-header-link i {
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
+    /* Black, with 0% opacity */
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-transition-duration: 0.1s;
     transition-duration: 0.1s;
 }
 .hvr-icon-forward .hvr-icon {
--webkit-transform: translateZ(0);
-transform: translateZ(0);
--webkit-transition-duration: 0.1s;
-transition-duration: 0.1s;
--webkit-transition-property: transform;
-transition-property: transform;
--webkit-transition-timing-function: ease-out;
-transition-timing-function: ease-out;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-transition-duration: 0.1s;
+    transition-duration: 0.1s;
+    -webkit-transition-property: transform;
+    transition-property: transform;
+    -webkit-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
 }
 .hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon {
--webkit-transform: translateX(4px);
-transform: translateX(4px);
+    -webkit-transform: translateX(4px);
+    transform: translateX(4px);
 }
 
 .section2-box-container {
@@ -84,7 +85,7 @@ transform: translateX(4px);
 }
 
 .section2-box-text > a {
-    color: #0E73D8;
+    color: #4D77CF;
 }
 
 .section2-box-text {
@@ -93,7 +94,7 @@ transform: translateX(4px);
 }
 
 .section2-box-content:hover > .section2-box-text, .section2-box-content:focus > .section2-box-text, .section2-box-content:active > .section2-box-text {
-    color: dimgray;
+    color: #6C7A89;
 }
 
 @media only screen and (max-width: 1280px) {
@@ -137,6 +138,7 @@ transform: translateX(4px);
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;

static/css/section3.css

@@ -29,7 +29,7 @@
 }
 
 .section3 a {
-    color: #333 !important;
+    color: #013243 !important;
 }
 
 .section3-box-title {
@@ -61,6 +61,7 @@
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;

static/css/shell.css

@@ -1,6 +1,7 @@
 .hero-right {
     display: flex;
     width: 100vw;
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
 }
 
@@ -10,7 +11,7 @@
     justify-content: center;
     width: 100vw;
     min-height: 455px;
-    background-color: #f2f1ef;
+    background-color: #EEEEEE;
 }
 
 .numpy-shell-container {
@@ -74,10 +75,11 @@
     letter-spacing: 1.5px;
     font-weight: 500;
     color: black;
-    background-color: #f2f1ef;
+    background-color: #EEEEEE;
     border: none;
     border-radius: 25px;
     outline: none;
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     cursor: pointer;
 }
@@ -115,9 +117,9 @@
     min-width: 500px;
     margin: 15px;
     padding: 0 17px;
-    color: #fff;
+    color: #FFFFFF;
     overflow: auto;
-    background-color: #2e3131;
+    background-color: #013243;
     font-family: 'Source Code Pro', monospace;
 }
 
@@ -130,19 +132,20 @@
 }
 
 .CodeMirror pre {
-    color: #fff!important;
+    color: #FFFFFF !important;
 }
 
 .CodeMirror-cursor {
-    color: #fff!important;
-    border-left: 1px solid white!important;
+    color: #FFFFFF !important;
+    border-left: 1px solid white !important;
 }
 
 #demo-code.fake-shell {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: rgba(46,49,49, 0.5)
+    /* #013243, with 50% opacity */
+    background: rgba(1,50,67, 0.5)
 }
 
 #demo-button-run {
@@ -153,10 +156,11 @@
     letter-spacing: 1.5px;
     font-weight: 500;
     color: black;
-    background-color: #f2f1ef;
+    background-color: #EEEEEE;
     border: none;
     border-radius: 25px;
     outline: none;
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     position: absolute;

static/css/styles.css

@@ -1,3 +1,12 @@
+/* NumPy Color Palette */
+/* #FFC553 Mustard */
+/* #4DABCF Maximum Blue */
+/* #4D77CF Han Blue */
+/* #FFFFFF White */
+/* #EEEEEE Isabelline */
+/* #6C7A89 Aurometalsaurus */
+/* #013243 Warm Black */
+
 body {
     font-family: 'Lato', sans-serif;
 }
@@ -68,17 +77,18 @@ em {
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color:#fff;
+    color:#FFFFFF;
     background-color: #013243;
     border: none;
     border-radius: 25px;
     outline: none;
+    /* Black, with 10% opacity */
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     cursor: pointer;
 }
 
 #navbar-item {
-    color: #2e3131;
+    color: #013243;
     text-decoration: none;
 }
 
@@ -221,10 +231,10 @@ p {
 
 .sign-up-image {
     z-index: 2;
-    color: #2e3131;
+    color: #013243;
     padding: 9px 10px 10px 10px;
-    border-right: 1px solid #ececec;
-    background-color: #ececec;
+    border-right: 1px solid #EEEEEE;
+    background-color: #EEEEEE;
     border-radius: 5px 0 0 5px;
 }
 
@@ -236,7 +246,7 @@ p {
     height: 35px;
     padding-left: 5px;
     font-size: 14px;
-    color: #2e3131;
+    color: #013243;
 }
 
 .submission-instructions {
@@ -254,7 +264,7 @@ p {
 .thank-you {
     display: none;
     height: 75px;
-    color: #ececec;
+    color: #EEEEEE;
     align-items: center;
 }
 
@@ -267,19 +277,19 @@ p {
 }
 
 figcaption {
-  text-align: center;
+    text-align: center;
 }
 
 .csfigcaption {
-  text-align: center;
+    text-align: center;
 }
 
 .fig-center {
-  text-align: center;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
+    text-align: center;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
 }
 
 blockquote {
@@ -288,7 +298,7 @@ blockquote {
 
 blockquote p {
     padding: 15px;
-    background: #eee;
+    background: #EEEEEE;
     border-radius: 5px;
 }
 

static/css/tabs.css

@@ -36,7 +36,7 @@
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
-    color: #757575;
+    color: #6C7A89;
 }
 
 #tabs-content > li {
@@ -62,6 +62,7 @@
 }
 
 .grid-container > div {
+    /* White, with 80% opacity */
     background-color: rgba(255, 255, 255, 0.8);
     text-align: middle;
 }
@@ -84,8 +85,8 @@
 }
 
 .image-grid > div {
-    background-color: #eee;
-    border: 2px solid #fff;
+    background-color: #EEEEEE;
+    border: 2px solid #FFFFFF;
     border-radius: 10px;
     padding: 10px;
 }
@@ -101,7 +102,7 @@ td > a {
 }
 
 tr.highlight-th {
-    border-top: 1px solid #ececec;
+    border-top: 1px solid #EEEEEE;
     font-size: 0.8rem;
 }
 
@@ -133,7 +134,7 @@ td.full-center-text {
 td.lastrow-center-text {
     text-align: center;
     line-height: 35%;
-    border-bottom: 1px solid #ececec;
+    border-bottom: 1px solid #EEEEEE;
 }
 
 /* Array Libraries */