diff --git a/lib/assets/stylesheets/application.scss b/lib/assets/stylesheets/application.scss index d7ca8b4..f64797c 100644 --- a/lib/assets/stylesheets/application.scss +++ b/lib/assets/stylesheets/application.scss @@ -47,6 +47,7 @@ Application specific code @import "../../components/rating/rating"; @import "../../components/table/table"; @import "../../components/status/status"; +@import "../../components/stripe/stripe"; @import "../../components/teaser/teaser"; @import "../../components/text/text"; diff --git a/lib/blueprints/container-layouts/container/_container.scss b/lib/blueprints/container-layouts/container/_container.scss index 674ccda..19cef15 100644 --- a/lib/blueprints/container-layouts/container/_container.scss +++ b/lib/blueprints/container-layouts/container/_container.scss @@ -1,6 +1,7 @@ .container, %container { @include for-tablet-landscape-up { + align-items: baseline; padding: 0 $spacer-base; } @@ -34,6 +35,41 @@ align-items: center; } +// Vertical Spacing +.container-vertical-spacing-2xl, +%container-vertical-spacing-2xl { + @include for-tablet-landscape-up { + padding-top: $spacer-2xl; + padding-bottom: $spacer-2xl; + } + + padding-top: $spacer-xl; + padding-bottom: $spacer-xl; +} + +.container-vertical-spacing-xl, +%container-vertical-spacing-xl { + @include for-tablet-landscape-up { + padding-top: $spacer-xl; + padding-bottom: $spacer-xl; + } + + padding-top: $spacer-lg; + padding-bottom: $spacer-lg; +} + +.container-vertical-spacing-lg, +%container-vertical-spacing-lg { + @include for-tablet-landscape-up { + padding-top: $spacer-lg; + padding-bottom: $spacer-lg; + } + + padding-top: $spacer-base; + padding-bottom: $spacer-base; +} + +// Deprecated Class TODO Replace everywhere .container__fullwidth { @include for-tablet-landscape-up { padding: 0 $spacer-base; diff --git a/lib/components/buttons/_buttons.scss b/lib/components/buttons/_buttons.scss index b11c86c..8284994 100644 --- a/lib/components/buttons/_buttons.scss +++ b/lib/components/buttons/_buttons.scss @@ -47,7 +47,7 @@ &:hover, &:focus { color: $brand-text; - background-color: $brand-primary-light; + background-color: $brand-primary; } } @@ -58,7 +58,7 @@ &:hover, &:focus { - background-color: $brand-secondary-light; + background-color: $brand-secondary; } } diff --git a/lib/components/hero/_hero.scss b/lib/components/hero/_hero.scss index 411f09e..7af9a16 100644 --- a/lib/components/hero/_hero.scss +++ b/lib/components/hero/_hero.scss @@ -1,8 +1,8 @@ .hero { @include for-tablet-landscape-up { - grid-template-columns: 1fr 1fr; - gap: $spacer-xl; - padding: $spacer-xl $spacer-base $spacer-xl $spacer-base; + grid-template-columns: 1.3fr 1fr; + gap: $spacer-sm; + padding: $spacer-2xl $spacer-base 0 $spacer-base; } display: grid; @@ -11,7 +11,7 @@ width: 100%; max-width: $desktop-xl; margin: 0 auto; - padding: $spacer-lg $spacer-xs $spacer-lg $spacer-xs; + padding: $spacer-lg $spacer-xs 0 $spacer-xs; } .hero_grid-wrapper { @@ -50,8 +50,8 @@ .hero__image { @include for-tablet-landscape-up { display: block; - align-self: flex-start; - width: 70%; + align-self: flex-end; + width: 75%; } display: none; @@ -59,6 +59,7 @@ .hero__logos { @include for-tablet-landscape-up { + align-self: flex-end; margin-top: $spacer-md; } diff --git a/lib/components/stripe/_stripe.scss b/lib/components/stripe/_stripe.scss new file mode 100644 index 0000000..8defed6 --- /dev/null +++ b/lib/components/stripe/_stripe.scss @@ -0,0 +1,28 @@ +.stripe { + overflow: hidden; + width: 100%; +} + +.stripe--primary { + background-color: $brand-primary; +} + +.stripe--primary-light { + background-color: $brand-primary-light; +} + +.stripe--secondary { + background-color: $brand-secondary; +} + +.stripe--secondary-light { + background-color: $brand-secondary-light; +} + +.stripe--white-1 { + background-color: $brand-white-1; +} + +.stripe--black { + background-color: $brand-gray; +} diff --git a/lib/views/home/home.md b/lib/views/home/home.md index 255994f..656e454 100644 --- a/lib/views/home/home.md +++ b/lib/views/home/home.md @@ -1,7 +1,7 @@ title: Homepage description: Homepage -```html height='500px' +```html