mirror of
https://github.com/reddit-archive/reddit.git
synced 2026-04-27 03:00:12 -04:00
markdown: Fix display of inbox messages.
Inbox messages display with a tiny font size when viewing with the new markdown
styles. This is due to a change introduced in e8d0ce7.
<longwindedexplaination>
The idea behind that change was to make the default font-size for `.md`
elements `14px` while still using relative font sizes (using `ems` and
keywords). This lets us continue to respect browser preferences _and_
makes the styles a _little_ harder to break via custom css (before this,
increasing the font size of `.md` could drastically increase a subreddit's
font size).
In order to do this, you actually have to use two elements, because
browsers only provide a limited set of absolute font sizes that respect
user preferences (via keywords). The outer element uses a keyword font size
to reset the base font size to the nearest keyword value `small (13px)`,
and the inner `.md` element scales that up to the desired default font size
using `ems`. I thought that using `.wiki-page-content` for wiki pages and
`usertext-body` for everything else covered it, but it turns out that
message pages don't wrap message with `UserText`, so the `.md` text there
is getting scaled up from the site default size of `x-small (10px)`.
The end result is that we can use `p { font-size: 1em; }`, so if some
stylesheet author decides they want to set
`.md { font-size: <whatever>px }`, that's what they'll get.
</longwindedexplaination>
Rather than adding _another_ css rule trying to target the messages page (which
I don't think is possible without side effects anyway), I did two things:
first, I added an extra css class _specifically_ for this purpose
(`.md-container`) and applied to both the `wiki-page-content` and
`usertext-body` elements; and second, wrapped the offending markdown on the
inbox page with an element of that class.
This commit is contained in:
@@ -50,8 +50,7 @@
|
||||
}
|
||||
|
||||
|
||||
.usertext-body,
|
||||
.wiki-page-content {
|
||||
.md-container {
|
||||
font-size: @base-font-keyword;
|
||||
}
|
||||
|
||||
|
||||
@@ -131,7 +131,9 @@ ${self.subject()}
|
||||
</a>
|
||||
</p>
|
||||
%endif
|
||||
${unsafe(safemarkdown(thing.body))}
|
||||
<div class="md-container">
|
||||
${unsafe(safemarkdown(thing.body))}
|
||||
</div>
|
||||
</%def>
|
||||
|
||||
<%def name="buttons()">
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
<input type="hidden" name="thing_id" value="${thing.fullname}"/>
|
||||
|
||||
%if not thing.creating:
|
||||
<div class="usertext-body may-blank-within">
|
||||
<div class="usertext-body may-blank-within md-container">
|
||||
% if not thing.expunged:
|
||||
${unsafe(safemarkdown(thing.text, nofollow = thing.nofollow,
|
||||
target = thing.target))}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
%endif
|
||||
</span>
|
||||
|
||||
<div class="wiki-page-content">
|
||||
<div class="wiki-page-content md-container">
|
||||
%if thing.description:
|
||||
<div class="description">
|
||||
<h2>
|
||||
|
||||
Reference in New Issue
Block a user