Can you critique my blog?
The blog is daviramos.com
It is more like a 2000s blog than whatever blog means today. Just things I wanna write sometimes. It is not commercial, no ads. I like fast things. Images are heavily optimized, not mandatory, and always inside posts.
Bearblog is reliable and minimal without being barebones. I wrote about it before, so there's no need to go over it again here.
I really want to know if the way I’ve organized my blog makes any sense. Please keep in mind that I’m not a developer, programmer, or anything like that. I chose Bearblog partly because I already liked the default theme and didn’t need to change much. I appreciate minimalism, understand Markdown, a little HTML, and can "decode" simple CSS using a mix of intuition, Google, and ChatGPT. I only changed stuff that was not very deep and would not be hard to maintain.
css style (my changes are in the end)
:root {
--width: 720px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #01242e;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #000;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body {
font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto;
padding: 20px;
max-width: var(--width);
text-align: left;
background-color: var(--background-color);
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-main);
color: var(--heading-color);
}
a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav a {
margin-right: 8px;
}
strong, b {
color: var(--heading-color);
}
button {
margin: 0;
cursor: pointer;
}
time {
font-family: monospace;
font-style: normal;
font-size: 15px;
}
main {
line-height: 1.6;
}
table {
width: 100%;
}
hr {
border: 0;
border-top: 1px dashed;
}
img {
max-width: 100%;
}
code {
font-family: monospace;
padding: 2px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
}
blockquote {
border-left: 1px solid #999;
color: var(--code-color);
padding-left: 20px;
font-style: italic;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 1.5em;
}
.inline {
width: auto !important;
}
.highlight, .code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts {
list-style-type: none;
padding: unset;
}
ul.blog-posts li {
display: flex;
}
ul.blog-posts li span {
flex: 0 0 130px;
}
ul.blog-posts li a:visited {
color: var(--visited-color);
}
/* MY CHANGES */
/* That is an entirely new class for text */
/* that goes below an image as a subtitle */
.subtitle {
text-align: center;
font-style: italic;
font-size: small;
font-weight: bold;
}
.upvote-button {
display: none !important; /* Hides button, overrides other settings */
pointer-events: none; /* Disable mouseif it visible */
}
.title h1 {
font-size: 1.2em;
}
nav a {
font-size: 0.95em;
}
footer {
font-size: 0.95em;
}
.spaced-line {
margin: 100px 0;
text-align: center;
}
/* Keep images centered */
img {
display: block;
margin-left: auto;
margin-right: auto;
}
For comparison, see Herman's blog to see something closer to the default. He’s the creator of Bearblog.
Here’s what I’ve changed: the font size for the blog’s name, the navbar, and the footer that says Powered by Bear ʕ•ᴥ•ʔ
is slightly smaller (0.95em instead of 1em). I added a guestbook and links to the English and Portuguese pages in the navbar. I also changed the favicon and the site's meta-image to different-sized images of Humphrey Bogart.
The English and Portuguese pages are in their respective languages and only list posts in those languages. I don’t know if it’s possible to customize the navbar further. EDIT: bearblog has a builtin voting feature which I removed with CSS. All pages and posts are configured with their appropriate language via Bearblog, which I assume browsers and search engines can detect. Does it make sense to make my blog bilingual this way?
Maybe this is a new feature, but Bearblog lets you organize posts into subfolders/subdomains. So I placed all Brazilian Portuguese posts under /br/
, which feels logical and predictable. I haven’t shared them anywhere yet, so there’s no risk of broken links. On the other hand, I already have several English posts that have been shared elsewhere. If I move all English posts under /en/
, I’d love to find a way to let the older links keep working gracefully. Is that possible somehow? Maybe that’s a question for Herman, but I have a follow-up: Other than my obsession with tiny details, is there any value in separating my posts under either /br/
or /en/
? Titles and URLs are unlikely to conflict between languages, and if they do, I can always add a -pt
or -en
suffix like in example-post-pt
.
Other than that, I’d welcome any advice on how to improve my blog—whether in big ways or subtle ones.
Thanks!
From a technical point of view, I have almost no critique for you. It scales well, everything works, and there is great beauty in simplicity. I'm not quite sure what you are want to use
.spaced-line
for, but if you want to keep it in line with the other sizing usages, you can convert px to em by dividing by 16 (in this specific case, because the default is 1em is 16px - it is not a general rule that 1em = 16px). So you could make it like this:Then
.spaced-line
will scale at the same rate as everything else if you do CTRL + or CTRL -.That's a huge nitpick, but is the only thing I could really think of.
You write very well, I have no critique there. Making it bilingual is great.
I signed your guestbook. Lovely site!
Thanks! That's awesome of you to give some attention to my little blog!
I asked GPT to create that class for me because I didn't want to write
At the end of every post. So now I can write this instead:
I was experimenting with how to end my posts and that was one idea that I had. I wanted something a little cleaner with more separation between the text and the messages I usually put below them. I didn't want to use an image so I just typed 20
=
. You can see how it looks by going to the bottom of this post: https://daviramos.com/meditate-wrong/.I don't know if that is the right way to do things, I just wanted to avoid typing a bunch of ugly
<br>
all the time :PMaybe I can convert it to em, I'll follow your instructions, thanks!
Ah gotcha! It may not be worthwhile at this point, but here is something you could do that might save you a bit more = typing.
Here is the CSS that I suggest:
Then the usage would look like this:
<div class="spaced-line"></div>
Then you don't have to type the === every time, and if you decide that you want to change what it looks like down the line, you can change that in just one place.
That said, this is really down to personal preference either way.
To take it a bit further, you could use an
<hr>
for semantic reasons, and to prevent the text from reflowing to a second line on mobile. To do that, you can use dashed borders to get a similar effect to the above. So to use this with<hr class="spaced-line">
, you'd apply:That's a simple, clean way of doing it. However, it does look a little visually distinct from the current style. The dashes are more dense. If you want to more closely match the existing text, you can use some background trickery instead.
The only catch to this approach is that the last dash may be of a different length when it cuts off. But it's pretty seamless overall.
If we're really picking this nit, we could also reduce the vertical spacing for mobile, since an 8rem gap begins to feel pretty large at that scale. You could do it with
vw
units, but I like to use container queries these days. They do technically change the math on how container size is calculated though; elements no longer "shrink wrap" to their contents or use margin collapse. It shouldn't be a problem here, but I wanted to mention it just in case.So first we define a container at the article-level:
Then we read in the width of that element using container width units, clamping it for some nice upper and lower bounds:
That should make it very responsive. You can then use container units elsewhere when they're relevant. Shoring up margins, tweaking font sizes, and generally making things more fluid.
One final side tangent here. Semantically, it's probably best to have an
<article>
tag inside<main>
. So the hierarchy is something like:<main>
<h1>
<time>
<article>
Not a huge deal, but I thought I'd point it out.
Love the minimalistic design, @lou. Great job on the blog.
Awesome!
I can and will test all the CSS suggestions on a hidden test post to see exactly what they look like.
When it comes to HTML tags such as
<article>
that is all done by bearblog. I only write markdown, which allows HTML but I don't know to what extent. I am not sure if I have access to that part of the markup, or how I would override these defaults if needed. I just assume Herman knows what he is doing on that end. But perhaps there is something I can do to improve the HTML as well. I'll check with him!You gave me a lot. Thank you so much for the wonderful and thoughtful suggestions and code!
If you style the
hr
tag directly (without using any other classes), you can write it directly in Markdown:Cool! I do have access to all the css so I can do that. Thanks!
That's true, though note that there's other
<hr>
tags on the page already that will also be affected by this. Unfortunately both sit at the same depth in the DOM, so one or the other will need to use classes to be disambiguated.Though if an
<article>
were wrapped around the post as suggested above, that could be used to target the post<hr>
s without additional classes.Oh yeah that is much better. I will be using that thanks!
Or, instead of an empty
div
, you could wrap the bottom post content inside thediv
and style it without using::after
norcontent:
. I think it's more elegant and semantically better.Measurements in px also scale at the same rate as everything else if you do CTRL + or CTRL -.
Recently I added an English version to my WordPress-powered, 11+ years old blog, using a plugin called Polylang (the free version). It's quite nice! In the back-end, it's as if I had another blog, but sharing resources — layout, plugins, even assets like images used in posts —, all translatable and yet with minimal overhead.
It's way more complex than your solution, if anything else because it involves a self-manage CMS, but if you're serious about your blog, may worth the investment (of time, resources, and a little money).
I appreciate the speed of loading in the days of some web packager for every site (the jank, content shifts and, on storefronts, moving of a cursor in a search box make me wish for simpler sites).
The images are used well in the posts I checked and Noirvember was a fun read!
Thank you so much for all the great suggestions!
Does anyone have additional input on this part?
Nice blog! I’m a big fan of Bear, and might try setting one up at some point.
I think I like the separation via folders into the folders
/br
and/en
. I like it better than appending the language at the end option.There may be a way to setup redirects where you could link the old non-foldered English posts to the new ones under the
/en
folder, but I’m not sure how you’d set that up with Bear. I’m also not sure it’s really needed (other than for consistency), since you have the navbar set up to allow for filtering to just the English and Portuguese post lists.I would just have new posts going forward sorted into the folders, and not worry about the old posts - to prevent breaking old links.
Thanks! I wouldn't do that, though. Only if two URLs where the same and that is unlikely since I can change the URLs myself ;)
In regard to redirecting existing URLs, this is a good idea. You can add redirects to your .htaccess if you're using apache (if you don'tknow what you're using, it's probably apache). This is a decent article on it: https://www.semrush.com/blog/301-redirect-htaccess/
And chatgpt will understand how to write the specific rules so you see how that works. That, to me, is one of the excellent usecases for AI. :)
The blog itself: Incredibly simplistic. But those designs stand the test of time. Your goal is communication, and this design supports that. I support your design.
You may want to consider:
But it's all about what makes sense to you, imho.
I have other preferences, but they are preferences - design choices - and you have made them and I think they are good. (For example, I prefer justified text, but there are arguments for and against it)
Thanks!
That is mostly the default bearblog template. I like it a lot, it reminds me of how Tildes was designed. The one additional change I wanna do is to disable the night mode. At night it will show in night mode on some devices. I don't like the idea of my blog having two different looks depending on time of day.
As far as I know, Bearblog doesn't give me access to the server. But Herman, the owner of bearblog, always answers my emails. Maybe he can help.
The posts are grouped by the tags. On bearblog tags can be used to create custom lists of posts very easily, and I can customize how they are shown. Once I have enough posts I may create special pages for different kinds of content. I currently only have 13 posts, 8 in English and 5 in Portuguese. It will take a long time for me to have a lot of content, as this is not a commercial project and I will only write when I feel like it.
I think related posts are a great idea but right now I don't have much to relate. Lots of posts are the only of that kind.
That said, I really like the minimalistic aspect and I may even remove some stuff. Like the guest book which has been up for four months and only got phishing messages in Russian. Other than my dear friend @aphoenix, of course ;)
I am also a little doubtful that anyone will go from my blog to Tildes or Beehaw, only the other way around. So I may remove that mention altogether.
I really am a minimalist, it seems.
Thank you for the awesome suggestions!
Please keep night mode! I have my phone set up so that it requests night mode at night so I don’t get blinded in bed by bright white screens. I much prefer dark mode in general, but on my phone I have it in light mode during the day. But dark mode at night is so much nicer.
I get you and will keep the night mode. It made me a little uncomfortable because I did the blog and was never warned that it would look completely different for some people at night. I don't like how it looks at night at all. I wish the user could choose their preferred mode, the website covertly going into night mode did bother me. I don't believe I have the ability to create a night mode switch, but I should be able to change the night mode into something I like. Perhaps I'll just look for a well-known color scheme and adapt it to my blog. I'll try to do that, but it'll take some time.
Thanks!
I can see why that would be surprising / annoying. I do tend to like sites that respect the “user preference” for light/dark mode - which is often a browser setting or device-level setting that the website picks up on via browser cookies.
Some do have toggles, though I’m not sure if I’ve seen any Bear blogs that have a toggle implemented.
You could see if any of the dark themes on Tildes have colors you like.
Personally I have it set to “Dracula.”
Edit: I'm also a big fan of the Catpuccin themes, but haven't gotten around to trying to style tildes with it yet.
A bit of a random question but do you know if there's a way for me to trigger the dark mode on Firefox? Maybe something accessible through the developer tools? To change it I have to see how it looks on command.
Yes! If you open up the "Inspect" window, in the main inspector tab in the top of the middle pane (that has the CSS), there should be a sun and moon icon that will toggle between light and dark mode respectively.
Stack Overflow post with image