contactus
This commit is contained in:
150
CLAUDE.md
Normal file
150
CLAUDE.md
Normal file
@@ -0,0 +1,150 @@
|
||||
# Inova Frontend
|
||||
|
||||
Persian (RTL) frontend for the Inova WordPress theme. Pages are built as standalone HTML/CSS/JS in Vite, then ported to WordPress. No JS framework.
|
||||
|
||||
## Stack
|
||||
|
||||
- **Build:** Vite 8.x (multi-page, ES modules)
|
||||
- **Formatter:** Prettier 3.x — singleQuote, semi, 2-space indent, LF
|
||||
- **Font:** Yekan Bakh FaNum Pro (Persian, 8 weights)
|
||||
- **Language:** Persian, RTL-first (`lang="fa" dir="rtl"`)
|
||||
|
||||
## Folder Structure
|
||||
|
||||
```
|
||||
src/
|
||||
core/
|
||||
fonts/yekanbakhpro/woff/ & woff2/ ← webfont files (8 weights each)
|
||||
stylesheet/core.css ← PRIMARY source of truth for all styling
|
||||
javascript/core.js ← shared JS utilities
|
||||
assets/
|
||||
icons/ ← SVG icons
|
||||
images/
|
||||
css/[page].css ← page layout styles
|
||||
css/[page]-responsive.css ← page breakpoint overrides
|
||||
js/[page].js ← page-specific JS
|
||||
components/ ← reusable HTML components
|
||||
templates/ ← page templates
|
||||
```
|
||||
|
||||
## Core CSS — Source of Truth
|
||||
|
||||
`src/core/stylesheet/core.css` defines everything global. **Always load it first**, before any page CSS.
|
||||
|
||||
### Color Tokens
|
||||
|
||||
```css
|
||||
--color-primary: #0274b3 /* primary blue */
|
||||
--color-title: #1a1a2e /* headings */
|
||||
--color-text: #505068 /* paragraph text */
|
||||
--color-body-text: #6a6a6a /* secondary body text */
|
||||
--bg-gray: #f9f9f9 /* light gray backgrounds */
|
||||
--color-pastel-main: #c5d7ec /* pastel blue accent */
|
||||
|
||||
/* Blue scale */
|
||||
--blue-50 … --blue-800 /* lightest → darkest */
|
||||
--blue-500: #1796dc /* default link color */
|
||||
--blue-600: #0274b3 /* = --color-primary */
|
||||
```
|
||||
|
||||
### Typography Scale
|
||||
|
||||
| Tag | Desktop | Mobile (≤767px) | Color |
|
||||
|-----|---------|-----------------|-------|
|
||||
| h1 | 36px | 24px | `--color-title` |
|
||||
| h2 | 24px | 22px | `--color-title` |
|
||||
| h3 | 22px | 18px | `--color-title` |
|
||||
| h4 | 20px | 16px | `--color-title` |
|
||||
| h5 | 15px | 14px | `--color-title` |
|
||||
| p | 15px / line-height 1.75 | — | `--color-text` |
|
||||
| a | color `--blue-500`, no underline | — | — |
|
||||
|
||||
Font family and `direction: rtl` are applied globally — never redeclare them in page CSS.
|
||||
|
||||
### Utility Classes (defined in core)
|
||||
|
||||
- `.no-scrollbar` — hides scrollbar cross-browser
|
||||
|
||||
### What Core Already Handles (do not repeat in page CSS)
|
||||
|
||||
- `@font-face` declarations
|
||||
- `box-sizing: border-box` universal reset
|
||||
- `margin: 0; padding: 0` reset
|
||||
- `direction: rtl` on all elements
|
||||
- `scroll-behavior: smooth`
|
||||
- `button` reset (no border/outline/background)
|
||||
- `::selection` brand color
|
||||
- Number input spinner removal
|
||||
- Custom scrollbar styling
|
||||
|
||||
## Adding a New Page
|
||||
|
||||
1. Create `[page].html` in the project root
|
||||
2. Create `src/assets/css/[page].css` and `[page]-responsive.css`
|
||||
3. Create `src/assets/js/[page].js`
|
||||
4. Register in `vite.config.js → build.rollupOptions.input`
|
||||
5. Use this import order in HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./src/core/stylesheet/core.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/[page].css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/[page]-responsive.css" />
|
||||
<script type="module" src="./src/assets/js/[page].js" defer></script>
|
||||
```
|
||||
|
||||
## CSS Conventions
|
||||
|
||||
**Naming:** BEM-like, kebab-case — `.block-name`, `.block-element`, `.block--modifier`
|
||||
|
||||
**Container pattern:** every section wraps content in `.container`:
|
||||
```css
|
||||
.container {
|
||||
max-width: 1240px;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
```
|
||||
|
||||
**Breakpoints** (use raw px values in `@media` — no CSS variable support in media queries):
|
||||
|
||||
| Alias | Value |
|
||||
|-------|--------|
|
||||
| xxl | 1400px |
|
||||
| xl | 1200px |
|
||||
| lg | 992px |
|
||||
| md | 768px |
|
||||
| sm | 576px |
|
||||
|
||||
Pre-stub all 5 breakpoints in the responsive file, even if empty.
|
||||
|
||||
**Section comments** use `═══` ASCII dividers.
|
||||
|
||||
**Tokens to use — and their correct names:**
|
||||
|
||||
| Correct | Wrong (do not use) |
|
||||
|---------|--------------------|
|
||||
| `var(--color-title)` | `var(--clr-title)` |
|
||||
| `var(--color-text)` | `var(--clr-text)` |
|
||||
| `16px` (raw value) | `var(--sp-16)` — not defined |
|
||||
| inherited font | `var(--font-primary)` — not defined |
|
||||
|
||||
## Vite Path Aliases
|
||||
|
||||
```js
|
||||
@ → src/
|
||||
@core → src/core/
|
||||
@components → src/components/
|
||||
```
|
||||
|
||||
## HTML Conventions
|
||||
|
||||
- `<html lang="fa" dir="rtl">`
|
||||
- `<div id="root">` wraps `<main>` in page HTML
|
||||
- Decorative elements get `aria-hidden="true"`
|
||||
- Section comments inside HTML use `═══` ASCII dividers
|
||||
|
||||
## Known Issues
|
||||
|
||||
1. `contactus.css` uses undefined variables (`--sp-16`, `--font-primary`, `--clr-title`, `--clr-text`) — use the correct core token names above.
|
||||
2. `@font-face` URLs for weights 800/900/950 in `core.css` have incorrect filenames with spaces — those font weights currently fail to load.
|
||||
3. `contactus.html` is registered as key `"footer"` in `vite.config.js` — should be `"contactus"`.
|
||||
Reference in New Issue
Block a user