Changed navigation to adapt to page (shows sections for home and only home for post).

Tomasz-Kluczkowski · Tomasz-Kluczkowski · commit f7a17157ce94 · 2018-03-28T11:40:43.000+01:00
Added navigation to post.html.
Moved title image up to hide under navigation (it is full screen) taking into account changing navigation's height on different screen sizes.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -51,21 +51,27 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarToggler">
         <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
-            <li class="nav-item active">
-                <a class="navigation__link active nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
-            </li>
-            <li class="hide-on-desktop nav-item">
-                <a class="navigation__link nav-link" href="#events">Events</a>
-            </li>
-            <li class="hide-on-desktop nav-item">
-                <a class="navigation__link nav-link" href="#chapters">Chapters</a>
-            </li>
-            <li class="hide-on-mobile nav-item">
-                <a class="navigation__link nav-link" href="#events">Events & Chapters</a>
-            </li>
-            <li class="nav-item">
-                <a class="navigation__link nav-link" href="#about">About</a>
-            </li>
+            {% unless page.is_post %}
+                <li class="nav-item active">
+                    <a class="navigation__link active nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
+                </li>
+                <li class="hide-on-desktop nav-item">
+                    <a class="navigation__link nav-link" href="#events">Events</a>
+                </li>
+                <li class="hide-on-desktop nav-item">
+                    <a class="navigation__link nav-link" href="#chapters">Chapters</a>
+                </li>
+                <li class="hide-on-mobile nav-item">
+                    <a class="navigation__link nav-link" href="#events">Events & Chapters</a>
+                </li>
+                <li class="nav-item">
+                    <a class="navigation__link nav-link" href="#about">About</a>
+                </li>
+            {% else %}
+                <li class="nav-item active">
+                    <a class="navigation__link active nav-link" href="{{ '/' | prepend: site.baseurl }}">Home<span class="sr-only">(current)</span></a>
+                </li>
+            {% endunless %}
         </ul>
     </div>
 </nav>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -30,7 +30,8 @@
             }
         </style>
     </head>
-    <body>
+    <body class="body">
+        {% include navigation.html %}
         <main>
             <article class="post">
                 <div class="container-fluid">
diff --git a/_sass/style.scss b/_sass/style.scss
@@ -109,6 +109,22 @@ a {
   }
 }
 
+#home {
+  margin-top: -56px;
+}
+
+@media (min-width: 768px) {
+  #home {
+     margin-top: -64px;
+  }
+}
+
+@media (min-width: 1200px) {
+  #home {
+     margin-top: -72px;
+  }
+}
+
 .navigation {
   background: rgba(0, 0, 0, 0.9);
 }
@@ -122,8 +138,8 @@ a {
 }
 
 .navigation__background-img {
-  height: calc(100vh + 2px);
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
 }
 
 .navigation__brand {
