{siteConfig.title}
documentation
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 94b34e9..121f637 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -2,6 +2,11 @@ flex: 1; background-image: url('/static/img/bg.png'); background-size: 100% 100%; + padding: toRem(80) toRem(40) toRem(120); + + @include respond-to(medium) { + padding: toRem(40) toRem(20) toRem(60); + } } .home-page__content-wrp { @@ -34,9 +39,22 @@ .home-page__buttons { display: flex; align-items: center; + justify-content: center; gap: toRem(24); + + @include respond-to(medium) { + gap: toRem(16); + } + + @include respond-to(small) { + flex-direction: column-reverse; + } } .home-page__button { min-width: toRem(210); + + @include respond-to(medium) { + min-width: toRem(170); + } } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 26bff72..92f054b 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -40,6 +40,11 @@ $media-breakpoints: ( font-weight: 400; line-height: toRem(72); letter-spacing: 0; + + @include respond-to(medium) { + font-size: toRem(36); + line-height: toRem(48); + } } @mixin h2 { diff --git a/src/styles/footer.scss b/src/styles/footer.scss index 8a73833..033bd6c 100644 --- a/src/styles/footer.scss +++ b/src/styles/footer.scss @@ -1,45 +1,26 @@ .footer { background: var(--background-primary-main); box-shadow: 0 toRem(-1) var(--background-primary-light); - padding: 0; + padding: toRem(24) toRem(80); - .footer__links { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0; - height: toRem(70); + .container { + padding: 0; } - span.footer__link-item { - padding: 0; + .footer__links { + text-align: left; + margin-bottom: 0; } .footer__link-item { - text-decoration: none; - outline: none; + display: block; + padding: 0; color: var(--text-primary-main); - padding: toRem(12) toRem(16); - - &:hover, - &:focus, - &:active { - text-decoration: none; - } - - &:not([disabled]):hover { - color: var(--primary-light); - } - - &:not([disabled]):focus, - &:not([disabled]):active { - color: var(--primary-main); - } @include p-14-semi-bold; } - .footer__link-separator { - display: none; + @include respond-to(medium) { + padding: toRem(16) var(--app-padding-right) toRem(16) var(--app-padding-left); } }