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:
parent
ad70042774
commit
8dbb3b32a2
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user