diff options
| -rw-r--r-- | sass/header.sass | 79 | ||||
| -rw-r--r-- | sass/settings.sass | 8 | ||||
| -rw-r--r-- | site/css/fixup.css | 23 | ||||
| -rw-r--r-- | site/css/main.css | 117 | ||||
| -rw-r--r-- | templates/main.html | 14 | ||||
| -rw-r--r-- | templates/menu.html | 1 |
6 files changed, 86 insertions, 156 deletions
diff --git a/sass/header.sass b/sass/header.sass index 0ae1105..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,75 +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
-
- 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/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/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; -} diff --git a/site/css/main.css b/site/css/main.css index 458b9b6..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,106 +237,88 @@ 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; } } -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; +@media only screen and (max-width: 575px) { + header div.header__inner div.header__links-side a { + margin-left: 14px; } } -header div.header__inner div.header__mobile-menu__buttons img { - cursor: pointer; - display: none; +@media only screen and (max-width: 450px) { + header div.header__inner div.header__links-side a { + font-size: 13px; + } } -header div.header__inner div.header__mobile-menu__buttons img.active { - display: block; +@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; + } } - -nav#mobile-menu { - z-index: 1; - bottom: 0; - top: 0; - right: 0; - position: fixed; - left: 100%; - background-color: #ffffff; - padding: 70px 15px; +header div.header__inner div.header__links-side a:nth-child(1) { + margin-left: 0; } -@media only screen and (max-width: 575px) { - nav#mobile-menu { - padding: 60px 15px; +@media only screen and (max-width: 450px) { + header div.header__inner div.header__links-side a:nth-child(3) { + max-width: 100px; } } -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; +@media only screen and (max-width: 375px) { + header div.header__inner div.header__links-side a:nth-child(3) { + max-width: 100%; + } } -nav#mobile-menu a:hover { +header div.header__inner div.header__links-side a:hover { color: #FFBE12; } diff --git a/templates/main.html b/templates/main.html index 327ea5e..4bdb60a 100644 --- a/templates/main.html +++ b/templates/main.html @@ -29,26 +29,12 @@ <div class="header__links-side">
<a href="/get">GET VYOS</a>
<a href="/contribute">CONTRIBUTE</a>
- <a href="/test">TEST AND REPORT A BUG</a>
<a href="http://vyos.io">COMMERCIAL SERVICES</a>
</div>
-
- <div class="header__mobile-menu__buttons">
- <img class="open active" src="/img/header/mobile-menu-open.svg">
- <img class="close" src="/img/header/mobile-menu-close.svg">
- </div>
-
</div>
</div>
</header>
- <nav id="mobile-menu">
- <a href="/get">GET VYOS</a>
- <a href="/contribute">CONTRIBUTE</a>
- <a href="/test">TEST AND REPORT A BUG</a>
- <a href="http://vyos.io">COMMERCIAL SERVICES</a>
- </nav>
-
<main>
<div class="container small" id="content">
<!-- content is automatically inserted here -->
diff --git a/templates/menu.html b/templates/menu.html index 6acb1a9..6ec3ed3 100644 --- a/templates/menu.html +++ b/templates/menu.html @@ -1,6 +1,5 @@ <nav> <a href="/download">Get VyOS</a> <a href="/contribute">Contribute</a> - <a href="https://phabricator.vyos.net">Report a bug</a> <a href="https://vyos.io">Commercial services</a> </nav> |