| Commit message (Collapse) | Author | Lines |
|---|
|
'align-self' cannot operate on elements that are not flex. This is most
probably a remnant of an earlier discarded design whilst implementing
77bc0a9 (Attempt a thorough redesign of the landing page, 2020-06-06).
|
|
This should make it easier for screen readers to build a page outline
and is recommended [1] by W3C.
[1] https://www.w3.org/wiki/HTML/Usage/Headings/Missing
|
|
In preparation for making man.css respect prefers-color-scheme, move all
custom properties to their own file so they can be included easily.
|
|
|
|
This element's foreground colour is inherited from the root element.
Since we use a special background colour here, make sure to explicitly
set the foreground colour in conjunction.
|
|
Currently we use the default colour for these. In preparation for
prefers-color-scheme, add two variables containing the default colours
for normal and visited anchors.
|
|
Currently, colours are set per element. In preparation of the support of
prefers-color-scheme, use variables instead so they can be modified in
one place.
|
|
This particular background colour will be inherited from the root
element and does not need to be defined explicitly.
|
|
In preparation for the support of prefers-color-scheme, convert all
presently used Sass variables to CSS custom properties. This will enable
us in an upcoming commit to define different values per media query.
While at it, use a better name for variables holding colours.
|
|
After careful consideration we have decided to replace the more
brutalist landing page with something simpler and more in line with the
styling of the actual posts.
Have the front page include a short introduction and some further links
to the atom feed and git.oriole.systems. Use a more traditional and
simple top-to-bottom layout for the article links in lieu of the more
idiosyncratic left-to-right list that was difficult to scan for some
people.
Keep the post styling as is, but move around and change a few HTML
elements to make more semantic sense and improve the clarity of the CSS.
|
|
When clicking on a footnote reference, the browser scrolls all the way
down to the footnotes block of the post. It is not immediately clear
which footnote was referenced, so use the `:target` selector in the
footnotes block to make the linked footnote bold.
|
|
In fde2230 (css: Add styling for footnotes) we introduced styling for
footnote references, removing the underline and making them bold.
However, as pointed out by a user, having them bold makes them less
readable and clear. Therefore, reduce the font weight back to normal.
|
|
The figure (and figcaption) elements have not been used before. The
upcoming post will include them, and this commit adds a bit of styling
to make them look nice.
Use a more muted color and a smaller font for caption text itself and
provide a "round" class for any image element in a figure, which should
help with making darker images less jarring.
|
|
The upcoming post is the first one to include footnotes. This commit
adds a bit of styling for them.
The footnotes block at the end of the post is a bit too prominent
compared to the rest of the post. Use a smaller font size to make it
stand out less. Footnote references in the text are anchors and
therefore underlined by default. Remove any text decoration from them
and make them easier on the eyes.
|
|
This element has not been used before at all, but the upcoming post will
be including it it in the footnotes block. Use a more fitting
double-border style instead of the questionable design from the initial
commit.
|
|
We found 'smaller' to be too small, so go with 85% for now.
|
|
This commit adds two new classes for <pre> tags:
1) pre.clear overrides the standard canary background color with white
2) pre.indent defines a <pre> tag that is indented and marked with a
border
These classes are mainly meant for preformatted content that has been
added manually and should not be styled like the common code blocks.
|
|
These should make the pages more comfortable to look at.
|
|
|
|
This element had no purpose and was taking up 200px for no reason.
|
|
Add a bit more space to paragraphs, whilst contracting pre-formatted
content (which mostly is code and uses a different font which does not
need this kind of space).
|
|
|
|
This commit changes the background color of <pre> to be a bit less
colourful, and changes text color from pure black to a slightly tinged
black to increase readability.
|
|
|
|
Previously the only indicator was the standard :focus outline rule, this
should make the focused element on the main page very clear.
|
|
|
