Make styles configurable. Add google analytics. Add disqus comments. Comment config file

10 files changed, 313 insertions, 26 deletions

diff --git a/assets/scss/cayman.scss b/assets/scss/cayman.scss
index a7fd386..ab5d47b 100644
--- a/assets/scss/cayman.scss
+++ b/assets/scss/cayman.scss
@@ -1,26 +1,26 @@
 // Breakpoints
-$large-breakpoint: 64em !default;
-$medium-breakpoint: 42em !default;
+$large-breakpoint: {{ $.Site.Params.large_breakpoint | default "64em" }} !default;
+$medium-breakpoint: {{ $.Site.Params.medium_breakpoint | default "42em" }} !default;
 
 // Headers
-$header-heading-color: #fff !default;
-$header-bg-color: #159957 !default;
-$header-bg-color-secondary: #155799 !default;
+$header-heading-color: {{ $.Site.Params.header_heading_color | default "#fff" }} !default; 
+$header-bg-color: {{ $.Site.Params.header_background_color | default "#159957" }} !default;
+$header-bg-color-secondary: {{ $.Site.Params.header_background_color_secondary | default "#155799" }} !default;
 
 // Text
-$section-headings-color: #159957 !default;
-$body-text-color: #606c71 !default;
-$body-link-color: #1e6bb8 !default;
-$blockquote-text-color: #819198 !default;
+$section-headings-color: {{ $.Site.Params.section_headings_color | default "#159957" }} !default;
+$body-text-color: {{ $.Site.Params.body_text_color | default "#606c71" }} !default;
+$body-link-color: {{ $.Site.Params.body_link_color | default "#1e6bb8" }} !default;
+$blockquote-text-color: {{ $.Site.Params.blockquote_text_color | default "#819198" }} !default;
 
 // Code
-$code-bg-color: #f3f6fa !default;
-$code-text-color: #567482 !default;
+$code-bg-color: {{ $.Site.Params.code_background_color | default "#f3f6fa" }} !default;
+$code-text-color: {{ $.Site.Params.code_text_color | default "#567482" }} !default;
 
 // Borders
