feat(ui): improve blog layout and styling

[patelscripts]

Introduction

This pull request enhances the UI of the blog section. It adds improvements in the layout, styling and alignment to make it look cleaner and uniform.

Changes I made

Updated blog list and blog post layout for better structure and readability

• Improved navbar alignment and responsiveness
• Improved spacing, typography and overall visual hierarchy
• Updated CSS for blog, navigation, and search
• Better image rendering and layout consistency

Scope

This PR only has UI improvements. No functional changes have been made.

Testing the System

We made local tests of changes to check layout, responsiveness, and visual consistency across pages.

[netlify]

❌ Deploy Preview for opensciencelabsweb failed.

Name	Link
🔨 Latest commit	e04d5d7
🔍 Latest deploy log	https://app.netlify.com/projects/opensciencelabsweb/deploys/6a403f5c148a350009c6dc37

[xmnlab]

Thanks for the UI improvements! The direction looks good, especially the effort to improve blog card consistency and search layout.

Before merging, I’d suggest a few adjustments:

1. The date format was changed from %-d to %#d. This is platform-specific and may not behave as expected outside Windows. A portable alternative would be:
   {{ page.meta["date"].strftime('%b') }} {{ page.meta["date"].day }}, {{ page.meta["date"].strftime('%Y') }}

2. object-fit: contain is now applied to all blog thumbnails/hero images. That helps logos, but it may make regular photos look padded/letterboxed. Since .blog-hero__media.cover exists but the template never adds the cover class, maybe we should either keep cover as default or add a frontmatter option like image_fit: contain.

3. The search popover may overflow on desktop because it can become 38rem wide while anchored with left: 0 near the right side of the navbar. It may be safer to align it with right: 0; left: auto;.

4. The search input has min-width: 24rem, but the .searchbar container can be smaller than that around medium desktop widths. Using min-width: 0; width: 100%; on the input would avoid overflow.

Overall this is close, but I’d request these small fixes before merging.

[patelscripts]

Hi, all the requested changes have been addressed and pushed to the branch. Here's a summary of what was fixed:

1. Date format — Replaced %#d with the portable .day approach: {{ page.meta["date"].strftime('%b') }} {{ page.meta["date"].day }}, {{ page.meta["date"].strftime('%Y') }}
2. object-fit — Restored cover as the default for blog thumbnails; added .post-thumb.contain class for logo-style images.
3. Search popover alignment — Updated to right: 0; left: auto; to prevent overflow on desktop.
4. Search input width — Replaced min-width: 24rem with min-width: 0; width: 100% to stay within the container at medium widths.

The main / build and main / check-branch checks are passing. The remaining failing checks (Netlify, Header rules, etc.) appear to be deploy-side checks that require maintainer secrets.

Please let me know if any further changes are needed. Ready for review!

[xmnlab]

thanks @patelscripts appreciate it

[xmnlab]

we shouldn't skip it .. but I will fix it now. thanks