From f4f4551abc2c1b95e66b207938f5282513ecd829 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Fri, 22 Jan 2021 23:03:36 +0200 Subject: Delete the unused fixup.css file --- site/css/fixup.css | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 site/css/fixup.css (limited to 'site/css') diff --git a/site/css/fixup.css b/site/css/fixup.css deleted file mode 100644 index 858e376..0000000 --- a/site/css/fixup.css +++ /dev/null @@ -1,23 +0,0 @@ -#content { - max-width: 800px; - margin-top: 20px; - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; -} - -p { - text-align: left; -} - -@supports (hyphens: auto) { - p { - text-align: justify; - hyphens: auto; - } -} - -pre, code, sample { - white-space: pre-wrap; - hyphens: none; -} -- cgit v1.2.3 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 +----------------------------------- site/css/main.css | 55 ----------------------------------------------------- templates/main.html | 13 ------------- 3 files changed, 1 insertion(+), 105 deletions(-) (limited to 'site/css') 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 diff --git a/site/css/main.css b/site/css/main.css index 458b9b6..f1b0441 100644 --- a/site/css/main.css +++ b/site/css/main.css @@ -275,61 +275,6 @@ header div.header__inner div.header__links-side a { header div.header__inner div.header__links-side a:hover { color: #FFBE12; } -header div.header__inner div.header__mobile-menu__buttons { - height: 100%; - width: 30px; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - display: none; -} -@media only screen and (max-width: 767px) { - header div.header__inner div.header__mobile-menu__buttons { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } -} -header div.header__inner div.header__mobile-menu__buttons img { - cursor: pointer; - display: none; -} -header div.header__inner div.header__mobile-menu__buttons img.active { - display: block; -} - -nav#mobile-menu { - z-index: 1; - bottom: 0; - top: 0; - right: 0; - position: fixed; - left: 100%; - background-color: #ffffff; - padding: 70px 15px; -} -@media only screen and (max-width: 575px) { - nav#mobile-menu { - padding: 60px 15px; - } -} -nav#mobile-menu a { - display: block; - text-transform: uppercase; - color: #18191C; - text-decoration: none; - padding: 15px 0; - font-weight: 600; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; - border-bottom: 1px solid #e0e0e0; -} -nav#mobile-menu a:hover { - color: #FFBE12; -} section.banner { background-image: url("/img/front-page/banner/banner-bg.svg"); diff --git a/templates/main.html b/templates/main.html index d11e2e0..adff98c 100644 --- a/templates/main.html +++ b/templates/main.html @@ -32,23 +32,10 @@ TEST AND REPORT A BUG COMMERCIAL SERVICES - -
- - -
- - -
-- 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 'site/css') 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