Fix Breadcrumbs and Tags (#3)

* fix breadcrumbs * fix hover * hide bread on home * contrast links on homepage * fix text transform * support tags
cloudposse · May 4, 2018 · 4e20524 · 4e20524
1 parent f198706
commit 4e20524
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 15 deletions.
diff --git a/config.toml b/config.toml
@@ -24,14 +24,14 @@ enableEmoji = true
 
 [params]
 showVisitedLinks = true # default is false
-themeStyle = "flex" # "original" or "flex" # default "flex"
+themeStyle = "flex"
 ordersectionsby = "weight" # ordersectionsby = "title"
 disableHomeIcon = true
 disableSearch = true
 disableNavChevron = false # set true to hide next/prev chevron, default is false
 highlightClientSide = false # set true to use highlight.pack.js instead of the default hugo chroma highlighter
 menushortcutsnewtab = false # set true to open shortcuts links to a new tab/window
-enableGitInfo = false
+enableGitInfo = true
 
 [outputs]
 home = [ "HTML", "RSS", "JSON"]

diff --git a/content/Terraform/Terraform Best Practices.md b/content/Terraform/Terraform Best Practices.md
@@ -2,6 +2,9 @@
 title: "Terraform Best Practices"
 excerpt: ""
 slug: "terraform-best-practices"
+tags:
+  - "Best Practices"
+  - "Terraform"
 ---
 ![](/images/08bcd99-terraform.png)
 

diff --git a/content/_index.md b/content/_index.md
@@ -1,2 +1,3 @@
 ---
+title: "Home"
 ---
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,3 +1,5 @@
 {{ define "main" }}
-<!-- main -->
+<span id="sidebar-toggle-span">
+<a href="#" id="sidebar-toggle" data-sidebar-toggle=""><i class="fa fa-bars"></i></a>
+</span>
 {{ end }}
diff --git a/layouts/partials/flex/body-aftercontent.html b/layouts/partials/flex/body-aftercontent.html
@@ -14,18 +14,17 @@ <h3><i class="fa fa-align-left"></i>Table of Contents</h3>
 
 </article>
 <footer>
-
-<div class="footline">
+  <div class="footline">
     {{if .Params.tags }}
-    <div class="tags"> 
+    <div class="tags">
       {{ range $index, $tag := .Params.tags }}
         <a class="label label-default" href="{{$.Site.BaseURL}}tags/{{ $tag | urlize }}">{{ $tag }}</a>
       {{ end }}
     </div>
     {{end}}
 
 
-    <div>
+    <div class="copyright"> 
 {{ $footer := print "_footer." .Lang }}
 {{ range where .Site.Pages "Source.BaseFileName" $footer }}
   {{ .Content }} 
@@ -44,14 +43,12 @@ <h3><i class="fa fa-align-left"></i>Table of Contents</h3>
     </div>
     {{end}}
 
-  {{ if not .Page.Lastmod.IsZero }}
+    {{ if not .Page.Lastmod.IsZero }}
     <div class="date">
         <i class='fa fa-calendar'></i> {{T "last-update-on"}} {{ .Page.Lastmod.Format "02/01/2006" }}
     </div>
     {{end}}
-
    </div>
-
 </footer>
 
 {{ partial "flex/scripts.html" . }}
diff --git a/layouts/partials/flex/body-beforecontent.html b/layouts/partials/flex/body-beforecontent.html
@@ -35,11 +35,10 @@ <h1>The Cloud Posse Developer Hub</h1>
 {{ end }}
 <div class="subnav">
   <div class="container">
-    {{ partial "breadcrumb.html" . }}
-    <div class="breadcrumbs">
-      <a href="{{.Site.BaseURL}}">Home</a> <i class="fa fa-chevron-right"></i> <a href="{{.Site.BaseURL}}">Home</a>
-    </div>
     {{if not .IsHome}}
+    <div class="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
+      {{ template "breadcrumb" dict "page" . "value" .Title }}   
+    </div>
     <div class="searchbox">
       <div class="fa fa-search"></div>
       <input type="text" placeholder="Search" class="search-box">
@@ -109,3 +108,12 @@ <h1 class="title">{{.Title}}</h1>
         {{ end }}
       </div>
   {{end}}
+
+{{define "breadcrumb"}}
+{{ if .page.Parent}}
+{{$value := (printf "<a href='%s'>%s</a> <i class='fa fa-chevron-right'></i> %s" .page.Parent.URL .page.Parent.Title .value)}}
+{{ template "breadcrumb" dict "page" .page.Parent "value" $value }} 
+{{else}}
+ {{.value|safeHTML}}
+{{end}}
+{{end}}
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -78,6 +78,10 @@ article > aside .menu .dd-item div a, article > aside .menu .dd-item div a:hover
   padding-left: 10px;
 }
 
+aside#left-sidebar .menu li.active > div > a:hover {
+  background-color: transparent;
+}
+
 article > aside .menu .dd-item div i.category-icon {
   color: #bbb;
   opacity: .5;
@@ -99,6 +103,7 @@ aside#left-sidebar {
   padding-left: 30px;
 }
 
+
 article > aside .menu .dd-item li {
   border-left: 0;
   white-space: nowrap;
@@ -380,7 +385,6 @@ div.landing-description {
     display: inline-block;
     color: #7d7d8e;
     border-radius: 2px;
-    height: 26px;
     line-height: 26px;
 }
 
@@ -501,6 +505,7 @@ div.landing-description {
   border-bottom: 1px solid #ddd;
   line-height: 2em;
   margin-bottom: 1em;
+  text-transform: none;
 }
 
 .homepage h3 {
@@ -511,6 +516,7 @@ div.landing-description {
 
 .homepage  li:not(.haschildren) {
   padding-left: 5px;
+  color: #888;
 }
 
 .homepage .category ul li.dd-item {
@@ -521,3 +527,38 @@ thead {
   background-color: #f9f9f9;
   border-bottom: 2px solid #eee;
 }
+
+footer .footline {
+  display: block;
+  padding-top: 0.2rem;
+  padding-left: 5rem;
+}
+
+footer .footline .tags {
+  display: inline-block;
+  float: left;
+  font-size: 12px;
+  margin-right: 10px;
+}
+
+footer .footline .tags, .footline .copyright {
+  display: inline-block;
+  float: left;
+}
+
+.tags .label-default[href]:hover  {
+  color: #f6f7f8;
+  background-color: #364548;
+}
+
+.tags .label {
+  font-size: 0.9em;
+  padding: 0 7px 0 9px;
+  display: inline-block;
+  color: #7d7d8e;
+  border-radius: 2px;
+  background-color: #f6f7f8;
+  line-height: 26px;
+  -webkit-box-shadow: 0 0 0 1px #c9d4d9, 0 2px 2px rgba(0,0,0,0.1);
+  box-shadow: 0 0 0 1px #c9d4d9, 0 2px 2px rgba(0,0,0,0.1);
+}