Repository: sphinx-gallery/sphinx-gallery

Issue:
The syle of the CSS needs sanitizing
The CSS styles should be as such
<pre>
element {
   prop1: value;
   prop2: value;
}

element2 {
   prop: value;
}
</pre>

Discussion:
Titan-C: Changes visible in my read the docs fork http://sphinx-gallery-local.readthedocs.org/en/cssclean/
Where no difference shall be noticed

Patch:
diff --git a/sphinx_gallery/_static/gallery.css b/sphinx_gallery/_static/gallery.css
index 623003e..1fe2424 100644
--- a/sphinx_gallery/_static/gallery.css
+++ b/sphinx_gallery/_static/gallery.css
@@ -1,106 +1,106 @@
-div.sphx-glr-thumbContainer {
+.sphx-glr-thumbcontainer {
+  background: #fff;
+  border: solid #fff 1px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
   box-shadow: none;
-  background: #FFF;
+  float: left;
   margin: 5px;
-  padding-top: 5px;
   min-height: 230px;
-  border: solid white 1px;
+  padding-top: 5px;
+  position: relative;
+}
+.sphx-glr-thumbcontainer:hover {
+  border: solid #b4ddfc 1px;
+  box-shadow: 0 0 15px rgba(142, 176, 202, 0.5);
+}
+.sphx-glr-thumbcontainer a.internal {
+  bottom: 0;
+  display: block;
+  left: 0;
+  padding: 150px 10px 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.sphx-glr-thumbcontainer p {
+  margin: 0 0 .1em 0;
+}
+.sphx-glr-thumbcontainer .figure {
+  margin: 10px;
+  width: 160px;
+}
+.sphx-glr-thumbcontainer img {
+  display: inline;
+  max-height: 160px;
+  max-width: 100%;
+}
+.sphx-glr-thumbcontainer[tooltip]:hover:after {
+  background: rgba(0, 0, 0, 0.8);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
-  float: left;
-  position: relative; }
-  div.sphx-glr-thumbContainer:hover {
-    box-shadow: 0 0 15px rgba(142, 176, 202, 0.5);
-    border: solid #B4DDFC 1px; }
-  div.sphx-glr-thumbContainer a.internal {
-    display: block;
-    position: absolute;
-    padding: 150px 10px 0px 10px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px; }
-  div.sphx-glr-thumbContainer p {
-    margin: 0 0 .1em 0; }
-  div.sphx-glr-thumbContainer .figure {
-    margin: 10px;
-    width: 160px; }
-  div.sphx-glr-thumbContainer img {
-    max-width: 100%;
-    max-height: 160px;
-    display: inline; }
-  div.sphx-glr-thumbContainer[tooltip]:hover:after {
-    background: rgba(0, 0, 0, 0.8);
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    color: white;
-    content: attr(tooltip);
-    left: 95%;
-    padding: 5px 15px;
-    position: absolute;
-    z-index: 98;
-    width: 220px;
-    bottom: 52%; }
-  div.sphx-glr-thumbContainer[tooltip]:hover:before {
-    content: "";
-    position: absolute;
-    z-index: 99;
-    border: solid;
-    border-color: #333 transparent;
-    border-width: 18px 0px 0px 20px;
-    left: 85%;
-    bottom: 58%; }
-
-div.sphx-glr-script-out div.highlight {
-    background-color: transparent;
+  color: #fff;
+  content: attr(tooltip);
+  left: 95%;
+  padding: 5px 15px;
+  position: absolute;
+  z-index: 98;
+  width: 220px;
+  bottom: 52%;
 }
-
-p.sphx-glr-script-out {
-    margin: -.9ex 0ex;
-    color: #888;
+.sphx-glr-thumbcontainer[tooltip]:hover:before {
+  border: solid;
+  border-color: #333 transparent;
+  border-width: 18px 0 0 20px;
+  bottom: 58%;
+  content: '';
+  left: 85%;
+  position: absolute;
+  z-index: 99;
 }
 
+.sphx-glr-script-out {
+  color: #888;
+  margin: 0;
+}
+.sphx-glr-script-out .highlight {
+  background-color: transparent;
+}
 .sphx-glr-script-out pre {
-  overflow: auto;
-  word-break: break-word;
-  max-height: 30em;
-  background-color: #FAFAE2;
-  border: none;
+  background-color: #fafae2;
+  border: 0;
   margin-left: 1ex;
-  margin-top: 0px;
+  margin-top: 0;
+  max-height: 30em;
+  overflow: auto;
   padding-left: 1ex;
+  word-break: break-word;
 }
-
-p.sphx-glr-horizontal {
-    margin-bottom: 0px;
-}
-
-/* Paragraph following an output are a bit more indented */
-blockquote.sphx-glr-script-out+p {
-    margin-top: 1.8em;
+.sphx-glr-script-out + p {
+  margin-top: 1.8em;
 }
 
-div.sphx-glr-download {
-    padding: 1ex;
-    margin: 1em auto 1ex auto;
-    border-radius: 4px;
-    max-width: 45ex;
-    background-color: #ffc;
-    border: 1px solid #C2C22D;
+.sphx-glr-download {
+  background-color: #ffc;
+  border: 1px solid #c2c22d;
+  border-radius: 4px;
+  margin: 1em auto 1ex auto;
+  max-width: 45ex;
+  padding: 1ex;
 }
-
-div.sphx-glr-download a {
-    color: #4B4600;
+.sphx-glr-download a {
+  color: #4b4600;
 }
 
 ul.sphx-glr-horizontal {
-  padding: 0px;
-  list-style: none; }
-  ul.sphx-glr-horizontal li {
-    display: inline; }
-  ul.sphx-glr-horizontal img {
-    height: auto !important; }
-
-/*# sourceMappingURL=gallery.css.map */
+  list-style: none;
+  padding: 0;
+}
+ul.sphx-glr-horizontal li {
+  display: inline;
+}
+ul.sphx-glr-horizontal img {
+  height: auto !important;
+}
diff --git a/sphinx_gallery/_static/gallery.scss b/sphinx_gallery/_static/gallery.scss
deleted file mode 100644
index 03632ce..0000000
--- a/sphinx_gallery/_static/gallery.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-div.sphx-glr-thumbContainer {
-	box-shadow: none;
-	background: #FFF;
-	margin: 5px;
-	padding-top: 5px;
-	min-height: 230px;
-	border: solid white 1px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	float:left;
-	position:relative;
-		&:hover {
-		box-shadow: 0 0 15px rgba(142, 176, 202, 0.5);
-		border: solid #B4DDFC 1px;
-		}
-
-	a.internal {
-	display: block;
-	position: absolute;
-	padding: 150px 10px 0px 10px;
-	top: 0px;
-	right: 0px;
-	bottom: 0px;
-	left: 0px;
-	}
-
-	p {
-	margin: 0 0 .1em 0;
-	}
-
-	.figure {
-	margin: 10px;
-	width: 160px;
-	}
-
-	img {
-	max-width: 100%;
-	max-height: 160px;
-        display: inline;
-	}
-
-	&[tooltip] {
-		&:hover:after {
-		background: rgba(0,0,0,.8);
-		-webkit-border-radius: 5px;
-		-moz-border-radius: 5px;
-		border-radius: 5px;
-		color: white;
-		content: attr(tooltip);
-		left: 95%;
-		padding: 5px 15px;
-		position: absolute;
-		z-index: 98;
-		width: 220px;
-		bottom: 52%;
-		}
-		&:hover:before {
-		content: "";
-		position: absolute;
-		z-index: 99;
-		border: solid;
-		border-color: #333 transparent;
-		border-width: 18px 0px 0px 20px;
-		left: 85%;
-		bottom: 58%;
-		}
-	}
-}
-
-.sphx-glr-script-out pre {
-	overflow-y: auto;
-	max-height: 30em;
-}
-
-ul.sphx-glr-horizontal  {
-	padding: 0px;
-	list-style: none;
-
-	li {
-			display: inline;
-	}
-
-	img {
-		height: auto !important;
-	}
-}
diff --git a/sphinx_gallery/backreferences.py b/sphinx_gallery/backreferences.py
index 4df5d3d..67aaca9 100644
--- a/sphinx_gallery/backreferences.py
+++ b/sphinx_gallery/backreferences.py
@@ -130,7 +130,7 @@ def scan_used_functions(example_file, gallery_conf):
 THUMBNAIL_TEMPLATE = """
 .. raw:: html
 
-    <div class="sphx-glr-thumbContainer" tooltip="{snippet}">
+    <div class="sphx-glr-thumbcontainer" tooltip="{snippet}">
 
 .. only:: html
 
diff --git a/sphinx_gallery/gen_rst.py b/sphinx_gallery/gen_rst.py
index ea01e88..36b3bfd 100644
--- a/sphinx_gallery/gen_rst.py
+++ b/sphinx_gallery/gen_rst.py
@@ -438,14 +438,16 @@ def execute_script(code_block, example_globals, image_path, fig_count,
 
         # Depending on whether we have one or more figures, we're using a
         # horizontal list or a single rst call to 'image'.
+        image_list = ""
         if len(figure_list) == 1:
             figure_name = figure_list[0]
             image_list = SINGLE_IMAGE % figure_name.lstrip('/')
-        else:
+        elif len(figure_list) > 1:
             image_list = HLIST_HEADER
             for figure_name in figure_list:
                 image_list += HLIST_IMAGE_TEMPLATE % figure_name.lstrip('/')
 
+
     except Exception:
         figure_list = []
         image_list = '%s is not compiling:' % src_file


Test patch:
diff --git a/sphinx_gallery/tests/test_backreferences.py b/sphinx_gallery/tests/test_backreferences.py
index ca1542b..d820378 100644
--- a/sphinx_gallery/tests/test_backreferences.py
+++ b/sphinx_gallery/tests/test_backreferences.py
@@ -17,7 +17,7 @@ def test_thumbnail_div():
     reference = """
 .. raw:: html
 
-    <div class="sphx-glr-thumbContainer" tooltip="test formating">
+    <div class="sphx-glr-thumbcontainer" tooltip="test formating">
 
 .. only:: html
 
@@ -42,7 +42,7 @@ def test_backref_thumbnail_div():
     reference = """
 .. raw:: html
 
-    <div class="sphx-glr-thumbContainer" tooltip="test formating">
+    <div class="sphx-glr-thumbcontainer" tooltip="test formating">
 
 .. only:: html