remove default border around images, now available via img.r-frame

css/theme/template/theme.scss

@@ -237,6 +237,10 @@
 	vertical-align: top;
 }
 
+.reveal img {
+	margin: $blockMargin 0;
+}
+
 
 /*********************************************
  * LINKS
@@ -245,14 +249,10 @@
 .reveal a {
 	color: $linkColor;
 	text-decoration: none;
-
-	-webkit-transition: color .15s ease;
-	   -moz-transition: color .15s ease;
-	        transition: color .15s ease;
+	transition: color .15s ease;
 }
 	.reveal a:hover {
 		color: $linkColorHover;
-
 		text-shadow: none;
 		border: none;
 	}
@@ -264,34 +264,22 @@
 
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
 
-.reveal section img {
-	margin: 15px 0px;
-	background: rgba(255,255,255,0.12);
+.reveal .r-frame {
 	border: 4px solid $mainColor;
-
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
-	.reveal section img.plain {
-		border: 0;
-		box-shadow: none;
-	}
-
-	.reveal a img {
-		-webkit-transition: all .15s linear;
-		   -moz-transition: all .15s linear;
-		        transition: all .15s linear;
-	}
-
-	.reveal a:hover img {
-		background: rgba(255,255,255,0.2);
-		border-color: $linkColor;
+.reveal a .r-frame {
+	transition: all .15s linear;
+}
 
-		box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-	}
+.reveal a:hover .r-frame {
+	border-color: $linkColor;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 
 /*********************************************
@@ -312,9 +300,7 @@
 	color: $linkColor;
 }
 	.reveal .progress span {
-		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-			transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	}
 
 /*********************************************

demo.html

@@ -51,7 +51,7 @@
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
 						<br>
 						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section>
@@ -63,7 +63,7 @@
 						<p>That's it, time to go back up.</p>
 						<br>
 						<a href="#/2">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow">
 						</a>
 					</section>
 				</section>
@@ -230,7 +230,7 @@
 							Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
 						</p>
 						<a href="#" class="navigate-down">
-							<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
 						</a>
 					</section>
 					<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">

dist/theme/beige.css

@@ -234,14 +234,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #8b743d;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -254,25 +255,16 @@
   background: #564826; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #8b743d;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -290,8 +282,6 @@
   color: #8b743d; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/black.css

@@ -230,14 +230,15 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #42affa;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -250,25 +251,16 @@ section.has-light-background, section.has-light-background h1, section.has-light
   background: #068de9; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #42affa;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -286,8 +278,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
   color: #42affa; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/blood.css

@@ -233,14 +233,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #a23;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -253,25 +254,16 @@
   background: #6a1520; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #a23;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -289,8 +281,6 @@
   color: #a23; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/league.css

@@ -236,14 +236,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #13DAEC;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -256,25 +257,16 @@
   background: #0d99a5; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #13DAEC;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -292,8 +284,6 @@
   color: #13DAEC; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/moon.css

@@ -234,14 +234,15 @@ html * {
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #268bd2;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -254,25 +255,16 @@ html * {
   background: #1a6091; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #93a1a1;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #268bd2;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -290,8 +282,6 @@ html * {
   color: #268bd2; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/night.css

@@ -228,14 +228,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #e7ad52;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -248,25 +249,16 @@
   background: #d08a1d; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #eee;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #e7ad52;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -284,8 +276,6 @@
   color: #e7ad52; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/serif.css

@@ -230,14 +230,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #51483D;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -250,25 +251,16 @@
   background: #25211c; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #51483D;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -286,8 +278,6 @@
   color: #51483D; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/simple.css

@@ -233,14 +233,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #00008B;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -253,25 +254,16 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: #00003f; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #000;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #00008B;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -289,8 +281,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   color: #00008B; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/sky.css

@@ -237,14 +237,15 @@
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #3b759e;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -257,25 +258,16 @@
   background: #264c66; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #333;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #3b759e;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -293,8 +285,6 @@
   color: #3b759e; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/solarized.css

@@ -234,14 +234,15 @@ html * {
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #268bd2;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -254,25 +255,16 @@ html * {
   background: #1a6091; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #657b83;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #268bd2;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -290,8 +282,6 @@ html * {
   color: #268bd2; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************

dist/theme/white.css

@@ -230,14 +230,15 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal small * {
   vertical-align: top; }
 
+.reveal img {
+  margin: 20px 0; }
+
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
   color: #2a76dd;
   text-decoration: none;
-  -webkit-transition: color .15s ease;
-  -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
@@ -250,25 +251,16 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: #1a53a1; }
 
 /*********************************************
- * IMAGES
+ * Frame helper
  *********************************************/
-.reveal section img {
-  margin: 15px 0px;
-  background: rgba(255, 255, 255, 0.12);
+.reveal .r-frame {
   border: 4px solid #222;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
 
-.reveal section img.plain {
-  border: 0;
-  box-shadow: none; }
-
-.reveal a img {
-  -webkit-transition: all .15s linear;
-  -moz-transition: all .15s linear;
+.reveal a .r-frame {
   transition: all .15s linear; }
 
-.reveal a:hover img {
-  background: rgba(255, 255, 255, 0.2);
+.reveal a:hover .r-frame {
   border-color: #2a76dd;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
@@ -286,8 +278,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   color: #2a76dd; }
 
 .reveal .progress span {
-  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
   transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
 
 /*********************************************