Merge pull request #246 from CodeForPhilly/website-update

Improve adherence to design document, improve styling and accessibility, improve responsive layout, add some copy text

Author: earth-walker

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@fontsource/open-sans": "^5.2.7",
+    "@fontsource/ramaraja": "^5.2.8"
+  }
+}

package.json

@@ -1,3 +1,3 @@
 ### Empathy
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+For people who are entitled to benefits and organizations who work to help them get those benefits

website/src/assets/backgrounds/bubbles.svg

@@ -1,3 +1,3 @@
 ### Inclusivity
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+Stand against discrimination with regard to race, gender, religion, etc.

website/src/assets/copy/values/Empathy.md

@@ -1,3 +1,3 @@
 ### Transparency
 
-There is a need in the non-profit community for easy-to-use and open source screener-building toolkits. Many small non-profits resort to building eligibility screening tools with Excel because this is the only low-cost and low-code option available to them.
+Remain open source and accessible

website/src/assets/copy/values/Inclusivity.md

@@ -14,7 +14,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Name:</label></div>
           <div>
             <input
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
               type="text"
               name="name"
               id="name"
@@ -24,7 +24,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Email:</label></div>
           <div>
             <input
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
               type="text"
               name="email"
               id="email"
@@ -34,21 +34,21 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Message:</label></div>
           <div>
             <textarea
-              class="my-3 p-3 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full h-40 border-2 border-sky-500 rounded-2xl"
               name="message"
               id="message"
               placeholder="Your message"></textarea>
           </div>
           <input
-            class="px-4 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
+            class="px-6 py-2 mt-3 font-serif font-bold bg-green-300 rounded-full text-lg cursor-pointer"
             type="submit"
             value="Submit"
             size=""
           />
         </form>
       </div>
       <div
-        class="sm:w-3/5 bg-[url(../assets/photos/man-in-office.png)] bg-cover hidden sm:block"
+        class="sm:w-3/5 bg-[url(../assets/photos/man-in-office.png)] bg-cover bg-center hidden sm:block"
       >
         <img class="h-full relative right-0.5" src={wedge.src} alt="" />
       </div>