Add styles for different languages in code blocks

content/about-hugo/benefits.md

@@ -34,7 +34,7 @@ Not running a website generator on your HTTP server has many benefits. The most
 
 ["An Introduction to Static Site Generators", David Walsh]: https://davidwalsh.name/introduction-static-site-generators
 ["Static Site Generators", O-Reilly]: /documents/oreilly-static-site-generators.pdf
-["Top 10 Static Website Generators," Netlify blog]: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
+["Top 10 Static Website Generators", Netlify blog]: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
 [hugovwordpress]: https://gettingthingstech.com/hugo-vs.-wordpress-page-load-speed-comparison-hugo-leaves-wordpress-in-its-dust/
 [StaticGen: Top Open-Source Static Site Generators (GitHub Stars)]: https://www.staticgen.com/
 [dotcms]: https://dotcms.com/blog/post/the-resurgence-of-static

content/content-management/cross-references.md

@@ -33,8 +33,8 @@ The single parameter to `ref` is a string with a content `documentname` (e.g., `
 The `documentname` is the name of a document, including the format extension; this may be just the filename, or the relative path from the `content/` directory. With a document `content/blog/post.md`, either format will produce the same result:
 
 ```golang
-{{</* relref "blog/post.md" */>}} ⇒ `/blog/post/`
-{{</* relref "post.md" */>}} ⇒ `/blog/post/`
+{{</* relref "blog/post.md" */>}} &rarr; `/blog/post/`
+{{</* relref "post.md" */>}} &rarr; `/blog/post/`
 ```
 
 If you have the same filename used across multiple sections, you should only use the relative path format; otherwise, the behavior will be `undefined`. This is best illustrated with an example `content` directory:
@@ -56,17 +56,17 @@ The potential for conflicting `documentname` is more likely in larger sites. Usi
 
 {{% code file="content/meta/my-article.md" copy="false" %}}
 ```golang
-{{</* relref "my-birthday.md" */>}} ⇒ `/events/my-birthday/` (maybe)
-{{</* relref "my-birthday.md" */>}} ⇒ `/posts/my-birthday/` (maybe)
-{{</* relref "my-birthday.md" */>}} ⇒ `/galleries/my-birthday/` (maybe)
-{{</* relref "events/my-birthday.md" */>}} ⇒ `/events/my-birthday/`
-{{</* relref "galleries/my-birthday.md" */>}} ⇒ `/galleries/my-birthday/`
+{{</* relref "my-birthday.md" */>}} &rarr; `/events/my-birthday/` (maybe)
+{{</* relref "my-birthday.md" */>}} &rarr; `/posts/my-birthday/` (maybe)
+{{</* relref "my-birthday.md" */>}} &rarr; `/galleries/my-birthday/` (maybe)
+{{</* relref "events/my-birthday.md" */>}} &rarr; `/events/my-birthday/`
+{{</* relref "galleries/my-birthday.md" */>}} &rarr; `/galleries/my-birthday/`
 ```
 {{% /code %}}
 
 A relative document name must *not* begin with a slash (`/`).
 ```golang
-{{</* relref "/events/my-birthday.md" */>}} ⇒ `""`
+{{</* relref "/events/my-birthday.md" */>}} &rarr; `""`
 ```
 
 ### Anchors
@@ -74,27 +74,27 @@ A relative document name must *not* begin with a slash (`/`).
 When an `anchor` is provided by itself, the current page’s unique identifier will be appended; when an `anchor` is provided appended to `documentname`, the found page's unique identifier will be appended:
 
 ```golang
-{{</* relref "#anchors" */>}} ⇒ `#anchors:9decaf7`
-{{</* relref "about-hugo/hugo-features.md#content" */>}} ⇒ `/blog/post/#who:badcafe`
+{{</* relref "#anchors" */>}} &rarr; `#anchors:9decaf7`
+{{</* relref "about-hugo/hugo-features.md#content" */>}} &rarr; `/blog/post/#who:badcafe`
 ```
 
 The above examples render as follows for this very page as well as a reference to the "Content" heading in the Hugo docs features pageyoursite
 
 ```golang
-{{</* relref "#who" */>}} ⇒ `#who:9decaf7`
-{{</* relref "blog/post.md#who" */>}} ⇒ `/blog/post/#who:badcafe`
+{{</* relref "#who" */>}} &rarr; `#who:9decaf7`
+{{</* relref "blog/post.md#who" */>}} &rarr; `/blog/post/#who:badcafe`
 ```
 
 More information about document unique identifiers and headings can be found [below]({{< ref "#hugo-heading-anchors" >}}).
 
 ### Examples
 
-* `{{</* ref "blog/post.md" */>}}` ⇒ `http://yoursite.com/blog/post/`
-* `{{</* ref "post.md#tldr" */>}}` ⇒ `http://yoursite.com/blog/post/#tldr:caffebad`
-* `{{</* relref "post.md" */>}}` ⇒ `/blog/post/`
-* `{{</* relref "blog/post.md#tldr" */>}}` ⇒ `/blog/post/#tldr:caffebad`
-* `{{</* ref "#tldr" */>}}` ⇒ `#tldr:badcaffe`
-* `{{</* relref "#tldr" */>}}` ⇒ `#tldr:badcaffe`
+* `{{</* ref "blog/post.md" */>}}` &rarr; `http://yoursite.com/blog/post/`
+* `{{</* ref "post.md#tldr" */>}}` &rarr; `http://yoursite.com/blog/post/#tldr:caffebad`
+* `{{</* relref "post.md" */>}}` &rarr; `/blog/post/`
+* `{{</* relref "blog/post.md#tldr" */>}}` &rarr; `/blog/post/#tldr:caffebad`
+* `{{</* ref "#tldr" */>}}` &rarr; `#tldr:badcaffe`
+* `{{</* relref "#tldr" */>}}` &rarr; `#tldr:badcaffe`
 
 ## Hugo Heading Anchors
 
@@ -148,22 +148,22 @@ The technique outlined above works well enough, but some documents have headings
 
 It’s easy to forget to do that all the time, and Hugo is smart enough to do it for you. It just adds `-x` to the end of each heading it has already seen.
 
-* `### Example` ⇒ `example`
-* `### Example` ⇒ `example-1`
-* `### Example` ⇒ `example-2`
+* `### Example` &rarr; `example`
+* `### Example` &rarr; `example-1`
+* `### Example` &rarr; `example-2`
 
 Sometimes it's a little harder, but Hugo can recover from those, too, by adding more suffixes:
 
-* `# Heading` ⇒ `heading`
-* `# Heading 1` ⇒ `heading-1`
-* `# Heading` ⇒ `heading-1-1`
-* `# Heading` ⇒ `heading-1-2`
-* `# Heading 1` ⇒ `heading-2`
+* `# Heading` &rarr; `heading`
+* `# Heading 1` &rarr; `heading-1`
+* `# Heading` &rarr; `heading-1-1`
+* `# Heading` &rarr; `heading-1-2`
+* `# Heading 1` &rarr; `heading-2`
 
 This can even affect specified heading anchors that come after a generated heading anchor.
 
-* `# My Heading` ⇒ `my-heading`
-* `# My Heading {#my-heading}` ⇒ `my-heading-1`
+* `# My Heading` &rarr; `my-heading`
+* `# My Heading {#my-heading}` &rarr; `my-heading-1`
 
 {{% note %}}
 This particular collision and override both unfortunate and unavoidable because Hugo processes each heading for collision detection as it sees it during conversion.

content/functions/replace.md

@@ -19,6 +19,7 @@ aliases: []
 `replace` replaces all occurrences of the search string with the replacement string:
 
 ```
-`{{ replace "Batman and Robin" "Robin" "Catwoman" }}` → "Batman and Catwoman"
+`{{ replace "Batman and Robin" "Robin" "Catwoman" }}`
+→ "Batman and Catwoman"
 ```
 

content/functions/safeHTMLAttr.md

@@ -27,6 +27,6 @@ Example: Given a site-wide `config.toml` that contains this menu entry:
     url = "irc://irc.freenode.net/#golang"
 ```
 
-* `<a href="{{ .URL }}">` ⇒ `<a href="#ZgotmplZ">` (Bad!)
-* `<a {{ printf "href=%q" .URL | safeHTMLAttr }}>` ⇒ `<a href="irc://irc.freenode.net/#golang">` (Good!)
+* <span class="bad">`<a href="{{ .URL }}">` &rarr; `<a href="#ZgotmplZ">`</span>
+* <span class="good">`<a {{ printf "href=%q" .URL | safeHTMLAttr }}>` &rarr; `<a href="irc://irc.freenode.net/#golang">`</span>
 

content/templates/base.md

@@ -91,10 +91,10 @@ When using the `define` keyword, you do *not* need to use Go templates context r
 This replaces the contents of our (basically empty) "main" block with something useful for the list template. In this case, we didn't define a `"title"`` block, so the contents from our base template remain unchanged in lists.
 
 {{% warning %}}
-Code that you put outside the block definitions *can* break your layout. This even include HTML comments. For example:
+Code that you put outside the block definitions *can* break your layout. This even includes HTML comments. For example:
 
 ```html
-<!-- Here is a harmless comment..that will break my layout at build -->
+<!-- Harmless comment..that will break your layout at build -->
 {{ define "main" }}
 ...your code here
 {{ end }}

layouts/partials/site-footer.html

@@ -7,8 +7,8 @@
     </div>
     <div class="footer-lists">
       <ul class="footer-list">
-        <li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Project Source</a></li>
-        <li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li>
+        <li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Source</a></li>
+        <li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss</a></li>
         <li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Only)</a></li>
       </ul>
       <ul class="footer-list">

pipeline/scss/components/_new-code.scss

@@ -5,6 +5,8 @@
     font-size: .9em;
     weight: inherit;
     font-weight: $code-font-base-weight;
+    position: relative;
+    overflow-y: visible;
   }
   pre > code,
   .code {
@@ -37,6 +39,44 @@
   position: relative;
   overflow: hidden;
   padding: .5em;
+  overflow-y: visible;
+}
+
+code[class^="language-"] {
+  &:after {
+    display: block;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    color: lighten($base-font-color, 25%);
+    font-family:'fontello';
+    content: '\f121';
+  }
+}
+
+code.language-html:after {
+  font-family: 'FontAwesome';
+  content: '\f13b';
+}
+
+code.language-js:after {
+  font-family: 'fontello';
+  content: '\e802';
+  font-size: 16px;
+  top: 2px;
+}
+
+code.language-hugo:after,
+code.language-go:after,
+code.language-golang:after {
+  font-family: 'fontello';
+  content: '\e81f';
+}
+
+code.language-sass:after,
+code.language-scss:after {
+  font-family: 'fontello';
+  content: '\e803';
 }
 
 .filename {
@@ -44,9 +84,11 @@
   color: lighten($base-font-color, 45%);
   padding-left: 1em;
   padding-top: .25em;
-  font-size: .8em;
+  font-size: .7em;
   background-color: $code-block-background-color;
   width: 100%;
+  font-style: italic;
+  margin-bottom: 0px;
 }
 
 .code-icon {
@@ -57,10 +99,10 @@
 
 .copy-button {
   transition: opacity .3s ease-in-out;
-  opacity: 0;
+  opacity: 1;
   position: absolute;
-  right: 10px;
-  top: 40px;
+  right: 30px;
+  top: 1px;
   background-color: white;
   color: $base-font-color;
   border-radius: 0px;
@@ -69,6 +111,7 @@
   width: auto;
   font-size: 12px;
   display: block;
+  z-index: 999;
   &:hover {
     @include card(3);
   }