diff --git a/r2/r2/public/static/discussion.css b/r2/r2/public/static/discussion.css index e0a290e8..ca9e9d3d 100644 --- a/r2/r2/public/static/discussion.css +++ b/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; -} \ No newline at end of file diff --git a/r2/r2/public/static/lesswrong.css b/r2/r2/public/static/lesswrong.css index 99cd78ef..b544cbca 100644 --- a/r2/r2/public/static/lesswrong.css +++ b/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 { diff --git a/r2/r2/public/static/logo-discussion.png b/r2/r2/public/static/logo-discussion.png index d3d89c69..0283e76c 100644 Binary files a/r2/r2/public/static/logo-discussion.png and b/r2/r2/public/static/logo-discussion.png differ diff --git a/r2/r2/public/static/main.css b/r2/r2/public/static/main.css index 734873b2..07d0706e 100644 --- a/r2/r2/public/static/main.css +++ b/r2/r2/public/static/main.css @@ -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; diff --git a/r2/r2/public/static/viewport-min-width.js b/r2/r2/public/static/viewport-min-width.js new file mode 100644 index 00000000..71b1ee52 --- /dev/null +++ b/r2/r2/public/static/viewport-min-width.js @@ -0,0 +1,40 @@ +/** + * 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 + * License: Public Domain - http://unlicense.org/ + * See: https://github.com/brendanlong/viewport-min-width-polyfill + */ +(function() { + var viewport = document.querySelector("meta[name=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; + } + } + } + } +})(); + diff --git a/r2/r2/templates/base.html b/r2/r2/templates/base.html index 04a1a6c5..48202782 100644 --- a/r2/r2/templates/base.html +++ b/r2/r2/templates/base.html @@ -37,6 +37,8 @@ %endif + + ${self.robots()} ##these are globals, so they should be run first ##things that need are referenced by the reddit, the buttons, and