Copy CSS changes from main Redux site

reduxjs · Dec 28, 2018 · 71afd42 · 71afd42
1 parent cbe6e6f
commit 71afd42
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 16 deletions.
diff --git a/website/siteConfig.js b/website/siteConfig.js
@@ -44,7 +44,13 @@ const siteConfig = {
   /* Colors for website */
   colors: {
     primaryColor: "#764ABC",
-    secondaryColor: "#764ABC",
+    secondaryColor: "#40216F",
+    accentColor1: "#717171",
+    accentColor2: "#F3EAFF",
+    accentColor3: "#D2B9F3",
+    accentColor4: "#ECF4F9",
+    accentColor5: "#CBDDEA",
+    accentColor6: "#2F5773"
   },
 
   /* Custom fonts for website */

diff --git a/website/static/css/custom.css b/website/static/css/custom.css
@@ -8,24 +8,116 @@ header.postHeader:empty + article h1 {
   margin-top: 0;
 }
 
-a {
-  /* blue links - kickin' it old-school! */
-  color: blue;
+.homeContainer .homeWrapper {
+  padding-bottom: 1em;
 }
-a:hover {
-  /* add underlines for a11y */
-  text-decoration: underline;
+
+.mainContainer {
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
-a:visited {
+
+.post article a {
+  /* add underlines to links in blocks of text for a11y */
   color: $primaryColor;
+  text-decoration: underline;
+  overflow: hidden;
+  position: relative;
+  transition: outline-offset 0.2s ease-in-out;
+}
+.post article a:hover,
+.post article a:focus,
+.post article a:active {
+  /* change color and bg to display state change in more than one way for a11y */
+  background-color: $secondaryColor;
+  color: white;
+  box-shadow: 0 0 0 2px $secondaryColor;
+  outline: none;
+  text-decoration: underline;
+  overflow: hidden;
+  position: relative;
+  transition: outline-offset 0.2s ease-in-out;
+}
+.post article blockquote {
+  color: black;
+  background-color: $accentColor4;
+  border-left: 8px solid $accentColor5;
+}
+
+.post article blockquote a {
+  /* add underlines to links in blocks of text for a11y */
+  color: black;
+  text-decoration: underline;
+  overflow: hidden;
+  position: relative;
+  transition: outline-offset 0.2s ease-in-out;
+}
+
+.post article blockquote a:hover,
+.post article blockquote a:focus,
+.post article blockquote a:active {
+  /* change color and bg to display state change in more than one way for a11y */
+  background-color: $accentColor6;
+  color: white;
+  box-shadow: 0 0 0 2px $accentColor6;
+  outline: none;
+  text-decoration: underline;
+}
+.post article blockquote {
+  color: black;
+  background-color: $accentColor4;
+  border-left: 8px solid $accentColor5;
+}
+.post article blockquote a {
+  /* add underlines to links in blocks of text for a11y */
+  color: black;
+  text-decoration: underline;
+  overflow: hidden;
+  position: relative;
+  transition: outline-offset 0.2s ease-in-out;
+}
+.post article blockquote a:hover,
+.post article blockquote a:focus,
+.post article blockquote a:active {
+  /* change color and bg to display state change in more than one way for a11y */
+  background-color: $accentColor6;
+  color: white;
+  box-shadow: 0 0 0 2px $accentColor6;
+  outline: none;
+  text-decoration: underline;
+}
+.post article .hash-link {
+  /* add underlines to links in blocks of text for a11y */
+  color: $accentColor1;
+  transition: outline-offset 0.2s ease-in-out;
+  opacity: 1;
+}
+.post article .hash-link:hover,
+.post article .hash-link:focus,
+.post article .hash-link:active {
+  /* change color and bg to display state change in more than one way for a11y */
+  color: $secondaryColor;
+  background-color: white;
+  box-shadow: 0 0 0 0 $accentColor6;
+  transition: outline-offset 0.2s ease-in-out;
+}
+.hash-link .hash-link-icon {
+  fill: currentColor;
 }
 .fixedHeaderContainer header .headerTitleWithLogo {
   color : white;
   display: block !important;
 }
-.navigationSlider .slidingNav ul a {
-  color : white !important;
-  font-weight: 400 !important;
+.navigationSlider .slidingNav ul.nav-site a {
+  color : white;
+  font-weight: 400;
+}
+.navigationSlider .slidingNav ul.nav-site a:hover,
+.navigationSlider .slidingNav ul.nav-site a:focus,
+.navigationSlider .slidingNav ul.nav-site a:active {
+  color : white;
+  font-weight: 400;
+  text-decoration: underline;
 }
 .navigationSlider .slidingNav ul a[href*="github"] {
   font-size: 0;
@@ -56,8 +148,9 @@ a:visited {
   background: #fff;
   color: $primaryColor;
 }
-.productShowcaseSection .featureBlock {
-  padding: 40px 0;
+.productShowcaseSection .rowContainer {
+  padding-top: 30px;
+  padding-bottom: 30px;
 }
 .productShowcaseSection .featureBlock img {
   width: 60px;
@@ -66,7 +159,6 @@ a:visited {
   max-height: 60px;
 }
 
-
 .featureBlock .blockContent > div p {
   text-align: left;
 }
@@ -92,11 +184,15 @@ a:visited {
   margin-bottom: 5px;
 }
 
+.libsContainer {
+  display: flex;
+  justify-content: center;
+}
 
 @media only screen and (max-device-width: 480px) {
   .productShowcaseSection .featureBlock {
-    padding-top: 30px;
-    padding-bottom: 5px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   .featureBlock .imageAlignTop .blockImage {
@@ -155,6 +251,9 @@ a:visited {
   .navSearchWrapper:after {
     left: 35px;
   }
+  .libsContainer {
+    flex-direction: column;
+  }
 }
 
 @media only screen and (min-width: 1400px) {