Merge pull request #6 from vaelgates/frontpage-changes

Change colors, layout, and wording on front page

_sass/components/_button.scss

@@ -205,9 +205,9 @@ button,
 
 	&.request-call-button {
 		appearance: none;
-		background-color: var(--color-arkose-green);
+		background-color: var(--color-arkose-green-saturated);
+		color: var(--color-always-dark);
 		box-shadow: inset 0 0 0 2px #333;
-		color: #333;
 		cursor: pointer;
 		display: inline-block;
 		font-weight: 600;

_sass/layout/_banner.scss

@@ -17,7 +17,7 @@
 		background-color: #c5c5bd;
 		border-bottom: 0 !important;
 		cursor: default;
-		height: 800px;
+		height: 700px;
 		max-height: 32em;
 		min-height: 22em;
 		position: relative;
@@ -95,8 +95,11 @@
 		}
 
 		h1 {
-			font-size: 1.5em;
+			font-size: 3em;
 			color: #fff;
+			font-weight: 400;
+			margin-bottom: 0.25em;
+			line-height: 1.3em;
 		}
 
 		> .inner {
@@ -169,9 +172,6 @@
 		&.style6 { &:after { background-color: var(--color-accent6); } }
 
 		.banner-button-container {
-			display: flex;
-			justify-content: center;
-
 			@include breakpoint(small) {
 				padding-right: 1.25em;
 			}

_sass/libs/_colors.scss

@@ -16,6 +16,7 @@
 	--color-accent5:			#8ea9e8;
 	--color-accent6:			#87c5a4;
 	--color-arkose-green:	#7bcabb;
+	--color-arkose-green-saturated: #00E7C3;
 	--color-always-dark:  #242943;
 	--color-arkose-dark-blue:  #424b7a;
 
@@ -66,6 +67,7 @@ html[data-theme="dark"] {
 	--color-accent5:					#8ea9e8;
 	--color-accent6:					#87c5a4;
 	--color-arkose-green:			#7bcabb;
+	--color-arkose-green-saturated: #00E7C3;
 	--color-always-dark:		  #242943;
 	--color-arkose-dark-blue:  #b2b8d6;
 

index.md

@@ -39,12 +39,19 @@ featured_image: /assets/img/social.jpg
 <section id="banner" class="major">
   <div class="arkose-banner" style="background-image: url('{{ '/assets/images/arkose-banner.jpg' | relative_url }}')"></div>
   <div class="row xs-padding-1 banner-inner">
-    <div class="4u -4u 6u(xxlarge) -3u(xxlarge) 8u(large) -2u(large) 10u(medium) -1u(medium) 12u(small) 0u(small)" style="position: relative; padding: 2em;">
+    <div class="6u -3u 8u(xxlarge) -2u(xxlarge) 10u(xlarge) -1u(xlarge) 12u(small)" style="position: relative; padding: 2em;">
       <div class="background">&nbsp;</div>
       <h1 class="display-1">Explore AI safety research opportunities</h1>
-      <p>Arkose helps researchers and engineers learn about funding and job openings in AI safety. We also facilitate connections with senior researchers in industry and academia. As an AI safety fieldbuilding nonprofit, our help is always free.</p>
+      <p>Arkose helps researchers and engineers learn about funding and job openings in AI safety.</p>
       <div class="banner-button-container">
         <a href="{{site.applyurl}}" class="button banner-button request-call-button">
+        <!--
+          Colors to consider for background-color:
+            Saturated green: #0ca683
+            Light green: #5dcbb9
+            Light blue: #83c1dc
+            Arkose green: #7bcabb or var(--color-arkose-green)
+        -->
           Request a Call
         </a>
       </div>