Bug 951416 - [State of Mozilla 2012] Fix layout for RTL languages

media/css/base/mozilla-modal.less

@@ -52,7 +52,7 @@ body.noscroll {
                 a {
                     color: #fff;
                     vertical-align: middle;
-                    padding-right: 3px;
+                    padding: 0 3px;
                 }
 
                 .button {
@@ -81,6 +81,15 @@ body.noscroll {
     }
 }
 
+/* Tweaks for RTL locales */
+html[dir="rtl"] {
+    #modal .window .inner #modal-close {
+        right: auto;
+        left: 9px;
+        text-align: left;
+    }
+}
+
 @media only screen and (min-width: @breakDesktop) {
     #modal .inner {
         width: @widthDesktop;

media/css/foundation/annual2012.less

@@ -19,12 +19,15 @@ body {
 }
 
 .content {
+	.clearfix;
+	padding-right: 170px;
 	padding-left: 170px;
 }
 
 .banner {
 	margin-top: -44px;
 	padding-top: 50px;
+	padding-right: 560px;
 	height: 562px;
 	color: #fff;
 	background: url(/media/img/foundation/annualreport/2012/bg-banner-desktop.jpg) center bottom no-repeat;
@@ -38,16 +41,26 @@ body {
 	}
 
 	blockquote {
-		background: url(/media/img/foundation/annualreport/2012/quotes.png) left top no-repeat;
+		position: relative;
 		padding-left: 80px;
-		width: 470px;
 		font-size: 40px;
 		line-height: 1.2;
 		.open-sans-light;
 
+		&:before {
+			display: block;
+			position: absolute;
+			left: 0;
+			width: 60px;
+			height: 60px;
+			background: url(/media/img/foundation/annualreport/2012/quotes.png) left top no-repeat;
+			background-size: contain;
+			content: '';
+		}
+
 		footer {
 			text-align: right;
-			padding-right: @baseLine/2;
+			padding: 0 @baseLine/2;
 		}
 
 		cite {
@@ -104,7 +117,7 @@ body {
 		float: left;
 		display: table;
 		*display: block;
-		margin: 0 @baseLine @baseLine 0;
+		margin: @baseLine/2;
 		a {
 			display: table-cell;
 			*display: block;
@@ -125,7 +138,7 @@ body {
 
 .videos {
 	width: 800px;
-	margin-left: 160px;
+	float: right;
 	li {
 		width: 380px;
 		height: 214px;
@@ -188,16 +201,23 @@ body {
 }
 
 .site-footer {
+	padding: 0 !important;
+
+	ul {
+		margin: 0 auto;
+		width: 1020px;
+	}
+
 	li {
 		width: 320px;
-		height: 100px;
+		height: 8em;
 		background: #68c1a5;
 		box-shadow: inset 0 -5px 0 0 #5dad94,
 					0 5px 0 0 #eaeff2;
 
 		a {
 			vertical-align: middle;
-			padding: @baseLine @baseLine/2 @baseLine @baseLine;
+			padding: @baseLine;
 			.transition;
 			small {
 				font-size: 18px;
@@ -215,7 +235,6 @@ body {
 }
 
 #colophon {
-  padding-top: 0;
   background-color: transparent;
 }
 
@@ -225,6 +244,58 @@ dl.faq dt {
 	margin-bottom: @baseLine;
 }
 
+/* Tweaks for RTL locales */
+html[dir="rtl"] {
+	.banner {
+		h1 {
+			float: left;
+			clear: both;
+			margin: 40px 0;
+		}
+
+		blockquote {
+			clear: both;
+			padding-right: 80px;
+			padding-left: 0;
+
+			footer {
+				text-align: left;
+			}
+	
+			&:before {
+				right: 0;
+				left: auto;
+				-moz-transform:     scale(-1, 1);
+				-ms-transform:      scale(-1, 1);
+				-o-transform:       scale(-1, 1);
+				-webkit-transform:  scale(-1, 1);
+				transform:          scale(-1, 1);
+			}
+		}
+	}
+
+	.content-section header {
+		float: right;
+	}
+
+	.copy-wrapper .copy {
+		float: left;
+	}
+
+	.box-links li {
+		float: right;
+	}
+
+	.videos {
+		float: left;
+
+		li a {
+			padding: 0 @baseLine @baseLine 70px;
+			background-position: 20px 158px;
+		}
+	}
+}
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 	.banner h1 {
 		background: url(/media/img/foundation/annualreport/2012/state-of-mozilla-high-res.png) left top no-repeat;
@@ -242,20 +313,22 @@ dl.faq dt {
 		width: @breakDesktop;
 	}
 
-	.banner {
-		height: 532px;
-		padding-top: 40px;
-	}
-
 	.content {
 		padding-left: 60px;
+		padding-right: 60px;
 	}
 
-	.videos {
-		margin-left: 140px;
+	.banner {
+		padding-top: 40px;
+		padding-right: 390px;
+		height: 532px;
 	}
 
 	.site-footer {
+		ul {
+			width: 900px;
+		}
+
 		li {
 			width: 280px;
 		}
@@ -270,15 +343,18 @@ dl.faq dt {
 
 	.banner {
 		height: 410px;
+		padding-right: 310px;
 		background: url(/media/img/foundation/annualreport/2012/bg-banner-tablet.jpg) center bottom no-repeat;
 		h1 {
 			margin-bottom: 40px;
 		}
 		blockquote {
 			font-size: 30px !important;
-			background: url(/media/img/foundation/annualreport/2012/quotes-tablet.png) left top no-repeat;
 			padding-left: 50px;
-			width: 360px;
+			&:before {
+				width: 40px;
+				height: 40px;
+			}
 		}
 	}
 
@@ -303,8 +379,7 @@ dl.faq dt {
 	}
 
 	.videos {
-		width: 660px;
-		margin-left: 80px;
+		width: 600px;
 		li {
 			width: 280px;
 			height: 150px;
@@ -315,6 +390,9 @@ dl.faq dt {
 	}
 
 	.site-footer {
+		ul {
+			width: 720px;
+		}
 		li {
 			width: 220px;
 			a {
@@ -322,6 +400,20 @@ dl.faq dt {
 			}
 		}
 	}
+
+	html[dir="rtl"] {
+		.banner {
+			h1 {
+				margin: 20px 0;
+			}
+			blockquote {
+				padding-right: 50px;
+			}
+		}
+		.videos li a {
+			background-position: 20px 94px;
+		}
+	}
 }
 
 /* wide mobile (480 - 760) */
@@ -347,6 +439,9 @@ dl.faq dt {
 			margin-left: -20px;
 			width: @breakMobileLandscape - (@baseLine * 2);
 			padding: @baseLine;
+			&:before {
+				display: none;
+			}
 		}
 	}
 
@@ -367,12 +462,15 @@ dl.faq dt {
 	}
 
 	.box-links {
+		margin: 20px auto !important;
 		li {
-			float: none;
+			float: none !important;
+			margin: 20px auto !important;
 		}
 	}
 
 	.videos {
+		float: none !important;
 		width: 380px;
 		margin: @baseLine auto;
 		li {
@@ -390,14 +488,30 @@ dl.faq dt {
 	}
 
 	.site-footer {
+		ul {
+			width: auto;
+		}
 		li {
-			float: none;
 			width: 440px;
 			a {
 				font-size: 18px;
 			}
 		}
 	}
+
+	html[dir="rtl"] {
+		.banner h1 {
+			margin: 40px 0 20px;
+		}
+		blockquote {
+			margin-right: -20px;
+			margin-left: 0;
+			padding: @baseLine !important;
+		}
+		.videos li a {
+			background-position: 20px 138px;
+		}
+	}
 }
 
 @media (max-width: @breakMobileLandscape) {
@@ -439,12 +553,29 @@ dl.faq dt {
 
 	.site-footer {
 		li {
-			width: 280px;
+			width: 300px;
 			a {
 				font-size: 16px;
 			}
 		}
 	}
+
+	html[dir="rtl"] {
+		.banner h1 {
+			margin: 100px 0 20px;
+		}
+		.videos li a {
+			background-position: 20px 86px;
+		}
+	}
+}
+
+/* Larger line height in Arabic */
+html[lang="ar"] {
+	.banner blockquote,
+	.box-links li a {
+		line-height: 1.5;
+	}
 }
 
 /* Larger font size in English */