Skip to content
This repository has been archived by the owner on Apr 17, 2018. It is now read-only.

mobile-style: improve mobile display #597

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

mobile-style: improve mobile display #597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75befa9
mobile-style: switch to using a fixed 750px viewport, and make things…
jeffkaufman Dec 5, 2016
b9a1bde
mobile-style: don't make things bigger for tablets
jeffkaufman Dec 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 90 additions & 0 deletions r2/r2/public/static/lesswrong.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,3 +582,93 @@ 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 {
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;
}
#comments {
margin-left: 5px;
}
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;
}
}
}
6 changes: 6 additions & 0 deletions r2/r2/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@
<head>
<title>${self.Title()}</title>

<!-- `meta name="viewport"` controls how mobile browsers show the page. The page layout is
originally a desktop layout, built around a screen that is at least 1024px wide. For
mobile, we tell the page to display at 750px, lop of the sidebars, then boost the sizes of
many elements that would otherwise be too small. See the media query at the end of
lesswrong.css. -->
<meta name="viewport" content="width=750">
<meta name="keywords" content="${self.keywords()}" />
<meta name="title" content="${self.Title()}" />
<% description = hasattr(thing, 'link') and thing.link._meta_description() %>
Expand Down