Tweak code blocks

content/functions/safeCSS.md

@@ -27,10 +27,10 @@ In this context, *safe* means CSS content that matches any of the following:
 
 Example: Given `style = "color: red;"` defined in the front matter of your `.md` file:
 
-* `<p style="{{ .Params.style | safeCSS }}">…</p>` ⇒ `<p style="color: red;">…</p>` (Good!)
-* `<p style="{{ .Params.style }}">…</p>` ⇒ `<p style="ZgotmplZ">…</p>` (Bad!)
+* <span class="good">`<p style="{{ .Params.style | safeCSS }}">…</p>` &rarr; `<p style="color: red;">…</p>`</span>
+* <span class="bad">`<p style="{{ .Params.style }}">…</p>` &rarr; `<p style="ZgotmplZ">…</p>`</span>
 
 {{% note "ZgotmplZ" %}}
-ZgotmplZ is a special value that indicates that unsafe content reached a CSS or URL context.
+"ZgotmplZ" is a special value that indicates that unsafe content reached a CSS or URL context.
 {{% /note %}}
 

content/functions/safeJS.md

@@ -25,6 +25,6 @@ Template authors are responsible for ensuring that typed expressions do not brea
 
 Example: Given `hash = "619c16f"` defined in the front matter of your `.md` file:
 
-* `<script>var form_{{ .Params.hash | safeJS }};…</script>` ⇒ `<script>var form_619c16f;…</script>` (Good!)
-* `<script>var form_{{ .Params.hash }};…</script>` ⇒ `<script>var form_"619c16f";…</script>` (Bad!)
+* <span class="good">`<script>var form_{{ .Params.hash | safeJS }};…</script>` &rarr; `<script>var form_619c16f;…</script>`</span>
+* <span class="bad">`<script>var form_{{ .Params.hash }};…</script>` &rarr; `<script>var form_"619c16f";…</script>`</span>
 

content/getting-started/directory-structure.md

@@ -11,6 +11,7 @@ weight: 50
 draft: false
 wip: true
 aliases: [/overview/source-directory/]
+toc: true
 ---
 
 <!-- copied from old overview/source-directory -->

content/templates/base.md

@@ -90,6 +90,18 @@ 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:
+
+```html
+<!-- Here is a harmless comment..that will break my layout at build -->
+{{ define "main" }}
+...your code here
+{{ end }}
+```
+[See this thread from the discussion forums](https://discuss.gohugo.io/t/baseof-html-block-templates-and-list-types-results-in-empty-pages/5612/6)
+{{% /warning %}}
+
 The following shows how you can override both the `"main"` and `"title"` block areas from the base template with code unique to your [default single page template][singletemplate]:
 
 {{% code file="layouts/_default/single.html" download="single.html" %}}

layouts/shortcodes/code.html

@@ -1,6 +1,7 @@
 {{$icon := index (split (.Get "file") ".") 1 }}
 <div class="code" id="{{.Get "file" | urlize}}">
 	{{- with .Get "file" -}}
+		<div class="filename">{{.}}</div>
 		<div class="code-icon">
 			<i class="icon-{{$icon}} input"></i>
 		</div>

pipeline/scss/_variables.scss

@@ -23,7 +23,7 @@ $hugo-gold:#EBB951;
 $hugo-gray:#737373;
 $hugo-gray-dark:darken($hugo-gray, 10%);
 $hugo-gray-light:lighten($hugo-gray, 30%);
-$hugo-gray-ultra-light:lighten($hugo-gray-light, 23%);
+$hugo-gray-ultra-light:lighten($hugo-gray-light, 22%);
 $hugo-green:#00A88A;
 $hugo-green-light:#33BA91;
 //Examples
@@ -67,7 +67,6 @@ $button-border-radius: .25em;
 
 $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;
@@ -75,6 +74,7 @@ $code-copy-button-text-color:$base-font-color;
 $code-base-font-color:$hugo-pink-light;
 $inline-code-text-color:$base-font-color;
 $inline-code-background-color:$hugo-gray-ultra-light;
+$code-block-background-color: $inline-code-background-color;
 //Sidebar & Breadcrumb
 $site-navigation-width: 280px;
 $content-max-width: 32em;

pipeline/scss/components/_admonitions.scss

@@ -24,32 +24,6 @@
   h2 {
     display:none;
   }
-  // h2 {
-  //   font-size: 1.1em;
-  //   color: lighten($base-font-color, 20%);
-  //   width: 100%;
-  //   display: block;
-  //   margin: 0px;
-  //   padding: 0px;
-  //   margin-left: 0px;
-  //   padding: 0px 12px;
-  //   border: none;
-  //   outline: none;
-  //   border-bottom-width: 2px;
-  //   border-bottom-style: solid;
-  //   display: inline-block;
-  //   width: auto;
-  //   z-index: 20;
-  //   code,
-  //   pre {
-  //     color: inherit;
-  //   }
-  //   em,strong {
-  //     color:inherit;
-  //     font-weight:inherit;
-  //   }
-  //   display:none;
-  // }
   .admonition-content {
     display: block;
     margin: 0px;
@@ -60,6 +34,14 @@
     p:last-child {
       margin-bottom: 0px;
     }
+    ul,ol {
+      &:last-child {
+        margin-bottom:0px;
+      }
+      &:last-child + p {
+        margin-top:1em;
+      }
+    }
   }
 }
 
