diff --git a/_includes/home-banner.html b/_includes/home-banner.html index 726d55c..41549f8 100644 --- a/_includes/home-banner.html +++ b/_includes/home-banner.html @@ -2,7 +2,7 @@
Safe, customer facing template language for flexible web apps.
- Download - View on GitHub + Download +
diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss index 36d4aa5..1bcdaef 100644 --- a/_sass/modules/_buttons.scss +++ b/_sass/modules/_buttons.scss @@ -3,15 +3,31 @@ display: flex; background: $color-blue-5; align-items: center; + justify-content: center; padding: $spacing-unit/4 $spacing-unit/2; border-radius: 8px; text-decoration: none; + text-align: center; + white-space: nowrap; &:hover { background: $color-blue-4; cursor: pointer; text-decoration: none; } + + &:first-child { + margin-bottom: $spacing-unit / 2; + } + + @include phone-and-up { + justify-content: center; + + &:first-child { + justify-content: flex-start; + margin-bottom: 0; + } + } } .btn:visited { @@ -21,10 +37,15 @@ .btn-row { display: flex; justify-content: center; + flex-direction: column; margin-bottom: 0; - .btn:not(:first-child) { - margin-left: $spacing-unit / 2; + @include phone-and-up { + flex-direction: row; + + .btn:not(:first-child) { + margin-left: $spacing-unit / 2; + } } } diff --git a/_sass/modules/_home-banner.scss b/_sass/modules/_home-banner.scss index cec7ff0..8c5989d 100644 --- a/_sass/modules/_home-banner.scss +++ b/_sass/modules/_home-banner.scss @@ -2,10 +2,14 @@ text-align: center; border-bottom: 1px solid lighten($color-slate, 50%); padding-bottom: $spacing-unit; - margin-bottom: $spacing-unit; h1 { font-weight: bold; - font-size: 5em; + font-size: 4em; + + @include phone-and-up { + font-size: 5em; + } } } + diff --git a/_sass/partials/_media-queries.scss b/_sass/partials/_media-queries.scss index bec2f0e..413d2c1 100644 --- a/_sass/partials/_media-queries.scss +++ b/_sass/partials/_media-queries.scss @@ -2,7 +2,7 @@ Media queries ==============================================================================*/ -$phone-width: 321px; +$phone-width: 375px; $tablet-width: 768px; $desktop-width: 1024px;