Topbar, Portfolio Header, & Content alignment

styles/components/_empty_state.scss

@@ -1,8 +1,6 @@
 .empty-state {
-  padding: $gap * 3;
-  max-width: 100%;
-  background-color: $color-gray-lightest;
-  margin-top: $gap * 5;
+  max-width: $max-panel-width;
+  background-color: #F6F6F7;
 
   &--white {
     background-color: $color-white;
@@ -18,17 +16,28 @@
     margin-top: 3rem;
   }
 
+  h3 {
+    margin: 0 0 1rem;
+    padding: 3.2rem 2.4rem 0;
+  }
+
+  p {
+    margin: 0;
+    padding: 0 $gap * 3;
+  }
+
   hr {
-    margin-left: -$gap * 3;
-    margin-right: -$gap * 3;
+    margin: $gap * 4 0 0;
   }
 
   &__footer {
     text-align: center;
+    background-color: $color-gray-lightest;
+    padding: $gap * 3;
 
     a.usa-button {
       width: 60%;
-      display: inline-block;
+      margin: 0 auto;
     }
   }
 }

styles/components/_global_layout.scss

@@ -28,6 +28,7 @@ body {
     position: relative;
     padding: 0 $spacing-large;
 
+
     @include media($medium-screen) {
       top: $usa-banner-height + $topbar-height;
     }

styles/components/_portfolio_layout.scss

@@ -5,15 +5,16 @@
   }
 
   .col.col--grow {
+    position: relative;
     padding: 0;
   }
 }
 
 .portfolio-header {
   flex-direction: column;
-  align-items: center;
-  margin: $spacing-medium 0;
-  max-width: 90rem;
+  margin: $gap * 2 0;
+  max-width: $max-panel-width;
+
   @include media($small-screen) {
     flex-direction: row;
   }
@@ -25,6 +26,12 @@
   &__name {
     @include h1;
     padding-right: $spacing-medium;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    -webkit-transform: translateX(0%) translateY(-50%);
+    transform: translateX(0%) translateY(-50%);
+
     h1 {
       margin: 0;
       font-size: 3.5rem;
@@ -64,6 +71,7 @@
       &.active {
         color: $color-blue;
         background-color: $color-gray-lightest;
+        text-decoration: none;
 
         &:hover {
           background-color: $color-aqua-lightest;
@@ -95,17 +103,17 @@
 
 .portfolio-admin {
   margin: $spacing-large 0;
-  max-width: 90rem;
+  max-width: $max-panel-width;
 }
 
 .portfolio-content {
   .panel {
     padding-bottom: 2rem;
-    max-width: 90rem;
+    max-width: $max-panel-width;
   }
 
   hr {
-    max-width: 90rem;
+    max-width: $max-panel-width;
   }
 
   a.add-new-button {
@@ -263,6 +271,7 @@
 
 .portfolio-applications {
   margin-top: $gap * 5;
+  max-width: $max-panel-width;
 
   &__header {
     &--title {
@@ -308,7 +317,7 @@
 }
 
 .portfolio-funding {
-  max-width: 90rem;
+  max-width: $max-panel-width;
   margin: $spacing-large 0;
 
   .panel {
@@ -378,6 +387,8 @@
 }
 
 .portfolio-reports {
+  max-width: $max-panel-width;
+
   &__header {
     margin-bottom: 4 * $gap;
 

styles/components/_sticky_cta.scss

@@ -24,9 +24,6 @@
 
     .usa-button {
       margin: 0;
-      width: 20rem;
-      height: 3.2rem;
-      font-size: $small-font-size;
     }
   }
 
@@ -43,6 +40,10 @@
   &-buttons {
     display: flex;
 
+    a {
+      font-size: 1.5rem;
+    }
+
     .action-group {
       margin: 0;
 

styles/components/_topbar.scss

@@ -4,14 +4,15 @@
   height: $topbar-height;
   position: fixed;
   top: $usa-banner-height;
-  width: 100%;
   z-index: 10;
+  width: 100%;
 
   &__navigation {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     justify-content: space-between;
+    max-width: 1180px;
 
     a {
       color: $color-white;

styles/core/_variables.scss

@@ -16,7 +16,7 @@ $footer-height: 5rem;
 $usa-banner-height: 2.8rem;
 $sidenav-expanded-width: 25rem;
 $sidenav-collapsed-width: 10rem;
-$max-panel-width: 80rem;
+$max-panel-width: 90rem;
 $home-pg-icon-width: 6rem;
 
 /*

styles/elements/_panels.scss

@@ -19,10 +19,7 @@
 }
 
 @mixin panel-margin {
-  margin-top: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: $site-margins-mobile * 6;
+  margin: $spacing-large 0;
 
   @include media($medium-screen) {
     margin-bottom: $site-margins * 8;
@@ -56,9 +53,10 @@
   @include panel-theme-default;
   @include panel-margin;
   @include shadow-panel;
+  max-width: $max-panel-width;
 
   &__content {
-    padding: $gap * 2;
+    padding: 3.2rem 2.4rem;
   }
 
   &__body {
@@ -66,7 +64,7 @@
   }
 
   &__heading {
-    padding: $gap * 2;
+    padding: 3.2rem 2.4rem;
 
     @include media($medium-screen) {
       padding: $gap * 4;

styles/sections/_home.scss

@@ -1,12 +1,12 @@
 .home {
-  margin: $gap * 3;
+
   .sticky-cta {
     margin: -1.6rem -1.6rem 0 -1.6rem;
   }
 
   &__content {
-    margin: 4rem;
-    max-width: 900px;
+    margin: $spacing-large 0;
+    max-width: $max-panel-width;
 
     &--descriptions {
       .col {
@@ -29,7 +29,7 @@
   background-color: $color-white;
 
   .home-container {
-    max-width: 90rem;
+    max-width: $max-panel-width;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 8rem;

templates/portfolios/admin.html

@@ -22,7 +22,7 @@
             {{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
             {{ TextInput(portfolio_form.description, paragraph=True) }}
             <div class='edit-portfolio-name action-group'>
-              {{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }}
+              {{ SaveButton(text='Save Changes') }}
             </div>
           </form>
         </base-form>

templates/user/edit.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class='col'>
+<div class='col user-edit'>
 
   {% include "fragments/flash.html" %}