@@ -69,24 +51,6 @@
   #exclamation-icon {
     fill: $hugo-blue;
   }
-  // &:before {
-  //   content: '\f06a';
-  //   color: inherit;
-  //   font-family:'FontAwesome';
-  //   padding:0px;
-  //   color:$hugo-blue;
-  //   background-color: desaturate(lighten($hugo-blue,61%),20%);
-  //   // &::after {
-  //   //   content:'';
-  //   //   width: 2px;
-  //   //   height: 4px;
-  //   //   border:2px solid $hugo-blue;
-  //   // }
-  // }
-  // // h2 {
-  // //   border-bottom-color: $hugo-blue;
-  // //   color: $hugo-blue;
-  // // }
 }
 
 .warning {
@@ -95,17 +59,4 @@
   #exclamation-icon {
     fill: $hugo-pink;
   }
-  // &:before {
-  //   content: '\e810';
-  //   color: $hugo-pink;
-  //   background-color: lighten($hugo-pink, 54%);
-  // }
-  // h2 {
-  //   border-bottom-color: $hugo-pink;
-  //   color: $hugo-pink;
-  //   pre,
-  //   code {
-  //     color: $hugo-pink;
-  //   }
-  // }
 }

pipeline/scss/components/_icons.scss

@@ -14,11 +14,22 @@ svg.svg-icon {
 }
 
 //for template lookup yes/no/na (e.g., in single-page template [/templates/single-page-template/])
+span.yes {
+  code {
+    color: $hugo-white;
+    background-color: $hugo-green;
+  }
+}
+
 span.no {
   code {
     background-color: $hugo-pink;
     color: $hugo-white;
   }
+}
+
+span.no,
+span.bad {
   &:after {
     display: inline-block;
     @include size(1em);
@@ -30,6 +41,19 @@ span.no {
   }
 }
 
+span.yes,
+.good {
+  &:after {
+    display: inline-block;
+    @include size(1em);
+    font-family: 'FontAwesome';
+    content: '\f164';
+    color: $hugo-green;
+    margin-left: .5em;
+    font-size: 1.2em;
+  }
+}
+
 span.break {
   position: relative;
   display: inline-block;
@@ -46,7 +70,7 @@ span.break {
     border-bottom: 1px solid black;
     border-top: 1px solid black;
     top: .666em;
-    width:140px;
+    width: 140px;
   }
   &:before {
     right: 100%;
@@ -58,22 +82,6 @@ span.break {
   }
 }
 
-span.yes {
-  code {
-    color: $hugo-white;
-    background-color: $hugo-green;
-  }
-  &:after {
-    display: inline-block;
-    @include size(1em);
-    font-family: 'FontAwesome';
-    content: '\f164';
-    color: $hugo-green;
-    margin-left: .5em;
-    font-size: 1.2em;
-  }
-}
-
 span.na {
   code {
     background-color: transparent;

pipeline/scss/components/_new-code.scss

@@ -21,6 +21,7 @@
   span,
   p,
   dd,
+  dt,
   {
     code {
       background-color: $inline-code-background-color;