Add sidebar

layouts/index.html

@@ -4,25 +4,29 @@
 
 {{ partial "header" . }}
 {{ partial "cpt" . }}
-<main id="site-main" class="site-main outer" role="main">
-  <div class="inner">
-    <div class="post-feed">
-      {{ partial "post-list" . }}
-    </div>
+<main class="site-main outer" role="main">
+	<div id="site-main" class="inner">
+	  <div id="sidebar">
+			{{ partial "sidebar" . }}
+ 		</div>
+ 	   <div id="main-content" class="post-feed">
+         {{ partial "post-list" . }}
+      </div>
 
-    <nav class="pagination" role="navigation">
-      {{if .Paginator.HasPrev}}
-          <a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
-      {{end}}
-      <span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
-      {{if .Paginator.HasNext}}
-          <a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
-      {{end}}
-    </nav>
-  </div>
+      <nav id="pagination" class="pagination" role="navigation">
+         {{if .Paginator.HasPrev}}
+           <a class="newer-posts" href="{{ .Paginator.Prev.URL }}">&larr; <span class="hide">Next Posts</span></a>
+         {{end}}
+           <span class="page-number"><span class="hide">Page {{ .Paginator.PageNumber }} of {{.Paginator.TotalPages}}</span>&nbsp;</span>
+         {{if .Paginator.HasNext}}
+           <a class="older-posts" href="{{ .Paginator.Next.URL }}"><span class="hide">Previous Posts</span> &rarr;</a>
+         {{end}}
+      </nav>
+   </div>
 </main>
 
 {{ partial "footer" . }}
 </div>{{ partial "js" . }}
 {{ partial "cptjs" . }}
+{{ partial "sidebarjs" . }}
 </body></html>

layouts/partials/sidebar.html

+<div class="side-content">
+	<h3>Tags:</h3>
+  	{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+  		{{ $currentTagCount := len $taxonomy.Pages }}
+  		<div class="sidelink"><a class="shadow" href="/tags/{{ $name | urlize }}">{{ $name }} ({{$currentTagCount}})</a></div>
+  	{{ end }}
+  	<h3>Categories:</h3>
+  	{{ range $name, $taxonomy := .Site.Taxonomies.categories }}
+     	{{ $currentCatCount := len $taxonomy.Pages }}
+     	<div class="sidelink"><a class="shadow" href="/tags/{{ $name | urlize }}">{{ $name }} ({{$currentCatCount}})</a></div>
+	{{ end }}
+</div>
+<div id="side-button" onClick="toggleSidebar();">
+	<div class="bar-button"></div>
+</div>

layouts/partials/sidebarjs.html

+<script language="javascript">
+function toggleSidebar() {
+   var widthpad = parseInt($("#sidebar").css("padding-left"))+parseInt($("#sidebar").css("padding-right"));
+   if(parseInt($("#sidebar").css("width"))==widthpad) {
+      $("#sidebar").css("width", "100%");
+   } else {
+      $("#sidebar").css("width", "0px");
+   }
+
+}
+
+</script>

static/css/htw.css

@@ -14,6 +14,128 @@
 	color: red;
 }
 
+#sidebar {
+   min-width: 250px;
+   z-index: 1000;
+   margin-top: -70px;
+   margin-left: 20px;
+   padding-bottom: 40px;
+   text-align: center;
+}
+
+#side-button {
+   display: none;
+}
+
+.side-content {
+   padding-top: 10px;
+   height: 100%;
+   background-color: white;
+   border-radius: 5px;
+   background-size: cover;
+   box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
+   background: #fff 50%;
+   transition: all .5s ease;
+}
+
+.sidelink {
+   padding: 1px;
+   border: 1px solid grey;
+   margin-top: 3px;
+   margin-left: 10px;
+   margin-right:10px;
+   border-radius: 7px;
+   background-size: cover;
+   background-color: white;
+   box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
+   background: #fff 80%;
+}
+
+.sidelink a {
+   text-decoration: none;
+   color: grey;
+}
+
+.sidelink:hover {
+   box-shadow: 0px 0px 0px rgba(39,44,49,.06), 0px 0px 0px rgba(39,44,49,.03);
+   background: #fff 0%;
+   background-color: #e8e8e8;
+}
+
+
+.inner {
+   max-width: 1400px;
+}
+
+@media (min-width: 1005px) {
+   #sidebar {
+      grid-area: sidebar;
+   }
+
+   #site-main {
+      display: grid;
+      grid-template-areas:
+      "content sidebar"
+      "navigation navigation";
+   }
+	#main-content {
+   	grid-area: content;
+	}  
+
+	#pagination {
+   	grid-area: navigation;
+	}  
+
+
+}
+
+@media (max-width: 1005px) {
+
+
+   #side-button {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      display: block;
+      z-index: 2000;
+		border: 1px solid grey;
+		padding: 2px;
+		background-color: white;
+		border-radius: 5px;
+	}
+	.bar-button {
+		border-bottom: 18px double grey; 
+    	border-top: 6px solid grey; 
+    	content:"";
+    	height: 30px; 
+    	width: 40px;
+   }
+   #sidebar {
+		position: fixed;
+      display: block;
+		margin-left: 5px;
+		bottom: -33px;
+		top: 5px;
+      right: 0px;
+		z-index: 1000;
+      overflow-x: hidden;
+		margin-top: 0px;
+      width: 0;
+      min-width: 0;
+      transition: .5s;
+      padding-left: 5px;
+      padding-right: 5px;
+   }
+}
+
+@media (max-width: 1005px) and (min-width: 901px) {
+	.post-feed {
+		margin-top: -40px !important;
+	}
+}
+
+
+
 @media (max-width: 900px) {
 
    #capetown {
@@ -35,5 +157,10 @@
    .cpthead {
       float: left;
    }
+}
 
+@media (max-width: 650px){
+	.post-feed {
+    	padding-top: 10vw;
+	}
 }