All articles

Let's write more semantic CSS

You probably wrote something like this at least once in your life:

<div class="card card--rounded card--primary">
   <div class="card__image-container">
       <img src="image.jpg" alt="A nice image" class="card__image">
       <span class="card__image-caption">A nice image</span>
   </div>
   <div class="card__content">
       <div class="card__header">
           <div class="card__title">Hello, world!</div>
       </div>
       <p class="card__text">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       </p>
   </div>
   <div class="card__footer">
       <button class="btn btn--primary btn--raised btn--accent card__button card__button--primary">Click me!</button>
       <button class="btn btn--secondary btn--raised btn--accent card__button card__button--secondary">Click me!</button>
   </div>
</div>

Or this:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
   <div>
       <img class="w-full" src="image.jpg" alt="A nice image">
       <span class="text-gray-500 text-base">A nice image</span>
   </div>
   <div class="px-6 py-4">
       <div>
           <div class="font-bold text-xl mb-2">Hello, world!</div>
       </div>
       <p class="text-gray-700 text-base">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       </p>
   </div>
   <div class="px-6 py-4">
       <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me!</button>
       <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Click me!</button>
   </div>
</div>

Browsers are doing way too much nowadays

Ooh, shiny! Chrome is now forcing me to view my bookmarks in a ✨side panel✨! It's not like we have windowing environments for that, right? Doesn't matter, it's modern, new so it's cool and automatically better even though it sucks!

Moved to a roundabout

Welcome to my new website! I've moved from GitHub to a git software I've developed, a roundabout. To go along with this move, I also made a new website, which is powered by a custom static site generator called Ampoule. This will be the generator I will use to write the documentation for all my projects, including the roundabout itself.