release: v0.20.0
This commit is contained in:
Ralksta
@@ -7,7 +7,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.analytics-header {
|
||||
@@ -54,11 +53,15 @@
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
/* Set like the Overview's stat numbers. `--font-mono` was never defined, so
|
||||
these fell through to the browser's bare `monospace`. Tabular figures keep
|
||||
the digits aligned without it. */
|
||||
.metric-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--admin-text);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.metric-sub {
|
||||
@@ -138,7 +141,8 @@
|
||||
font-size: 0.68rem;
|
||||
color: var(--admin-text-muted);
|
||||
margin-top: 0.5rem;
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.analytics-top-pages {
|
||||
@@ -154,14 +158,17 @@
|
||||
}
|
||||
|
||||
.page-rank {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.8rem;
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--admin-text-muted);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* min-width: 0 lets a long path wrap instead of pushing the page sideways. */
|
||||
.page-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
@@ -169,17 +176,23 @@
|
||||
|
||||
.page-path-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Paths are the one thing here set in monospace, as slugs are elsewhere. */
|
||||
.page-path {
|
||||
font-family: var(--font-mono, monospace);
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.page-count {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
@@ -202,6 +215,32 @@
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Phone width (QA A-18). The page was 513px wide at 390: a long path could
|
||||
not wrap (fixed above), and fourteen "09-19" labels broke over two lines
|
||||
under bars squeezed by 12px gaps. Panel padding and gaps tighten, and the
|
||||
label drops the month, which every bar's title still carries. */
|
||||
@media (max-width: 640px) {
|
||||
.analytics-panel {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.analytics-bar-chart {
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.bar-col {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bar-label-month {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-page-row {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-empty {
|
||||
margin: 0;
|
||||
padding: 2rem 1rem;
|
||||
|
||||
@@ -85,6 +85,13 @@
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* Small buttons carry short action labels ("+ Add Album", "Pick several");
|
||||
broken over two lines in a tight row they read as two buttons. */
|
||||
.admin-btn-sm,
|
||||
.admin-btn-xs {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-btn-sm {
|
||||
padding: 0 0.8rem;
|
||||
min-height: 30px;
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
/* Each check is one line with a severity dot: the point is scanning a list for
|
||||
the ones that are not green, not reading prose. Green ones recede. */
|
||||
|
||||
/* Fills the shared content column (--admin-content-width); the check details
|
||||
keep their own 70ch measure below. */
|
||||
.diag-page {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
|
||||
@@ -9,11 +9,62 @@
|
||||
}
|
||||
|
||||
.favicon-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.favicon-row input[type='file'] {
|
||||
font-size: 0.8rem;
|
||||
/* The current icon, on the input surface so a dark or a light icon both show. */
|
||||
.favicon-preview {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
box-sizing: content-box;
|
||||
object-fit: contain;
|
||||
background: var(--admin-bg-input);
|
||||
border: 1px solid var(--admin-border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* The native input stays in the tab order and the accessibility tree but out
|
||||
of sight: its "Choose File / No file chosen" box was the one raw browser
|
||||
control left in the admin (QA A-18). The label below is what is seen.
|
||||
Doubled class to outrank `.admin-field input`, which sizes every input. */
|
||||
.admin-field .favicon-file-input.favicon-file-input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* A <label>, so `.admin-field label` (block, uppercase caption) reaches it
|
||||
too; this puts the button back. */
|
||||
.admin-field .favicon-upload-btn {
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Focus lands on the hidden input; the ring is drawn on its label. */
|
||||
.favicon-file-input:focus-visible + .favicon-upload-btn {
|
||||
outline: var(--admin-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.favicon-file-input:disabled + .favicon-upload-btn {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.messages-count {
|
||||
@@ -113,6 +112,7 @@
|
||||
}
|
||||
|
||||
.messages-text {
|
||||
max-width: 70ch;
|
||||
margin: 0 0 1rem;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.55;
|
||||
|
||||
@@ -27,6 +27,14 @@
|
||||
--admin-sidebar-bg: #090909;
|
||||
--admin-radius: 4px;
|
||||
--admin-sidebar-width: 232px;
|
||||
/* The one outer content column every workspace screen shares. Pages,
|
||||
Overview and Diagnostics used to end at three different right edges
|
||||
(QA A-18). Up to a 1592px window every screen simply fills the
|
||||
workspace; wider, they all stop here instead of each at its own cap.
|
||||
Text inside keeps its own narrower measure (the 70ch details). Only the
|
||||
split editors (journal, content pages) break out of it. */
|
||||
--admin-content-width: 1280px;
|
||||
--admin-workspace-pad-x: 2.5rem;
|
||||
font-family: var(--admin-font);
|
||||
}
|
||||
|
||||
@@ -276,8 +284,8 @@
|
||||
}
|
||||
|
||||
.admin-workspace {
|
||||
max-width: 1180px;
|
||||
padding: 2.25rem 2.5rem 6rem;
|
||||
max-width: calc(var(--admin-content-width) + 2 * var(--admin-workspace-pad-x));
|
||||
padding: 2.25rem var(--admin-workspace-pad-x) 6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -338,21 +346,26 @@
|
||||
|
||||
/* Section and field labels in the site's caption voice. */
|
||||
.admin-layout .admin-field > label,
|
||||
.admin-layout .settings-group-title,
|
||||
.admin-layout .analytics-section-title h3 {
|
||||
.admin-layout .settings-group-title {
|
||||
font-family: var(--admin-font-label);
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* Panel headings are headings, not captions: the caption font made the
|
||||
analytics titles a mixed-case line of monospace (QA A-18). They read like
|
||||
the settings section headings; monospace stays with the paths. */
|
||||
.admin-layout .settings-section-header h3,
|
||||
.admin-layout .analytics-header h2 {
|
||||
.admin-layout .analytics-header h2,
|
||||
.admin-layout .analytics-section-title h3 {
|
||||
font-family: var(--admin-font);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Section icons stay neutral; the accent is not decoration. */
|
||||
.admin-layout .settings-section-header h3 svg,
|
||||
.admin-layout .analytics-header h2 svg {
|
||||
.admin-layout .analytics-header h2 svg,
|
||||
.admin-layout .analytics-section-title h3 svg {
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
@@ -463,6 +476,7 @@
|
||||
|
||||
.overview-attention-detail {
|
||||
display: block;
|
||||
max-width: 70ch;
|
||||
margin-top: 0.15rem;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 0.8rem;
|
||||
@@ -625,8 +639,8 @@
|
||||
/* The journal list is an ordinary screen and gets the workspace column; only
|
||||
the editor (split view) needs the full width journal-studio.css gives it. */
|
||||
.admin-app .admin-main:has(> .journal-studio) {
|
||||
max-width: 1180px;
|
||||
padding: 2.25rem 2.5rem 6rem;
|
||||
max-width: calc(var(--admin-content-width) + 2 * var(--admin-workspace-pad-x));
|
||||
padding: 2.25rem var(--admin-workspace-pad-x) 6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
@@ -701,12 +715,6 @@
|
||||
|
||||
/* ── Page builder: structure list + panel (stage 4) ────────── */
|
||||
|
||||
/* The builder uses the full workspace width: the list and the panel both
|
||||
need room, and the panel carries the live preview. */
|
||||
.admin-app .admin-main:has(.pb-split) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.pb-split {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
|
||||
@@ -52,6 +52,9 @@
|
||||
|
||||
.settings-content {
|
||||
min-width: 0;
|
||||
/* Room below the last input for the floating save bar (fixed, ~4rem tall
|
||||
at 1.5rem from the bottom), so it never sits on top of a field. */
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.settings-panel h3 {
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
flex: 1;
|
||||
/* Extra bottom padding so the floating save bar never covers page content. */
|
||||
padding: 1.5rem 1.5rem 6rem;
|
||||
max-width: 1120px;
|
||||
max-width: calc(var(--admin-content-width) + 3rem);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -142,12 +142,46 @@
|
||||
|
||||
.hero-demo-typographic {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.hero-demo-grid2 {
|
||||
.hero-demo-typographic .demo-line.title.giant {
|
||||
height: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero-demo-divider {
|
||||
width: 12%;
|
||||
height: 1px;
|
||||
margin: 0.1rem 0;
|
||||
background: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.hero-demo-nav {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-demo-nav .demo-line {
|
||||
width: 30%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.hero-demo-cover-splash {
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.hero-demo-enter {
|
||||
width: 22%;
|
||||
height: 6px;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hero-demo-mosaic {
|
||||
@@ -322,6 +356,31 @@
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.segment-btn:focus-visible {
|
||||
outline: var(--admin-focus-ring);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Compact size for toolbars: the editor's Visual Blocks / Raw Markdown, its
|
||||
preview's Desktop / Mobile and the subpage drawer's Edit / Live Preview.
|
||||
Replaces the inline padding the drawer used to carry. */
|
||||
.segmented-control--sm {
|
||||
padding: 2px;
|
||||
gap: 2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.segmented-control--sm .segment-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
min-height: 24px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Accent Color Swatches */
|
||||
.accent-picker-wrapper {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user