diff --git a/app/assets/stylesheets/new_design/_constants.scss b/app/assets/stylesheets/new_design/_constants.scss index fca67e46a..0b479f2de 100644 --- a/app/assets/stylesheets/new_design/_constants.scss +++ b/app/assets/stylesheets/new_design/_constants.scss @@ -6,7 +6,7 @@ $default-padding: 2 * $default-spacer; // layouts $two-columns-padding: 60px; -$two-columns-breakpoint: $page-width + (2 * $two-columns-padding); +$two-columns-breakpoint: 980px; // z-order $alert-z-index: 100; diff --git a/app/assets/stylesheets/new_design/layouts.scss b/app/assets/stylesheets/new_design/layouts.scss index fda1ff4ad..a5eee6808 100644 --- a/app/assets/stylesheets/new_design/layouts.scss +++ b/app/assets/stylesheets/new_design/layouts.scss @@ -13,29 +13,32 @@ @extend .container; display: flex; flex-direction: column; + justify-content: center; @media (min-width: $two-columns-breakpoint) { flex-direction: row; align-items: stretch; - justify-content: center; + justify-content: space-between; } } .column { - padding: $two-columns-padding 0 0; width: 100%; max-width: 500px; + margin: 0 auto; + padding: ($default-padding * 2) 0 0 0; + + &:last-of-type { + padding-bottom: $default-padding * 2; + } @media (min-width: $two-columns-breakpoint) { - padding: $two-columns-padding; - width: 50%; + width: 45%; + margin: 0; + padding: $two-columns-padding 0 $two-columns-padding 0; - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; + &:last-of-type { + padding-bottom: $two-columns-padding; } } } diff --git a/app/assets/stylesheets/new_design/procedure_context.scss b/app/assets/stylesheets/new_design/procedure_context.scss index 714097652..dccd52c9b 100644 --- a/app/assets/stylesheets/new_design/procedure_context.scss +++ b/app/assets/stylesheets/new_design/procedure_context.scss @@ -26,17 +26,19 @@ $procedure-context-breakpoint: $two-columns-breakpoint; .procedure-title { font-size: 30px; - margin: 20px 0 0; + margin: 0 0 20px 0; + text-align: center; @media (min-width: $procedure-context-breakpoint) { margin: 50px 0 32px; + text-align: left; } } .procedure-description { font-size: 16px; - p { + p:not(:last-of-type) { margin-bottom: 2 * $default-spacer; } @@ -52,7 +54,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint; img { max-height: 50px; max-width: 100%; - margin: 0 10px; + margin: 0 10px 20px 10px; @media (min-width: $procedure-context-breakpoint) { max-height: 130px;