CSS & web interaction updates 📱

31 Jan, 2025

I've been pleased with the layout of my blog after its official release and the inclusion of Webmentions.

However, my footer always felt a bit off, especially with posts.
The comments, as well as the web interactions, did not look as how I wanted them to be. Web interactions are a nice way to show how people interacted with my posts, but they should not take away the focus from the post itself.

So this week, I took matters into myown hands and made tweaks to how you can interact with each post, as well as how web interactions are displayed.

CSS tweaks

I finish each post with a “Thank You” message accompanied by some information on how you can interact or comment.

This is achieved by putting my message in a paragraph element and adding some styling to the CSS of my blog.

I'm giving this paragraph a special class (class=“thanks”) to ensure I don't change the layout of all paragraph elements.

Like this:

	<p class="thanks"><b>Thanks for reading!</b><br /><br /> ... </p>

And using the following CSS, to give it some spacing, rounded corners and a background color.

	p.thanks {
	  padding: 25px;
	  background-color: var(--thanks-color);
	  border-radius: 5px;
	}

For background-color, I'm using a var element called --thanks-color, which I define as a color for my light and dark theme.

Like this:

	:root {
	    --width: 720px;
	    ...
	    --thanks-color: #ffffff;
	}
	@media (prefers-color-scheme: dark) {
	    :root {
	        ...
	        --thanks-color: #000000;
	    }
	}

Next to the “Thank You” message, I cleaned the interaction part, putting it into a collapsible element.

You might have seen this on other blogs or websites, and it's actually straightforward to achieve with the detail HTML element.

	<details>
	  <summary>Visible text</summary>
	  <p>Elements and texts that are hidden until you click on the visible text to open the element</p>
	</details>

Again, adding some styling via CSS to make it appear nice.

	details {
	  padding: 25px;
	  background-color: var(--thanks-color);
	  border-radius: 5px;
	}
	summary {
	    font-family: var(--font-main);
	    color: var(--heading-color);
	}

For the visible summary part, again, I’m using var elements that are defined in the root of my theme.

You may have noticed that the styling of the thanks paragraph and details element are the same, allowing them to be combined. Resulting in the following CSS code:

	/* post thanks message and toggle for interactions */
	p.thanks, details {
	  padding: 25px;
	  background-color: var(--thanks-color);
	  border-radius: 5px;
	}
	summary {
	    font-family: var(--font-main);
	    color: var(--heading-color);
	}

The impressive part of the detail element is that you can embed different elements into each other, as I have done.

When you open the interact with this post element, you see two more elements that can be opened, one for sending me a direct message and another for linking your article or website to my post as a Webmention.

Web interactions

Speaking of Webmentions/Interactions, when I enabled them, interactions from people on Mastodon and Bluesky started to appeared for each post.They are enjoyable to have, but they shouldn’t take up too much unnecessary space.

Hence they are now also put in a similar collapsible detail element.

Lately, I noticed (via my analytics) that people started writing a reply or linking back to a post, and thought it would be nice to show these in the Web Interactions section as well.

To achieve this, information from the linking to my blogposts needs to be sent to Webmention.io. Therefore, I enabled a small form in the interact with this post section, via which you can add the URL of your post or website linking back to my posts. After submission, the Webmention.io crawler will validate your entry and, if a link is found, will show it in my Web Interactions section.

So in case you ever link back to a post of mine, please let me know you have done so via this little form. This in turn will make me aware and allow me to link back to your post or website as a community echo.

In closing, I would like to say that by no means, I’m a CSS or Webmention guru. But if there’s anything from my blog that you would like to copy or learn more about, let me know and I’d be happy to explain.

And don’t worry, I won’t bite.😈

Thanks for reading!

If you liked this post, leave me a reply via direct message, my socials or my guestbook.

And in case you linked back to this post or wrote a comment on your website, let me know to update my web interactions.

Open the below toggle for more information to reply or link back to this post.

#2025 #2025-01 #app-tech #article #blogging