Make the page responsive down to 780px.

The page scales fluidly, and we remove the tagline in the discussions section when necessary to make the header fit.

Author: brendanlong

r2/r2/public/static/discussion.css

@@ -63,11 +63,8 @@
 #header.discussion {
 	background: url(/static/background-discussion.jpg) no-repeat top left;
 }
-
-#header.discussion #header-img {
-	height: 55px;
+@media (max-width: 975px) {
+	img#tagline {
+		display: none !important;
+	}
 }
-
-#header.discussion #tagline {
-	display: none;
-}

r2/r2/public/static/lesswrong.css

@@ -1,6 +1,6 @@
 #content.clear.fullwidth {
     padding: 0 15px;
-    width: 920px;
+    max-width: 920px;
 }
 
 div.comment-meta span span {

r2/r2/public/static/logo-discussion.png

@@ -30,6 +30,8 @@ body {
 	background-color: #d8d8d8;
 	margin: 0;
 	padding: 0;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 #wrapper {
 	background-color: #fff;
@@ -38,19 +40,29 @@ body {
 	box-shadow: 0px 0px 10px #555;
 	margin: 0 auto;
 	padding: 0;
-	width: 990px;
+	max-width: 990px;
+	min-width: 780px;
 }
 #main {
-	padding: 15px 20px;
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	
 }
 #content {
-	float: left;
-	padding: 0 0 0 15px;
-	width: 695px;
+	width: 100%;
+	padding: 15px 20px 20px 35px;
 }
 #sidebar {
-	float: right;
 	width: 220px;
+	padding: 15px 20px 20px 0;
+}
+#header {
+	overflow: hidden;
+}
+#content, #sidebar {
+	display: table-cell;
+	vertical-align: top;
 }
 
 
@@ -200,7 +212,9 @@ input, select, textarea, button {
 a#logo {
   display: block;
   float: left;
-  margin: 35px 10px 0 35px;
+  height: 54px;
+  overflow: hidden;
+  margin: 35px 10px 14px 35px;
 }
 img#tagline {
   display: block;

r2/r2/public/static/main.css

@@ -0,0 +1,41 @@
+/**
+ * This JavaScript adds a "min-width" attribute to the viewport meta tag. If
+ * the device's width is less than the min-width, we will scale the viewport
+ * to the min-width; otherwise we will leave the meta tag alone.
+ *
+ * This script must be added *after* the viewport meta tag, since it relies on
+ * that tag already being available in the DOM.
+ *
+ * Implementation note: The reason we remove the old tag and insert a new one
+ *                      is that Firefox doesn't pick up changes to the viewport
+ *                      meta tag.
+ *
+ * Author: Brendan Long <[email protected]>
+ * License: Public Domain - http://unlicense.org/
+ * See: https://github.com/brendanlong/viewport-min-width-polyfill
+ */
+(function() {
+  var viewport = document.querySelector("meta[name=viewport]");
+  console.log("viewport: " + viewport);
+  if (viewport) {
+    var content = viewport.getAttribute("content");
+    var parts = content.split(",");
+    for (var i = 0; i < parts.length; ++i) {
+      var part = parts[i].trim();
+      var pair = part.split("=");
+      if (pair[0] === "min-width") {
+        var minWidth = parseInt(pair[1]);
+        if (screen.width < minWidth) {
+          document.head.removeChild(viewport);
+
+          var newViewport = document.createElement("meta");
+          newViewport.setAttribute("name", "viewport");
+          newViewport.setAttribute("content", "width=" + minWidth);
+          document.head.appendChild(newViewport);
+          break;
+        }
+      }
+    }
+  }
+})();
+

r2/r2/public/static/viewport-min-width.js

@@ -37,6 +37,8 @@
       <meta name="description" content="${description | h}" />
     %endif
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="viewport" content="width=device-width, min-width=780, inital-scale=1.0"/>
+    <script type="text/javascript" src="${static('viewport-min-width.js')}"></script>
     ${self.robots()}
     ##these are globals, so they should be run first
     ##things that need are referenced by the reddit, the buttons, and