From e0aa0be05d40ac450068c14b9f58896bd3b0ccde Mon Sep 17 00:00:00 2001
From: Aaron Louie <aaron@sartography.com>
Date: Thu, 17 Oct 2019 10:32:06 -0400
Subject: [PATCH] Changes order of items, cleans up design

---
 src/app/logo-values/logo-values.component.html | 14 ++++++++++----
 src/app/logo-values/logo-values.component.scss |  9 +++++++++
 src/assets/json/values.json                    | 14 +++++++-------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/app/logo-values/logo-values.component.html b/src/app/logo-values/logo-values.component.html
index 304a8bb..57d5a92 100644
--- a/src/app/logo-values/logo-values.component.html
+++ b/src/app/logo-values/logo-values.component.html
@@ -6,10 +6,13 @@
         *ngFor="let v of brandValuesLeft"
         (mouseover)="highlight(v.id, true)"
         (mouseout)="highlight(v.id, false)"
+        gdRows="auto auto auto"
+        gdGridAlign="center center"
+        gdAlignRows="center center"
       >
-        <span inlineSVG="{{v.icon_url}}"></span>
+        <span inlineSVG="{{v.icon_url}}" class="logo-element"></span>
         <h3>{{v.title}}</h3>
-        <p>{{v.description}}</p>
+        <p class="mat-caption">{{v.description}}</p>
       </div>
     </div>
     <div gdArea="logo">
@@ -20,10 +23,13 @@
         *ngFor="let v of brandValuesRight"
         (mouseover)="highlight(v.id, true)"
         (mouseout)="highlight(v.id, false)"
+        gdRows="auto auto auto"
+        gdGridAlign="center center"
+        gdAlignRows="center center"
       >
-        <span inlineSVG="{{v.icon_url}}"></span>
+        <span inlineSVG="{{v.icon_url}}" class="logo-element"></span>
         <h3>{{v.title}}</h3>
-        <p>{{v.description}}</p>
+        <p class="mat-caption">{{v.description}}</p>
       </div>
     </div>
   </div>
diff --git a/src/app/logo-values/logo-values.component.scss b/src/app/logo-values/logo-values.component.scss
index 3267427..ca1f287 100644
--- a/src/app/logo-values/logo-values.component.scss
+++ b/src/app/logo-values/logo-values.component.scss
@@ -1,5 +1,12 @@
 .logo-values {
   padding: 80px;
+
+  .logo-element {
+    ::ng-deep svg {
+      width: 64px;
+      height: 64px;
+    }
+  }
 }
 
 .logo-animated {
@@ -17,7 +24,9 @@
       transition: all 1s ease-in-out;
 
       &.highlight {
+        stroke-width: 6px;
         opacity: 1;
+
       }
     }
   }
diff --git a/src/assets/json/values.json b/src/assets/json/values.json
index 4bc85be..3965113 100644
--- a/src/assets/json/values.json
+++ b/src/assets/json/values.json
@@ -5,22 +5,22 @@
     "description": "First we listen, then we find empathy, then we accept responsibility. We work daily with scientists and experts who live and breathe their passions. Our work with excellent minds allows us to build true innovations through tight collaboration. The ribbon of constant and open communication binds us to each other, fosters common understanding, wraps every interaction in shared purpose.",
     "icon_url": "/assets/icons/the_ribbon.svg"
   },
-  {
-    "id":  "the_equals_sign",
-    "title": "Respect",
-    "description": "We treat each other as equals. Respect must begin within ourselves. We take time to respect and care for ourselves and our families first, and this care and compassion will lead to better care of and respect for our clients. We come to work with the power to make things happen and the balance of perspective that comes from being healthy and happy in the rest of our lives. We then have the most to give others.",
-    "icon_url": "/assets/icons/the_equals_sign.svg"
-  },
   {
     "id":  "the_compass",
     "title": "Rigor",
     "description": "The compass symbol in our logo represents exactitude and truth. We do not aim to make things beautiful first, but to make things exact, and in doing so, bring forth beauty. We have long worked with scientists. We know every piece of data matters. It must make sense and must be easy to access, manipulate, and share. We spend a lot of time thinking about the importance of information, because, if done correctly, good data can change the way we all see the world.",
     "icon_url": "/assets/icons/the_compass.svg"
   },
+  {
+    "id":  "the_equals_sign",
+    "title": "Respect",
+    "description": "We treat each other as equals. Respect must begin within ourselves. We take time to respect and care for ourselves and our families first, and this care and compassion will lead to better care of and respect for our clients. We come to work with the power to make things happen and the balance of perspective that comes from being healthy and happy in the rest of our lives. We then have the most to give others.",
+    "icon_url": "/assets/icons/the_equals_sign.svg"
+  },
   {
     "id":  "the_heart",
     "title": "Passion",
-    "description": "We take on work and play that ignites our passion for learning, building, and creating a better world. At the Makerspace, in our code, with our kids, our passion enlivens our minds and brings us joy. Joy begets works of delight, delight brings engagement, engagement brings insight. Insight brings us greater wisdom.",
+    "description": "We take on work and play that ignites our passion for learning, building, and creating a better world. At the Makerspace, in our code, with our kids, our passion enlivens our minds and brings us joy. Joy begets works of delight, delight brings engagement, engagement brings insight. Insight brings us greater wisdom. Wisdom teaches us to play and follow our passion.",
     "icon_url": "/assets/icons/the_heart.svg"
   },
   {