Objectives
- Set up a modern blog using Astro and Sanity CMS
- Use Astro’s blog template for built-in SEO and RSS features
- Customize site layouts and global styles using CSS
- Implement responsive full-screen background images and ornate borders
- Create pixel-perfect hover effects for transparent icons using JavaScript
- Build a zoom-immune, responsive layout using viewport units
Instructions
- Install Node.js from the official website and a code editor like VS Code.
- Open your terminal and run the command
npm create astro@latest.
- Select the “Use blog template” option when prompted by the setup wizard.
- Navigate into your project folder and run
npm run dev to launch the local server.
- Add new blog posts by creating Markdown (.md) files in the
src/content/blog/ directory.
- Modify
src/styles/global.css to change the site’s background color or global font settings.
- Set a full-screen background image by applying
background-size: cover to the body tag.
- Use
.jpg or .webp formats instead of .png to maintain fast loading speeds.
- Create an ornate, responsive frame using the
border-image property with 9-slice scaling.
- Ensure the
border-image-slice value matches the pixel size of the corners in your image file.
- Use the
box-sizing: border-box property to prevent borders and padding from causing unwanted scrollbars.
- Build a
PixelLink.astro component using HTML5 Canvas to detect mouse hovers on non-transparent pixels only.
- Organize icons in a container using
display: flex, flex-direction: column, and flex-wrap: wrap.
- Set
align-content: flex-end to ensure new columns wrap inward toward the left side of the screen.
- Replace fixed pixel values (px) with viewport units (vh and vw) to make the UI “zoom-immune.”
- Define icon heights in
vh so they scale proportionally with the browser zoom level.