Portfolio Spacing & Layout

Portfolio adjustments:
-Cleaned up container margins/padding
-Added max-width to header and Settings section
-Refined Portfolio header and nav links

Other adjustments:
-Reduced font size of side nav links
This commit is contained in:
hmbrink 2020-01-17 17:02:15 -05:00 committed by dandds
parent ad70042774
commit 8dbb3b32a2
5 changed files with 34 additions and 15 deletions

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;