From 83763013b8eeadcc36b1815db392a6fb524fd1cb Mon Sep 17 00:00:00 2001 From: "Bartlomiej Pluta (PGS Software)" Date: Thu, 12 Apr 2018 13:27:14 +0200 Subject: [PATCH] Enable RWD for navbar and header --- src/img/navbar/sandwich.svg | 7 ++++++ src/index.html | 44 ++++++++++++++++++++----------------- src/scss/_header.scss | 2 +- src/scss/_navbar.scss | 44 +++++++++++++++++++++++++++++-------- 4 files changed, 67 insertions(+), 30 deletions(-) create mode 100644 src/img/navbar/sandwich.svg diff --git a/src/img/navbar/sandwich.svg b/src/img/navbar/sandwich.svg new file mode 100644 index 0000000..e1969ea --- /dev/null +++ b/src/img/navbar/sandwich.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 88c38b8..849b4e1 100644 --- a/src/index.html +++ b/src/index.html @@ -28,30 +28,34 @@
-
-
-
+
+
+
Fork IO
- + +
+ +
+
diff --git a/src/scss/_header.scss b/src/scss/_header.scss index 37a2448..efb96b1 100644 --- a/src/scss/_header.scss +++ b/src/scss/_header.scss @@ -1,5 +1,5 @@ .header { - background: black url(../img/header/img.png) no-repeat 50% 30% / cover; + background: black url(../img/header/img.png) no-repeat center 120px/ cover; height: 100vh; padding-top: 110px; } diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss index de15586..e1522b1 100644 --- a/src/scss/_navbar.scss +++ b/src/scss/_navbar.scss @@ -1,16 +1,42 @@ $shrinking-duration: 0.4s; -.navbar { - margin: 0 0; - padding: 0 90px; - height: 100px; - background-color: white; - transition: height $shrinking-duration; +@media all and (min-width: $desktop) { + .navbar { + margin: 0 0; + padding: 0 90px; + height: 100px; + transition: height $shrinking-duration; + } + + .navbar--shrink { + height: 50px; + transition: height $shrinking-duration; + } } -.navbar--shrink { - height: 50px; - transition: height $shrinking-duration; +.navbar { + background-color: white; +} + +.navbar__content { + display: flex; +} + +.navbar__content__header { + order: 1; +} + +.navbar__content__toggler { + order: 4; + border: none; +} + +.navbar__content__body { + order: 2; +} + +.navbar__content__button { + order: 3; } .navbar__link {