diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 5ad748d1..22de84e8 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -22,14 +22,13 @@ body { padding-bottom: $footer-height * 2.5; .global-panel-container { - margin: $gap; flex-grow: 1; -ms-flex-negative: 1; top: $usa-banner-height + $topbar-height; position: relative; + padding: 0 $spacing-large; @include media($medium-screen) { - margin: $gap * 2; top: $usa-banner-height + $topbar-height; } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 81a15b69..9dc9ee6a 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -4,25 +4,29 @@ min-height: 500px; } - margin-left: 2 * $gap; + .col.col--grow { + padding: 0; + } } .portfolio-header { flex-direction: column; + align-items: center; + margin: $spacing-medium 0; + max-width: 90rem; @include media($small-screen) { flex-direction: row; } - margin-bottom: $gap * 1; - .col--grow { overflow: inherit; } &__name { @include h1; + padding-right: $spacing-medium; h1 { - margin: 0 $gap ($gap * 2) 0; + margin: 0; font-size: 3.5rem; } @@ -30,6 +34,7 @@ font-size: $small-font-size; margin: 0 0 (-$gap * 0.5); color: $color-gray-medium; + max-width: 100%; } } @@ -38,9 +43,15 @@ font-size: $small-font-size; .icon-link { - padding: $gap; + padding: 0; border-radius: 0; color: $color-blue-darkest; + min-width: 10rem; + min-height: 10rem; + + .col { + margin: 0 auto; + } &:hover { background-color: $color-aqua-lightest; @@ -82,11 +93,19 @@ margin-bottom: 3 * $gap; } -.portfolio-content { - margin: (4 * $gap) $gap 0 $gap; +.portfolio-admin { + margin: $spacing-large 0; + max-width: 90rem; +} +.portfolio-content { .panel { padding-bottom: 2rem; + max-width: 90rem; + } + + hr { + max-width: 90rem; } a.add-new-button { @@ -289,8 +308,8 @@ } .portfolio-funding { - padding: 2 * $gap; - padding-top: 0; + max-width: 90rem; + margin: $spacing-large 0; .panel { @include shadow-panel; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index a62dc326..12d67d8e 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -20,9 +20,10 @@ .sticky-cta-container { display: flex; align-items: center; + max-width: 90rem; .usa-button { - margin: $gap $gap * 1.5 $gap 0; + margin: 0; width: 20rem; height: 3.2rem; font-size: $small-font-size; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 122739c4..70524e97 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -189,4 +189,4 @@ $spacing-x-small: 0.5rem; $spacing-small: 1rem; $spacing-md-small: 1.5rem; $spacing-medium: 2rem; -$spacing-large: 3rem; +$spacing-large: 4rem; diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 23a4f05f..81a55b4e 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -113,8 +113,8 @@ text-overflow: ellipsis; &--active { - @include h4; - + font-size: $base-font-size; + font-weight: $font-bold; background-color: $color-aqua-lightest !important; color: $color-primary-darker !important; box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;