As you may have noticed in the last posts, long links break the page design, as they don’t break and flow out of their containers. So I fixed this and while on it, also changed the scroll bar and text selection design.

Links by default don’t break words when wrapping, so if they can’t be wrapped, they just flow out of their containers. To fix this, I just added this quick CSS fix:

overflow-wrap: break-word;

Which now allows it to break words if it needs to.

Change scroll bar design

The default scrollbar in webkit browser is always white, even when the webpage itself uses darkmode. I was a little annoyed by this, so I changed the design a little through css. You can use these selectors for this:

::-webkit-scrollbar {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:hover {
}

These only work in Webkit based desktop browsers e.g. Chrome, Brave, Opera, etc.
However, Firefox darkens the scrollbars automatically on dark backgrounds.

Change selection color

Also changed the text selection color with this css selector:

::selection {
}

Tags design

Changed tags design (see above this post).