Consolidate raw colors (hackforla#1917)

* added first icon * added all of the information * changed background color properties to variable names * changed some color properties * changed remaining color properties to variable names * Update contact-us.yml * Update contact-us.yml Co-authored-by: Stanley Pascua <[email protected]> Co-authored-by: Stanley Pascua <[email protected]> Co-authored-by: Ava Li <[email protected]>
SAUMILDHANKAR · Aug 1, 2021 · 14f4f65 · 14f4f65
1 parent 435668f
commit 14f4f65
Show file tree

Hide file tree

Showing 22 changed files with 102 additions and 74 deletions.
diff --git a/_data/internal/credits/contact-us.yml b/_data/internal/credits/contact-us.yml
@@ -9,4 +9,4 @@ provider-link: https://www.freepik.com/
 image-url: /assets/images/about/about-us-header.svg
 alt: 'Image of Contact Us'
 type: icon
----
+---
diff --git a/_sass/_normalize.scss b/_sass/_normalize.scss
@@ -143,7 +143,7 @@ h1 {
 
 mark {
   background: #ff0;
-  color: #000;
+  color: $color-black;
 }
 
 /**

diff --git a/_sass/components/_about.scss b/_sass/components/_about.scss
@@ -13,7 +13,7 @@
 }
 
 .donation-gif-box-shadow {
-  box-shadow: 0px 8px 16px rgba(0,0,0,0.12);
+  box-shadow: 0px 8px 16px rgba($color-black,0.12);
 }
 
 .header-text--about-us {
@@ -79,7 +79,7 @@
 // Make the active link different
 .is-active {
   font-weight: 700;
-  color:#333 !important;
+  color: $color-black !important;
   a {
     font-weight: 700;
     &:link,
@@ -116,9 +116,9 @@ a.anchor {
   grid-area: nav;
   display: none;
   background: #fff;
-  border: 0px solid rgba(51, 51, 51, 0.06);
+  border: 0px solid rgba($color-black, 0.06);
   border-radius: 16px;
-  box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
   overflow: hidden;
   width: 250px;
   padding: 35px 30px 15px 18px;
@@ -143,6 +143,12 @@ a.anchor {
 }
 
 .page-card--about {
+  background: #fff;
+  border: 0 solid rgba($color-black, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
+  overflow: hidden;
+  max-width: 896px;
   overflow: hidden;
   border: 0 solid rgba(51, 51, 51, 0.06);
   border-radius: 16px;
@@ -173,7 +179,7 @@ a.anchor {
   float: right;
   transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 24px;
 }
@@ -194,7 +200,7 @@ a.anchor {
   float: right;
   transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 24px;
 }
@@ -228,7 +234,7 @@ a.anchor {
   position: absolute;
   margin-left: 10px;
   transform: rotate(-45deg);
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 16px;
 }
@@ -245,7 +251,7 @@ a.anchor {
   position: absolute;
   margin-left: 10px;
   transform: rotate(135deg);
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 16px;
 }
@@ -360,37 +366,37 @@ a.anchor {
 
 // SDG Colors
 .color-goldenrod-2 {
-  color: #d49f28;
+  color: $color-mustard;
   font-weight: 700;
 }
 
 .color-orangered {
-  color: #ee412a;
+  color: $color-orangered;
   font-weight: 700;
 }
 
 .color-brown {
-  color: #8e1737;
+  color: $color-redpurple;
   font-weight: 700;
 }
 
 .color-goldenrod-11 {
-  color: #fa9c25; 
+  color: $color-lightorange; 
   font-weight: 700;
   }
 
 .color-darkolivegreen {
-  color: #48763e;
+  color: $color-darkolive;
   font-weight: 700;
 }
 
 .color-teal {
-  color: #01548a;
+  color: $color-dark-royalblue;
   font-weight: 700;
 }
 
 .color-midnightblue {
-  color: #173567;
+  color: $color-midnightblue;
   font-weight: 700;
 }
 
@@ -920,7 +926,7 @@ a.anchor {
   position: relative;
   bottom: 50px;
   left: 20px;
-  color: #767676;
+  color: $color-cement;
   font-style: normal;
 }
 .quote-text{
@@ -948,7 +954,7 @@ a.anchor {
     position: relative;
     left:125px;
     bottom: 90px;
-    color: #767676;
+    color: $color-cement;
     font-style: normal;
   }
   .garcetti-quote{

diff --git a/_sass/components/_communities-of-practice.scss b/_sass/components/_communities-of-practice.scss
@@ -170,7 +170,7 @@
   grid-template-rows: auto;
   grid-template-columns: 24% auto;
   border-radius: 16px;
-  box-shadow: 0 0 8px 0 rgba(51,51,51,0.2);
+  box-shadow: 0 0 8px 0 rgba($color-black,0.2);
   width: 240px;
   height: 70px;
   margin-bottom: 10px;

diff --git a/_sass/components/_dashboard.scss b/_sass/components/_dashboard.scss
@@ -1,6 +1,6 @@
 .dashboardEmbed{
     display: flex;
-    background-color: #020d2d;
+    background-color: $color-blue-dark;
     margin: 0 auto 0 auto;
 
     @media #{$bp-tablet-up}{
@@ -24,5 +24,5 @@ iframe{
 }
 
 .dashboardEmbed {
-    background-color: #020d2d;
+    background-color: $color-blue-dark;
 }
diff --git a/_sass/components/_events.scss b/_sass/components/_events.scss
@@ -73,9 +73,9 @@
 
   & > .column-card-lg--events {
     background: #fff;
-    border: 0 solid rgba(51, 51, 51, 0.06);
+    border: 0 solid rgba($color-black, 0.06);
     border-radius: 20px;
-    box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
+    box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
     overflow: hidden;
     max-width: 489px;
     width: 100%;
@@ -147,7 +147,7 @@
     padding: 0 2em;
     display: inline;
     margin: 20px;
-    border: 0 solid rgba(51, 51, 51, 0.06);
+    border: 0 solid rgba($color-black, 0.06);
     border-radius: 16px;
   }
 }
@@ -250,9 +250,9 @@
 
 .getting-started-page-card-locations {
   background: #fff;
-  border: 0 solid rgba(51, 51, 51, 0.06);
+  border: 0 solid rgba($color-black, 0.06);
   border-radius: 16px;
-  box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
   overflow: hidden;
   max-width: 996px;
   margin-bottom: 0;

diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
@@ -17,6 +17,10 @@
     }
   }
 
+  .footer-header {
+    position: relative;
+    color: $color-red;
+    margin-bottom: 54px;
   .footer-links {
     display: flex;
     flex-wrap: wrap-reverse; 

diff --git a/_sass/components/_getting-started-page.scss b/_sass/components/_getting-started-page.scss
@@ -77,7 +77,7 @@
 .step-header {
   display: flex;
   justify-content: center;
-  color: #000000;
+  color: $color-black;
   font-family: "Roboto"sans-serif;
 
   @media #{$bp-below-mobile} {
@@ -151,7 +151,7 @@
   float: right;
   transform: rotate(-45deg);
   transition: transform 0.25s ease-in;
-  color: rgb(250, 17, 79);
+  color: $color-red;
   font-weight: bolder;
   font-size: 24px;
 }

diff --git a/_sass/components/_guide-pages.scss b/_sass/components/_guide-pages.scss
@@ -38,7 +38,7 @@
 
       // NEW MOBILE FRIENDLY RULES
       @media #{$bp-below-mobile} {
-        background: linear-gradient(to bottom, rgba(3,13,45,0.3) 30%, #030d2d 100%);
+        background: linear-gradient(to bottom, rgba($color-blue-dark,0.3) 30%, #030d2d 100%);
       }
     }
 }
@@ -78,7 +78,7 @@
 //only show header divider if screen is bigger than mobile
 @media #{$bp-mobile-up} {
   .border-right {
-    border-right: 1px solid rgba(0,0,0, 0.3);
+    border-right: 1px solid rgba($color-black, 0.3);
     align-self: center;
     max-height: 150px;
     height: 280px;
@@ -138,7 +138,7 @@
 
 .section-container {
   background: $color-white;
-  box-shadow: 0px 4px 8px rgba(51, 51, 51, 0.2);
+  box-shadow: 0px 4px 8px rgba($color-black, 0.2);
   border-radius: 10px;
   margin: 2% 12%;
   padding: 5% 12.5%;

diff --git a/_sass/components/_home.scss b/_sass/components/_home.scss
@@ -314,7 +314,7 @@ button {
   float: right;
   text-align: center;
   margin-left: 10px;
-  background-color: rgb(255, 255, 151);
+  background-color: $color-lightyellow;
   width: 92px;
   padding: 2px 7px;
   border-radius: 6px;
@@ -326,15 +326,15 @@ button {
 }
 
 .status-Active {
-  background-color: rgb(187, 255, 187);
+  background-color: $color-lightgreen;
 }
 
 .status-Rebooting {
-  background-color: rgb(164, 213, 255);
+  background-color: $color-babyblue;
 }
 
 .status-Completed {
-  background-color: rgb(255, 173, 173);
+  background-color: $color-salmon;
 }
 
 .project-card-field-inline {

diff --git a/_sass/components/_project-filter.scss b/_sass/components/_project-filter.scss
@@ -17,7 +17,7 @@ ul.filter-list {
 
 //category boxes
 li.filter-item {
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba($color-black, 0.24);
   border-radius: 5px;
   color: black;
   background: white;
@@ -46,7 +46,7 @@ li.filter-item:focus-within a {
 //dropdown
 ul.filter-list li ul {
   background: white;
-  border: 1px solid rgba(0, 0, 0, 0.24);
+  border: 1px solid rgba($color-black, 0.24);
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease;
@@ -141,7 +141,7 @@ ul.filter-list li ul li {
 a.clear-filter-tags {
   margin-left: 1em;
   text-decoration: underline;
-  color: #767676;
+  color: $color-cement;
 
   &:hover {
     cursor: pointer;

diff --git a/_sass/components/_project-meetings.scss b/_sass/components/_project-meetings.scss
@@ -43,7 +43,7 @@
         }
 
         h1 {
-            color: #333;
+            color: $color-black;
             font-weight: 700;
             font-size: 24px;
             padding-bottom: 28px;
@@ -73,7 +73,7 @@
 }
 
 .covid-notification-banner {
-    background-color: #f2c94d;
+    background-color: $color-gold;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -110,7 +110,7 @@
 
     li:before {
         content: "\2022";
-        color: #fa114f;
+        color: $color-red;
         font-weight: bold;
         font-size: 28px;
         display: inline-block;
@@ -131,7 +131,7 @@
 }
 
 .team-meetings-title {
-    color: #fff;
+    color: $color-white;
 
     // NEW MOBILE FRIENDLY RULES
     @media #{$bp-below-mobile} {
-Original file line number
+Diff line change
@@ Expand Up / @@ -143,7 +143,7 @@ h1 { @@
     mark {
       background: #ff0;
-      color: #000;
+      color: $color-black;
     }
     /**
@@ Expand Down @@