Making blog posts title and tags disappear.
Making blog posts title and tags disappear.
Fixed it!
Hide posts title.
So, I got stuck and to be honest, I just wanted to move on with the project. So, I asked a friend and she was super helpful. It turns out: My instinct to use the same thing I used to make the Bearblog thing disappear was correct! My execution wasn't though.
So here's how we did it.
body.post > main > h1:first-of-type {
display: none;
}
This targets the body, which is the core of the page. But it targets the body of posts specifically, because post and page are not the same thing on Bearblog.
It then targets main, so that's the section with the text part in it. And then, h1 which the biggest types of header, like # that would be an h1 header but only the first-of-type which means that only the first h1 header detected on that specific area of the website will be removed and that will always be the title of posts specifically.
You can make an h1 title to open your pages and it won't be affected by this.
Hide "tags"
To hide tags, we do the same thing as earlier except that this time, we target the tags.
/* Hide tags */
body.post > main > .tags {
display: none;
}
OLD TITLE
"Trying to make blog posts title disappear..."
So here's the thing, I'm very much hard at work on the atplu.me 2.0 redesign and in fact, I'm starting to transfer over content from the micro-blog. That's when I noticed that blog posts have titles associated with them. They will always appear on top the post.
...I don't want that.
What's interesting is that it's a post thing only, the title doesn't appear on pages. Now, the solution would be: Just make pages. But I don't want that as well for a simple reason, which is: Organization would become huge mess.
But I don't want the title to appear on blog posts, it fucks up the entire formatting I have into place.
Like, here's a page:
And here's a blog post:
That big stupid title, I don't want it.
So I tried digging my current CSS theme in search of something that I could change to fix this.
Current CSS theme.
It's based on the Default theme.
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
:root {
--width: 680px;
--font-secondary: Verdana, sans-serif;
--font-scale: 1.2em;
--background-color: #f2f2ff;
--heading-color: #222;
--text-color: #444;
--link-color: #5557ba;
--visited-color: #5557ba;
--code-background-color: #dcdcf0;
--code-color: #222;
--blockquote-color: #5557ba;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #141422;
--heading-color: #fcfcfc;
--text-color: #f1f1f1;
--link-color: #C6C7FF;
--visited-color: #C6C7FF;
--code-background-color: #262638;
--code-color: #f1f1f1;
--blockquote-color: #C6C7FF;
}
}
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.8;
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;
}
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;
}
table, th, td {
border: 1px dashed black;
border-collapse: collapse;
padding: 2px 4px;
}
time {
display: none;
}
footer {
padding: 25px 0;
text-align: center;
}
.title:hover {
text-decoration: none;
}
.title h1 {
font-size: 2em;
font-family: Verdana, sans-serif;
}
.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: scroll;
}
/* Hide original bearblog footer, it's added back translated in the footer directive */
body > footer > span:last-of-type {
display: none;
}
I couldn't find anything so I tried using the inspect function of Firefox to find a fix for this. I've learned that it's an h1 title and that it shows up as part of the "posts" class.
I tried targetting that specific element the same way I targeted the Bearblog footing thing, (which is funny because I forgot that part of the stylesheet is in there, as it doesn't work on that specific blog, it works so randomly...) and I tried a bunch of things like:
body > main > h1 {
display: none;
}
That kind of things, with lots of variations on it. Trying to target the class, and so on. I later found out that I could actually experiment on the stylesheet in real time from the inspect window of Firefox which will make that tool of a fucking lifesafer in the future to experiment with CSS without having to constantly break shit, publish, change window to see if something changed.
Going through the source code, I found the relevant part of the code.
</header>
<main>
<h1>
2024-09-13_sheldon.md
</h1>
<p>
<i>
<time datetime="2024-09-13T21:41Z">
2024-09-13
</time>
</i>
</p>
Added the time and date because that's also something I want to get rid off in my blog posts.
It shows up right under the nav bar as a h1 header.
And that's all I have for now.
Oh and I also want to make the tags disappear. Like, I need them for RSS related reasons, but I don't want them to actually show up in the posts because I don't want people to get access to the full blog post list.
From all the information I'm getting here, I'm reaching the conclusion that Bearblog hard-coded theme is taking over again here, because it has no specific instruction for that in the current CSS theme. So I don't need to tell it to do something, I need to tell it to not do something.
It's definitely related to the class="post" thingy. Classes are something that has been explained to me more time than I care to admit and I still wrap my head around, I think at this point the only way for me to get it would actually to be shown an actual example of what they do in practice, because I kinda get the idea but I can't understand how they work regardless.
This is quite frustrating. And while the file structure format I'm trying to apply here would be much better served if I were to host that file structured blog myself, I just don't have the backend know-how to do so, nor the infrastructure to host it.
Bearblog is still the best home I can think of for this, at least for now. But it does have lots things that are now getting in my way and force me to what sometimes feel like hacking (as in scam) my way around things. It's super simple... but it sometimes feels like it's still does too much. I want full control of everything, so for exemple, my blog posts list page? It's fully manual, I'm adding everything by hand, I don't want the automated thing and I don't think I can't actually properly get rid of it.
Little things like that. Maybe I just need to accept that maybe, I'm just outgrowing this platform? Really? I see what people do on this, it's quite amazing. I think I can make it work, I just need to learn more stuff to properly get a handle of the platform. For now, the costs/benefits balance clearly favors me sticking on Bearblog. I'm gonna try and find a solution to this annoying problem.