Alexey S a2fd9a5483 Fix CSS/JS paths to relative for static file serving

Absolute paths (/css/site.css) break when opening _site/ directly
via file://. Relative paths work with both the dev server and static hosting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-19 23:26:40 +03:00

4.0 KiB

Raw Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Перед началом работы над любой задачей сложнее одного шага составь todo-список и показывай его прогресс по ходу выполнения. Для задач с неочевидным подходом сначала предложи план и дождись подтверждения.

Project

Static HTML/CSS UI-kit and page prototypes for DP Trade — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to WordPress/Elementor for production deployment. See docs/elementor-token-handoff.md for the full Elementor migration guide.

Commands

# Dev server (11ty with live reload)
npm run dev       # http://localhost:8080

# Production build → _site/
npm run build

Dev server config is also saved in .claude/launch.json for use with preview_start.

Architecture

CSS layer (single dependency direction)

css/tokens.css   ← design tokens only (colors, fonts, spacing, radius, shadows)
      ↓
css/site.css     ← all page styles, imports tokens.css
css/ui-kit.css   ← design system showcase styles, standalone

Never put visual styles in tokens.css. Never import site.css into ui-kit.css.

11ty template structure (`src/`)

src/
  _includes/
    layouts/
      base.njk      ← HTML shell: <head>, fonts, CSS link, <body class="{{ bodyClass }}">
      default.njk   ← base + header partial + footer partial (used by all site pages)
      ui-kit.njk    ← base only, no header/footer (used by ui-kit page)
    partials/
      header.njk    ← full site header with mega-menu nav
      footer.njk    ← full site footer
  css/              ← passthrough copy → _site/css/
  assets/           ← passthrough copy → _site/assets/
  *.njk             ← one file per page

Page front matter

Every page declares layout, title, optional bodyClass, and permalink:

---
title: "DP Trade — Catalog"
layout: default # or "ui-kit" for the design system page
bodyClass: compact-type # omit if not needed
permalink: /catalog.html # keeps flat output, preserves relative CSS paths
---

Pages with bodyClass: compact-type: catalog, about, contacts, article-guidelines. The ui-kit page uses layout: ui-kit and css: ui-kit (links ui-kit.css instead of site.css).

CSS paths

All CSS and JS paths in base.njk are relative (css/site.css, js/inspector.js). This works both with the 11ty dev server and when opening _site/ files directly via file://.

Design tokens

Key CSS custom properties defined in css/tokens.css:

Colors: --color-primary-wine-100 (#4b0f24), --color-accent-gold (#b9965b), --color-accent-blue (#1f3476)
Fonts: --font-heading (Montserrat 800), --font-body (Inter), --font-heading-classic (Playfair Display)
Container: --container: 1240px

When adding new tokens, add to tokens.css and mirror to the Elementor CSS layer in docs/elementor-token-handoff.md (Section 6).

Responsive breakpoints

Defined at the bottom of css/site.css:

@media (max-width: 1080px) — tablet
@media (max-width: 720px) — mobile

Key files

File	Purpose
`css/tokens.css`	Single source of truth for all design values
`docs/elementor-token-handoff.md`	Guide for migrating tokens/components to WordPress Elementor
`.claude/launch.json`	Dev server configurations
`src/_includes/partials/header.njk`	Mega-menu navigation — edit here, propagates to all pages
`src/_includes/partials/footer.njk`	Footer — edit here, propagates to all pages

4.0 KiB Raw Blame History Unescape Escape