Change code block styles, and start first round of fixes for bf config

content/functions/unix.md

@@ -40,7 +40,7 @@ The following assumes you have a content section called `events` (i.e., `content
 ```
 {{% /code %}}
 
-## `Unix` Example 2: Days Passed Since Last Modification
+## `Unix` Example 2: Time Passed Since Last Modification
 
 This very simple one-liner uses `Unix` with `Now` to calculate the amount of time that has passed between the `.LastMod` for the current page and the last build of the current page.
 
@@ -53,7 +53,7 @@ This very simple one-liner uses `Unix` with `Now` to calculate the amount of tim
 Since both values are integers, they can be subtracted and then divided by the number of seconds in a day (i.e., `60 * 60 * 24 == 86400`).
 
 {{% note %}}
-Adding a value like the preceding example to your Hugo website only provides value if you update every day. Hugo's output is *static*, so a month-old page published on a static website that only publishes monthly could easily be misrepresented as updated *yesterday* rather than 30 days ago.
+Hugo's output is *static*. In example 2, a month-old page published on a Hugo site that only publishes monthly could easily misrepresented the last update as *yesterday* rather than 30 days ago.
  {{% /note %}}
 
 

content/getting-started/configuration.md

@@ -18,6 +18,7 @@ The [directory structure][] of a Hugo website—or more precisely, the sourc
 
 Because of Hugo's preference for sane defaults, many websites may not need a configuration file. Hugo is designed to recognize certain typical usage patterns (and even expects them by default).
 
+
 ## Configuration Lookup Order
 
 Hugo searches for a configuration file in the root of your website's source directory as a default behavior. First, it looks for a `./config.toml` file. If that's not present, it will seek a `./config.yaml` file, followed by a `./config.json` file.
@@ -90,17 +91,14 @@ enableRobotsTXT:            false
 disable404:                 false
 # Do not inject generator meta tag on homepage
 disableHugoGeneratorInject: false
-# Allows you to disable all page types and will render nothing related to 'kind'
-# See /content-management/organization/ for more information related to `Kind` and `_index.md`
-# The following would render nothing according to kind if written with all availabe values=>
-# ["page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"]
+# Allows you to disable all page types and will render nothing related to 'kind';
+# values = "page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"
 disableKinds: []
 # Do not make the url/path to lowercase
 disablePathToLower:         false
 # edit new content with this editor, if provided
 editor:                     ""
-# Enable Emoji emoticons support for page content.
-# See www.emoji-cheat-sheet.com
+# Enable Emoji emoticons support for page content; see emoji-cheat-sheet.com
 enableEmoji:                false
 # Show a placeholder instead of the default value or an empty string if a translation is missing
 enableMissingTranslationPlaceholders: false
@@ -234,18 +232,14 @@ enableRobotsTXT =             false
 disable404 =                  false
 # Do not inject generator meta tag on homepage
 disableHugoGeneratorInject =  false
-# Allows you to disable all page types and will render nothing related to 'kind'
-# See /content-management/organization/ for more information related to 'kind'
-# and `_index.md`
-# The following would render nothing according to kind if written with all availabe values=>
-# ["page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"]
+# Allows you to disable all page types and will render nothing related to 'kind';
+# values = "page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"
 disableKinds = []
 # Do not make the url/path to lowercase
 disablePathToLower =          false
 # edit new content with this editor, if provided
 editor =                      ""
-# Enable Emoji emoticons support for page content.
-# See www.emoji-cheat-sheet.com
+# Enable Emoji emoticons support for page content; see emoji-cheat-sheet.com
 enableEmoji =                 false
 # Show a placeholder instead of the default value or an empty string if a translation is missing
 enableMissingTranslationPlaceholders = false
@@ -262,7 +256,7 @@ log =                         false
 # Log File path (if set, logging enabled automatically)
 logFile =
 # maximum number of items in the RSS feed
-rssLimit =                   15
+rssLimit =                    15
 # "toml","yaml", or "json"
 metaDataFormat =              "toml"
 newContentEditor =            ""
@@ -287,8 +281,6 @@ pygmentsCodeFencesGuessSyntax = false
 pygmentsStyle =               "monokai"
 # true: use pygments-css or false: color-codes directly
 pygmentsUseClasses =          false
-# maximum number of items in the RSS feed
-rssLimit:                   15
 # see "Section Menu for Lazy Bloggers", /templates/menu-templates for more info
 SectionPagesMenu =
 # default sitemap configuration map
@@ -350,6 +342,47 @@ Hugo typically configures Blackfriday with sane default values. These defaults s
 
 However, if you have specific needs with respect to Markdown, Hugo exposes some of its Blackfriday behavior options for you to alter. The following table lists these Hugo options, paired with the corresponding flags from Blackfriday's source code ( [html.go](https://github.com/russross/blackfriday/blob/master/html.go) and [markdown.go](https://github.com/russross/blackfriday/blob/master/markdown.go)).
 
+**WIP: WORKING ON MOVING BF CONFIG FROM TABLE TO DL**
+
+`taskLists`
+: default: **`true`**<br>
+    Blackfriday flag: **``**<br>
+    Purpose: `false` turns off GitHub-style automatic task/TODO list generation
+
+`smartypants`
+: default: **`true`** <br>
+    Blackfriday flag: **`HTML_USE_SMARTYPANTS`** <br>
+    Purpose: `false` disables smart punctuation substitutions, including smart quotes, smart dashes, smart fractions, etc. If `true`, it may be fine-tuned with the `angledQuotes`, `fractions`, `smartDashes`, and `latexDashes` flags (see below).
+
+`angledQuotes`
+: default: **`false`**<br>
+    Blackfriday flag: **`HTML_SMARTYPANTS_ANGLED_QUOTES`**<br>
+    Purpose: `true` enables smart, angled double quotes. Example: "Hugo" renders to renders to «Hugo» instead of “Hugo”.
+
+`fractions`
+: default: **`true`**<br>
+    Blackfriday flag: **`HTML_SMARTYPANTS_FRACTIONS`** <br>
+    Purpose: <code>false</code> disables smart fractions.<br>
+    Example: `5/12` renders to <sup>5</sup>&frasl;<sub>12</sub>(<code>&lt;sup&gt;5&lt;/sup&gt;&amp;frasl;&lt;sub&gt;12&lt;/sub&gt;</code>).<br> <strong>Caveat:</strong> Even with <code>fractions = false</code>, Blackfriday still converts `1/2`, `1/4`, and `3/4` respectively to ½ (<code>&amp;frac12;</code>), ¼ (<code>&amp;frac14;</code>) and ¾ (<code>&amp;frac34;</code>), but only these three.</small>
+
+`smartDashes`
+: default: **`true`** <br>
+    Blackfriday flag: **`HTML_SMARTY_DASHES`** <br>
+    Purpose: `false` disables smart dashes; i.e., the conversion of multiple hyphens into an en dash or em dash. If `true`, its behavior can be modified with the `latexDashes` flag below.
+
+`latexDashes`
+: default: **`true`** <br>
+    Blackfriday flag: **`HTML_SMARTYPANTS_LATEX_DASHES`** <br>
+    Purpose: `false` disables LaTeX-style smart dashes and selects conventional smart dashes. Assuming `smartDashes`: <br>
+    If `true`, `--` is translated into &ndash; (`&ndash;`), whereas `---` is translated into &mdash; (`&mdash;`). <br>
+    However, *spaced* single hyphen between two words is translated into an en&nbsp;dash&mdash; e.g., "`12 June - 3 July`" becomes `12 June ndash; 3 July` upon rendering.
+
+`hrefTargetBlank`
+: default: **`false`** <br>
+    Blackfriday flag: **`HTML_HREF_TARGET_BLANK`** <br>
+    Purpose: `true` opens external links in a new window or tab.
+
+
 {{< bfconfig >}}
 
 {{% note %}}

layouts/shortcodes/code.html

@@ -1,17 +1,19 @@
 {{$icon := index (split (.Get "file") ".") 1 }}
-<div class="code-copy input" id="{{.Get "file" | urlize}}">
-	{{- with .Get "file" -}}<div class="code-copy-header"><div class="action-buttons"></div><span title="{{.}}" class="filename">{{- . -}}</span><i class="icon-{{$icon}} input"></i></div>{{- end -}}
-	{{with .Get "source"}}
-	<a href="{{.}}" class="see-code-source" role="button" target="_blank" title="See source for this snippet">See Source</a>
-	{{end}}
+<div class="code" id="{{.Get "file" | urlize}}">
+	{{- with .Get "file" -}}
+		<!-- <div title="{{.}}" class="filename">{{- . -}}</div> -->
+		<div class="code-icon">
+			<i class="icon-{{$icon}} input"></i>
+		</div>
+	{{- end -}}
 	{{with .Get "download"}}
 	<button class="download-button" title="Download &quot;{{.}}&quot;.">
-		<i class="icon-download"></i>
+		<i class="icon-download"></i><span class="button-text">Download</span>
 	</button>
 	{{end}}
 	{{ if ne (.Get "copy") "false" }}
 	<button class="copy-button" title="Copy this code to your clipboard." data-clipboard-snippet>
-			<i class="icon-clipboard"></i><!-- <div class="copy-text"> COPY</div> -->
+			<i class="icon-clipboard"></i><span class="button-text"> Copy</span>
 	</button>
 	{{end}}
 	<div class="code-copy-content" {{with .Get "download"}}id="{{.}}"{{end}}>

layouts/shortcodes/note.html

@@ -2,6 +2,7 @@
 	<div class="note-icon">
 		{{partial "svg-icons/exclamation.svg" .}}
 	</div>
-	<h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}note{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Note{{end}}</h2>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}note{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Note{{end}}</h2> -->
+	<h3>Note</h3>
 	<div class="admonition-content">{{- .Inner -}}</div>
 </div>

layouts/shortcodes/output.html

@@ -1,7 +1,10 @@
 {{$file := .Get "file"}}
 {{$icon := index (split $file ".") 1 }}
-<div class="code-copy" id="{{$file | urlize}}">
-	<div class="code-copy-header output"><div class="action-buttons"></div><span class="filename" title="{{$file}}">{{$file}}</span><i class="icon-{{$icon}}"></i></div>
+<div class="code" id="{{$file | urlize}}">
+	<div class="filename" title="{{$file}}">{{$file}}</div>
+	<div class="code-icon">
+		<i class="icon-{{$icon}}"></i>
+	</div>
 	<div class="code-copy-content output-content">
 	{{- .Inner -}}
 	</div>

layouts/shortcodes/warning.html

@@ -2,6 +2,7 @@
 	<div class="admonition-icon">
 		{{partial "svg-icons/exclamation.svg" .}}
 	</div>
-	<h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}warning{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Warning{{end}}</h2>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}warning{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Warning{{end}}</h2> -->
+	<h3>Warning</h3>
 	<div class="admonition-content">{{- .Inner -}}</div>
 </div>

themes/hugodocs/layouts/partials/site-header.html

@@ -6,6 +6,6 @@
     <img src="{{$base}}images/hugo-logo/hugo-logo-wide.png" alt=""><span class="hugo-v">v{{$version}}</span>
   </a>
   <!-- From https://buttons.github.io/. -->
-  <a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a>
+  <!-- <a class="github-button" href="https://github.com/spf13/hugo" data-icon="octicon-star" data-style="mega" data-count-href="/spf13/hugo/stargazers" data-count-api="/repos/spf13/hugo#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star spf13/hugo on GitHub">Star</a> -->
   </div>
 </header>

themes/hugodocs/pipeline/scss/_variables.scss

@@ -45,7 +45,7 @@ $heading-font-family: $base-font-family;
 $code-font-family:'robotomono',courier,monospace;
 
 // Font Weights
-$base-font-weight: 300;
+$base-font-weight: 400;
 $base-font-bold-weight: 600;
 $heading-font-weight: 600;
 $code-font-base-weight: 400;
@@ -65,9 +65,9 @@ $button-border-radius: .25em;
 // $code-font-family:'courierprime',courier,monospace;
 
 
-$code-tooltip-bg-color: $hugo-pink;
-$code-block-base-font-color: #ffffff;
-$code-block-background-color: $hugo-black;
+$code-tooltip-bg-color: $hugo-blue;
+$code-block-base-font-color: $hugo-black;
+$code-block-background-color: darken($hugo-white,5%);
 $code-editor-header-base-bg-color: $input-example-color;
 $code-filename-color:#ffffff;
 $code-copy-button-color:#ffffff;

themes/hugodocs/pipeline/scss/components/_anchors.scss

@@ -28,7 +28,7 @@ a {
 a.tooltip {
   position: relative;
   overflow: visible;
-  font-family:$base-font-family;
+  font-family: $base-font-family;
   &:hover::before {
     display: inline-block;
     position: absolute;
@@ -71,7 +71,7 @@ a.tooltip {
     }
     &::before {
       padding-right: 1.5em;
-      font-family:$base-font-family;
+      font-family: $base-font-family;
     }
   }
 }
@@ -80,21 +80,27 @@ a.tooltip {
   content: '\f09b';
 }
 
-a.heading-link {
-  color: lighten($base-font-color, 50%);
-  font-size: .7em;
-  position: absolute;
-  display: inline;
-  top: .4em;
-  right: 0px;
-  &:before,
-  &:after {
-    display: none;
+.body-copy {
+  a.heading-link {
+    opacity: 0;
+    color: $hugo-gray-light;
+    transition: opacity .3s ease-in-out;
+    font-size: .7em;
+    position: absolute;
+    display: inline;
+    top: .35em;
+    right: 0px;
+    @include MQ(M) {
+      left: -1.5em;
+    }
   }
-  @include MQ(M) {
-    left: -1.5em;
+  h2,
+  h3 {
+    &:hover {
+      a.heading-link {
+        transition: opacity .3s ease-in-out;
+        opacity: 1;
+      }
+    }
   }
-  &:hover {
-    color: $default-anchor-underline-color;
-  }
-}
+}

themes/hugodocs/pipeline/scss/components/_lists.scss

@@ -116,6 +116,12 @@ aside {
         left: 1.5em;
         right: 0em;
       }
+      strong > code {
+        color: $hugo-pink;
+      }
+      strong:first-child > code {
+        color: $hugo-blue;
+      }
     }
   }
 }

themes/hugodocs/pipeline/scss/components/_new-code.scss

@@ -0,0 +1,264 @@
+.body-copy {
+  code,
+  pre {
+    font-family: $code-font-family;
+    font-size: .9em;
+    weight: inherit;
+    font-weight: $code-font-base-weight;
+  }
+  pre > code,
+  .code {
+    background-color: $code-block-background-color;
+  }
+  > pre {
+    overflow-x: scroll;
+  }
+  li,
+  p {
+    code {
+      background-color: #FAFAFA;
+      @include MQ(retina) {
+        background-color: #FAFAFA;
+      }
+    }
+  }
+}
+
+.code {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  padding: .5em;
+}
+
+.filename {
+  font-family: $code-font-family;
+  color: lighten($base-font-color, 45%);
+  padding-left: 1em;
+  padding-top: .25em;
+  font-size: .8em;
+  background-color: $code-block-background-color;
+  width: 100%;
+}
+
+.code-icon {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+}
+
+.copy-button {
+  transition: opacity .3s ease-in-out;
+  opacity: 0;
+  position: absolute;
+  right: 10px;
+  top: 40px;
+  background-color: white;
+  color: $base-font-color;
+  border-radius: 0px;
+  @include card(1);
+  height: 30px;
+  width: auto;
+  font-size: 12px;
+  display: block;
+  &:hover {
+    @include card(3);
+  }
+  span.button-text {
+    text-transform: uppercase;
+    margin-left: 3px;
+  }
+}
+
+.download-button {
+  display: none!important;
+}
+
+.code:hover {
+  .copy-button,
+  .download-button {
+    transition: all .3s ease-in-out;
+    opacity: 1;
+  }
+}
+
+.tooltipped {
+  position: absolute;
+  // background-color: $code-tooltip-bg-color;
+  // padding-right: 2em;
+}
+
+.tooltipped:after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: 2px 4px;
+  font-size: .8em;
+  font-weight: $base-font-bold-weight;
+  font-family: $heading-font-family;
+  color: $hugo-white;
+  text-align: center;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-shadow: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+  content: attr(aria-label);
+  background-color: $code-tooltip-bg-color;
+  border-color: $code-tooltip-bg-color;
+  border-radius: 0px;
+  -webkit-font-smoothing: subpixel-antialiased
+}
+
+.tooltipped:before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: $code-tooltip-bg-color;
+  pointer-events: none;
+  content: "";
+  border: 5px solid transparent;
+}
+
+.tooltipped:hover:before,
+.tooltipped:hover:after,
+.tooltipped:active:before,
+.tooltipped:active:after,
+.tooltipped:focus:before,
+.tooltipped:focus:after {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.tooltipped-multiline:hover:after,
+.tooltipped-multiline:active:after,
+.tooltipped-multiline:focus:after {
+  display: table-cell;
+}
+
+.tooltipped-s:after,
+.tooltipped-se:after,
+.tooltipped-sw:after {
+  top: 100%;
+  right: 50%;
+  margin-top: 5px;
+  text-align: center;
+}
+
+.tooltipped-s:before,
+.tooltipped-se:before,
+.tooltipped-sw:before {
+  top: auto;
+  right: 50%;
+  bottom: -5px;
+  margin-right: -5px;
+  border-bottom-color: $code-tooltip-bg-color;
+  text-align: center;
+}
+
+.tooltipped-se:after {
+  right: auto;
+  left: 50%;
+  // margin-left: -15px;
+  text-align: center;
+}
+
+.tooltipped-sw:after {
+  // margin-right: -15px
+}
+
+.tooltipped-n:after,
+.tooltipped-ne:after,
+.tooltipped-nw:after {
+  right: 50%;
+  bottom: 100%;
+  margin-bottom: 5px
+}
+
+.tooltipped-n:before,
+.tooltipped-ne:before,
+.tooltipped-nw:before {
+  top: -5px;
+  right: 50%;
+  bottom: auto;
+  margin-right: -5px;
+  border-top-color: $code-tooltip-bg-color;
+}
+
+.tooltipped-ne:after {
+  right: auto;
+  left: 50%;
+  margin-left: -15px
+}
+
+.tooltipped-nw:after {
+  margin-right: -15px
+}
+
+.tooltipped-s:after,
+.tooltipped-n:after {
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%)
+}
+
+.tooltipped-w:after {
+  right: 100%;
+  bottom: 50%;
+  margin-right: 5px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%)
+}
+
+.tooltipped-w:before {
+  top: 50%;
+  bottom: 50%;
+  left: -5px;
+  margin-top: -5px;
+  border-left-color: $code-tooltip-bg-color;
+}
+
+.tooltipped-e:after {
+  bottom: 50%;
+  left: 100%;
+  margin-left: 5px;
+  -webkit-transform: translateY(50%);
+  -ms-transform: translateY(50%);
+  transform: translateY(50%)
+}
+
+.tooltipped-e:before {
+  top: 50%;
+  right: -5px;
+  bottom: 50%;
+  margin-top: -5px;
+  border-right-color: $code-tooltip-bg-color;
+}
+
+.tooltipped-multiline:after {
+  width: max-content;
+  max-width: 250px;
+  word-break: break-word;
+  word-wrap: normal;
+  white-space: pre-line;
+  border-collapse: separate
+}
+
+.tooltipped-multiline.tooltipped-s:after,
+.tooltipped-multiline.tooltipped-n:after {
+  right: auto;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%)
+}
+
+.tooltipped-multiline.tooltipped-w:after,
+.tooltipped-multiline.tooltipped-e:after {
+  right: 100%
+}

