giles
8a5c115557
- Configurable page shell (~sx-page-shell kwargs + SX_SHELL app config) so each app controls its own assets — sx docs loads only sx-browser.js - SX-evaluated sx-on:* handlers (eval-expr instead of new Function) with DOM primitives registered in PRIMITIVES table - data-init boot mode for pure SX initialization scripts - Jiggle animation on links while fetching - Nav: 3-column grid for centered alignment, is-leaf sizing, fix map-indexed param order (index, item), guard mod-by-zero - Async route eval failure now falls back to server fetch instead of silently rendering nothing - Remove duplicate h1 title from ~doc-page - Re-bootstrap sx-ref.js + sx-browser.js Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.6 KiB
CSS
62 lines
1.6 KiB
CSS
:root {
|
|
--brand-color: var(--ghost-accent-color, #ff572f);
|
|
--primary-text-color: #333;
|
|
--secondary-text-color: #999;
|
|
--white-color: #fff;
|
|
--lighter-gray-color: #f6f6f6;
|
|
--light-gray-color: #e6e6e6;
|
|
--mid-gray-color: #ccc;
|
|
--dark-gray-color: #444;
|
|
--darker-gray-color: #1a1a1a;
|
|
--black-color: #000;
|
|
--green-color: #28a745;
|
|
--orange-color: #ffc107;
|
|
--red-color: #dc3545;
|
|
--facebook-color: #3b5998;
|
|
--twitter-color: #1da1f2;
|
|
--rss-color: #f26522;
|
|
--animation-base: ease-in-out;
|
|
--font-sans: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
|
|
--font-serif: Lora, Times, serif;
|
|
--navbar-height: 80px;
|
|
--content-font-size: 1.7rem;
|
|
--header-spacing: 6vmin;
|
|
}
|
|
|
|
.is-head-brand {
|
|
--header-spacing: 8vmin;
|
|
}
|
|
|
|
:where(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* sx example demos — on-demand CSS for interactive examples */
|
|
@keyframes sxFadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.sx-fade-in {
|
|
animation: sxFadeIn 0.5s ease-out;
|
|
}
|
|
.sx-loading-btn.sx-request {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
.sx-loading-btn.sx-request .sx-spinner {
|
|
display: inline-block;
|
|
}
|
|
.sx-loading-btn .sx-spinner {
|
|
display: none;
|
|
}
|
|
|
|
/* Subtle jiggle on links while fetching */
|
|
@keyframes sxJiggle {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-0.5px); }
|
|
75% { transform: translateX(0.5px); }
|
|
}
|
|
a.sx-request {
|
|
animation: sxJiggle 0.3s ease-in-out infinite;
|
|
}
|