add variables and styles for facebook ratio in quotable #1

voxmedia · Aug 9, 2017 · 427573e · 427573e
1 parent e4f1920
commit 427573e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/less/quotable.less b/less/quotable.less
@@ -160,9 +160,9 @@ canvas {
             }
 
             .facebook-ratio& {
-                background-size: @logo-16x9-width @logo-16x9-height;
-                width: @logo-16x9-width + @padding;
-                height: @logo-16x9-height + @padding;
+                background-size: @logo-fb-ratio-width @logo-fb-ratio-height;
+                width: @logo-fb-ratio-width + @padding;
+                height: @logo-fb-ratio-height + @padding;
             }
         }
     }
@@ -186,9 +186,9 @@ canvas {
             }
 
             .facebook-ratio& {
-                background-size: @logo-16x9-width @logo-16x9-height;
-                width: @logo-16x9-width + @padding;
-                height: @logo-16x9-height + @padding;
+              background-size: @theme2-fb-ratio-logo-width @theme2-fb-ratio-logo-height;
+              width: @theme2-fb-ratio-logo-width + @padding;
+              height: @theme2-fb-ratio-logo-height + @padding;
             }
         }
         .show-credit {
@@ -216,9 +216,9 @@ canvas {
             }
 
             .facebook-ratio& {
-                background-size: @logo-16x9-width @logo-16x9-height;
-                width: @logo-16x9-width + @padding;
-                height: @logo-16x9-height + @padding;
+                background-size: @theme3-fb-ratio-logo-width @theme3-fb-ratio-logo-height;
+                width: @theme3-fb-ratio-logo-width + @padding;
+                height: @theme3-fb-ratio-logo-height + @padding;
             }
         }
         .show-credit {
@@ -245,9 +245,9 @@ canvas {
             }
 
             .facebook-ratio& {
-                background-size: @logo-16x9-width @logo-16x9-height;
-                width: @logo-16x9-width + @padding;
-                height: @logo-16x9-height + @padding;
+                background-size: @theme4-fb-ratio-logo-width @theme4-fb-ratio-logo-height;
+                width: @theme4-fb-ratio-logo-width + @padding;
+                height: @theme4-fb-ratio-logo-height + @padding;
             }
         }
         .show-credit {
@@ -292,10 +292,6 @@ canvas {
     }
 
     .facebook-ratio& {
-      // width: 1200px;
-      // height: 630px;
-      // transform: scale(.5);
-      // zoom: 50%;
       width: 600px;
       height: 315px;
       padding: @padding;
@@ -440,6 +436,12 @@ canvas {
             height: @logo-16x9-height + @padding;
         }
 
+        .facebook-ratio& {
+            background-size: @logo-fb-ratio-width @logo-fb-ratio-height;
+            width: @logo-fb-ratio-width + @padding;
+            height: @logo-fb-ratio-height + @padding;
+        }
+
         .logo {
             .hide;
         }

diff --git a/less/variables.less b/less/variables.less
@@ -9,6 +9,8 @@
 @logo-sq-height: 96px;
 @logo-16x9-width: 100px;
 @logo-16x9-height: 80px;
+@logo-fb-ratio-width: 100px;
+@logo-fb-ratio-height: 80px;
 
 @padding: 30px;
 @base-font-size: 17px;
@@ -46,6 +48,8 @@
 @theme2-sq-logo-height: 96px;
 @theme2-16x9-logo-width: 100px;
 @theme2-16x9-logo-height: 80px;
+@theme2-fb-ratio-logo-width: 100px;
+@theme2-fb-ratio-logo-height: 80px;
 
 @theme3-bg-color: #999;
 @theme3-text-color: #000;
@@ -55,6 +59,8 @@
 @theme3-sq-logo-height: 96px;
 @theme3-16x9-logo-width: 100px;
 @theme3-16x9-logo-height: 80px;
+@theme3-fb-ratio-logo-width: 100px;
+@theme3-fb-ratio-logo-height: 80px;
 
 @theme4-bg-color: #C66137;
 @theme4-text-color: #fff;
@@ -63,4 +69,6 @@
 @theme4-sq-logo-width: 120px;
 @theme4-sq-logo-height: 96px;
 @theme4-16x9-logo-width: 100px;
-@theme4-16x9-logo-height: 80px;
+@theme4-16x9-logo-height: 80px;
+@theme4-fb-ratio-logo-width: 100px;
+@theme4-fb-ratio-logo-height: 80px;