Merge pull request #2 from languageconvo/Vadim_May_dev

Tag dropdown, fixed empty space mobile navbar

assets/css/screen.css

@@ -153,21 +153,22 @@ body {
 .site-header-content {
     z-index: 100;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 6vw 3vw;
     min-height: 200px;
     max-height: 340px;
+    flex-wrap: wrap;
 }
 
 .site-title {
     z-index: 10;
-    margin: 63px 0 -2px 0;
+    margin: 63px 0 20px;
     padding: 0;
     font-size: 5.0rem;
     line-height: 1em;
-    font-weight: 600;
+    font-weight: 400;
 }
 
 .site-logo {
@@ -197,17 +198,40 @@ body {
 
 /* padding for the homepage header */
 .site-home-header .site-header-content {
-    padding: 130px 55px 40px 55px;
+    padding: 60px 0px 40px;
 }
 
 .site-home-header .site-title {
     font-size: 5.5rem;
-    text-align: center;
+    text-align: start;
+    flex: 1 0 100%;
 }
 
 .site-home-header .site-description {
     font-size: 2.2rem;
     font-weight: 300;
+    flex: 0 1 80%;
+}
+.home-template .site-header-content>.tags{
+    padding: 8px 5px;     
+}
+.site-header-content > .tags {
+    flex: 0 1 20%;
+    background-color: #edf1ea;
+    border: none;
+    border-radius: .6rem;
+    padding: 5px;
+    transition: all .5s ease-in-out;
+}
+/* fix for IE */
+.site-header-content >.tags::-ms-expand {
+  display: none;
+}
+
+.site-header-content >.tags:focus {
+  outline: 0;
+  border-color: #eff2eb;
+  box-shadow: 0 0 0 3px rgba(0, 121, 250, .3);
 }
 
 
@@ -617,13 +641,17 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
        .site-nav-right	{
           position: fixed;
 	  margin:0;
-	  top:203px; /*for now*/
+	  top:185px; /*Empty space fix */
           background: #fff no-repeat 50%;
 	  width: 100%;
           left: 0;
           justify-content: center;
 
 	}
+/* adjust paddings of menu items to main site*/
+	.nav li a{
+	  padding: 0.8rem 0;
+	}
 
 }
 
@@ -954,8 +982,15 @@ make sure this only happens on large viewports / desktop-ish devices.
         font-size: 1.6rem;
     }
 }
-
-
+/* 6.1 Tag template
+/* ---------------------------------------------------------- */
+.tag-template .site-title {
+    flex: 1 0 100%;
+    margin: 20px 0;
+}
+.tag-template .site-description {
+    flex: 0 1 80%;
+}
 /* 7. Single Post
 /* ---------------------------------------------------------- */
 

index.hbs

@@ -7,8 +7,9 @@ into the {body} of the default.hbs template --}}
         <div class="inner">
             {{> "site-nav"}}
             <div class="site-header-content">
-                <!-- removed title -->
+		<h1 class="site-title">{{@site.title}}</h1>
                 <h2 class="site-description">{{@site.description}}</h2>
+                {{> "site-tags"}}
             </div>
         </div>
     </div>
@@ -34,4 +35,25 @@ into the {body} of the default.hbs template --}}
 
 {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 {{#contentFor "scripts"}}
+	<script>
+		const select = document.querySelector(".tags");
+		const options = document.querySelectorAll(".tags option");
+ 
+		// 1
+		select.addEventListener("change", function() {
+		  let url = this.options[this.selectedIndex].dataset.url;
+		  if(url) {
+		    location.href = url;
+		  }
+		});
+ 
+		// 2
+		for(const option of options) {
+		  let url = option.dataset.url;
+		  if(location.pathname.includes(url)) {
+		    option.setAttribute("selected", "");
+		    break;
+		  }
+		}
+	</script>
 {{/contentFor}}

partials/site-tags.hbs

@@ -0,0 +1,8 @@
+{{#get "tags" limit="all"}}
+    <select class="tags">
+        <option data-url="{{@site.url}}">Blog Home</option>
+        {{#foreach tags}}
+        <option data-url="{{url}}" >{{name}}</option>
+        {{/foreach}}
+    </select>
+{{/get}}

tag.hbs

@@ -14,6 +14,7 @@
                 A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                 {{/if}}
             </h2>
+            {{> "site-tags"}}
         </div>
     </div>
 </header>
@@ -30,3 +31,27 @@
         </div>
     </div>
 </main>
+{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
+{{#contentFor "scripts"}}
+	<script>
+		const select = document.querySelector(".tags");
+		const options = document.querySelectorAll(".tags option");
+ 
+		// 1
+		select.addEventListener("change", function() {
+		  let url = this.options[this.selectedIndex].dataset.url;
+		  if(url) {
+		    location.href = url;
+		  }
+		});
+ 
+		// 2
+		for(const option of options) {
+		  let url = option.dataset.url;
+		  if(location.pathname.includes(url)) {
+		    option.setAttribute("selected", true);	
+		    break;
+		  }
+		}
+	</script>
+{{/contentFor}}