Redesign: Version 7.0: Sidebars, light-dark, and Bluesky

One of my favorite hobbies is to tweet my website. I have updated the design countless times despite the decade of this site’s existence. A small history of changes is:

Re -design the date

• The first version was 2.0, a dozen or similar sequence that I did when it was a WordPress site.
• Then the version was 3.0 and 4.0, where I was backwards between busy and minimal sequences.
• I emigrated from WordPress to Gatesby.
• Then I decided that the site looks like a visual studio code with the theme color selector in some customs pixel art and version 5.0. This was probably my favorite version.
• Again, I felt like the site was very busy, so I made it easy for version 6.0.

Version 7.0

I had a few days leave for Thanksgiving this week, so for some events between cooking, preparation and cleaning that we were hosting, I managed to re -design the site. I’m really happy how it came out! It was influenced by Dokosurus.

Organization

I finally decided in a good way to separate my technical articles from personal articles, taking notes for personal writings and articles for everything related to lessons, leaders, and programming. I have highlights my open source projects, and even some art. On the next page, I have the “deep” section on the main page to highlight my long -shaped articles.

I also decided to add some sidebers to make the site easier.

In the central sidebar, I selected some articles and I really like Like and put them in the “favorite” section, so people hope that like this CSS manifesto, some really cool guides and this article will be discovered and about how to make a reactor of the Act of the Act and the Directory.

I also have a secondary sidebar on the article pages that have a history, tags, and content table. It uses IntersectionObserver API To find out when every part is seen.

Blusky

Developer -based social media is the biggest fad right now BluskyAn alternative Twitter clone. I am once again moving towards Bluevis in the hopes of communicating with real people. I 🦋 Bluzki Starter Pack I think developers are very good. A Starter Pack app is a way to quickly add a group of people. If you are not yet using Bluz, you can click the link to start. I plan to increase this when I discover new and old friends on the app.

Styling

The whole style of this page was written in one style.css The file is not a fan of tail wind or CSS in -JSS type solution, so I just write simple CSS from the beginning. Now that the CSS is variable and nest, there is no need to set up CSS pre -processors.

Making a light and dark theme switch is much easier than ever before, and I have decided to take advantage of the latest CSS speaker.

In the Root Sudo class, you can now use color-scheme Property, and set it light dark.

style.css

:root {
  color-scheme: light dark;
}

It enables Lightly dark () The function, which allows you to set two values, will apply to light and dark mode, respectively.

style.css

:root {
  --color-background-navbar: light-dark(var(--gray-05), var(--gray-10));
  --color-background-sidebar: light-dark(var(--gray-05), var(--gray-10));
  --color-background-code: light-dark(var(--gray-05), var(--gray-10));
}

I just need to do so to switch between themes color-scheme Property

Layout. JS

export const Layout = () => {
  const (theme, setTheme) = useState('dark')

  const handleUpdateTheme = (newTheme) => {
    window.localStorage.setItem('theme', newTheme)
    document.documentElement.style.setProperty('color-scheme', newTheme)

    setTheme(newTheme)
  }
}

In the past few years, the process of keeping light/dark mood has been very developed. First you had to separate .dark Class and manually update all colors. Once CSS variables and :root Come around, you can only make a set of variables of light and darkness. Now, you just need to use light-dark And set the color scheme property. I’m glad it is so easy to take advantage of the latest CSS.

New Layout

Main page

Blog Post

Light theme

Old setting

Main page

Blog Post

Light theme

Conclusion

I hope you like a new sequence! Tell me what you think. I hope that this setting makes it easier to rotate around the site and detect all the content that was at least hidden behind.