Responsify /contribute/page

apps/mozorg/templates/mozorg/contribute-page.html

@@ -1,7 +1,8 @@
-{% extends "sand.html" %}
+{% extends "base-resp.html" %}
 
 {% block page_title %}{{_('Contribute to our sites')}}{% endblock %}
 {% block body_id %}contribute-page{% endblock %}
+{% block body_class %}sand{% endblock %}
 
 {% block extrahead %}
   {{ css('contribute-page') }}

media/css/contribute-page.less

@@ -1,15 +1,56 @@
-@import "sandstone/variables.less";
-@import "sandstone/mixins.less";
+@import "sandstone/variables-resp.less";
+@import "sandstone/mixins-resp.less";
 @import "contribute-form.less";
 
 #contribute-page {
     #main-feature {
-        padding-top: @baseLine;
-        padding-bottom: @baseLine;
+        padding: @baseLine (@gridGutterWidth * 1.5);
     }
     #main-content p {
-        .span(7);
-        margin-left: 0;
+        .span(8);
         clear: left;
+        margin: 0 (@gridGutterWidth / 2) @baseLine; 
     }
 }
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+
+    #contribute-page {
+        #main-content p {
+            .span_narrow(10);
+            margin: 0 (@gridGutterWidth / 2) @baseLine;
+        }
+    }
+
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+
+    #contribute-page {
+        #main-feature {
+            padding: @baseLine @gridGutterWidth;
+        }
+        #main-content p {
+            width: auto;
+            margin: 0 (@gridGutterWidth / 2) @baseLine;
+        }
+    }
+
+}
+
+/* Wide Mobile Layout: 480px */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+
+    #contribute-page {
+        #main-feature {
+            padding: @baseLine 0;
+        }
+        #main-content p {
+            width: auto;
+            margin: 0 0 @baseLine;
+        }
+    }
+
+}

media/css/sandstone/sandstone-resp.less

@@ -582,9 +582,8 @@ nav.menu-bar {
     margin: 1em 0 0;
 
     .row {
-        width: @gridRowWidth;
+        width: @gridRowWidth + @gridGutterWidth;
         margin: 0 auto;
-        padding: 0 @gridGutterWidth;
         .clearfix;
     }
 
@@ -676,9 +675,7 @@ nav.menu-bar {
 
     #colophon {
         .row {
-            width: @gridRowWidthTablet;
-            padding-left: @gridGutterWidth / 2;
-            padding-right: @gridGutterWidth / 2;
+            width: @gridRowWidthTablet + @gridGutterWidth;
         }
         .footer-logo {
             .span_narrow(4);
@@ -836,7 +833,7 @@ nav.menu-bar {
     
     #colophon {
         .row {
-            width: @gridRowWidthMobile;
+            width: @gridRowWidthMobile + @gridGutterWidth;
             padding: 0;
         }
         .footer-logo,
@@ -977,7 +974,7 @@ nav.menu-bar {
     .container,
     .main-column,
     .sidebar {
-        width: @widthMobileLandscape - @gridGutterWidth;
+        width: @widthMobileLandscape - (@gridGutterWidth * 2);
     }
 
     .main-column,
@@ -988,7 +985,7 @@ nav.menu-bar {
 
     #colophon {
         .row {
-            width: @gridRowWidthMobileWide;
+            width: @widthMobileLandscape - @gridGutterWidth;
             padding: 0;
         }
     }

media/css/sandstone/variables-resp.less

@@ -45,7 +45,9 @@
 @gridColumnsMobile:       5;
 @gridRowWidthMobile:      (@gridColumnsMobile * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobile - 1));
 
-@gridRowWidthMobileWide:  (@gridColumnsMobile * @gridColumnWidth) + (@gridGutterWidth * (@gridColumnsMobile - 1));
+// Mobile landscape grid: 7 columns at 40px
+@gridColumnsMobileWide:   7;
+@gridRowWidthMobileWide:  (@gridColumnsMobileWide * @gridColumnWidthNarrow) + (@gridGutterWidth * (@gridColumnsMobileWide - 1));
 
 // Breakpoints for common devices
 @breakDesktop:            1000px;