UI Tweaks - add bio contact info

public/css/app.css

@@ -456,6 +456,11 @@ section {
   position: relative;
 }
 
+.bold-intro {
+  display: inline-block;
+  font-weight: 600;
+}
+
 .intro-bg-white {
   width: 100%;
   display: flex;
@@ -534,6 +539,38 @@ h3 {
   transition: filter 0.2s ease;
 }
 
+.bio-contact {
+  justify-content: center;
+  margin-bottom: calc(var(--padding) / 2);
+  text-decoration: none;
+}
+
+.bio-email-icon {
+  height: 1.75rem;
+  width: 1.75rem;
+  background-image: url("/img/email-icon.svg");
+  background-position: center center;
+  background-size: 18px;
+  background-repeat: no-repeat;
+  border: 2px solid #eee;
+  background-color: #eae9e9;
+  border-radius: 50%;
+}
+
+.bio-contact-email {
+  font-weight: 600;
+  font-size: .7rem;
+  color: var(--darkTextColor);
+  opacity: .9;
+  margin: auto auto auto .5rem;
+  transition: opacity 0.3s ease;
+}
+
+.bio-contact:hover .bio-contact-email {
+  opacity: .5;
+  transition: opacity 0.3s ease;
+}
+
 .thyla {
   background-image: url("/img/surf-people/thyla.jpeg");
 }
@@ -601,7 +638,7 @@ h3 {
   opacity: 0;
   flex-direction: column;
   text-align: right;
-  background-color: rgb(255, 255, 255);
+  background-color: #fafafa;
   box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, .05);
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -618,15 +655,12 @@ h3 {
   margin: auto;
 }
 
-/* .mobile-menu-fixed > .nav-link:hover {
-  background-color: var(--mozGrey);
-} */
-
 .show-menu {
   visibility: visible;
   pointer-events: all;
   opacity: 1;
   transform: translateY(0px);
+  background-image: url("/img/SVG/bg.svg");
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 

public/img/SVG/bg.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
+  <line x1="0" y1="0" x2="0" y2="10" style="stroke:#fafafa; stroke-width:8" />
+</pattern>
+<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/></svg>

public/img/email-icon-white.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1091.6 803.6" enable-background="new 0 0 1091.6 803.6" xml:space="preserve">
+<path fill="#CCCCCC" d="M688.5,381.9L546.4,517.8L419.8,397.4l-10.1-9.6L393.4,405L23.9,780.7c14.6,14.7,34.4,22.9,55.1,22.9H1014
+	c20.6,0,40.4-8.3,55-22.9L705.5,400.4L688.5,381.9z"/>
+<path fill="#DDDDDD" d="M408.6,388.5L22.4,23.2C8.5,38,0.5,57.3,0,77.6v649.3c0,20.7,8.2,40.5,22.9,55l369.5-375.7L408.6,388.5z
+	 M1086,52.3c-4.2-12.6-11.5-24.1-21.2-33.2L686.3,380.4l17.2,17.2l365.2,383.1c14.7-14.6,22.9-34.4,22.9-55.1V76.4
+	C1091.1,68.1,1089.2,60,1086,52.3z"/>
+<path fill="#EFEFEF" d="M408.6,387.5l10.1,9.6l126.6,120.4l142.1-135.9L1066,20.3c-13.8-13.5-32.3-21.1-51.6-21.3H77.9
+	C57.1-0.9,37.2,7.8,23,23.1L408.6,387.5z"/>
+</svg>

views/landing-page.hbs

@@ -42,6 +42,10 @@
           <h4 class="ff-Met bio-name">{{ this.name }}</h4>
           <p class="bio-title ff-Met">{{ this.jobTitle }}</p>
           <p class="bio-affiliation ff-Met">{{ this.affiliation }}</p>
+          <a href="mailto:{{ this.contact }}" class="bio-contact flx-row">
+            <div class="bio-email-icon bg-img"></div>
+            <p class="bio-contact-email ff-Met">{{ this.contact }}</p>
+          </a>
           <p class="bio-text body-text">{{ this.bio }}</p>
         </div>
       </div>