themes/hugodocs/pipeline/scss/style.scss

@@ -19,8 +19,10 @@
 @import 'components/anchors';
 @import 'components/images';
 @import 'components/admonitions';
-@import 'vendor/highlightjs';
-@import 'components/code';
+// @import 'vendor/highlightjs';
+@import 'vendor/highlightjs-new';
+// @import 'components/code';
+@import 'components/new-code';
 @import 'components/icons';
 @import 'components/tags';
 @import 'algolia/main';

themes/hugodocs/pipeline/scss/vendor/_highlightjs-new.scss

@@ -0,0 +1,87 @@
+/*
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+*/
+/* SEE HUGO SPECIFIC CLASSES AT BOTTOM OF PAGE*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: $code-block-background-color;
+  font-size:.9em;
+}
+
+.hljs,
+.hljs-tag,
+.hljs-subst {
+  color: $hugo-black;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: $hugo-gray;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: saturate($hugo-blue,10%);
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+  color: $hugo-green;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-attr {
+  color: $hugo-pink;
+}
+
+.hljs-symbol,
+.hljs-attribute {
+  color: saturate($hugo-blue,10%);
+}
+
+.hljs-params,
+.hljs-class .hljs-title {
+  color: $hugo-black;
+}
+
+.hljs-string,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+  color: saturate($hugo-blue,10%);
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: $hugo-gray;
+}
+
+.language-toml.hljs .hljs-section {
+  color:$hugo-pink;
+}