Recent searches
Search options
So here’s the fun thing: @gruber actually nails, to a T, why I turned away Hamish and company when they came knocking in 2017.
Having a distinct visual look was important to me. They had literally no tooling for that back then and weren’t planning on making any. Seven years later, every newsletter still looks largely the same. At some point, it’s because they want everyone to be branded the same way.
https://daringfireball.net/2024/11/regarding_and_well_against_substack
Do I regret that I probably cost myself $$$$ by doing that? Sure, who wouldn’t. But I kept my identity. At some point, that matters as much, if not more.
Don’t get me wrong, I don’t think I have the greatest design ever, and there’s always room to improve. But I do think that we have allowed Substack to homogenize a lot of voices because they have chosen to put themselves front-and-center, rather than their writers.
@ernie I really miss the early web when everything was so unique. it just all looks so bland and boring now. Sigh.
@ernie eh, "greatest design ever" is subjective, anyway. I like the Tedium design, to the point where it influenced my own (amongst others). As others already mentioned, the fact that it's definitely yours and not just a bog standard WP template or something, already lifts it above a lot of sites.
You did the right thing, to be who you wanted to be.
@samueldr Hm, interesting. At that breakpoint it should put the image above the text. What browser are you using?
(Also, I am working on a redesign at the moment that will have a different CSS format. I may hold off on this, given its relative rarity.)
@ernie That's firefox, though hopefully (hah!) it shouldn't matter :).
And yes, it seemed to be limited to the teasers, so I think you're probably fine waiting.
Splitting left/right is fine here... The issue is more involved.
Oh, uh... warning: ramblings ahead, this is a the unfiltered experience of me looking at it for a few moments. This is my déformation professionnelle at work. Skip to the next section for the distilled informations.
What I believe is happening is your images aren't forced in the aspect ratio of the card-image container like everywhere else.
I just took a second look, and it's already a bit more subtle: it requires changing the viewport sizes to trigger this badly. This generally implies there's some styling workarounds applied through JS, or some other "non-CSS" interaction.
I believe it only obviously happens with the article teasers since they are not bound width-wise to a few breakpoints like on the homepage, but instead grow/shrink with the viewport width.
Furthermore, only the left-leaning thumbnail exposes that particular issue. And only if the picture's native aspect ratio is "wide".
Going with "The Loophole" thumbnail as an example, I see there's another interaction: animated teasers vs. non-animated teasers act differently, too. So let's go with one that is not animated.
Ah! I see. It's related to loading images of different aspect ratios depending on the viewport (element?) size, couple that with the image not being actually limited to the container's dimensions [in cover mode]... And not visible on the homepage since it is an obvious issue only with horizontal-left variants.
(On right variants, the image is cropped by the teaser container (the whole box).)
The issue stems from the positioning of the image. On horizontal-right, the position: absolute; rule used makes it stick to its natural position, which is morally equivalent to top: 0; left: 0; in this particular situation. This is fine since it means the image expands from the left to the right, and would overflow outside of the teaser box.
... and I guess you could see how that doesn't help on horizontal-left.
This is "fixing" the specific issue of the image overlapping the text (under the current design considerations):
/* (Apply missing media queries for the breakpoints it's split left/right.) */
.card.is-teaser.horizontal-left img {
right: 0;
}
This does not handle another somewhat related issue, which is the situation where the image is narrower than the card-image container. When narrower, the image does not fill the available area, in turn meaning the background (gray or red, depending on state) is visible on the "wrong" end of the teaser.
From experience, the proper solution would be to:
- Never use images from a different aspect ratio in the same container, even when different viewport sizes uses it differently
- Always crop images using styles-based approaches
Attempting to do "media queries"-like or styles-likes work from JS based systems is a trap, it generally never ends well. Work with the cascade for the layout.
@samueldr Appreciate the analysis. What I will say is this: Any and all changes regarding this were put in to please Google Pagespeed Insights and are going away. Site is being rebuilt with Tailwind for CSS, and Bulma is getting dropped like a bad habit.
@samueldr To add, the site is being built headless using Eleventy for the page code and I'm moving to a grid layout for this specific element.