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	fa86b29
🔍 Latest deploy log	https://app.netlify.com/projects/opensciencelabsweb/deploys/6a3705b14f683400088a79a7

[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.