Formatting fixes (#19)

* css improvements

* smooth scroll

* change edit url to blog

Author: osterman

config.toml

@@ -33,7 +33,7 @@ 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 = true
-editURL = "https://github.com/cloudposse/docs/edit/master"
+editURL = "https://github.com/cloudposse/docs/blob/master"
 
 [outputFormats.glossary]
 baseName = "glossary"

content/LICENSE.md

@@ -7,7 +7,6 @@ tags:
 - apache2
 ---
 
-
                                  Apache License
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
@@ -196,7 +195,7 @@ tags:
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2018 Cloud Posse, LLC
+   Copyright 2017-{{< year >}} Cloud Posse, LLC
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

content/_footer.md

@@ -1 +0,0 @@
-(C) 2018 Cloud Posse, LLC. All Rights Reserved.

content/glossary/aws.md

@@ -6,6 +6,7 @@ terms:
 - "aws cli"
 - "awscli"
 - "aws-cli"
+- "!aws-"
 excerpt: "Amazon Web Services"
 ---
 Amazon Web Services is a public cloud offering from Amazon. It's also a command line tool (`aws`) use to control services running on the platform.

content/local-dev-environments/fancy-shell-prompts.md

@@ -8,7 +8,7 @@ Fancy shell prompts are not just pretty, they're also incredibly practical. With
 
 
 This is how to get a fancy shell prompt like the one below for the `bash` shell.
-![](/assets/500c4b8-Screen_Shot_2018-04-02_at_7.54.13_PM.png)
+{{< img src="/assets/500c4b8-Screen_Shot_2018-04-02_at_7.54.13_PM.png" title="Example of Powerline Shell Prompt" >}}
 
 ## Install powerline
 

content/terraform/tips-tricks.md

@@ -29,4 +29,4 @@ Then run `pre-commit install` in a given terraform repo to configure the hooks.
 After setting this up, every time you commit, the `terraform fmt` command will be run to canonicalize your files and a basic smoke test to validate all configurations without requiring required variables to be set.
 
 Any time your commit affects any `*.tf` files, the validator will ensure well-formed terraform code.
-![Precommit Hook Output](/assets/dd6447a-Screen_Shot_2018-04-02_at_2.46.35_PM.png)
+{{< img src="/assets/dd6447a-Screen_Shot_2018-04-02_at_2.46.35_PM.png" title="Example of Pre Commit Hook Output" >}}

layouts/partials/custom-footer.html

@@ -1,4 +1,3 @@
-<div class="addthis_relatedposts_inline"></div>
 
 <!-- Start of HubSpot Embed Code -->
 <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/2197148.js"></script>

layouts/partials/flex/body-aftercontent.html

@@ -1,3 +1,7 @@
+  {{if not .IsHome}}
+    <div class="addthis_relatedposts_inline"></div>
+  {{end}}
+
   {{if not .IsHome}}
   <div class="chevrons">
     {{ partial "next-prev-page.html" . }}
@@ -24,7 +28,9 @@ <h3><i class="fa fa-align-left"></i>Table of Contents</h3>
     {{end}}
 
 
-    <div class="copyright"> 
+    <div class="copyright"> © {{ now.Format "2006"}} Cloud Posse, LLC. All Rights Reserved.</div>
+
+    <div class="custom">
 {{ $footer := print "_footer." .Lang }}
 {{ range where .Site.Pages "Source.BaseFileName" $footer }}
   {{ .Content }} 
@@ -45,7 +51,7 @@ <h3><i class="fa fa-align-left"></i>Table of Contents</h3>
 
     {{ if not .Page.Lastmod.IsZero }}
     <div class="date">
-        <i class='fa fa-calendar'></i> {{T "last-update-on"}} {{ .Page.Lastmod.Format "02/01/2006" }}
+        <i class='fa fa-calendar'></i> {{T "last-update-on"}} {{ .Page.Lastmod.Format "2006-01-02" }}
     </div>
     {{end}}
    </div>

layouts/partials/flex/body-beforecontent.html

@@ -18,9 +18,10 @@
 {{if .IsHome}}
 <div class="landing-top">
   <div class="landing-description">
+    <img src="/images/cloud.png" class="whitish cloud"/>
     <h1>The Cloud Posse Developer Hub</h1>
     <div class="about">
-      Welcome to the Cloud Posse developer hub. You'll find comprehensive guides and documentation to help you start working with the Cloud Posse technology stack as quickly as possible, as well as support if you get stuck. Let's jump right in!
+      <p>Welcome to the Cloud Posse developer hub. You'll find comprehensive guides and documentation to help you start working with the Cloud Posse technology stack as quickly as possible, as well as support if you get stuck. Let's jump right in!</p>
     </div>
     <div class="search-bar">
       <div class="searchbox">

layouts/shortcodes/img.html

@@ -0,0 +1,18 @@
+<!-- image -->
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
+    {{ if .Get "link"}}</a>{{ end }}
+    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+    <figcaption>{{ if isset .Params "title" }}
+        <h4>{{ .Get "title" }}</h4>{{ end }}
+        {{ if or (.Get "caption") (.Get "attr")}}<p>
+        {{ .Get "caption" }}
+        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+            {{ .Get "attr" }}
+        {{ if .Get "attrlink"}}</a> {{ end }}
+        </p> {{ end }}
+    </figcaption>
+    {{ end }}
+</figure>
+<!-- image -->

layouts/shortcodes/year.html

@@ -0,0 +1 @@
+{{ now.Format "2006" }}

static/css/custom.css

@@ -56,6 +56,16 @@ th:empty {
 }
 
 
+.whitish {
+  filter: brightness(0) invert(1);
+}
+
+img.cloud {
+  max-width: 125px;
+  margin-right: 10px;
+  float: left;
+}
+
 /* fix for empty pages */
 section header {
   display: none;
@@ -125,7 +135,6 @@ ul.menu > li.haschildren > div > a {
 }
 
 article {
-  min-height: 40%;
   margin-top: 0;
 }
 
@@ -142,7 +151,11 @@ body > aside {
 
 article > aside .menu .dd-item div a, article > aside .menu .dd-item div a:hover {
   order: 1;
-  padding-left: 10px;
+  padding-left: 5px;
+}
+
+article > aside .menu .dd-item.haschildren > div {
+  margin-left: initial;
 }
 
 aside#left-sidebar .menu li.active > div > a:hover {
@@ -160,7 +173,7 @@ article > aside .menu .dd-item div i.category-icon {
 
 aside#left-sidebar ul {
   margin-top: 0;
-  padding-right: 20px;
+  padding-right: 12px;
 }
 
 aside#left-sidebar {
@@ -185,6 +198,7 @@ aside#left-sidebar .menu .dd-item.active > div * {
 }
 
 aside#left-sidebar .menu .dd-item.active > div a {
+  padding-left: 5px;
   color: #fff;
 }
 
@@ -245,6 +259,7 @@ aside#right-sidebar nav a:hover {
   background-color: #f8f8f8;
   color: #555;
   border-radius: 3px;
+  text-decoration: none;
 }
 
 
