summaryrefslogtreecommitdiffstatshomepage
path: root/sass (follow)
Commit message (Collapse)AuthorAgeLines
* Have the post title contain a permalinkHEADtrunkWolfgang Müller2022-11-04-4/+3
| | | | | | | | | | | | | 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.
* Use "related" instead of "mentions"Wolfgang Müller2022-11-04-1/+1
| | | | | | | | 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.
* sass: Display anchors in figures as a block elementWolfgang Müller2022-11-04-0/+3
|
* sass: Use em instead of px for max-widthWolfgang Müller2022-04-24-1/+1
|
* Use float classes instead of inline stylesWolfgang Müller2022-04-09-0/+6
| | | | | | | | | | | 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.
* sass: Always set margin-top for first <p> in <article>Wolfgang Müller2022-04-09-0/+3
| | | | | | | | | | | | | | | | | 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.
* sass: Draw a border around preWolfgang Müller2021-09-04-1/+3
| | | | | | 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.
* sass: Add style for internal linksWolfgang Müller2021-07-25-0/+7
| | | | | | | | 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>.
* Use h3 for "Mentioned posts"Wolfgang Müller2021-07-25-2/+2
| | | | | | | | | 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.
* sass: Decrease the size of the logo on small screensWolfgang Müller2021-06-27-0/+6
| | | | | This further increases the space available for text and makes the logo a lot less dominant.
* Revert "sass: Add some padding to <code>"Wolfgang Müller2021-06-25-1/+0
| | | | | | | 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>.
* sass: Have pre overflowWolfgang Müller2021-06-24-0/+1
| | | | | These elements overflow on smaller screens, so make sure that they're getting scrollbars.
* sass: Apply margin to tags in the banner onlyWolfgang Müller2021-06-16-2/+3
|
* Use CSS to hide titles on single post pagesWolfgang Müller2021-06-16-0/+3
| | | | | | 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.
* Use "title" class for the header in the bannerWolfgang Müller2021-06-16-12/+12
| | | | This improves the readability and consistency of the CSS.
* sass: Provide better rendering for narrow displaysWolfgang Müller2021-06-16-0/+16
| | | | | | 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.
* Remove special handling for draft postsWolfgang Müller2021-06-16-4/+0
| | | | This feature was only used once for testing.
* Use CSS to add spacersWolfgang Müller2021-06-16-13/+28
| | | | | | | | | | | | | | 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.
* sass: Specify font family for <code>Wolfgang Müller2021-06-13-2/+1
| | | | | | 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.
* sass: Add some padding to <code>Wolfgang Müller2021-06-13-0/+1
| | | | | Due to the density of the fonts used, <code> blocks tend to be too close to the normal text. Add some padding to mitigate.
* sass: Use lighter color for --fg-href in dark modeWolfgang Müller2021-06-13-1/+1
|
* templates: Set mute class on banner's <h2>Wolfgang Müller2021-06-12-1/+0
| | | | This way we do not have to specify the color in its selector.
* Put post titles in the bannerWolfgang Müller2021-06-12-0/+9
| | | | | | | | | | | 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.
* Initial commitWolfgang Müller2021-06-12-0/+429