Blog structure redesign

[Beraliv]

What

Address perceptual patterns in structure, e.g.:

• Colours 🟢 (e.g. for light/dark modes)
• Spaces 👽 (e.g. groups and cards at https://blog.beraliv.dev/)
• Shapes 📦 (e.g. more enriched post cards, highlighted blocks like in Confluence with What, Why, How, etc)
• Icons 🔎 (e.g. accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter)

Why

Now the main page https://blog.beraliv.dev looks like different parts which are disconnected from each other.
The post cards are very short and may be not clear without image, introductory description, read time and more expanded title.
Some parts are completely unnecessary and can be moved or completely removed, e.g. buy me a coffee in header and footer, spotify in the footer
Everything fancy can be moved to portfolio site, here it should be focused on the blog only.

How

Header

It will contain all important icons for navigation, e.g. menu for mobile, accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter and social networks links:

Additional information:

• Header light background – --tw-bg-opacity: 0.7; background-color: rgb(255 255 255 / var(--tw-bg-opacity));
• Header dark background – --tw-bg-opacity: 0.7; background-color: rgb(15 23 42 / var(--tw-bg-opacity));

Links:

• Hashnode example with header icons – https://soprinye.com/
• Hashnode example with header colours – https://blog.xnim.me/

Blog post card

It will contain all enhanced information to understand before starting reading it: more explanatory titles, 3-liner introductory description, read time (given 238 words per minute is average per average person) and image. It won't have visible lines so there won't be a confusion that it's disconnected from each other by style.

Additional information:

• Breakpoints – desktop – >=1024px, tablet – >=768px, mobile – <768px
• Desktop dimensions: image – 40%, text – 60%, 4rem gap to left/right and between blog posts, 2rem between image and text
• Tablet dimensions: image – 100%, text – 100%, 1rem to left/right, 2.5rem to top, 4rem between blog posts, 1.5rem between image and text
• Mobile dimensions: image – 100%, text – 100%, 1rem to left/right, 2.5rem to top, 4rem between blog posts, 1.5rem between image and text

Links:

• Hashnode example with posts – https://blog.xnim.me/

Search

It will be a pop-up with input that will return nothing by default (now it's everything at https://blog.beraliv.dev/search) and will return articles when changing input value: