Instructions

Minux is built with Astro 7 and TypeScript, and every page is written to static HTML at build time. Run npm install, then npm run dev to work on it and npm run build to build it, and deploy the dist/ folder to Vercel, Netlify or any static host.

Where things live:

• Every page is an .astro file in src/pages, one per address.
• public/assets/css/styles.css holds all of the styling and src/scripts/minux.ts all of the behaviour.
• Images and fonts are in public/assets/images and public/assets/fonts.

The design is driven by CSS custom properties declared once in :root near the top of the design section of styles.css. Change a value there and every element that uses it follows.

Key global styles include:

• Heading sizes: --h1--font-size to --h6--font-size, with matching line heights and weights
• Body text: --text-regular--font-size and --text-small--font-size
• Spacing and gaps: the --_common-spacing---spacing--spacing-6x family
• Reusable parts: .main-button, .container, .container-full and .section-title

Minux is a monochrome design built from one grey scale. Replace a value in :root and every section that uses it updates.

The key colors:

• --_color---normal-color--black — the page background
• --_color---accent-color--accent-2 — headings and body copy (#F2F2F2)
• --_color---accent-color--accent-7 — borders, quiet text and the ruler ticks (#404040)
• --_color---accent-color--accent-13 — the navigation pill and dark cards (#282828)

Some icons and decorative graphics are SVG files. To recolor one, open it in a text editor and replace its HEX value.

Minux uses four families, all self-hosted in public/assets/fonts and declared in public/assets/fonts/fonts.css: Poppins for headings and display copy, B612 Mono for labels, tags and buttons, Inter for a few small captions, and the Mea Culpa script for the accent words.

To change a font:

• Add your WOFF2 font files to public/assets/fonts and declare them in fonts.css
• Point --_base---font-family--your-heading-font, --_base---font-family--your-body-font, --_base---font-family--third-family or --_base---font-family--forth-family at the new family
• Every heading, paragraph and button follows the variable

Every page shares the same header and footer components, and the same .container spacing, so a new page is a copy of an existing one with its sections swapped.

To create a new page:

• Duplicate the file closest to what you need in src/pages, for example about.astro
• Rename it, and update the title and description it passes to BaseLayout
• Replace the sections, copy, images and links
• Link it from the header or the footer, in src/components/layout

Blog posts, services and works:

• Each item is one Markdown file: src/content/blog, src/content/services and src/content/work, and one template draws each family
• To add one, duplicate an existing file, edit it, and add its name to the matching list in src/lib/content.ts; its card then appears on /blogs, /services or /work by itself

All motion is hand-written in src/scripts/minux.ts and section 4 of styles.css. No library is loaded; each effect is switched on by a class or attribute already in the markup.

What drives what:

• data-fade-up — the scroll reveal; add it to any element to reveal it the same way
• .utility-pages-title — page titles that rise in letter by letter
• .main-button — the label roll on hover
• .home-hero-banner-marquee-wrap — the running ruler strips; add reverse to run one the other way
• .counter — numbers that count up when they come into view
• .faq-items — the FAQ accordion; the first item opens with the page
• data-slider — the team slider

Visitors who ask their system for reduced motion get every section shown at once, with no reveals, loops or smooth scrolling.

To add a question, add a <FaqItem> inside .faq-wrap with its question, its answer and the next number; the component gives the button and the answer the matching pair of ids in aria-controls and id that screen readers need.

The contact and password forms are front-end demos: they validate, then show their success (or, for the password box, error) message. Every field keeps its name.

To connect a real service:

• Give the <form> an action and method from your provider
• Remove its data-demo-form attribute so minux.ts stops answering it

Recommended checks:

• Update each page's title, meta description and social image
• Add meaningful alt text to every image that carries content
• Compress new photos; the template ships AVIF, PNG and JPG
• Review every page on desktop, tablet and mobile
• Remove the pages and sections you do not use

If anything here is unclear, or you would like a hand adapting the template, get in touch at contact@kaziehsan.com. We are happy to help.