@@ -295,6 +310,7 @@ section > h2 {
 
 article section.page {
   margin: 0;
+  scroll-behavior: smooth;
 }
 
 article section.page h1:first-of-type {
@@ -314,6 +330,11 @@ article section.page img {
   max-width: 50%
 }
 
+
+article section.page table {
+  width: auto;
+}
+
 article section.page table {
   border: 3px solid #eee;
   border-radius: 5px;
@@ -445,6 +466,14 @@ div.landing-description {
   border: 0;
 }
 
+.chevrons #navigation a:hover {
+  color: #364548;
+}
+
+.chevrons #navigation a {
+  text-decoration: none;
+}
+
 .breadcrumbs a:hover {
   text-decoration: none;
   background-color: #fff;
@@ -533,6 +562,11 @@ div.landing-description {
   font-size: 1em;
 }
 
+div.calendly-badge-widget {
+  right: 88px;
+  bottom: 20px;
+}
+
 .calendly-inline-widget iframe, .calendly-badge-widget iframe, .calendly-overlay iframe {
   border-radius: 10px;
 }
@@ -613,7 +647,7 @@ body > footer .footline .tags {
   margin-right: 10px;
 }
 
-body > footer .footline .tags, body > .footline .copyright {
+body > footer .footline .tags, body > footer .footline .copyright {
   display: inline-block;
   float: left;
 }
@@ -752,4 +786,22 @@ footer .footline .date {
   margin-bottom: 2em;
 }
 
+figure {
+  max-width: 70%;
+}
+
+figure img {
+  min-width: 100%;
+}
+
+figure h4 {
+  margin-top: 0px;
+  font-size: 0.8em;
+  font-weight: normal;
+  background-color: #F6F7F8;
+  padding-right: 1em;
+  display: block;
+  width: 100%;
+  text-align: right;
+}