-$border-color: #dce6f0 !default;
-$table-border-color: #e9ebec !default;
-$hr-border-color: #eff0f1 !default;
+$border-color: {{ $.Site.Params.border_color | default "#dce6f0" }} !default;
+$table-border-color: {{ $.Site.Params.table_border_color | default "#e9ebec" }} !default;
+$hr-border-color: {{ $.Site.Params.hr_border_color | default "#eff0f1" }} !default;
 
 @mixin large {
   @media screen and (min-width: #{$large-breakpoint}) {
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 53f24d2..500ce61 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -3,8 +3,14 @@ languageCode = "en-us"
 defaultContentLanguage = "en"
 title = "Cayman"
 theme = "cayman-hugo-theme"
+
+# Google analytics
 googleAnalytics = "UA-123456789-1"
+
+# Disqus comments
 disqusShortname = "yourdiscussshortname"
+
+# Syntax highlighting
 pygmentsCodefences = true
 pygmentsStyle = "pygments"
 
@@ -14,15 +20,42 @@ pygmentsStyle = "pygments"
 [permalinks]
   post = "/:filename/"
 
-[imaging]
-  quality = 99
-
 [params]
+  # Header text
   project_name = "Cayman Hugo Theme"
   project_tagline = "A clean, responsive Hugo theme, ported from the original Jekyll Caymen theme"
-  dateFormat = "2006-01-02" # For more date formats see https://gohugo.io/functions/format/
+
+  # Date format for post list and single pages
+  # For more date formats see https://gohugo.io/functions/format/
+  dateFormat = "2006-01-02"
+
+  # Footer text, can be markdown
   footer = "Made with [Hugo](https://gohugo.io/). Themed by [Cayman](https://github.com/zwbetz-gh/cayman-hugo-theme). Deployed to [Netlify](https://www.netlify.com/)."
 
+  # Breakpoints
+  large_breakpoint = "64em"
+  medium_breakpoint = "42em"
+
+  # Header colors
+  header_heading_color = "#fff"
+  header_background_color = "#159957"
+  header_background_color_secondary = "#155799"
+
+  # Text colors
+  section_headings_color = "#159957"
+  body_text_color = "#606c71"
+  body_link_color = "#1e6bb8"
+  blockquote_text_color = "#819198"
+
+  # Code colors
+  code_background_color = "#f3f6fa"
+  code_text_color = "#567482"
+
+  # Border colors
+  border_color = "#dce6f0"
+  table_border_color = "#e9ebec"
+  hr_border_color = "#eff0f1"
+
 [menu]
   [[menu.nav]]
     name = "Blog"
diff --git a/exampleSite/content/post/cayman-typography/index.md b/exampleSite/content/post/cayman-typography/index.md
index 7b24527..9c8d2a6 100644
--- a/exampleSite/content/post/cayman-typography/index.md
+++ b/exampleSite/content/post/cayman-typography/index.md
@@ -360,7 +360,3 @@ Small images should be shown at their actual size.
 Large images should always scale down and fit in the content container.

 

 ![](https://unsplash.it/1200/800)

-

-```

-This is the final element on the page and there should be no margin below this.

-```

diff --git a/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.content b/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.content
new file mode 100644
index 0000000..6d25bd8
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.content
@@ -0,0 +1,241 @@
+* {
+  box-sizing: border-box; }
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #606c71; }
+
+a {
+  color: #1e6bb8;
+  text-decoration: none; }
+  a:hover {
+    text-decoration: underline; }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.3rem;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
+  .btn:hover {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3); }
+  .btn + .btn {
+    margin-left: 1rem; }
+  @media screen and (min-width: 64em) {
+    .btn {
+      padding: 0.75rem 1rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .btn {
+      padding: 0.6rem 0.9rem;
+      font-size: 0.9rem; } }
+  @media screen and (max-width: 42em) {
+    .btn {
+      display: block;
+      width: 100%;
+      padding: 0.75rem;
+      font-size: 0.9rem; }
+      .btn + .btn {
+        margin-top: 1rem;
+        margin-left: 0; } }
+
+.page-header {
+  color: #fff;
+  text-align: center;
+  background-color: #159957;
+  background-image: linear-gradient(120deg, #155799, #159957); }
+  @media screen and (min-width: 64em) {
+    .page-header {
+      padding: 5rem 6rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .page-header {
+      padding: 3rem 4rem; } }
+  @media screen and (max-width: 42em) {
+    .page-header {
+      padding: 2rem 1rem; } }
+
+.project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem; }
+  @media screen and (min-width: 64em) {
+    .project-name {
+      font-size: 3.25rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .project-name {
+      font-size: 2.25rem; } }
+  @media screen and (max-width: 42em) {
+    .project-name {
+      font-size: 1.75rem; } }
+
+.project-tagline {
+  margin-bottom: 2rem;
+  font-weight: normal;
+  opacity: 0.7; }
+  @media screen and (min-width: 64em) {
+    .project-tagline {
+      font-size: 1.25rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .project-tagline {
+      font-size: 1.15rem; } }
+  @media screen and (max-width: 42em) {
+    .project-tagline {
+      font-size: 1rem; } }
+
+.main-content {
+  word-wrap: break-word; }
+  .main-content :first-child {
+    margin-top: 0; }
+  @media screen and (min-width: 64em) {
+    .main-content {
+      max-width: 64rem;
+      padding: 2rem 6rem;
+      margin: 0 auto;
+      font-size: 1.1rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .main-content {
+      padding: 2rem 4rem;
+      font-size: 1.1rem; } }
+  @media screen and (max-width: 42em) {
+    .main-content {
+      padding: 2rem 1rem;
+      font-size: 1rem; } }
+  .main-content img {
+    max-width: 100%; }
+  .main-content h1,
+  .main-content h2,
+  .main-content h3,
+  .main-content h4,
+  .main-content h5,
+  .main-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: normal;
+    color: #159957; }
+  .main-content p {
+    margin-bottom: 1em; }
+  .main-content code {
+    padding: 2px 4px;
+    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 0.9rem;
+    color: #567482;
+    background-color: #f3f6fa;
+    border-radius: 0.3rem; }
+  .main-content pre {
+    padding: 0.8rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    color: #567482;
+    word-wrap: normal;
+    background-color: #f3f6fa;
+    border: solid 1px #dce6f0;
+    border-radius: 0.3rem; }
+    .main-content pre > code {
+      padding: 0;
+      margin: 0;
+      font-size: 0.9rem;
+      color: #567482;
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+      border: 0; }
+  .main-content .highlight {
+    margin-bottom: 1rem; }
+    .main-content .highlight pre {
+      margin-bottom: 0;
+      word-break: normal; }
+  .main-content .highlight pre,
+  .main-content pre {
+    padding: 0.8rem;
+    overflow: auto;
+    font-size: 0.9rem;
+    line-height: 1.45;
+    border-radius: 0.3rem;
+    -webkit-overflow-scrolling: touch; }
+  .main-content pre code,
+  .main-content pre tt {
+    display: inline;
+    max-width: initial;
+    padding: 0;
+    margin: 0;
+    overflow: initial;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0; }
+    .main-content pre code:before, .main-content pre code:after,
+    .main-content pre tt:before,
+    .main-content pre tt:after {
+      content: normal; }
+  .main-content ul,
+  .main-content ol {
+    margin-top: 0; }
+  .main-content blockquote {
+    padding: 0 1rem;
+    margin-left: 0;
+    color: #819198;
+    border-left: 0.3rem solid #dce6f0; }
+    .main-content blockquote > :first-child {
+      margin-top: 0; }
+    .main-content blockquote > :last-child {
+      margin-bottom: 0; }
+  .main-content table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+    -webkit-overflow-scrolling: touch; }
+    .main-content table th {
+      font-weight: bold; }
+    .main-content table th,
+    .main-content table td {
+      padding: 0.5rem 1rem;
+      border: 1px solid #e9ebec; }
+  .main-content dl {
+    padding: 0; }
+    .main-content dl dt {
+      padding: 0;
+      margin-top: 1rem;
+      font-size: 1rem;
+      font-weight: bold; }
+    .main-content dl dd {
+      padding: 0;
+      margin-bottom: 1rem; }
+  .main-content hr {
+    height: 2px;
+    padding: 0;
+    margin: 1rem 0;
+    background-color: #eff0f1;
+    border: 0; }
+
+.site-footer {
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px #eff0f1; }
+  @media screen and (min-width: 64em) {
+    .site-footer {
+      font-size: 1rem; } }
+  @media screen and (min-width: 42em) and (max-width: 64em) {
+    .site-footer {
+      font-size: 1rem; } }
+  @media screen and (max-width: 42em) {
+    .site-footer {
+      font-size: 0.9rem; } }
+
+.site-footer-owner {
+  display: block;
+  font-weight: bold; }
+
+.site-footer-credits {
+  color: #819198; }
diff --git a/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.json b/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.json
new file mode 100644
index 0000000..634d93e
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/cayman.scss_dc6e30e172360d791b9181d8ed4a1ee6.json
@@ -0,0 +1 @@
+{"Target":"css/cayman.7e1da535b7bbc81025784c149709e3132a89b8a053e4b714514010a332ff1faa.css","MediaType":"text/css","Data":{"Integrity":"sha256-fh2lNbe7yBAleEwUlwnjEyqJuKBT5LcUUUAQozL/H6o="}}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index cc86ca1..0d2a659 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,10 +2,11 @@
 <html lang="{{ .Site.Language.Lang }}">
 {{ partial "head.html" . }}
 <body>
-  {{ partial "nav.html" . }}
+  {{ partial "header-nav.html" . }}
   <section class="main-content">
     {{ block "main" . }}{{ end }}
     {{ partial "footer.html" . }}
   </section>
+  {{ partial "google-analytics-async.html" . }}
 </body>
 </html>
diff --git a/layouts/partials/google-analytics-async.html b/layouts/partials/google-analytics-async.html
new file mode 100644
index 0000000..8a58c07
--- /dev/null
+++ b/layouts/partials/google-analytics-async.html
@@ -0,0 +1,10 @@
+{{ if not $.Site.IsServer }}
+  {{ with $.Site.GoogleAnalytics }}
+  <script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', '{{ . }}', 'auto');
+  ga('send', 'pageview');
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+  {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6f2295e..1636eb3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,8 +5,9 @@
   {{ $.Hugo.Generator }}
   <link rel="stylesheet" href="{{ "css/normalize.css" | absURL }}">
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+  {{ $caymanScss := "scss/cayman.scss" }}
   {{ $options := (dict "targetPath" "css/cayman.css") }}
-  {{ $caymanCss := resources.Get "scss/cayman.scss" | toCSS $options | fingerprint }}
+  {{ $caymanCss := resources.Get $caymanScss | resources.ExecuteAsTemplate $caymanScss . | toCSS $options | fingerprint }}
   <link rel="stylesheet" href="{{ $caymanCss.Permalink }}">
   <title>{{ .Title }} | {{ $.Site.Title }}</title>
 </head>
diff --git a/layouts/partials/nav.html b/layouts/partials/header-nav.html
index 73e287a..f6a4030 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/header-nav.html
@@ -1,9 +1,9 @@
 <section class="page-header">
   <h1 class="project-name">
-    {{ $.Site.Params.project_name | default "project_name goes here" }}
+    {{ $.Site.Params.project_name | default "project_name goes here" | markdownify }}
   </h1>
   <h2 class="project-tagline">
-    {{ $.Site.Params.project_tagline | default "project_tagline goes here" }}
+    {{ $.Site.Params.project_tagline | default "project_tagline goes here" | markdownify }}
   </h2>
   <!-- TODO wrap w/ nav element -->
   {{ $current := . }}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 5374b7d..4b7dc57 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -14,4 +14,8 @@
     </div>
   {{ end }}
   {{ .Content }}
+  {{ $ctx := . }}
+  {{ with $.Site.DisqusShortname }}
+    {{ template "_internal/disqus.html" $ctx }}
+  {{ end }}
 {{ end }}