From 75befa99add0ce658ef9e6827804da93550a4c05 Mon Sep 17 00:00:00 2001 From: Jeff Kaufman Date: Mon, 5 Dec 2016 16:46:49 +0000 Subject: [PATCH 1/2] mobile-style: switch to using a fixed 750px viewport, and make things bigger to compensate --- r2/r2/public/static/lesswrong.css | 82 +++++++++++++++++++++++++++++++ r2/r2/templates/base.html | 6 +++ 2 files changed, 88 insertions(+) diff --git a/r2/r2/public/static/lesswrong.css b/r2/r2/public/static/lesswrong.css index 99cd78ef..9f9fb6ab 100644 --- a/r2/r2/public/static/lesswrong.css +++ b/r2/r2/public/static/lesswrong.css @@ -582,3 +582,85 @@ div.meta.meetup strong { -khtml-border-radius: 4px; border-radius: 4px; } + +/* Mobile version. This overrides styles for small screens, and so needs to stay at the + end of the CSS. */ +@media only screen and (max-width: 750px) { + #header { zoom: 0.75 } + #sidebar { + width: auto; + float: none; + } + #side-search { + display: none; + } + ul#rightnav { + margin-top: 15px; + } + #side-login label { + width: 150px; + } + #side-login #recover { + float: none; + margin-left: 30px; + } + #wrapper { + width: 750px; + } + #content .post .post-body h2 { + padding-left: 34px; + } + #content .post .post-body .content .md { + font-size: 32px; + } + #content .post .post-body { + margin-left: 5px; + margin-right: 5px; + } + #content .list .meta .votes { + margin-top: 4px; + } + #content .list h2 { + padding-left: 10px; + } + #content { + width: 690px; + word-wrap: break-word; + } + .md { font-size: 32px; } + .md h2 { font-size: 36px; } + .md h3 { font-size: 34px; } + .md h4 { font-size: 32px; } + ul#nav li { + font-size: 20px; + } + div.post div.postedby { + font-size: 24px; + line-height: 26px; + } + #content .post .post-body .post-comment-count a { + font-size: 24px; + } + div.footer { + font-size: 18px; + } + div.comment-meta span { + font-size: 32px; + } + #wrapper { + font-size: 20px; + } + #comments { + margin-left: 5px; + } + #comments h2 { + font-size: 28px; + } + #comment-controls div.filter-inactive, #comment-controls div.filter-active { + font-size: 18px; + } + .comment-links { + zoom: 2; + } + html * {max-height:1000000px;} +} diff --git a/r2/r2/templates/base.html b/r2/r2/templates/base.html index 04a1a6c5..87deed92 100644 --- a/r2/r2/templates/base.html +++ b/r2/r2/templates/base.html @@ -30,6 +30,12 @@ ${self.Title()} + + <% description = hasattr(thing, 'link') and thing.link._meta_description() %> From b9a1bdea566b25244542ab30507450d6a9654136 Mon Sep 17 00:00:00 2001 From: Jeff Kaufman Date: Tue, 6 Dec 2016 16:23:10 +0000 Subject: [PATCH 2/2] mobile-style: don't make things bigger for tablets Separate the narrow-viewport changes, which should apply to all mobile devices, from the make-things-big changes, which should only apply to phones. Triggers this difference off of the device-width: phones have a low-device width while tablets have a higher (though still relatively low) one --- r2/r2/public/static/lesswrong.css | 78 +++++++++++++++++-------------- 1 file changed, 43 insertions(+), 35 deletions(-) diff --git a/r2/r2/public/static/lesswrong.css b/r2/r2/public/static/lesswrong.css index 9f9fb6ab..5161c4ea 100644 --- a/r2/r2/public/static/lesswrong.css +++ b/r2/r2/public/static/lesswrong.css @@ -610,9 +610,6 @@ div.meta.meetup strong { #content .post .post-body h2 { padding-left: 34px; } - #content .post .post-body .content .md { - font-size: 32px; - } #content .post .post-body { margin-left: 5px; margin-right: 5px; @@ -627,40 +624,51 @@ div.meta.meetup strong { width: 690px; word-wrap: break-word; } - .md { font-size: 32px; } - .md h2 { font-size: 36px; } - .md h3 { font-size: 34px; } - .md h4 { font-size: 32px; } - ul#nav li { - font-size: 20px; - } - div.post div.postedby { - font-size: 24px; - line-height: 26px; - } - #content .post .post-body .post-comment-count a { - font-size: 24px; - } - div.footer { - font-size: 18px; - } - div.comment-meta span { - font-size: 32px; - } - #wrapper { - font-size: 20px; - } #comments { margin-left: 5px; } - #comments h2 { - font-size: 28px; - } - #comment-controls div.filter-inactive, #comment-controls div.filter-active { - font-size: 18px; - } - .comment-links { - zoom: 2; - } html * {max-height:1000000px;} + + /* to keep from making things look giant on tablets and narrow + desktop screens, only make fonts bigger if the device-width is low. + Phones will have a device-width of under 450px, while tablets will + have a device width of over 600px, so this pulls them apart pretty + well */ + @media only screen and (max-device-width: 550px) { + #content .post .post-body .content .md { + font-size: 32px; + } + .md { font-size: 32px; } + .md h2 { font-size: 36px; } + .md h3 { font-size: 34px; } + .md h4 { font-size: 32px; } + ul#nav li { + font-size: 20px; + } + div.post div.postedby { + font-size: 24px; + line-height: 26px; + } + #content .post .post-body .post-comment-count a { + font-size: 24px; + } + div.footer { + font-size: 18px; + } + div.comment-meta span { + font-size: 32px; + } + #wrapper { + font-size: 20px; + } + #comments h2 { + font-size: 28px; + } + #comment-controls div.filter-inactive, #comment-controls div.filter-active { + font-size: 18px; + } + .comment-links { + zoom: 2; + } + } }