From 8cc71eb804b5d7ef66b82e18ad523e2b04ff5f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= <jlantunez@gmail.com>
Date: Thu, 20 Apr 2017 11:49:10 +0200
Subject: [PATCH] bg with a frame=[class*="background"].frame

---
 static/css/base.css   | 21 +++++++++++++++------
 static/css/colors.css |  4 +++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 42a3cbf..53305d9 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,8 +1,8 @@
 /*---------------------------------------------------------------------------------
 
 	App: WebSlides
-	Version: 1.0.0
-	Date: 2017-02-11
+	Version: 1.3.0
+	Date: 2017-04-20
 	Description: A simple and versatile framework for building HTML presentations, landings, and portfolios.
 	Authors: @jlantunez, @belelros, and @luissacristan
 	Author URI: http://twitter.com/webslides
@@ -410,6 +410,7 @@ width: 90%;
 .frame,.shadow {
   padding: 2.4rem;
 }
+
 .radius {border-radius: .4rem;}
 
 .alignright {
@@ -1474,8 +1475,8 @@ Vertically and horizontally centered
 * = All HTML elements will have those styles.*/
 
 section * {
-  -webkit-animation: fadeIn 0.3s ease-in-out;
-  animation: fadeIn 0.3s ease-in-out;
+  -webkit-animation: fadeIn 0.6s ease-in-out;
+  animation: fadeIn 0.6s ease-in-out;
 }
 section .background,section .light,section .dark {
   -webkit-animation-duration:0s;
@@ -1596,8 +1597,8 @@ padding: 2.4rem;
   z-index: 4;
 }
 #navigation  {
-  -webkit-animation: fadeIn 16s;
-  animation: fadeIn 16s;
+  -webkit-animation: fadeIn 8s;
+  animation: fadeIn 8s;
   opacity:0;
 }
 #navigation:hover {
@@ -1683,6 +1684,7 @@ a#previous {
   background-size: cover;
 }
 
+
 /*fullscreen video
   <video class="background-video">
 */
@@ -1772,6 +1774,13 @@ a#previous {
   animation: anim 80s linear infinite;
 
 }
+/*=== Background with a frame === */
+/*<span class="background" style="background-image:url('image.jpg')"></span>
+<span class="background frame"></span>*/
+
+[class*="background"].frame {
+margin: 2.4rem;
+}
 
 /*===============================================================
 6. Magic blocks with flexbox (Auto-fill & Equal Height)
diff --git a/static/css/colors.css b/static/css/colors.css
index 69f4342..df046f6 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -258,7 +258,9 @@ text-shadow: none;
 .frame {
   border: .8rem solid #fff;
 }
-
+[class*="background"].frame {
+border-width: .2rem;
+}
 /*Layer/Box Shadow*/
 .shadow,.pre {
 position: relative;