diff --git a/packages/website/src/css/main.css b/packages/website/src/css/main.css index 030369e36..4d26aa8c7 100644 --- a/packages/website/src/css/main.css +++ b/packages/website/src/css/main.css @@ -1862,6 +1862,10 @@ body.body--menu-open .header__burger-lines::after { display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; @@ -1873,7 +1877,7 @@ body.body--menu-open .header__burger-lines::after { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; - row-gap: 12px; + row-gap: 24px; } @media (max-width: 740px) { .copyrights { @@ -1898,6 +1902,14 @@ body.body--menu-open .header__burger-lines::after { row-gap: 12px; color: rgba(255, 255, 255, 0.5); } +@media (max-width: 740px) { + .copyrights__created { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } +} .copyrights__text { font-size: 14px; @@ -1913,6 +1925,10 @@ body.body--menu-open .header__burger-lines::after { transition: all 0.25s ease; } +.copyrights__link--large { + width: 200px; +} + .copyrights__link:hover { color: #FFFFFF; } diff --git a/packages/website/src/index.html b/packages/website/src/index.html index 2584a1632..cf8c629c3 100644 --- a/packages/website/src/index.html +++ b/packages/website/src/index.html @@ -821,7 +821,7 @@

Created by - + +
+ + Maintained by + + + + + + + + + + + + + +
diff --git a/packages/website/src/sass/components/_footer.sass b/packages/website/src/sass/components/_footer.sass index 2addadb81..f4578f87b 100644 --- a/packages/website/src/sass/components/_footer.sass +++ b/packages/website/src/sass/components/_footer.sass @@ -71,12 +71,13 @@ .copyrights display: flex + flex-direction: column width: 100% justify-content: center align-items: center margin: 48px auto 0 column-gap: 40px - row-gap: 12px + row-gap: 24px +media(s) flex-direction: column @@ -89,6 +90,9 @@ row-gap: 12px color: transparentize($white, 0.5) + +media(s) + flex-direction: column + .copyrights__text font-size: 14px line-height: 16px @@ -99,6 +103,9 @@ color: inherit transition: $all +.copyrights__link--large + width: 200px + .copyrights__link:hover color: $white