Hello World
This is the first post of hopefully many to follow. I was looking for a minimalist blog Wordpress theme for a long time and spent a whole afternoon researching for themes without success. This is when I discovered the blog of Manu, a developer and designer from Italy. The design of his blog was exactly what I was looking for. But "sadly" I had to find out that he coded the whole website himself.
As I dove deeper into his styles.css I discovered the page of Jakobus Brahms who once was faced with the same challenge. On his blogpost I discovered the link to a post about bearblog and moreover a post to an article where Manu had contributed his css styles to be used within bearblog. This was where I got the design for this blog from and where I bit the bullet and comitted to bearblog. As it seems to be way less complicated compared to HUGO which I had in mind as a fallback for wordpress. Because with HUGO I already knew about two themes I like: Archie and Typo
Also Bear has the manifesto to last for ever, which ensures I'm basing my blog on something which will be available for the next 5-10 years as well as something which is easy to fill with content as it's all based upon the markdown syntax.
At first I tried a lot of things to get my blog to be more in the spirit of Manus but I had to find out it's not as easy as I thought. Even tough information about formatting the Posts-List can be found here, I had trouble with getting it to exactly the point I want.
I tried appending the list of posts to every post and therefore hiding things like the first element of a list because it then was the link of the already open post. This faced me with new challenges because the open post is not always the first in list. I also tried to span the list from left to right because it seemed visually to close to the title of the post. Also without success. In the end I ended up deleting all my ChatGPT assisted css styles and deciding to keep it simple stupid.
Therefore RIP:
/* Hide the first list item everywhere */
.embedded.blog-posts li:first-child {
display: none;
}
/* Exclude the page with class .home */
.home .embedded.blog-posts li:first-child {
display: block; /* or 'list-item' if you want to ensure it's displayed like a list item */
}
/* Specifically hide the first <li> in nested .embedded.blog-posts */
.embedded.blog-posts .embedded.blog-posts li:first-child {
display: none;
}
/* Apply flexbox layout to <li> */
.embedded.blog-posts li {
display: flex;
justify-content: space-between; /* Space out content to the left and right */
align-items: center; /* Align the items vertically */
}
/* Style the <time> element to align to the right */
.embedded.blog-posts li span i time {
margin-left: auto; /* Push the time to the far right */
}
/* Style the title to look like a paragraph */
.embedded.blog-posts li a {
font-size: 16px; /* Normal size for the title */
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none; /* Ensure no underline */
}
/* Style the date to look like a paragraph */
.embedded.blog-posts li i {
font-size: 16px; /* Normal size for the title */
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none; /* Ensure no underline */
}
All I kept was simply hiding the Title, which otherwise appears on every page and hiding the upvote button which also would appear on every post. Nonetheless it's pretty cool that you're able to style every page via the class of its type e.g. .home or .post .
.upvote-button {
visibility: hidden;
}
.title {
display: none;
}
In the end it's important to keep in mind, a blog isn’t about fancy themes or pixel-perfect design. It’s about writing. And bearblog lets me do just that.