.fig-tile s now apply caption colors to page

Author: Sara Soueidan

css/demo-styles.css

@@ -503,9 +503,13 @@ header a {
   z-index: 10;
   text-align: center;
   font-size: 3em;
-  font-weight: 300
+  font-weight: 300;
+}
+/*default colors just in case you don't define these colors on the tiles*/
+.s-page, .r-page{
+  background-color: white;
+  color:black;
 }
-
 .page-title {
   margin-top: 1em;
   font-weight: 100;
@@ -649,11 +653,6 @@ header a {
   color: #455962
 }
 
-.tile-4 {
-  background-color: #455962;
-  color: white
-}
-
 .tile-5 {
   background-color: #FCC120;
   color: white
@@ -671,12 +670,7 @@ header a {
 
 .tile-7,
 .tile-8 {
-  background-color: transparent
-}
-
-.tile-9 {
-  color: white;
-  background-color: #56D9C9
+  background-color: transparent;
 }
 
 .tile-10 {
@@ -795,20 +789,22 @@ header a {
   -o-backface-visibility: hidden;
   backface-visibility: hidden
 }
-
-.faces .front {
+.faces .front{/*default*/
   background-color: #455962;
-  color: #ddd
+  color: #ddd;
 }
-
-.faces .back {
+.rotate3dX .front {
   background-color: #455962;
   color: #ddd
 }
-
 .rotate3dY .front {
+  background-color: #ddd;
   color: #455962;
-  background-color: #ddd
+}
+
+.faces .back {
+  background-color: #455962;
+  color: #ddd
 }
 
 .front span {

index.html

@@ -44,7 +44,7 @@ <h2 class="page-title">App Screen</h2>
         <li class="tile tile-small last tile-3" data-page-type="r-page" data-page-name="random-r-page">
           <p class="icon-calendar-alt-fill"></p>
         </li>
-        <li class="tile tile-big tile-4" data-page-type="r-page" data-page-name="random-r-page">
+        <li class="tile tile-big tile-4 fig-tile" data-page-type="r-page" data-page-name="random-r-page">
           <figure>
             <img src="images/blue.jpg" />
             <figcaption class="tile-caption caption-left">Slide-out Caption from left</figcaption>
@@ -78,7 +78,7 @@ <h2 class="page-title">App Screen</h2>
       </div>
 
       <div class="col3 clearfix">      
-        <li class="tile tile-2xbig tile-9" data-page-type="custom-page" data-page-name="random-r-page">
+        <li class="tile tile-2xbig tile-9 fig-tile" data-page-type="custom-page" data-page-name="random-r-page">
           <figure>
             <img src="images/summer.jpg" />
             <figcaption class="tile-caption caption-bottom">Fixed Caption: Some Subtitle or Tile Description Goes Here with some kinda link or anything

js/scripts.js

@@ -5,11 +5,21 @@
             page = $this.data('page-name'),
             bgcolor = $this.css('background-color'),
             textColor = $this.css('color');
+            
+            //if the tile rotates, we'll use the colors of the front face
             if($this.hasClass('rotate3d')) {
               frontface = $this.find('.front');
               bgcolor = frontface.css('background-color');
               textColor = frontface.css('color');
             }
+
+            //if the tile has an image and a caption, we'll use the caption styles
+            if($this.hasClass('fig-tile')) {
+              caption = $this.find('figcaption');
+              bgcolor = caption.css('background-color');
+              textColor = caption.css('color');
+            }
+
         $this.on('click',function(){
           $('.'+page).css({'background-color': bgcolor, 'color': textColor});
         });