| Commit message (Collapse) | Author | Lines |
|---|
|
|
|
Give the page a more consistent design by standardizing the normal
border radius to be 4px.
|
|
We don't use shadows anywhere else on the site, so putting <pre> in line
with <img> by using rounded corners makes more sense.
|
|
Now that we can put nicely-aligned content at the side we can use the
space to mark the "Related posts" header in a nicer way.
|
|
We've always been wanting to have the avatars aligned in the negative
space next to the posts but never found an adequately nice way to do it.
With grid this is now easy. We can also replace lots of the old margin
and padding rules with gaps.
|
|
This has two reasons: One, the date is more to readers than the avatar.
Two, we are wasting a gigantic 62px just for the padding used to display
the avatar. Clearly it has to go.
|
|
This helps readability significantly, especially on posts with a large
amount of pre-formatted content. Pick the same colour we've been using
on the main site.
|
|
|
|
This was still missing and is needed in the upcoming post. For now, mark
the quote with a border on the left and shrink the text size a bit to
create contrast between normal paragraphs and the quote.
|
|
Mostly trivial option renames or moves, and apparently the sass compiler
doesn't like semicola in indented syntax.
|
|
The use of the section sign § as a permalink marker has been bugging us
for a while now. Whilst being fairly well highlighted it is very hard to
click on account of being so small. Some other sites usually "hide" the
permalink behind the date, but that feels very counterintuitive to us.
Instead, use the most prominent feature of the banner, the title. Make
sure to underline it so that people know it's clickable. Whilst we're
there, also remove the special handling for related posts (no need
anymore now to reveal the post number on the page). Since we were using
the 'bold-hover' class in this particular element only, also remove it.
|
|
Whilst we specifically mention related or relevant posts in some cases,
sometimes related posts are added without any commentary. In that case
it is confusing to name them "mentioned" without there being any mention
of them in the post itself. Naming these kinds of posts "related" makes
more sense and is clearer.
|
|
|
|
|
|
Commit ea7baaa (templates: Allow setting 'float' for figures in the
'img' shortcode, 2022-04-09) introduces inline styles which were
considered more straightforward than adding special CSS rules. Sadly,
restrictive Content-Security-Policy settings will make browsers
disregard inline styles as a security measure.
Since we don't want to turn off CSP, this comment implement CSS rules
for setting the float attribute on elements.
|
|
Common elements in <article> usually have their own margin settings. In
a previous CSS rule we make sure to set 'margin-top' for the first
element in <article> to a lower value such that we have a consistent
margin between the article header and the content itself.
However, if the first element is not a <p>, no such margin change will
take effect for the first <p> element. For example, if the first element
is a floating <figure>, the <figure> element will have its margin
modified, whilst the <p> will keep its usual settings, resulting in a
very inconsistent layout.
We assume that the first <p> element is at the top of the article in
almost all cases, and include a new rule in this commit that applies the
margin settings correctly.
|
|
Instead of just indenting the pre block, it is more visually pleasing
and clear to draw a border around it. That way, code blocks are clearly
delineated from text.
|
|
We may want a post to contain references to a whole number of previous
posts. The styling for external links will then clash, especially if
there are a lot of them. Make sure to make it possible to highlight
internal links differently and more subtly by adding an "internal" class
for <a>.
|
|
An upcoming post will (finally) make use of the "mentions" feature.
Whilst working on that post we noticed that the header indicating
mentioned posts is a big too big and clashes even with the site title.
h3 should be better suited for this purpose. Since the default margins
are slightly different from h2, make sure to tweak the stylesheet too.
|
|
This further increases the space available for text and makes the logo a
lot less dominant.
|
|
This reverts commit f99133842b48dc7d99e577df37e34ea143f1eeaf. We have
found this solution to introduce other (worse) problems because the
padding is unconditional. For now do not apply any special style to
<code>.
|
|
These elements overflow on smaller screens, so make sure that they're
getting scrollbars.
|
|
|
|
This removes a branch from the template and also makes sure that screen
readers and similar software still get access to the post title even if
we want to hide it on the presentational layer.
|
|
This improves the readability and consistency of the CSS.
|
|
Users with narrow displays currently have to deal with post banners that
do not collapse nicely. This commit adds some padding to the tag list
and hides the post time on smaller resolutions.
|
|
This feature was only used once for testing.
|
|
Currently, we pad certain elements with manual interpunct spacers that
are defined in the templates themselves. This is suboptimal for a number
of reasons. Templates should be used for textual or semantic data, not
presentation. Additionally, we have no good control over how whitespace
characters will end up being rendered. Adding or deleting spacers is a
nightmare.
To fix this, use CSS to render spacers instead. To that end, introduce a
couple of HTML elements in the top banner and keep supplementary links
in a list inside a <nav> element. Add a spacer mixin that can be applied
to any element that needs it.
|
|
Currently, --font-mono is only applied to <pre> blocks, leaving <code>
unstyled. Since <pre> blocks will end up containing <code>, set the font
family on <code> instead.
|
|
Due to the density of the fonts used, <code> blocks tend to be too close
to the normal text. Add some padding to mitigate.
|
|
|
|
This way we do not have to specify the color in its selector.
|
|
Post titles are currently only visible in the feed, or on the post page
itself. Since people may remember posts by their titles rather than
their number, display the titles on each post's banner as well for
easier searching. This means we can now get rid of the extra item in the
post page's description.
A neat side effect is that we now have a header element for each
<article>, making W3C a bit happier.
|
