jlelse's Blog

Thoughts, stories and ideas

Tags: CSS


Pure CSS Minesweeper

Published on in 🔗 Links

I once wrote about pure CSS paintings. It’s amazing what you can achieve with just HTML and CSS. Another amazing thing is CSS-Sweeper, a Minesweeper clone written in just HTML and CSS. It’s not the fastest implementation but more a “stress test” and will probably have lags on average computing devices. Nevertheless, it’s awesome! You can play it here.

View

Make your website more printable with @print CSS

Published on in 👨‍💻 Dev

I just added some CSS rules to my Hugo theme to make my blog more printable. Why and how does this work?

View

"sans-serif" only

Published on in 👨‍💻 Dev

I used to use system fonts for my blog theme, but I rethought this decision and converted to the following font-family in my CSS:

View

XP.css

Published on in 🔗 Links

I shared a link to 98.css the other day. Now there is also XP.css in the style of Windows XP. This brings back some memories, because I actually worked quite a lot with Windows XP. But I am curious about 7.css and 10.css. 😂

View

98.css

Published on in 🔗 Links

The first Windows I used was Windows 2000 on the computer my parents gave me sometime in primary school. But with 98.css it is now even possible to make websites in the style of Windows 98. Wouldn’t that be an idea for the next homepage redesign?

View

Pure CSS Lightbox in Hugo theme

Published on in 👨‍💻 Dev

Hugo themes have the option to override the default rendering of Markdown images by using “Markdown Render Hooks” since version 0.62.0. By creating a file in layouts/_default/_markup named render-image.html it is possible to use a custom template for rendered images. This gives a lot of flexibility. I just used that flexibility to create a lightbox with pure CSS (without using JavaScript, like many lightbox implementations do). After clicking (or tapping) on an content image, you will see it filling the browser view. Another click brings you back to the content.

View

Use system fonts to make your site load faster

Published on in 👨‍💻 Dev
Reply to: How To Self-Host Your Web Fonts

Although it’s great to self-host your web fonts instead of using a service like Google Fonts (that may decrease the privacy of your site’s visitors, because Google can log IP addresses and other stuff), it’s probably not necessary to use web fonts at all. Every PC or tablet or phone has a lot of fonts already pre-installed, which are more than perfect for displaying your website (unless you take a lot of care about corporate design or your personal brand and require a specific font).

View

SCSS adventures

Published on in 💭 Thoughts

I’m currently in the process of improving my sites Hugo theme. I removed features I never used and simplified unorganized HTML and CSS, to enable adding new features (like better support for IndieWeb things) later.

View

Dark Mode for the web

Published on in 👨‍💻 Dev

I generally prefer dark user interfaces wherever possible. My phone is set to a dark mode (as far as there is a dark mode in Android Pie), apps like Telegram are set to dark mode and on the desktop I prefer dark modes too. But the most important software I use everyday is a web browser. And most websites don’t support a dark mode yet (because there was no native browser feature for that until recently).

View