diff --git a/.gitignore b/.gitignore index 7ff4c88..9eaee33 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,21 @@ node_modules/ -dist/ -*.log demo-dist/ +*.log + +# Build output. `npm run build` emits into the theme. +site/wp-content/themes/tlig/assets/ + +# WordPress core lives in site/ but is not ours — it is extracted from the +# Docker image so the two cannot drift, and can be recreated at any time. Only +# our theme and the asset mirror are the deliverable. +site/* +!site/wp-content/ +site/wp-content/* +!site/wp-content/themes/ +!site/wp-content/includes/ +site/wp-content/uploads/ +site/wp-content/plugins/* +!site/wp-content/plugins/index.php +site/wp-content/themes/* +!site/wp-content/themes/tlig/ +site/wp-content/upgrade/ diff --git a/README.md b/README.md index f122c18..ab83d9a 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,39 @@ This first pass covers the common foundation only: fonts, colour, type scale, links, buttons, form fields and the footer. Page-specific styling (messages, bookstore, menus, the wood and scroll backgrounds) is not here yet. +## Layout + + src/sass/ the stylesheet + src/images/ art: the parchment 9-slice, the scroll, the wood ground + src/demo/ the static style guide's own chrome + site/ WordPress docroot (core is gitignored; see below) + wp-content/themes/tlig/ THE DELIVERABLE + local/ docker-compose for the clean rig + +WordPress core sits in `site/` but is not ours: it is extracted from the Docker +image so the two cannot drift, and is gitignored. Only the theme and the asset +mirror are versioned. To recreate core: + + docker run --rm wordpress:php8.3-apache tar -cC /usr/src/wordpress . | tar -xC site/ + ## Commands npm install - npm run dev # demo with live reload, at localhost:5173 - npm run preview # demo as a static page, at localhost:4173 - npm run build # the deliverable: dist/tlig.css + dist/fonts/ + npm run dev # static style guide, live reload, localhost:5173 + npm run preview # static style guide as a built page, localhost:4173 + npm run build # the theme's stylesheet -> site/wp-content/themes/tlig/assets/ + + cd local && RUN_UID=$(id -u) RUN_GID=$(id -g) docker compose up -d + # the theme on real WordPress at localhost:8090 (admin / admin) + +The rig is deliberately **not** the `wp-migrate` one. That mounts the production +tree — Avada, 55 plugins, a 1.5 GB database — and exists to mirror what ships. +This one boots with nothing but core, so the theme has to stand on its own. Keep +both: the other is the reference to compare against. It runs on 8080, this on +8090, so they can run side by side. + +A `npm run build` lands directly in the running theme — the docroot is this +project's own `site/`, so there is no copy step and no container restart. There is no way to open `src/index.html` from disk — it is an ES module that imports `.scss`, so it needs one of the two servers above. `file://` gives a diff --git a/local/README.md b/local/README.md new file mode 100644 index 0000000..f804608 --- /dev/null +++ b/local/README.md @@ -0,0 +1,87 @@ +# The demo WordPress + +A clean install with **no Avada and no plugins**, so the theme has to stand on +its own. The `wp-migrate` rig is the opposite — the production tree, kept as the +reference to compare against — and is never touched from here. + + cd local + docker compose up -d # http://localhost:8090/ + +Docroot is the project's own `../site`, so a `npm run build` lands in the running +theme with no copy step and no restart. + +## Logging in + + http://localhost:8090/wp-admin/ admin / tlig + +Throwaway credentials for a throwaway local install. Nothing here is ever +deployed, and the database lives in a named volume, not in the repo. + +## wp-cli + +The `cli` service is behind a Compose profile so it never starts with the site. +Run it one command at a time: + + docker compose --profile cli run --rm cli wp user list + docker compose --profile cli run --rm cli wp plugin list + docker compose --profile cli run --rm cli wp post list --post_type=page + +Adding a user, for instance: + + docker compose --profile cli run --rm cli \ + wp user create editor editor@example.org --role=editor --user_pass=tlig + +It talks to MySQL directly — it does not go through Apache — so it works even +when the site itself is down. It shares the same `../site` mount and the same +`wp-config.php` as the web container, so the two can never disagree about which +database they are looking at. + +## Resetting + + docker compose down -v # -v also drops the database volume + +`site/` survives, because it is the repo's own tree. Re-running `wp core install` +gives a fresh site against the same files. + +## Offline by design + +`wp-config.php` sets `WP_HTTP_BLOCK_EXTERNAL`: the rig boots with no network and +never reports this install to WordPress.org. Blocking the request does not stop +WordPress making it, though — the update checks still ran, each got a `WP_Error` +back, and under `WP_DEBUG` each printed a warning *before* the headers, so every +redirect and cookie after it failed too. The message it printed ("could not +establish a secure connection") was misleading: nothing was wrong with TLS, the +request was refused locally. + +`site/wp-content/mu-plugins/tlig-offline.php` stops the checks at the source +instead of letting them fail. Keep it; without it the admin fills with warnings. + +## The menus + +`site/wp-content/import/` holds the fifteen desktop menu trees lifted from the +live site — 748 items, structure and labels only, with UberMenu's 149-key +settings blob reduced to the eight fields the audit shows are ever used. Re-run +it after changing `menus.json`; it replaces each tree rather than doubling it: + + docker compose --profile cli run --rm cli \ + wp eval-file wp-content/import/import-menus.php + +It takes a couple of minutes — `wp_update_nav_menu_item` is not fast — and +finishes with a count of menus, items and images. + +`?lang=el` picks the language (WPML is not installed; `inc/demo-languages.php` +stands in for it). `?open=3` holds the third panel open and `?open=all` drops +every panel into the flow — the second is the argument in one picture: seven +panels of seven heights, all from one 328px file. + +## Regenerating the parchment + + python3 tools/cut-parchment.py && npm run build + +It reads `papyrus_submenu_450_cnd.png` from the production tree, so that path +has to exist. The tile is the master whole — 1200x450, WebP at quality 90 — +because every narrower cut has to manufacture junctions the artwork does not +have, and the corners showed it badly. The script's header records what was +tried; its output prints the four corner junctions (the master's own, so a +regression check rather than a correction) and how many vertical repeats each +panel height needs. diff --git a/local/apache-local.conf b/local/apache-local.conf new file mode 100644 index 0000000..80eca3e --- /dev/null +++ b/local/apache-local.conf @@ -0,0 +1,22 @@ +# Logs and the PID file must go to writable paths: /var/log/apache2 and +# /var/run/apache2 are root-owned in the image, and this container runs as an +# unprivileged uid so that it matches the owner of the bind-mounted tree. +ErrorLog /dev/stderr +PidFile /tmp/apache2.pid +ServerName localhost + + + Options FollowSymLinks + AllowOverride All + Require all granted + + +# Fonts are the only subresource the browser always fetches in CORS mode, and +# WordPress emits asset URLs from WP_HOME — so opening the site at any other +# host turns every font into a blocked cross-origin request. Fine on a local +# rig; never in production. + + + Header always set Access-Control-Allow-Origin "*" + + diff --git a/local/apache-ports.conf b/local/apache-ports.conf new file mode 100644 index 0000000..521b61f --- /dev/null +++ b/local/apache-ports.conf @@ -0,0 +1,4 @@ +# Apache runs as an unprivileged uid here, so it cannot bind port 80. It listens +# on 8080 inside the container; compose publishes that as 8090 on the host, one +# port along from the wp-migrate rig so both can run side by side. +Listen 8080 diff --git a/local/apache-vhost.conf b/local/apache-vhost.conf new file mode 100644 index 0000000..496e28b --- /dev/null +++ b/local/apache-vhost.conf @@ -0,0 +1,12 @@ +# Replaces the image's 000-default.conf, which is bound to port 80. + + DocumentRoot /var/www/html + + ErrorLog /dev/stderr + CustomLog /dev/stdout combined + + + AllowOverride All + Require all granted + + diff --git a/local/docker-compose.yml b/local/docker-compose.yml new file mode 100644 index 0000000..173ef22 --- /dev/null +++ b/local/docker-compose.yml @@ -0,0 +1,88 @@ +# A clean WordPress for the TLIG theme. +# +# Deliberately NOT the wp-migrate rig. That one bind-mounts the production tree +# — Avada, 55 plugins, a 1.5 GB database — and exists to mirror what ships. This +# one boots in seconds with nothing but core, so the theme has to stand on its +# own. Keep both: the other is the reference to compare against. +name: tlig-theme + +services: + db: + image: mysql:8.4 + command: ["--mysql-native-password=ON"] + environment: + MYSQL_DATABASE: tlig + MYSQL_USER: tlig + MYSQL_PASSWORD: tlig + MYSQL_ROOT_PASSWORD: tlig + volumes: + - db:/var/lib/mysql + healthcheck: + test: ["CMD", "mysqladmin", "ping", "-ptlig"] + interval: 5s + timeout: 5s + retries: 20 + + wp: + image: wordpress:php8.3-apache + # Skip the image's core-unpacking entrypoint: core is already on disk in + # site/, extracted from this same image so the versions cannot drift. The + # entrypoint would otherwise try to chmod a bind mount it does not own. + entrypoint: ["apache2-foreground"] + # Fedora runs SELinux enforcing, which blocks container access to bind + # mounts — including, silently, the config files below, which is why Apache + # kept binding port 80 despite a mounted ports.conf. + security_opt: + - label=disable + # Rootless podman maps the host user to container root by default, but + # Apache refuses to run workers as root. keep-id maps host uid 1000 to + # container uid 1000, so the container process is literally the owner of the + # bind-mounted tree. Under rootful docker, drop this and set RUN_UID=1000. + userns_mode: "keep-id" + depends_on: + db: + condition: service_healthy + ports: + - "8090:8080" + environment: + WORDPRESS_DB_HOST: db + WORDPRESS_DB_NAME: tlig + WORDPRESS_DB_USER: tlig + WORDPRESS_DB_PASSWORD: tlig + WORDPRESS_DEBUG: "1" + WORDPRESS_CONFIG_EXTRA: | + define( 'WP_DEBUG_DISPLAY', true ); + define( 'SCRIPT_DEBUG', true ); + define( 'DISALLOW_FILE_EDIT', true ); + # The project's own site/ is the docroot, so a Vite build lands in the + # running theme immediately — no copy step, no container restart. Config is + # mounted over the top, so site/ never holds environment-specific settings. + volumes: + - ../site:/var/www/html + - ./wp-config.php:/var/www/html/wp-config.php:ro + - ./apache-ports.conf:/etc/apache2/ports.conf:ro + - ./apache-vhost.conf:/etc/apache2/sites-enabled/000-default.conf:ro + - ./apache-local.conf:/etc/apache2/conf-enabled/zz-local.conf:ro + user: "${RUN_UID:-1000}:${RUN_GID:-1000}" + + cli: + image: wordpress:cli-php8.3 + security_opt: + - label=disable + userns_mode: "keep-id" + depends_on: + db: + condition: service_healthy + environment: + WORDPRESS_DB_HOST: db + WORDPRESS_DB_NAME: tlig + WORDPRESS_DB_USER: tlig + WORDPRESS_DB_PASSWORD: tlig + volumes: + - ../site:/var/www/html + - ./wp-config.php:/var/www/html/wp-config.php:ro + user: "${RUN_UID:-1000}:${RUN_GID:-1000}" + profiles: ["cli"] + +volumes: + db: diff --git a/local/wp-config.php b/local/wp-config.php new file mode 100644 index 0000000..a7fdbd1 --- /dev/null +++ b/local/wp-config.php @@ -0,0 +1,47 @@ + + + + diff --git a/site/wp-content/themes/tlig/functions.php b/site/wp-content/themes/tlig/functions.php new file mode 100644 index 0000000..b1550aa --- /dev/null +++ b/site/wp-content/themes/tlig/functions.php @@ -0,0 +1,67 @@ + __( 'Primary navigation', 'tlig' ), + ] ); + + load_theme_textdomain( 'tlig', get_template_directory() . '/languages' ); +} +add_action( 'after_setup_theme', 'tlig_setup' ); + +/** + * The stylesheet is built by Vite into assets/tlig.css. + * + * Versioned by filemtime so each build busts the browser cache — the same + * approach the old child theme uses for tlig_en.css. + */ +function tlig_enqueue_assets(): void { + $rel = '/assets/tlig.css'; + $path = get_template_directory() . $rel; + + if ( ! file_exists( $path ) ) { + return; // Not built yet; say nothing rather than enqueue a 404. + } + + wp_enqueue_style( 'tlig', get_template_directory_uri() . $rel, [], (string) filemtime( $path ) ); + + $js = get_template_directory() . '/assets/tlig.js'; + + if ( file_exists( $js ) ) { + wp_enqueue_script( + 'tlig', + get_template_directory_uri() . '/assets/tlig.js', + [], + (string) filemtime( $js ), + [ 'strategy' => 'defer' ] + ); + } +} +add_action( 'wp_enqueue_scripts', 'tlig_enqueue_assets' ); diff --git a/site/wp-content/themes/tlig/header.php b/site/wp-content/themes/tlig/header.php new file mode 100644 index 0000000..8b8f377 --- /dev/null +++ b/site/wp-content/themes/tlig/header.php @@ -0,0 +1,25 @@ + + +> + + + + + +> + + + + + + +
+
+

+
+ +
diff --git a/site/wp-content/themes/tlig/inc/demo-languages.php b/site/wp-content/themes/tlig/inc/demo-languages.php new file mode 100644 index 0000000..594f7e0 --- /dev/null +++ b/site/wp-content/themes/tlig/inc/demo-languages.php @@ -0,0 +1,158 @@ + Code => endonym. + */ +function tlig_demo_languages(): array { + return [ + 'en' => 'English', + 'fr' => 'Français', + 'de' => 'Deutsch', + 'es' => 'Español', + 'it' => 'Italiano', + 'pt' => 'Português', + 'nl' => 'Nederlands', + 'da' => 'Dansk', + 'sv' => 'Svenska', + 'pl' => 'Polski', + 'cs' => 'Čeština', + 'bg' => 'Български', + 'ru' => 'Русский', + 'el' => 'Ελληνικά', + 'ar' => 'العربية', + ]; +} + +/** + * The language currently being shown. + */ +function tlig_demo_lang(): string { + $want = isset( $_GET['lang'] ) ? sanitize_key( wp_unslash( $_GET['lang'] ) ) : 'en'; + + return isset( tlig_demo_languages()[ $want ] ) ? $want : 'en'; +} + +/** + * Arabic is the reason the whole layout is written in logical properties. + */ +function tlig_demo_is_rtl(): bool { + return 'ar' === tlig_demo_lang(); +} + +/** + * Points the primary location at the menu for the chosen language. + * + * @param array $args wp_nav_menu arguments. + * @return array + */ +function tlig_demo_pick_menu( $args ) { + if ( ( $args['theme_location'] ?? '' ) !== 'primary' ) { + return $args; + } + + $menu = wp_get_nav_menu_object( 'TLIG ' . strtoupper( tlig_demo_lang() ) ); + + if ( $menu ) { + $args['menu'] = $menu; + } + + return $args; +} +add_filter( 'wp_nav_menu_args', 'tlig_demo_pick_menu' ); + +/** + * Flips the document for Arabic. + * + * @param string $output The attributes. + * @return string + */ +function tlig_demo_html_dir( $output ) { + if ( ! tlig_demo_is_rtl() ) { + return $output; + } + + return preg_replace( '/\bdir="[^"]*"/', '', $output ) . ' dir="rtl" lang="ar"'; +} +add_filter( 'language_attributes', 'tlig_demo_html_dir' ); + +/** + * The switcher itself. + */ +function tlig_demo_language_bar(): void { + $current = tlig_demo_lang(); + + echo '
'; + echo '' . esc_html__( 'Language', 'tlig' ) . ''; + echo '
    '; + + foreach ( tlig_demo_languages() as $code => $name ) { + $is_current = ( $code === $current ); + + printf( + '
  • %s
    • ', + esc_attr( $is_current ? 'filter filter--sm is-active' : 'filter filter--sm' ), + esc_url( add_query_arg( 'lang', $code, home_url( '/' ) ) ), + esc_attr( $code ), + $is_current ? ' aria-current="page"' : '', + esc_html( $name ) + ); + } + + echo '
'; +} + +/** + * Demo scaffolding: force panels open, for screenshots and for the pitch. + * + * `?open=3` holds the third panel open; `?open=all` drops every panel into the + * flow, one under another. The second is the argument in one picture — seven + * panels of seven different heights, all drawn from the same 328px parchment + * file, where the old site needs a separately cut bitmap for each. + * + * It is a stylesheet, not a change to the markup, so nothing about the menu + * itself depends on it. + */ +function tlig_demo_open_panels(): void { + $open = isset( $_GET['open'] ) ? sanitize_key( wp_unslash( $_GET['open'] ) ) : ''; + + if ( '' === $open ) { + return; + } + + if ( 'all' === $open ) { + $css = '.site-nav__bar{display:block}' + . '.site-nav__item{display:block}' + . '.site-nav__panel{display:block;position:static;margin-block:0 1.5rem}'; + } else { + $n = max( 1, (int) $open ); + $css = sprintf( + // The bar too: below the tablet breakpoint it is hidden until the + // toggle opens it, and a screenshot cannot press the toggle. + '.site-nav__bar{display:flex}.site-nav__item:nth-child(%d) > .site-nav__panel{display:block}', + $n + ); + } + + printf( "\n", $css ); +} +add_action( 'wp_head', 'tlig_demo_open_panels', 99 ); diff --git a/site/wp-content/themes/tlig/inc/nav-fields.php b/site/wp-content/themes/tlig/inc/nav-fields.php new file mode 100644 index 0000000..f8dc62a --- /dev/null +++ b/site/wp-content/themes/tlig/inc/nav-fields.php @@ -0,0 +1,234 @@ +> + */ +function tlig_nav_fields(): array { + return [ + 'panel' => [ + 'type' => 'checkbox', + 'label' => __( 'Opens a mega panel', 'tlig' ), + 'help' => __( 'Top-level items only. The panel is as tall as its content.', 'tlig' ), + ], + 'heading' => [ + 'type' => 'checkbox', + 'label' => __( 'Heading, not a link', 'tlig' ), + ], + 'span' => [ + 'type' => 'select', + 'label' => __( 'Column width', 'tlig' ), + 'options' => [ + '' => __( 'Automatic', 'tlig' ), + '3' => __( 'Quarter', 'tlig' ), + '4' => __( 'Third', 'tlig' ), + '6' => __( 'Half', 'tlig' ), + '8' => __( 'Two thirds', 'tlig' ), + '12' => __( 'Full width', 'tlig' ), + ], + ], + 'layout' => [ + 'type' => 'select', + 'label' => __( 'Image position', 'tlig' ), + 'options' => [ + '' => __( 'No image', 'tlig' ), + 'image_left' => __( 'Beside the label', 'tlig' ), + 'image_below' => __( 'Above the label', 'tlig' ), + ], + ], + 'image' => [ + 'type' => 'number', + 'label' => __( 'Image (attachment ID)', 'tlig' ), + ], + 'icon' => [ + 'type' => 'select', + 'label' => __( 'Icon', 'tlig' ), + 'options' => [ + '' => __( 'None', 'tlig' ), + 'search' => __( 'Search', 'tlig' ), + 'book' => __( 'Book', 'tlig' ), + 'headphones' => __( 'Headphones', 'tlig' ), + ], + ], + 'feed' => [ + 'type' => 'number', + 'label' => __( 'List children of page ID', 'tlig' ), + 'help' => __( 'Generated at render time, so new pages appear by themselves.', 'tlig' ), + ], + 'block' => [ + 'type' => 'textarea', + 'label' => __( 'HTML block', 'tlig' ), + 'help' => __( 'An escape hatch. Filtered through wp_kses_post, so it cannot carry a stylesheet.', 'tlig' ), + ], + ]; +} + +/** + * Draws the fields inside the menu item. + * + * @param int $item_id Menu item post ID. + */ +function tlig_nav_item_fields( $item_id ): void { + $nav = tlig_nav_meta( (int) $item_id ); + + wp_nonce_field( 'tlig_nav_' . $item_id, 'tlig_nav_nonce_' . $item_id ); + + echo '
'; + echo '' . esc_html__( 'TLIG navigation', 'tlig' ) . ''; + + foreach ( tlig_nav_fields() as $key => $field ) { + $name = sprintf( 'tlig_nav[%d][%s]', $item_id, $key ); + $id = sprintf( 'tlig-nav-%d-%s', $item_id, $key ); + $value = $nav[ $key ] ?? ''; + + // `feed` is stored as an array so the walker can grow it later; the + // screen only ever asks for the parent, which is the part an editor + // would change. + if ( 'feed' === $key && is_array( $value ) ) { + $value = $value['parent'] ?? ''; + } + + echo '

'; + + switch ( $field['type'] ) { + case 'checkbox': + printf( + '', + esc_attr( $id ), + esc_attr( $name ), + checked( ! empty( $value ), true, false ), + esc_html( $field['label'] ) + ); + break; + + case 'select': + printf( ''; + break; + + case 'textarea': + printf( + '', + esc_attr( $id ), + esc_html( $field['label'] ), + esc_attr( $name ), + esc_textarea( (string) $value ) + ); + break; + + default: + printf( + '', + esc_attr( $id ), + esc_html( $field['label'] ), + esc_attr( $name ), + esc_attr( (string) $value ) + ); + } + + if ( ! empty( $field['help'] ) ) { + printf( '%s', esc_html( $field['help'] ) ); + } + + echo '

'; + } + + echo '
'; +} +add_action( 'wp_nav_menu_item_custom_fields', 'tlig_nav_item_fields', 10, 1 ); + +/** + * Saves them. + * + * Stored as one array under `_tlig_nav` rather than eight meta rows: the whole + * point is that an item's configuration is small enough to read at a glance. + * An empty configuration deletes the row instead of writing an empty array, so + * the 214 items that need no settings carry no meta at all. + * + * @param int $menu_id Menu term ID. + * @param int $item_id Menu item post ID. + */ +function tlig_nav_item_save( $menu_id, $item_id ): void { + $nonce = $_POST[ 'tlig_nav_nonce_' . $item_id ] ?? ''; + + if ( ! wp_verify_nonce( sanitize_key( $nonce ), 'tlig_nav_' . $item_id ) ) { + return; + } + + $raw = $_POST['tlig_nav'][ $item_id ] ?? []; + if ( ! is_array( $raw ) ) { + $raw = []; + } + + $nav = []; + + foreach ( tlig_nav_fields() as $key => $field ) { + $value = $raw[ $key ] ?? ''; + + switch ( $field['type'] ) { + case 'checkbox': + if ( ! empty( $value ) ) { + $nav[ $key ] = 1; + } + break; + + case 'select': + $value = (string) $value; + if ( '' !== $value && isset( $field['options'][ $value ] ) ) { + $nav[ $key ] = 'span' === $key ? (int) $value : $value; + } + break; + + case 'textarea': + $value = wp_kses_post( (string) $value ); + if ( '' !== trim( $value ) ) { + $nav[ $key ] = $value; + } + break; + + default: + $value = (int) $value; + if ( $value > 0 ) { + $nav[ $key ] = 'feed' === $key + ? [ 'parent' => $value, 'count' => -1, 'orderby' => 'title' ] + : $value; + } + } + } + + if ( $nav ) { + update_post_meta( $item_id, '_tlig_nav', $nav ); + } else { + delete_post_meta( $item_id, '_tlig_nav' ); + } +} +add_action( 'wp_update_nav_menu_item', 'tlig_nav_item_save', 10, 2 ); diff --git a/site/wp-content/themes/tlig/inc/nav.php b/site/wp-content/themes/tlig/inc/nav.php new file mode 100644 index 0000000..7caf4f2 --- /dev/null +++ b/site/wp-content/themes/tlig/inc/nav.php @@ -0,0 +1,528 @@ + + */ +function tlig_nav_meta( int $item_id ): array { + $meta = get_post_meta( $item_id, '_tlig_nav', true ); + + return is_array( $meta ) ? $meta : []; +} + +/** + * The three icons the entire site uses, inline. + * + * A whole icon font was loaded for these. Counted across all 15 menus: 24 + * `fa-search`, 14 `fa-book-open`, 14 `fa-headphones`, and nothing else. Inline + * SVG costs no request and inherits `currentColor`, so an icon on the dark + * ground needs no second rule. + * + * @param string $name Icon key. + * @return string SVG markup, or '' for an unknown name. + */ +function tlig_nav_icon( string $name ): string { + static $icons = [ + 'search' => '', + 'book' => '', + 'headphones' => '', + ]; + + if ( ! isset( $icons[ $name ] ) ) { + return ''; + } + + return sprintf( + '', + $icons[ $name ] + ); +} + +/** + * Renders the primary menu. + * + * @param string $location Registered menu location. + */ +function tlig_nav( string $location = 'primary' ): void { + if ( ! has_nav_menu( $location ) ) { + return; + } + + // The toggle is part of the menu's own markup rather than the header's, so + // `aria-controls` can name the list it opens without the template having to + // know the id. Below the tablet breakpoint it is the entire mobile menu. + $toggle = sprintf( + '', + 'tlig-menu', + esc_html__( 'Menu', 'tlig' ) + ); + + wp_nav_menu( [ + 'theme_location' => $location, + 'container' => 'nav', + 'container_class' => 'site-nav', + 'container_aria_label' => __( 'Primary navigation', 'tlig' ), + 'menu_id' => 'tlig-menu', + 'menu_class' => 'site-nav__bar', + 'items_wrap' => $toggle . '
    %3$s
', + 'depth' => 3, + 'walker' => new TLIG_Nav_Walker(), + 'fallback_cb' => false, + ] ); +} + +/** + * Turns a three-level menu into a bar of mega panels. + * + * `Walker_Nav_Menu` hands `start_lvl()` a depth but not the item that owns the + * level, so the current item is stashed in `start_el()` — the panel wrapper has + * to know whose panel it is in order to give it an id for `aria-controls`. + */ +class TLIG_Nav_Walker extends Walker_Nav_Menu { + + /** @var WP_Post|null The item most recently opened, for start_lvl(). */ + private $current; + + /** @var array> Settings of the open ancestors, by depth. */ + private $stack = []; + + /** @var array How many children each item has, by item ID. */ + private $siblings = []; + + /** + * Counts each item's children before walking. + * + * A column with no width of its own should share the row with its + * neighbours, which means knowing how many there are. UberMenu stored that + * as `columns: auto` and worked it out at render time; the walker is handed + * the whole tree here, so it can do the same. + * + * @param array $elements All menu items. + * @param int $max_depth Depth limit. + * @param mixed ...$args Passed through. + * @return string + */ + public function walk( $elements, $max_depth, ...$args ) { + $this->siblings = []; + + foreach ( (array) $elements as $element ) { + $parent = (int) ( $element->menu_item_parent ?? 0 ); + $this->siblings[ $parent ] = ( $this->siblings[ $parent ] ?? 0 ) + 1; + } + + return parent::walk( $elements, $max_depth, ...$args ); + } + + /** + * Opens a submenu level. + * + * Depth 0 → the panel and its grid. Depth 1 → the list of links in a column. + * + * @param string $output Accumulated markup, by reference. + * @param int $depth Depth of the *parent* item. + * @param stdClass $args wp_nav_menu arguments. + */ + public function start_lvl( &$output, $depth = 0, $args = null ) { + $indent = str_repeat( "\t", $depth ); + + if ( 0 === $depth ) { + $id = $this->current ? 'tlig-panel-' . (int) $this->current->ID : ''; + + $output .= sprintf( + "\n%s
\n", + $indent, + esc_attr( $id ) + ); + + // The panel repeats its own item as a link, and the stylesheet shows + // it only in the stacked layout. There, a tap on the bar item opens + // the panel instead of following the link — which is what a phone + // user expects, and what the old site got wrong in the opposite + // direction: with hover the only way in, its top-level pages were + // unreachable on a phone. This is the way back to that page. + if ( $this->current && '' !== trim( (string) $this->current->url ) && '#' !== $this->current->url ) { + $output .= sprintf( + "%s\t%s\n", + $indent, + esc_url( (string) $this->current->url ), + esc_html( trim( wp_strip_all_tags( $this->current->title ) ) ) + ); + } + + $output .= sprintf( "%s\t
    \n", $indent ); + + return; + } + + $output .= sprintf( "\n%s
      \n", $indent ); + } + + /** + * Closes a submenu level. + * + * @param string $output Accumulated markup, by reference. + * @param int $depth Depth of the parent item. + * @param stdClass $args wp_nav_menu arguments. + */ + public function end_lvl( &$output, $depth = 0, $args = null ) { + $indent = str_repeat( "\t", $depth ); + + $output .= 0 === $depth + ? sprintf( "%s\t
    \n%s
\n", $indent, $indent ) + : sprintf( "%s\n", $indent ); + } + + /** + * Opens an item. + * + * @param string $output Accumulated markup, by reference. + * @param WP_Post $item Menu item. + * @param int $depth Depth of the item. + * @param stdClass $args wp_nav_menu arguments. + * @param int $current_object_id Unused. + */ + public function start_el( &$output, $item, $depth = 0, $args = null, $current_object_id = 0 ) { + $this->current = $item; + + $nav = tlig_nav_meta( (int) $item->ID ); + $this->stack[ $depth ] = $nav; + + $has_children = in_array( 'menu-item-has-children', (array) $item->classes, true ); + $indent = str_repeat( "\t", $depth + 1 ); + + switch ( $depth ) { + case 0: + $output .= $indent . $this->bar_item( $item, $nav, $has_children ); + break; + + case 1: + $output .= $indent . $this->column( $item, $nav, $has_children ); + break; + + default: + // A leaf can carry a block or a feed too — the English + // TESTIMONIES panel is two of them, and dropping them here is + // how they went missing the first time. + $output .= $indent . '
  • ' + . $this->link( $item, $nav, 'site-nav__link' ) + . $this->block( $nav ) + . $this->feed( $nav ); + } + } + + /** + * Closes an item. + * + * @param string $output Accumulated markup, by reference. + * @param WP_Post $item Menu item. + * @param int $depth Depth of the item. + * @param stdClass $args wp_nav_menu arguments. + */ + public function end_el( &$output, $item, $depth = 0, $args = null ) { + $output .= "
    • \n"; + } + + /** + * A top-level item: the thing you see in the bar. + * + * @param WP_Post $item Menu item. + * @param array $nav Its TLIG settings. + * @param bool $has_children Whether it opens a panel. + * @return string + */ + private function bar_item( WP_Post $item, array $nav, bool $has_children ): string { + $panel = $has_children && ! empty( $nav['panel'] ); + + $classes = [ 'site-nav__item' ]; + if ( $panel ) { + $classes[] = 'site-nav__item--panel'; + } + if ( in_array( 'current-menu-item', (array) $item->classes, true ) ) { + $classes[] = 'is-current'; + } + + $attrs = ''; + if ( $panel ) { + // The link still goes where it always went; the button beside it is + // what opens the panel. A single element cannot both navigate and + // disclose, and hover alone leaves touch and keyboard out. + $attrs = sprintf( + ' aria-expanded="false" aria-controls="%s"', + esc_attr( 'tlig-panel-' . (int) $item->ID ) + ); + } + + $out = sprintf( '
  • ', esc_attr( implode( ' ', $classes ) ) ); + $out .= $this->link( $item, $nav, 'site-nav__top' ); + + if ( $panel ) { + $out .= sprintf( + '', + $attrs, + /* translators: %s: menu item label. */ + esc_html( sprintf( __( 'Open the %s menu', 'tlig' ), wp_strip_all_tags( $item->title ) ) ) + ); + } + + return $out; + } + + /** + * A column inside a panel. + * + * The width is a grid span, not a pixel height: `--tlig-span` feeds + * `grid-column: span var(--tlig-span)`. UberMenu stored it as a fraction of + * the row, which is the same thing said less directly. + * + * @param WP_Post $item Menu item. + * @param array $nav Its TLIG settings. + * @param bool $has_children Whether it holds links. + * @return string + */ + private function column( WP_Post $item, array $nav, bool $has_children ): string { + $span = isset( $nav['span'] ) ? max( 1, min( 12, (int) $nav['span'] ) ) : 0; + + // No width of its own: divide the row by however many columns this + // panel has. Without this every unsized column fell back to a quarter, + // which is right for a panel of four and wrong for the 28 panels — + // UNITY in DIVERSITY, MISSION, SEARCH, across the languages — that + // hold a single column. Those were rendering a 1200px banner into a + // quarter of the width. + if ( ! $span ) { + $count = max( 1, (int) ( $this->siblings[ (int) $item->menu_item_parent ] ?? 1 ) ); + $span = max( 1, min( 12, (int) round( 12 / $count ) ) ); + } + + $style = sprintf( ' style="--tlig-span:%d"', $span ); + + $out = sprintf( '
  • ', $style ); + + // A heading is an item with its link switched off. It was a link with + // `disable_link: on` before; here it is simply not an anchor, which is + // also what a screen reader needs to hear. + $title = trim( wp_strip_all_tags( $item->title ) ); + + $linked = false; + + if ( ! empty( $nav['heading'] ) && '' !== $title ) { + $out .= sprintf( '

    %s

    ', esc_html( $title ) ); + } elseif ( ! $has_children && '' !== $title ) { + $out .= $this->link( $item, $nav, 'site-nav__link' ); + $linked = true; + } + + // `link()` already emits the thumbnail, so only a column that did not + // render one needs it here — otherwise a childless column with an image + // shows it twice. + if ( ! $linked ) { + $out .= $this->figure( $nav ); + } + $out .= $this->block( $nav ); + $out .= $this->feed( $nav ); + + return $out; + } + + /** + * An anchor, with its optional thumbnail and icon. + * + * @param WP_Post $item Menu item. + * @param array $nav Its TLIG settings. + * @param string $class Class for the anchor. + * @return string + */ + private function link( WP_Post $item, array $nav, string $class ): string { + $title = trim( wp_strip_all_tags( $item->title ) ); + $inner = $this->figure( $nav ); + + if ( ! empty( $nav['icon'] ) ) { + $inner .= tlig_nav_icon( (string) $nav['icon'] ); + } + + if ( '' !== $title ) { + $inner .= sprintf( '%s', esc_html( $title ) ); + } + + if ( '' === $inner ) { + return ''; + } + + // An item with its link switched off still has something to show — the + // English menu's fourth column is a single picture with `disable_link` + // set, and wrapping it in an anchor to nowhere would be a lie to anyone + // tabbing through. It renders as the content without the anchor. + // No destination either: an item can lose its link because the editor + // switched it off, or because it never had one — 137 of the 748 items + // point at an `#ubermenu-column` placeholder. Both are content without + // a link, and neither should be an anchor to nowhere. + if ( ! empty( $nav['heading'] ) || '' === trim( (string) $item->url ) || '#' === $item->url ) { + $static = $class . ' is-static'; + + if ( '' === $title && ! empty( $nav['image'] ) ) { + $static .= ' ' . $class . '--figure'; + } + + return sprintf( '%s', esc_attr( $static ), $inner ); + } + + $classes = [ $class ]; + if ( ! empty( $nav['layout'] ) ) { + $classes[] = $class . '--' . str_replace( '_', '-', (string) $nav['layout'] ); + } + + // A picture with nothing to label is the column's content, not a + // thumbnail beside a word, and the stylesheet sizes the two differently. + if ( '' === $title && ! empty( $nav['image'] ) ) { + $classes[] = $class . '--figure'; + } + + return sprintf( + '%s', + esc_attr( implode( ' ', $classes ) ), + esc_url( (string) $item->url ), + $item->target ? sprintf( ' target="%s" rel="noopener"', esc_attr( $item->target ) ) : '', + $inner + ); + } + + /** + * The item's thumbnail, if it has one. + * + * @param array $nav Item settings. + * @return string + */ + private function figure( array $nav ): string { + if ( empty( $nav['image'] ) ) { + return ''; + } + + $id = (int) $nav['image']; + if ( ! $id ) { + return ''; + } + + // `large`, not `medium`. Four of these are a column's whole content, and + // two of them are 1200 and 1380 pixels wide in the library — asking for + // `medium` handed the browser a 300px copy to stretch across a 730px + // column. `large` carries a srcset, so a 56px thumbnail still costs a + // small file. + return wp_get_attachment_image( + $id, + 'large', + false, + [ + 'class' => 'site-nav__thumb', + 'loading' => 'lazy', + 'alt' => '', + ] + ); + } + + /** + * Raw HTML attached to the item. + * + * 56 items carry one. They are not arbitrary — across every language only + * five tags appear in them, and 14 of the 56 are the search form. They are + * kept as an escape hatch, not as a design tool, and the content is filtered + * so a menu cannot inject a stylesheet the way the Danish one does today. + * + * @param array $nav Item settings. + * @return string + */ + private function block( array $nav ): string { + if ( empty( $nav['block'] ) ) { + return ''; + } + + $html = (string) $nav['block']; + + if ( false !== strpos( $html, '[search-form]' ) ) { + return '
    ' . get_search_form( [ 'echo' => false ] ) . '
    '; + } + + return '
    ' . wp_kses_post( do_shortcode( $html ) ) . '
    '; + } + + /** + * A list of child pages, generated rather than hand-maintained. + * + * This is the one setting that makes the menu content-driven in the literal + * sense: publish a page under the named parent and it appears, in every + * language, without anyone editing a menu. + * + * @param array $nav Item settings. + * @return string + */ + private function feed( array $nav ): string { + if ( empty( $nav['feed'] ) || ! is_array( $nav['feed'] ) ) { + return ''; + } + + $feed = $nav['feed']; + $parent = isset( $feed['parent'] ) ? (int) $feed['parent'] : 0; + + if ( ! $parent ) { + return ''; + } + + $children = get_posts( [ + 'post_type' => 'page', + 'post_parent' => $parent, + 'posts_per_page' => isset( $feed['count'] ) ? (int) $feed['count'] : -1, + 'orderby' => isset( $feed['orderby'] ) ? (string) $feed['orderby'] : 'title', + 'order' => 'ASC', + 'suppress_filters' => false, + ] ); + + if ( ! $children ) { + return ''; + } + + $out = '
      '; + foreach ( $children as $child ) { + $out .= sprintf( + '
    • %s
      • ', + esc_url( (string) get_permalink( $child ) ), + esc_html( get_the_title( $child ) ) + ); + } + + return $out . '
    '; + } +} diff --git a/site/wp-content/themes/tlig/index.php b/site/wp-content/themes/tlig/index.php new file mode 100644 index 0000000..be25381 --- /dev/null +++ b/site/wp-content/themes/tlig/index.php @@ -0,0 +1,28 @@ + +
    +
    +
    + +
    > +

    +
    +
    + +
    +
    +
    + ` +
    +
    ${h}px
    +

    original bitmap

    + ${src + ? `the original ${h}px bitmap` + : `
    no bitmap exists for this height
    `} +

    .parchment, from the one 9-slice tile

    +
    +
    `).join('') +} + // -- Wire up ----------------------------------------------------------------- renderSwatches() +renderLadder() trackViewport() // `?script=bg` opens straight onto a given script, so a particular cut can be diff --git a/src/demo/demo.scss b/src/demo/demo.scss index 4c59282..bd829e8 100644 --- a/src/demo/demo.scss +++ b/src/demo/demo.scss @@ -12,18 +12,11 @@ @use '../sass/abstracts' as *; +// The scroll frame is a real component now (`layout/_page.scss`), and its image +// tokens already point at this project's own art directory — so the demo no +// longer overrides anything. It only adds its own chrome below. $img: '/wp-content/includes/images'; -// The scroll frame is a real component now (`layout/_page.scss`). All the demo -// does is point its four image tokens at the local mirror in `site/`, which is -// exactly the re-pointing the component was built to allow. -:root { - --tlig-ground: url('#{$img}/background_planche_1920.jpg'); - --tlig-scroll-head: url('#{$img}/page/background-message-entete_cnd.png.webp'); - --tlig-scroll-body: url('#{$img}/page/background-message-milieux1200x190-4_cnd.png.webp'); - --tlig-scroll-foot: url('#{$img}/page/background-message-footer-1200x114_cnd.png.webp'); -} - body { min-height: 100vh; } @@ -90,6 +83,52 @@ body { align-items: center; } +// -- Parchment ladder -------------------------------------------------------- + +.parchment-ladder { + display: flex; + flex-direction: column; + gap: space('lg'); +} + +.parchment-row { + &__key { + margin-block-end: space('2xs'); + font-family: font('body'); + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: $brown-600; + } + + &__caption { + margin-block: space('2xs'); + font-family: font('body'); + font-size: 11px; + font-style: italic; + color: $brown-600; + } + + // Both panels occupy an identical box, so the only difference on screen is + // rendering fidelity. `fill` reproduces what the live site does to the + // bitmap today — `background-size: cover` stretches it just like this. + img { + width: 100%; + object-fit: fill; + } + + &__none { + display: flex; + align-items: center; + justify-content: center; + border: 1px dashed rgba(145, 116, 85, 0.5); + font-family: font('body'); + font-size: 12px; + font-style: italic; + color: $brown-600; + } +} + // -- Swatches ---------------------------------------------------------------- .swatch-grid { diff --git a/src/images/background_planche_1920-3_cnd.jpg b/src/images/background_planche_1920-3_cnd.jpg new file mode 100644 index 0000000..855456e Binary files /dev/null and b/src/images/background_planche_1920-3_cnd.jpg differ diff --git a/src/images/background_planche_600x1000.jpg b/src/images/background_planche_600x1000.jpg new file mode 100644 index 0000000..5605cd4 Binary files /dev/null and b/src/images/background_planche_600x1000.jpg differ diff --git a/src/images/background_planche_800x1300.jpg b/src/images/background_planche_800x1300.jpg new file mode 100644 index 0000000..4810956 Binary files /dev/null and b/src/images/background_planche_800x1300.jpg differ diff --git a/src/images/page/background-message-entete360x140-2_cnd.png.webp b/src/images/page/background-message-entete360x140-2_cnd.png.webp new file mode 100644 index 0000000..ae49c9b Binary files /dev/null and b/src/images/page/background-message-entete360x140-2_cnd.png.webp differ diff --git a/src/images/page/background-message-entete750x140_cnd.png.webp b/src/images/page/background-message-entete750x140_cnd.png.webp new file mode 100644 index 0000000..d1ac2e9 Binary files /dev/null and b/src/images/page/background-message-entete750x140_cnd.png.webp differ diff --git a/site/wp-content/includes/images/page/background-message-entete_cnd.png.webp b/src/images/page/background-message-entete_cnd.png.webp similarity index 100% rename from site/wp-content/includes/images/page/background-message-entete_cnd.png.webp rename to src/images/page/background-message-entete_cnd.png.webp diff --git a/site/wp-content/includes/images/page/background-message-footer-1200x114_cnd.png.webp b/src/images/page/background-message-footer-1200x114_cnd.png.webp similarity index 100% rename from site/wp-content/includes/images/page/background-message-footer-1200x114_cnd.png.webp rename to src/images/page/background-message-footer-1200x114_cnd.png.webp diff --git a/src/images/page/background-message-footer-360x114-3_cnd.png.webp b/src/images/page/background-message-footer-360x114-3_cnd.png.webp new file mode 100644 index 0000000..b15c11d Binary files /dev/null and b/src/images/page/background-message-footer-360x114-3_cnd.png.webp differ diff --git a/src/images/page/background-message-footer-6_cnd.png.webp b/src/images/page/background-message-footer-6_cnd.png.webp new file mode 100644 index 0000000..315ce91 Binary files /dev/null and b/src/images/page/background-message-footer-6_cnd.png.webp differ diff --git a/site/wp-content/includes/images/page/background-message-milieux1200x190-4_cnd.png.webp b/src/images/page/background-message-milieux1200x190-4_cnd.png.webp similarity index 100% rename from site/wp-content/includes/images/page/background-message-milieux1200x190-4_cnd.png.webp rename to src/images/page/background-message-milieux1200x190-4_cnd.png.webp diff --git a/src/images/page/background-message-milieux360x190_cnd.png.webp b/src/images/page/background-message-milieux360x190_cnd.png.webp new file mode 100644 index 0000000..f19d3a7 Binary files /dev/null and b/src/images/page/background-message-milieux360x190_cnd.png.webp differ diff --git a/src/images/page/background-message-milieux750x190_cnd.png.webp b/src/images/page/background-message-milieux750x190_cnd.png.webp new file mode 100644 index 0000000..7d0d671 Binary files /dev/null and b/src/images/page/background-message-milieux750x190_cnd.png.webp differ diff --git a/src/images/parchment.webp b/src/images/parchment.webp new file mode 100644 index 0000000..544a0c0 Binary files /dev/null and b/src/images/parchment.webp differ diff --git a/src/index.html b/src/index.html index 3688879..69360eb 100644 --- a/src/index.html +++ b/src/index.html @@ -137,6 +137,28 @@ class with modifiers replaces them.

    + +
    +

    Parchment — one file, any height

    + +

    Left: the live site's + fixed-height bitmap, one file per exact pixel height. Right: the same + height rendered by .parchment from a single 31 kB + 9-slice tile. The originals total 13 MB before WordPress's ~470 + thumbnail derivatives.

    + +
    + +

    The last two rows are heights the site + cannot currently produce — there is no bitmap for them. That is + the whole point: a panel is as tall as its content, so a menu can grow + with a translation instead of being cropped to fit.

    +

    The edge also stays translucent. The live CSS sets + background-color:#000000 under a tile whose outer ring has + alpha, painting a black fringe into the antialiasing — visible against + the wood if you look for it.

    +
    +

    Filter pills

    diff --git a/src/js/nav.js b/src/js/nav.js new file mode 100644 index 0000000..85f7de5 --- /dev/null +++ b/src/js/nav.js @@ -0,0 +1,106 @@ +/** + * The navigation's one piece of JavaScript. + * + * CSS opens a panel on `:hover`, which covers a mouse on a wide screen and + * nothing else. Everything deliberate — a tap, a click, the keyboard — goes + * through `aria-expanded` on the disclosure button, which the stylesheet reads + * with `:has()`. This file only ever sets that attribute: no class toggling on + * the panel, no inline styles. + * + * The button exists because a single element cannot both navigate and + * disclose. On the old site that ambiguity is why the top-level pages are + * unreachable on a phone: the only way to reach the panel was to hover. + * + * In the stacked layout the bar item opens its panel too, because on a phone + * that is what a tap on a row means. The page it links to is then reached from + * `.site-nav__self` at the top of the panel, so nothing becomes unreachable — + * the mistake this replaces, made the other way round. + */ + +const NAV = '.site-nav' +const DISCLOSE = '.site-nav__disclose' +const TOGGLE = '.site-nav__toggle' +const TOP = '.site-nav__top' + +/** Closes every open panel except, optionally, one. */ +function closeAll(nav, except) { + nav.querySelectorAll(`${DISCLOSE}[aria-expanded="true"]`).forEach((button) => { + if (button !== except) button.setAttribute('aria-expanded', 'false') + }) +} + +/** + * Is the menu in its stacked layout? + * + * Asked of the stylesheet rather than duplicated from it: the Menu toggle is + * `display: none` above the tablet breakpoint and shown below it, so its + * computed display *is* the answer. A `matchMedia` here would be a second copy + * of a number that lives in SASS, and the two would drift. + */ +function isStacked(nav) { + const toggle = nav.querySelector(TOGGLE) + return !!toggle && getComputedStyle(toggle).display !== 'none' +} + +/** Opens one panel, closing any other. */ +function open(nav, disclose, want) { + closeAll(nav, disclose) + disclose.setAttribute('aria-expanded', want ? 'true' : 'false') +} + +function init(nav) { + nav.addEventListener('click', (event) => { + const disclose = event.target.closest(DISCLOSE) + + if (disclose) { + open(nav, disclose, disclose.getAttribute('aria-expanded') !== 'true') + return + } + + // Stacked, a tap on the bar item opens its panel rather than following the + // link. Without this the page navigates away and the menu the reader had + // just opened is gone — which reads as the menu collapsing under them. + // The link is not lost: the panel repeats it as `.site-nav__self`, which + // is visible only in this layout. + const top = event.target.closest(TOP) + + if (top && isStacked(nav)) { + const item = top.closest('.site-nav__item') + const button = item && item.querySelector(`:scope > ${DISCLOSE}`) + + if (button) { + event.preventDefault() + open(nav, button, button.getAttribute('aria-expanded') !== 'true') + } + return + } + + const toggle = event.target.closest(TOGGLE) + + if (toggle) { + const opened = nav.classList.toggle('is-open') + toggle.setAttribute('aria-expanded', String(opened)) + if (!opened) closeAll(nav) + } + }) + + // Escape closes the panel and returns focus to the item that opened it — + // otherwise a keyboard user is left inside a panel with no way out but Tab. + nav.addEventListener('keydown', (event) => { + if (event.key !== 'Escape') return + + const open = nav.querySelector(`${DISCLOSE}[aria-expanded="true"]`) + if (!open) return + + open.setAttribute('aria-expanded', 'false') + open.focus() + }) + + document.addEventListener('click', (event) => { + if (!nav.contains(event.target)) closeAll(nav) + }) +} + +export function initNav(root = document) { + root.querySelectorAll(NAV).forEach(init) +} diff --git a/src/main.js b/src/main.js index bb10af0..d83359a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,6 @@ // Entry point. Its only job today is to pull the stylesheet into the build; // behaviour belongs in src/js/ and gets imported here as it is written. import './sass/main.scss' +import { initNav } from './js/nav.js' + +initNav() diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss index ba5e0f6..06b266c 100644 --- a/src/sass/abstracts/_mixins.scss +++ b/src/sass/abstracts/_mixins.scss @@ -49,6 +49,38 @@ border-radius: radius($round); } +// The parchment panel. +// +// One 9-slice tile at any size. This replaces ~470 fixed-height bitmaps — the +// `papyrus_submenu_{265…480}` family, one file per exact pixel height — which +// existed only because nobody sliced the image. Measured: the submenu texture's +// interior varies by 2/255 over its whole height, and all the decoration is a +// soft shadow in the outer 36px. +// +// Three details are load-bearing: +// +// `fill` without it the middle is not painted and the panel is a +// hollow frame. The commonest way to get a 9-slice wrong. +// `round` not `stretch`. Stretching smears the grain, which is exactly +// what the live `background-size: cover` does today — so this +// is strictly more faithful than what ships. +// transparent the tile's outer ring has alpha. The live CSS sets +// `background-color: #000000` under it, which paints a black +// fringe into the antialiased edge. +// +// `border-image` does not affect layout, so a panel is exactly as tall as its +// content. That is what makes the menu content-driven: no `min-height`, and no +// `white-space: nowrap` to stop labels wrapping out of a fixed box. +@mixin parchment { + border-style: solid; + border-width: var(--#{$prefix}-parchment-edge); + border-image-source: var(--#{$prefix}-img-parchment); + border-image-slice: 36 fill; + border-image-repeat: round; + border-image-width: 1; // == border-width; stated so the two cannot desync + background-color: transparent; +} + // Visible only to screen readers. @mixin visually-hidden { position: absolute; diff --git a/src/sass/abstracts/_palette.scss b/src/sass/abstracts/_palette.scss index f9a6824..a0bf5fe 100644 --- a/src/sass/abstracts/_palette.scss +++ b/src/sass/abstracts/_palette.scss @@ -24,6 +24,9 @@ $red-780: #7e050c; // .linkUnderline $red-700: #8f0b06; // primary button fill $red-650: #770000; // mobile header / menu $red-600: #951111; // blockquote rule +$red-550: #aa0000; // the menu's only hover colour — UberMenu's + // style_top_level_font_color_hover, and the same for + // headings and submenu links $red-500: #961a07; // alert $red-400: #ca4a1f; // link hover (global `a:hover` in tlig_en.css) @@ -36,6 +39,11 @@ $gold-300: #ffe7bf; // mobile menu hover $gold-200: #fff8c4; // mobile menu text $gold-100: #fbefc9; // footer text +// Parchment — the ground the whole site sits on. Two tones, measured: the +// submenu texture is flat and cool, the header ground is warmer and mottled. +$parchment-500: #f0e1bc; // submenu interior, median (240,225,188) +$parchment-400: #e9dba9; // header ground, median (233,219,169) + // Neutrals. $white: #ffffff; $grey-050: #fbfbfb; diff --git a/src/sass/abstracts/_tokens.scss b/src/sass/abstracts/_tokens.scss index 50a0881..fbd8554 100644 --- a/src/sass/abstracts/_tokens.scss +++ b/src/sass/abstracts/_tokens.scss @@ -49,6 +49,10 @@ $colors: ( 'button-donate-bg': $gold-700, 'button-donate-ink': $white, + // Navigation. One red for every hover in the menu — the live site uses + // #aa0000 there and #ca4a1f everywhere else, and both are real. + 'nav-link-hover': $red-550, + // Filters — the pill toggles used across archives, galleries and the topbar 'filter-fill': $wood-50a, // hover and selected 'filter-ink-active': $white, @@ -68,6 +72,40 @@ $colors: ( // Chrome 'shadow': $shadow-35a, 'shadow-soft': $shadow-15a, + + // Parchment + 'parchment': $parchment-500, + 'parchment-header': $parchment-400, +); + +// -- Images ------------------------------------------------------------------ +// +// Every decorative image in one map, emitted as `--tlig-img-*`. Two sources: +// WordPress uploads, which the site already hosts and which are too large to +// bundle; and project assets under `src/images/`, which Vite fingerprints and +// emits beside the stylesheet so the bundle resolves wherever it is dropped. +// +// Because these are custom properties, a demo, a staging copy or a breakpoint +// can re-point any of them without touching a rule. + +// Project assets. The old site scatters these across `uploads/2018/10`, +// `2018/11`, `2019/03` and `2019/09` — wherever they happened to be uploaded. +// Here they are one directory the theme owns, and Vite emits them beside the +// stylesheet, so the bundle resolves at whatever path it is dropped. That +// matters: the theme's CSS lives at wp-content/themes/tlig/assets/, so a +// site-absolute upload path and a stylesheet-relative one are not the same. +$art: '/images' !default; + +$images: ( + // The page scroll's three illustrations, plus the wood ground + 'ground': "url('#{$art}/background_planche_1920-3_cnd.jpg')", + 'scroll-head': "url('#{$art}/page/background-message-entete_cnd.png.webp')", + 'scroll-body': "url('#{$art}/page/background-message-milieux1200x190-4_cnd.png.webp')", + 'scroll-foot': "url('#{$art}/page/background-message-footer-1200x114_cnd.png.webp')", + + // Project assets — one 9-slice tile replaces the whole + // papyrus_submenu_{265…480} family + 'parchment': "url('/images/parchment.webp')", ); // -- Type -------------------------------------------------------------------- @@ -79,7 +117,13 @@ $fonts: ( 'display': (papyrus-bold, 'Papyrus', fantasy), 'body': (Lato, 'Trebuchet MS', Helvetica, sans-serif), 'message': ('Trebuchet MS', Verdana, sans-serif), - 'nav': (Oswald, 'Lato', sans-serif), + // The menu is Papyrus on the live site, and nothing in any stylesheet says + // so: UberMenu writes it from its Customizer into an inline