Homepage Improvements (#37)

* Adjusted the homepage and header to better define the website as a developer hub.
* Completed minor changes to the homepage based on feedback from Kate.

config/_default/hugo.yaml

@@ -40,7 +40,7 @@ params:
   usabanner: true
   sidenav:
   custom_css:
-  - /css/site.css
+  - css/site.css
   searchAffiliate: fedramp-automation
 #    debug: true
 markup:

content/_index.md

@@ -8,24 +8,29 @@ cascade:
     display: true
   sidenav:
     collapsedepth: 4
+custom_css:
+- css/index.css
 ---
-{{% usa-hero image="img/homepage-banner-desktop.jpg" calloutText="Control-Based Assessments" calloutAltText="Automating" buttonURL="/about/" buttonText="Learn More" %}}
-Using OSCAL to streamline and<br>
-automate risk management processes
-{{% /usa-hero %}}
+{{% usa-hero image="img/homepage-banner-desktop.jpg" calloutText="Build a More Automated FedRAMP Risk Management Process" buttonURL="/about/" buttonText="Learn More" %}}
+Helping you to develop OSCAL-based tools to streamline and automate risk management for cloud services used by the federal government{{% /usa-hero %}}
 
 <div class="site-content-container">
 <main id="main-content" class="main-content usa-prose">
 
-# Modernizing Security Assessments, System Authorizations, and Continuous Monitoring
+# Helping Developers Modernize Security Assessments, System Authorizations, and Continuous Monitoring
 
-The *Open Security Controls Assessment Language* (OSCAL) offers a number of benefits for streamlining and automating aspects of the information system authorization process. Below are just a few examples:
+The FedRAMP developer hub is an active, open source community for engineers focused on creating the tooling used to create, maintain, and use digital authorization packages and continuous monitoring data. Contributors to this community are working to use and enhance the *Open Security Controls Assessment Language* (OSCAL) to reduce friction through all stages of the FedRAMP authorization and continuous monitoring processes.
 
-- **Cloud Service Providers (CSPs)** are able to create their FedRAMP authorization packages more rapidly and accurately, validating much of the package content before submission to agencies and FedRAMP for review.
-- **Third Party Assessment Organizations (3PAOs)** are able to use OSCAL-based authorization package data to automate the planning, execution, and reporting of cloud assessment activities.
+OSCAL offers a number of benefits for streamlining and automating aspects of the information system authorization process.
+
+Our goal is to enable you to develop tools that will seamlessly ensure FedRAMP OSCAL requirements are met so your security practitioners can focus on authorization package content and accuracy, rather than formatting and presentation.
+
+Below are just a few examples of how FedRAMP OSCAL-based authorization packages will benefit your organization:
+- **Cloud Service Providers (CSPs)** are able to create their FedRAMP authorization packages more rapidly and accurately, validating much of the package content before submission to agencies and FedRAMP for review. 
+- **Third Party Assessment Organizations (3PAOs)** are able to use OSCAL-based authorization package data to automate the planning, execution, and reporting of cloud assessment activities. 
 - **Agencies** are able to expedite their reviews of authorization packages.
 
-FedRAMP expects to be able to build tooling to further reduce the cost and improve the quality of package reviews based on OSCAL data.
+FedRAMP expects to be able to collaboratively build tooling to further reduce the cost and improve the quality of package reviews based on OSCAL data.
 
 **[Get started](/start) with FedRAMP OSCAL-based authorization packages today.**
 

layouts/partials/header-logo.html

@@ -1 +1,3 @@
-<img src="{{ relURL "img/FR-logo-automation.png" }}" alt="FedRAMP Automation" width="1804" height="421" style="width: auto; height: 3rem" />
+<a class="usa-logo__text site-logo__text" href="{{ urls.Ref .Page "/" | relURL }}" title="{{ .Site.Params.header.project_name }}" aria-label="Home">
+  <img src="{{ relURL "img/fedramp-logo-square-standard.png" }}" alt="FedRAMP Developer Hub" width="1804" height="421" style="width: auto; height: 3rem" /><span>&nbsp;Developer Hub</span>
+</a>

static/css/index.css

@@ -0,0 +1,3 @@
+.usa-hero__callout {
+  max-width: 30rem;
+}

static/css/site.css

@@ -1,97 +1,12 @@
-/*
-.site-header .site-logo__text::before {
-    height: 842px;
-    object-fit: fill;
-    alt: 'FedRAMP';
-    content: "";
-    background-image: url(/img/fedramp-logo-square-standard.png);
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    display: inline-block;
-    margin-left: -2px;
-    margin-right: .25rem;
-    position: relative;
-    top: -1px;
-    vertical-align: middle;
-}
-*/
-/* ---- Cookie Notice ---- */
-
-.cookie-accept-container {
-	float: right;
-	width: 25%;
-	text-align: right;
-	top: 6px;
-	position: relative;
-}
-
-#cookie-notice a#cookie-notice-accept {
-	border: solid 1px $dark-gray;
-	color: $dark-gray;
-	padding: 10px 24px 8px 24px;
-	border-radius: 20px;
-	text-transform: uppercase;
-	font-weight: 800;
-	font-size: 0.875rem;
-
-	&:hover {
-		opacity: .9;
-	}
-
-}
-
-.cookie-container {
-	max-width: 1200px;
-	text-align: left;
-	margin: auto;
-	font-size: 0.875rem;
-}
-
-.cookie-container div.cookie-text {
-	position: relative;
-	float: left;
-	width: 75%;
-}
-
-.cookie-notice {
-
-}
-
-
-#cookie-notice {
-	padding: 1rem; 
-	display: none; 
-	text-align: center; 
-	position: fixed; 
-	bottom: 0; 
-	width: 100%; 
-	background: $lightest-gray; 
-	color: $dark-gray; 
-	margin: auto;
-}
-#cookie-notice a {
-	display: inline-block; 
-	cursor: pointer; 
-	color: $dark-gray;
+.usa-in-page-nav__list a:not(.usa-button) {
+  padding: 0.25rem 1rem !important;
 }
-
-@media (max-width: 767px) {
-	#cookie-notice div {display: block; padding-top: 3px; margin-bottom: 1rem;}
-	#cookie-notice a {position: relative;}
-
-	.cookie-container div.cookie-text {
-		top: 0px;
-		float: none;
-		width: 100%;
-	}
-
-	.cookie-accept-container {
-		float: none;
-		width: 100%;
-		text-align: left;
-	}
+.site-header.usa-header--extended .site-logo__text {
+  display:flex;
+  align-items:center;
 }
 
-.usa-in-page-nav__list a:not(.usa-button) {
-    padding: 0.25rem 1rem !important;
+.site-header.usa-header--extended .site-logo__text {
+  display:flex;
+  align-items:center;
 }