From cd5d5280ca954a14fcb1aea60db835881235a2d9 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Fri, 22 Jan 2021 23:05:30 +0200 Subject: Remove mobile menu and hamburger button --- sass/header.sass | 38 +------------------------------------- 1 file changed, 1 insertion(+), 37 deletions(-) (limited to 'sass') diff --git a/sass/header.sass b/sass/header.sass index 0ae1105..6e2c081 100644 --- a/sass/header.sass +++ b/sass/header.sass @@ -62,40 +62,4 @@ header +resp(lg) font-size: 14px &:hover - color: $orange - - div.header__mobile-menu__buttons - height: 100% - width: 30px - justify-content: center - display: none - +resp(sm) - display: flex - img - cursor: pointer - display: none - img.active - display: block - -nav#mobile-menu - z-index: 1 - bottom: 0 - top: 0 - right: 0 - position: fixed - left: 100% - background-color: $white - padding: 70px 15px - +resp(esm) - padding: 60px 15px - a - display: block - text-transform: uppercase - color: $black - text-decoration: none - padding: 15px 0 - font-weight: 600 - transition: 0.3s - border-bottom: 1px solid #e0e0e0 - &:hover - color: $orange \ No newline at end of file + color: $orange \ No newline at end of file -- cgit v1.2.3 From c3c4831e7feced95679c778e830a2291ae472642 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Fri, 22 Jan 2021 23:38:24 +0200 Subject: Adapting the main menu for mobile devices --- sass/header.sass | 41 ++++++++++++++++++++--------- sass/settings.sass | 8 ++---- site/css/main.css | 76 +++++++++++++++++++++++++++++++++++++++++++----------- 3 files changed, 92 insertions(+), 33 deletions(-) (limited to 'sass') diff --git a/sass/header.sass b/sass/header.sass index 6e2c081..27c5efa 100644 --- a/sass/header.sass +++ b/sass/header.sass @@ -12,6 +12,8 @@ header z-index: 2 +resp(esm) padding: 10px 0 + +resp(xsm) + padding: 5px 0 div.header__inner display: flex @@ -27,39 +29,54 @@ header margin-right: 30px +resp(lg) margin-right: 16px + +resp(md) + margin-right: 10px div.header__text font-weight: 500 - font-size: 16px line-height: 25px +resp(sm) display: none p font-size: 16px color: #ACACAD - text-align: left +resp(md) + font-size: 15px + +resp(sm) display: none div.header__links-side - display: grid - grid-template-columns: 1fr auto auto auto - grid-gap: 31px - justify-items: center + display: flex align-items: center - +resp(lg) - grid-gap: 20px - text-align: center - +resp(sm) - display: none + +resp(xsm) + flex-wrap: wrap + justify-content: flex-end a font-weight: 600 font-size: 15px - line-height: 14px + line-height: 140% text-transform: uppercase text-decoration: none color: $black transition: 0.3s + margin-left: 31px + text-align: center +resp(lg) font-size: 14px + margin-left: 20px + +resp(esm) + margin-left: 14px + +resp(usm) + font-size: 13px + +resp(xsm) + line-height: 180% + font-size: 14px + margin-left: 24px + &:nth-child(1) + margin-left: 0 + &:nth-child(3) + +resp(usm) + max-width: 100px + +resp(xsm) + max-width: 100% &:hover color: $orange \ No newline at end of file diff --git a/sass/settings.sass b/sass/settings.sass index 6cca3d9..01b3d95 100644 --- a/sass/settings.sass +++ b/sass/settings.sass @@ -35,11 +35,7 @@ $dark-orange: #FD8F01 @if $media == usm @media only screen and (max-width: 450px) @content - // 390px and down + // 375px and down @if $media == xsm - @media only screen and (max-width: 390px) - @content - // 350px and down - @if $media == exsm - @media only screen and (max-width: 350px) + @media only screen and (max-width: 375px) @content \ No newline at end of file diff --git a/site/css/main.css b/site/css/main.css index f1b0441..f1484a1 100644 --- a/site/css/main.css +++ b/site/css/main.css @@ -178,6 +178,11 @@ header { padding: 10px 0; } } +@media only screen and (max-width: 375px) { + header { + padding: 5px 0; + } +} header div.header__inner { display: -webkit-box; display: -webkit-flex; @@ -215,9 +220,13 @@ header div.header__inner div.header__logo-side a.header__logo { margin-right: 16px; } } +@media only screen and (max-width: 991px) { + header div.header__inner div.header__logo-side a.header__logo { + margin-right: 10px; + } +} header div.header__inner div.header__logo-side div.header__text { font-weight: 500; - font-size: 16px; line-height: 25px; } @media only screen and (max-width: 767px) { @@ -228,48 +237,85 @@ header div.header__inner div.header__logo-side div.header__text { header div.header__inner div.header__logo-side div.header__text p { font-size: 16px; color: #ACACAD; - text-align: left; } @media only screen and (max-width: 991px) { + header div.header__inner div.header__logo-side div.header__text p { + font-size: 15px; + } +} +@media only screen and (max-width: 767px) { header div.header__inner div.header__logo-side div.header__text p { display: none; } } header div.header__inner div.header__links-side { - display: grid; - grid-template-columns: 1fr auto auto auto; - grid-gap: 31px; - justify-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } -@media only screen and (max-width: 1199px) { - header div.header__inner div.header__links-side { - grid-gap: 20px; - text-align: center; - } -} -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 375px) { header div.header__inner div.header__links-side { - display: none; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } } header div.header__inner div.header__links-side a { font-weight: 600; font-size: 15px; - line-height: 14px; + line-height: 140%; text-transform: uppercase; text-decoration: none; color: #18191C; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; + margin-left: 31px; + text-align: center; } @media only screen and (max-width: 1199px) { header div.header__inner div.header__links-side a { font-size: 14px; + margin-left: 20px; + } +} +@media only screen and (max-width: 575px) { + header div.header__inner div.header__links-side a { + margin-left: 14px; + } +} +@media only screen and (max-width: 450px) { + header div.header__inner div.header__links-side a { + font-size: 13px; + } +} +@media only screen and (max-width: 375px) { + header div.header__inner div.header__links-side a { + line-height: 180%; + font-size: 14px; + margin-left: 24px; + } +} +header div.header__inner div.header__links-side a:nth-child(1) { + margin-left: 0; +} +@media only screen and (max-width: 450px) { + header div.header__inner div.header__links-side a:nth-child(3) { + max-width: 100px; + } +} +@media only screen and (max-width: 375px) { + header div.header__inner div.header__links-side a:nth-child(3) { + max-width: 100%; } } header div.header__inner div.header__links-side a:hover { -- cgit v1.2.3