design

Just fixed the flickering issue by inlining the required JavaScript, which is a really small snippet. If you’re curious about the code I’m using to toggle between the dark and light themes, following the user’s choice and falling back to the OS settings, here it is:

const mql = window.matchMedia('(prefers-color-scheme: dark)');

function toggleT (to) {
  localStorage.setItem('t', to);
  theme(mql);
}

function theme (query) {
  const userOption = localStorage.getItem('t');

  document.body.id = userOption === null
    ? (query.matches ? 'dark' : '')
    : (userOption === 'd' ? 'dark' : '');
}

mql.addListener(theme);
theme(mql);

Just made a few updates to my website:

  • Added a more page, inspired by @jlelse’s.
  • Updated my now page to actually include what I’m doing right now.
  • Updated the highlight theme to swapoff. It’s a really pretty syntax highlight theme provided by Chroma, the library Hugo is using. The best thing is: using the invert() CSS filter it keeps looking good. This way, I have good syntax highlight on both the light and dark themes.
  • Added the category of the post right besides the publish date.
  • Now I’m only showing notes, articles and replies on the homepage.
  • I have a all page dedicated to show every post category.

I just noticed the website on the dark mode flickers sometimes (from the light to the dark theme). I know this is caused by the fact that I’m using JavaScript to pick the theme depending on the OS choice + the manual overriding done by the user using the option on the bottom of the page.

One option to remove this problem would be to just follow the user’s OS choice (either dark or light) and there wouldn’t be a manual override. Unfortunately, this wouldn’t let the users pick a different theme if they prefer to read websites on a different light - no pun intended.

Just made a few updates to my website:

  • Removed Tachyons.
  • New roomy header: took some inspiration from @jhelse’s and from a previous version of my website.
  • Added two new pages that have no information yet: now and use. You can find them on the header.
  • I now have a blogroll that you can find here.
  • If you look at the bottom of the page, you now have links for all the categories too.

This seems to be a small update. Maybe some won’t like the new design as much as the previous one, but I assure you: it’s at least 70 KB smaller! At least! I didn’t actually measure it 😋

I may make some updates in the future, but for now I have some interesting plans for the now page!

I wanted to have a cleaner look on this website and make an about page instead of dumping that on the frontpage. However, I don’t feel like the current All page looks that good so… I don’t know.

In addition, I’d like to refactor my header to have more room to add more links instead of having them in the footer. Some of them may stay there, but I’d like to bring Bookmarks to the top and two other future pages I want to make (Now and Uses).