[website] Hide left sidebar for blog page and improve the fonts

[wuchong]

This pull request focuses on improving the website's typography, visual design, and blog post layout. The main changes include introducing self-hosted fonts for better performance and consistency, refining the color palette and typography for a more professional look, and enhancing the blog post page layout by removing the sidebar to maximize content width.

Design and Typography Improvements:

• Added @fontsource/inter and @fontsource/roboto dependencies to package.json for self-hosted fonts, and configured CSS to use these fonts across the site. [1] [2]
• Updated base font family to Roboto, increased line height, adjusted heading weights, and refined the primary color palette for a more modern and professional appearance.
• Applied consistent Roboto font usage and improved styling for navigation bar, hero section, and menu links. [1] [2]

Content and Component Styling:

• Enhanced code block and inline code styling for better readability, and improved table styles for a cleaner look. [1] [2]
• Improved menu link appearance with updated colors and font weights.

Blog Post Layout Enhancement:

• Created a custom BlogPostPage wrapper component to hide the sidebar on individual blog post pages, allowing the main content to use more horizontal space. [1] [2]

These changes collectively modernize the website's look and feel while improving readability and the user experience for blog content.

Example: