PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-07 11:39:18 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
b2ec15372c96ca8eeab7c96ef62a162db04ba2ff
xamxam/todo/01-css-semantic-refactor.md
Pontoporeia f18e3381ea admin.css: rewrite from scratch using only variables.css tokens 
The file had accumulated severe corruption in its lower half (garbled
selector text, variable names spliced into property values, orphaned
declarations, broken nesting) alongside hardcoded hex colours throughout.

Rewrote the entire file cleanly:
- Every colour is now a var() referencing a token defined in variables.css:
  --accent-primary/secondary/foreground, --accent-blue/green/yellow/red,
  --bg-secondary/tertiary, --border-primary, --text-primary/secondary/tertiary,
  --error, --warning, --success, --accent-muted.
- Zero raw hex values remain in admin.css.
- Removed the corrupted/dead CSS from the bottom half and reconstructed
  all selectors from what the templates actually use (audited via grep).
- Fixed structural issues: broken border shorthand, nested rules that
  were not valid CSS, orphaned declaration blocks.
- New/restored rules: .admin-maintenance-bar (was corrupted),
  .status-access variants (was corrupted), .admin-section-title--danger,
  .admin-danger-zone, .admin-account-status (all reconstructed cleanly).
- .admin-btn--warning and .admin-btn--danger now use var(--accent-yellow)
  and var(--accent-red) instead of hardcoded dark hex values.
- .admin-btn-remove hover now uses var(--error) instead of #e55.
- .admin-btn-unpublish now uses var(--bg-secondary)/var(--text-tertiary)
  instead of hardcoded grey hex values.
- select option background colours removed (browser chrome, not styleable
  cross-platform).

Templates: replace 4 inline var(--admin-text-muted) with var(--text-secondary)
in index.php, thanks.php, import.php.
2026-04-06 15:32:41 +02:00

4.8 KiB
Raw Blame History

CSS & Semantic HTML Refactor

CSS class audit: replace with semantic selectors (admin.css / main.css / tfe.css / search.css)

  • admin.css: Replace .admin-main with .admin-body main
  • admin.css: Replace .admin-page-title with .admin-body main > h1
  • admin.css: Replace .admin-alert / .admin-alert--error / .admin-alert--success with [role="alert"] / data-type="error|success" attribute
  • admin.css: Replace .admin-form-row with .admin-body form > div or CSS grid on <form> children
  • admin.css: Replace .admin-label with .admin-body form label
  • admin.css: Replace .admin-input / .admin-select / .admin-textarea with native element selectors
  • admin.css: Replace .admin-hint with .admin-body form small
  • admin.css: Replace .admin-table with .admin-body table
  • admin.css: Replace .admin-fieldset / .admin-fieldset-legend with .admin-body fieldset / .admin-body legend
  • main.css: Replace .card__caption with .home-body .cards-container li p or li > a > p
  • main.css: Replace .card__media with .home-body figure
  • tfe.css: Replace .tfe-meta-list selectors with article dl, article dt, article dd
  • tfe.css: Replace .tfe-media-block with aside figure
  • tfe.css: Replace .tfe-file-caption with aside figcaption
  • search.css: Replace .repertoire-col > h2 — use .repertoire-index section > h2
  • system.php: Move inline <style> block to system.css

Template HTML changes to match

  • In all admin templates, replace <p class="admin-hint"> with <small> elements
  • In tfe.php, remove class="tfe-meta-list" — target via article dl
  • In tfe.php, remove class="tfe-media-block" — target via aside figure
  • In tfe.php, remove class="tfe-file-caption" — target via aside figcaption
  • In index.php, remove class="card__caption" — target via li > a > p

Scattered inline styles in templates

  • tfe.php line 146: style="align-items:start;" → .tfe-meta-item--top in tfe.css
  • tfe.php lines 148, 170-172, 193: font-style:italic, margin-top:1.5rem, font-size:.88rem;color:#666, color:#999;font-style:italic → .tfe-note-value, .tfe-back-link, .tfe-restricted in tfe.css
  • admin/edit.php: multiple style= on .admin-form-row and banner preview → modifier classes in admin.css

Admin semantic HTML (sections IX–XVI)

  • add.php/edit.php: Replace <div class="admin-form-row"> with CSS grid on <form> children (~20 divs in add.php, ~22 in edit.php)
  • add.php/edit.php: Replace inner wrapper <div> in multi-control rows — use <small> for hints, remove the wrapper div
  • add.php/edit.php: Replace <div class="admin-checkbox-list"> with <ul>; each <label class="admin-checkbox-label"> becomes <li> containing <label>
  • add.php/edit.php: Replace <div class="admin-submit-wrap"> — remove; apply styles directly to form > button:last-child
  • add.php/edit.php: Replace <div class="admin-alert admin-alert--error/--success"> with <p role="alert"> / <p role="status">
  • index.php: Replace <div class="admin-stats"> / <div class="admin-stat"> children with <dl>/<dt>/<dd>
  • index.php: Replace <div class="admin-maintenance-bar"> with <aside role="status"> or <p role="status">
  • index.php: Add role="toolbar" aria-label="Actions groupées" to <div class="admin-bulk-actions">
  • index.php: Add scope="col" to all <th> cells in the admin table
  • index.php: Add non-colour indicator + aria-label="Statut : …" to status badge <span> elements
  • tags.php: Add scope="col" to <th> cells
  • tags.php: Move inline style="margin-top:.35rem;" on forms → .admin-inline-form + .admin-inline-form selector
  • thanks.php: Replace <div class="admin-thesis-info"> with <section> + <h2> heading; CSS targets main > section
  • account.php: Replace <div class="admin-account-status"> with <dl>; __row → <div>, __label → <dt>
  • account.php: Replace <div class="admin-danger-zone__description"> with <p>
  • account.php: Move style="margin-top:3rem;" on danger zone heading → CSS modifier class
  • login.php: Wrap login content in <main> (currently no main landmark)
  • login.php: Extract inline styles on .admin-form-row and .admin-submit-wrap → .admin-form-row--compact modifier in admin.css

Favicon

  • admin_favicon.svg used as public-facing favicon — rename or create a distinct favicon.svg so admin and public can diverge without naming confusion
Reference in New Issue View Git Blame Copy Permalink