This was mostly motivated by a hope that this will help with the
mysterious iOS 12 bug that's causing topic listings to behave strangely
when the user tries to tap on the comments link (space gets added and
the link moves down).
The main change here is to add a new .topic-with-excerpt class, and only
add the "content" area to the CSS grid when that class is present,
instead of always adding it and just leaving it empty if the topic has
no excerpt.
In addition, this switches to using grid-gap to space out the rows
instead of margins, and center-aligns the row contents vertically on
mobile, where we want them spaced out a little to help avoid misclicks.
For some reason, when a topic in a listing can't be voted on (either
your own topics or the viewer is logged-out), CSS grid was adding some
space for the "content" area where the excerpt is shown, even when there
is no excerpt.
This switches to using minmax() to allow that row's height to shrink
down to zero, which fixes the spacing.
This reduces the size and spacing of some of the elements of a topic in
topic listings on small screens, and should make information display
better overall.
These buttons were basically icons, and it's better to have them with
text labels like this. Their left border was also disappearing at
smaller screen sizes due to re-using the .btn-comment-collapse style, so
it's better to do a separate style for "light buttons" like this, and
keep that behavior specifically to the actual comment collapse buttons.
Unfortunately, right now Chrome only supports "pixelated", and Firefox
only supports "crisp-edges", so this should give the best result across
browsers.
Due to hiding the overflow on topic sources to deal with longer domain
names, descenders (in 'y', 'g', 'j', etc.) were being hidden if they
went outside of the box. This increases the line-height and removes the
top margin - the result should be almost exactly the same, but won't cut
off the descenders.
This increases the touch size of the nav links, gives them a bit more
spacing on desktop, and center-aligns the header items vertically, which
looks better when they wrap (but that's still pretty bad overall).
This looked a bit off because the comment always has its own left
border, so the border was 1px thicker next to the button (and sometimes
a different color).
Previously, the site's main content would be pushed down a little when
you have new comment notifications or messages. This moves them to the
left of the username instead, and uses a different flexbox arrangement
inside the sidebar when it's collapsed on smaller screens.
The site-icons spritesheet has already become unwieldy - it's almost
1MB, is mostly rarely-needed icons, and needs to be fully replaced and
re-downloaded whenever a new icon is added. With HTTP/2 now being widely
supported, spritesheets seem to be mostly obsolete, and I probably never
should have done it that way in the first place.
This commit changes over to simply using individual icon images, and
rebuilds the CSS file whenever new icons are downloaded. This new CSS
file will probably be somewhat large, but should gzip extremely well.
This probably still needs some work to support cache-busting on the CSS
file.
We're going to make the static sites depend on the main site's
stylesheet, but as part of that we need to be able to do a little bit of
customization specific to them - specifically, being able to bring over
the rules for setting up how lists and links look. Hopefully we
shouldn't need to use this much, but this is reasonable for now.
The foreground color was accidentally set wrongly before (using
$foreground itself, which wasn't set yet) so that it ended up as full
white, which was too bright. These should be the right colors from the
theme.
The special formatting for the "spoiler" tag was being applied to a post
with the tag "spoiler attack", due to the way the CSS rules were
written. This still isn't a great solution overall, but should fix those
cases at least.
This is a change I've been meaning to make for a while anyway for better
semantic HTML and accessibility, and it ended up being necessary to be
able to support some other updates as well.
This button only shows up on mobile (or small screens) and will appear
after the user has scrolled down at least two viewport-heights. The
Intersection Observer API is used to detect this with an invisible
"buffer" div, instead of attaching to scroll events.
Nothing too significant in here, but it rearranges some of the theme
initialization a little more, including making sure that each theme sets
a number of "essential" colors. It also moves the default theme out into
its own file, instead of having it at the bottom of _theme_base.scss for
no particular reason.
This is mostly for logged-out users, we don't need the votes to stand
out so much for them. I think it's fine for logged-in too though, so
let's just try it for both initially.
This is messy in a few ways and needs some reworking, but should be fine
for testing and initial enabling public visibility. An invite is still
required for registration, and the registration page isn't even
currently linked anywhere since people should usually get a registration
link as the invite.
May roll this back and/or do follow-up commits if it makes the site
break.
Using GET for logging out isn't a very good idea, and can result in
external sites being able to log users out by including things like
<img src="https://tildes.net/logout">
This changes it to require a POST, and uses a form with its submit
button re-styled to look like the other text links in the menu.
This tests rearranging the info shown on link topics in listings a
little, including no longer showing the name of the submitter of links
in listings at all. The domain (previously shown after the title in
parentheses) is moved into the space previously showing the submitter's
name, and we start showing the word count for link topics in that space
when we have it (which is most of the time).
When a form status message is displayed (often an error), it could cause
the button to be shrunk, making it look strange (sometimes the text
would even become larger than the button background). This prevents it
from being able to shrink and will cause the message to wrap instead.
Now that all links in text have underlines by default, I think this
looks pretty strange for ~group and @user links, which are quite common
and unnecessary to have underlined all the time. This modifies the
markdown parser to add link-user and link-group classes to these links,
which allows them to be styled differently.
In addition, some of the markdown tests needed to be changed to use
BeautifulSoup instead of simple string-matching, since it's not as
simple to recognize links any more (and the order of attrs might
change).
I think this is a good idea for a few reasons, including accessibility
(people that have difficulty distinguishing the link color will still be
able to recognize links).
Since the check to see if a password has been present in a data breach
is using a Bloom filter, there's a small chance of false positives (I
believe it's 0.1% currently). This is confusing when it happens, so this
just clarifies that it's possible but they'll have to pick a new
password anyway.
This doesn't really change anything functionally, but it gives users
specific links that they can send out that will pre-fill the invite code
on the registration page, instead of requiring them to copy-paste it or
type it in themselves.
Continuing on with the theme-system overhaul, this adds some more
definable colors, some more "fallback" logic, and moves Solarized colors
into a particular theme file instead of using them throughout the CSS.
Solarized colors are still used in the base theme, but all are hardcoded
and labeled as such, so that they can be spotted/replaced more easily.
Deimos
Chad Birch
Benjamin Lowry
Ivan Fonseca
deing
Bauke