Журнал изменений
Replaces all hardcoded hex values in theme.css with semantic CSS variables, declared in a new canonical color palette in base.css. Establishes a single source of truth for the lite theme's color system, making future theming and dark-mode preparation trivial.
Core changes:
- base.css:
Add 31 canonical color-role variables (--sl-color-bg, --sl-color-surface, --sl-color-brand, --sl-color-text-muted, --sl-color-on-dark, etc.)
- Add 3 shadow tokens (--sl-shadow-soft, --sl-shadow-medium, --sl-shadow-strong)
- theme.css:
- Replace every hardcoded #hex with the matching --sl-color- or --sl-shadow- token
- Rename #upper ID selector → .sl-upper-wordmark class selector (matches HTML)
Merge #foot-menu rule into #footbox > .sl-wrp.sl-clrfix with full-bleed background trick (100vw + negative margin) to eliminate the wrapper div
- Remove duplicate background-color declaration in .sl-site-link
- Fix tab-indented active-tab selectors to flush indentation
- docs/LITE_THEME_CSS_SIMPLIFICATION_PROMPT.md:
- Add prompt document that captured the CSS simplification requirements
Benefits:
- Zero hardcoded colors remain in theme.css; all values resolve through tokens
- Shadow values unified via token; border-radius tokens already in place
- Full-bleed footer menu background achieved without extra wrapper div
Upgrades the lite template layout to use meaningful HTML5 sectioning elements throughout header, footer, demo strip and navigation, improving document outline, accessibility and machine-readability. CSS selectors updated and minor property fixes applied in sync.
Core changes:
- app.html / home.html (layouts):
div#hmenu → nav#hmenu with aria-label="Главное меню"
- form.sl-search-form gains role="search"
div#demo-line → section#demo-line aria-labelledby="demo-line-title"
- b.sl-demo-line-title → h2#demo-line-title (correct heading level)
div#footbox → footer#footbox; foot-menu moved inside it
- nested footer.sl-grid → section.sl-grid aria-label="SLAED CMS"
- div.sl-grid (Технологии) → section aria-labelledby + h2
- div.sl-grid (Контакты) → section aria-labelledby + h2
- ul.sl-block-contact wrapped in address
- nav.sl-fmenu gets aria-label="Нижнее меню"
- protocol-relative URL //slaed.net → https://slaed.net
- menu.html (partial):
- nav#topmenu → div#topmenu (already inside nav#hmenu; avoids nested nav)
- theme.css:
- #demo-line: add background-position/repeat/size defaults
- .demo-line-title: add font-weight:700; margin shorthand
- .sl-list-item > li: margin-top → margin-bottom
- #footbox: padding shorthand; address { font-style:normal }
- .sl-f-title: margin shorthand
- Responsive: update #footbox selectors to .sl-wrp > .sl-grid:first-child
- Mobile: add overflow/ellipsis rules for .sl-list-item inside #footbox
Benefits:
- Proper document outline with h2 headings in demo-line and footer sections
- Screen-reader landmarks: nav, footer, section, address, role="search"
- CSS remains in sync with the restructured DOM; no visual regressions
Replaced plain-text author/date line in forum teaser items with a structured meta row using Bootstrap Icons, visually-hidden labels and dedicated CSS classes for accessibility and visual consistency.
Core changes:
- Fragment (forum-teaser-item.html):
- Replaced bare span with sl-forum-meta / sl-forum-meta-item structure
- Added bi-person-circle and bi-clock-history icons with aria-hidden
- Added sl-visually-hidden labels for screen readers
- Controller (index.php):
- Split when into when_label (_DATE) and when (formatted time only)
- Styles (theme.css):
- Added sl-forum-meta, sl-forum-meta-item, sl-forum-meta-icon classes
- Added sl-visually-hidden utility
- Minor fixes: contacts padding, partners margin, demo-line float
Benefits:
- Accessible icon-based meta row with screen-reader fallbacks
- Reusable CSS utilities aligned with sl-* naming convention
Decoupled debug output from the foot-controls partial by passing it directly as a layout variable, so each layout controls its own placement without bloating the generic foot-controls partial.
Core changes:
- Backend (core/system.php):
- Removed $debug from getFootControls() call
- Added debug_html to the layout variable map
- Partial (foot-controls.html):
- Removed debug_html block (no longer responsible for it)
- Reordered: license before time
- Layouts (app.html, home.html, main.html):
- Added conditional debug_html block at page bottom
Benefits:
- Cleaner separation of concerns between partial and layout
- Debug block is layout-controlled, not buried in a partial
Converted magistralb-wf and magistralr-wf from WOFF to WOFF2 using fonttools with glyph bounding-box recalculation to eliminate browser warnings. Removed obsolete EOT, TTF, SVG and WOFF fallbacks.
Core changes:
- Font files (templates/lite/assets/css/fonts/):
- Added magistralb-wf.woff2 and magistralr-wf.woff2 (bboxes fixed)
- Deleted magistral.woff, magistral.svg (no longer needed)
- Font declarations (base.css):
- Replaced multi-format src stack with single WOFF2 src
- Removed dead references to EOT, TTF, SVG files
Benefits:
- Eliminates "glyph bbox was incorrect" browser warnings on cold load
- Smaller file size (~18 % reduction vs WOFF)
- Simpler, future-proof @font-face declarations
Technical notes:
- WOFF2 support: >97 % of browsers, no fallback required
- Conversion: WOFF → TTF (custom Node script) → fonttools recalcBounds → WOFF2
Replace generic .sl-but-login, .sl-but-primary and .sl-dropdown-* selectors
with scoped semantic names (.sl-login-top--head, .sl-login-toggle, .sl-login-profile,
.sl-login-avatar, .sl-login-dropdown-form) and extract all magic numbers into
CSS custom properties under :root in base.css.
Core changes:
- CSS variables for login section (base.css):
Add 30
--sl-login-*custom properties for colors, sizes, padths, and layout- Colors:
--sl-login-link-color,--sl-login-pill-bg,--sl-login-avatar-border-color - Layout:
--sl-login-dropdown-width,--sl-login-field-width,--sl-login-avatar-size
- Colors:
- Login CSS refactoring (theme.css):
- Rename
.sl-login-top→.sl-login-top--headfor header context - Replace
.sl-dropdown-formwith.sl-login-dropdown-form(fully self-contained) - Replace
.sl-ava-min/.ava-minwith.sl-login-avatar(variable-driven) - Responsive overrides use CSS variable overrides instead of property repetition
- Adjust
#headerpadding: 36px → 24px;#containerpadding: 50px → 24px - Template updates (button.html, link.html, list.html, block-user-info.html, login-nav.html):
is_login_submit→ classsl-login-submit(no longer inherits button gradients)is_login_button→sl-login-link sl-login-link-topis_login_profile→sl-login-profile(pill bg applied via CSS, not button base)is_login_avatar→sl-login-avatarlogin-nav.html: inline form fields and hidden inputs, remove fragment indirection- Fix typo:
is_sl-logged→is_loggedin list.html condition - Add
.sl-login-top--blockmodifier toblock-user-info.html
Benefits:
- Semantic class names make intent clear without reading CSS
- CSS variables allow responsive breakpoint overrides via single rule block
- Reduced coupling: login styles no longer depend on button base classes
Technical notes:
.sl-login-topclass retained for backward compatibility in non-head contexts- Old
.sl-ava-min,.ava-minselectors removed (replaced by.sl-login-avatar) .sl-but-loginselector removed from shared inline-flex group
Migrates layout dimensions (container, sidebar, gutter, content width) to CSS variables, consolidates circular button styling into a reusable .sl-circle-action component, and replaces the legacy home-icon sprite with a Bootstrap Icon in the nav menu.
Core changes:
- Layout token system (base.css, theme.css):
Add --sl-container, --sl-sidebar, --sl-gutter, --sl-content to :root
- Sidebar, container padding and #sidebar margins now reference these tokens
- .sl-fullview children constrained to --sl-content max-width
Add --sl-size- and --sl-icon-size- / --sl-control-size scale tokens
- Used by .sl-circle-action, nav controls and contact icon
- .sl-circle-action component (theme.css):
New shared class for all circular action buttons (social, nav, search)
- Replaces per-selector sizing on .sl-top-social .sl-thd
- Hover gloss applied via .sl-circle-action:hover rule
- .sl-search-form replaces #qSearch id; search button now icon-only with aria-label
- Nav menu home link (menu.html, theme.css):
Replace .sl-ico.sl-i-home CSS sprite with bi-house-door-fill Bootstrap Icon
- New class .sl-home-link.sl-circle-action with hover color inversion
- #topmenu > ul > li > a uses --sl-nav-control-size for height/line-height/border-radius
- Social link semantics (app.html, home.html):
- rel="nofollow" → rel="me noopener"; RSS link gets rel="alternate" type="application/rss+xml"
- Added aria-label on all social anchors and search button
- "Мы в Twitter" title corrected to "Мы в X"
Benefits:
- Single source of truth for sidebar/gutter dimensions — one token change resizes the layout
- .sl-circle-action eliminates duplicated sizing rules across social, search, and nav controls
- Improved accessibility via aria-label on icon-only interactive elements
Technical notes:
- .sl-thd class retained on social anchors for backward compatibility with JS hooks
- min() replaces width+max-width pair for .sl-wrp at all responsive breakpoints
- 560px breakpoint gains d-pane, footer grid, partners, and marquee responsive fixes
Remove the legacy String.prototype.AddMail JS method (email is now a
plain mailto: link). Replace setTimeout string-eval in FlyBasket with
a proper closure. Update site_logo to wordmark variant and rotate sitekey.
Add is_account_button: true to register_link so the template renders
it with the neutral button style.
Core changes:
- global-func.js:
- Remove
String.prototype.AddMail(anti-spam obfuscation no longer needed) - Replace
setTimeout('FlyBasket("'+productId+'")', 10)with closure form - config/global.php:
site_logo: mark → wordmark SVG variantsitekey: rotated to new value- core/system.php (setHead):
register_link: add'is_account_button' => trueso button.html/link.html renders it withsl-but-neutralclass
Replace color-literal class names with their semantic equivalents as
defined by the new CSS button system. Also update login-button markup
to use sl-but-primary directly instead of the legacy sl-ico sl-login-btn
approach, and map is_footer_button to sl-but-warning.
Mapping: sl-but → sl-but-neutral sl-but-blue → sl-but-primary sl-but-green → sl-but-success sl-but-red → sl-but-danger sl-but-back → sl-but-accent sl-but-foot → sl-but-warning sl-ico sl-login-btn → sl-but-primary sl-login-btn (profile) → sl-but-login sl-but-primary
Core changes:
Fragments (button.html, link.html, span.html, inline-badge.html, comment-action-ajax.html, editor-action-menu.html, block-login-form.html, block-search-form.html):
- Apply full rename mapping to all conditional class expressions
Partials (account-profile.html, block-user-info.html, login-nav.html, main-slider.html, toastui-upload-panel.html):
- Apply rename mapping consistently
Benefits:
- All templates now reference semantic class names only
- Removes dependency on color-named CSS classes
Replace plain text logo with <img> tag using the configured logo
file. Restructure topbar to add GitHub, docs (DE/EN), and recommend
links with Bootstrap Icons. Remove deprecated sl-top-links list.
Update footer contact list from sl-ico classes to inline <i> icons
and expose email as a plain mailto: link (replaces AddMail script).
Core changes:
- Header logo (app.html, home.html):
<a class="sl-logo">{{ sitename }}</a>→<a><img src="logos/{{ logo }}">- Alt/title built from sitename + slogan
- Topbar social bar:
- Wrap in new
sl-top-right > sl-top-socialstructure - Add GitHub, YouTube (full URL), Twitter/X, docs-DE, docs-EN, recommend
- Each link gets a Bootstrap Icon
<i>witharia-hidden="true" - Remove
sl-top-linksul with recommend link - Contact section:
- Replace
sl-ico sl-i-*<li>classes with inlinebi-*icons - Expose email as
<a href="mailto:support@slaed.net">— no JS required - Button class updates (incidental to layout):
sl-but→sl-but-neutral,sl-but-blue→sl-but-primary