diff options
| author | Andrii-Moshenskyi <andrii.moshenskyi@gmail.com> | 2021-01-22 23:38:24 +0200 |
|---|---|---|
| committer | Andrii-Moshenskyi <andrii.moshenskyi@gmail.com> | 2021-01-22 23:38:24 +0200 |
| commit | c3c4831e7feced95679c778e830a2291ae472642 (patch) | |
| tree | 59436e31ab09247c6619d7c0deee4c53d86674ce /sass | |
| parent | bdd8ab00719f7521600c908fe11ff8ffe5847339 (diff) | |
| download | community.vyos.net-c3c4831e7feced95679c778e830a2291ae472642.tar.gz community.vyos.net-c3c4831e7feced95679c778e830a2291ae472642.zip | |
Adapting the main menu for mobile devices
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/header.sass | 41 | ||||
| -rw-r--r-- | sass/settings.sass | 8 |
2 files changed, 31 insertions, 18 deletions
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 |