Improve reader design (#3)
Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
[
|
||||
{
|
||||
"date": "2026-07-26",
|
||||
"macrostructure": "Workbench",
|
||||
"theme": "Garden",
|
||||
"enrichment": "none",
|
||||
"brief": "Personal read-only research client with a soft, deliberate workspace"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"date": "2026-07-26",
|
||||
"font_stack": "Inter / Noto Sans JP / system sans declared in src/styles.css",
|
||||
"palette": "CSS custom properties with muted teal hex values",
|
||||
"motion": "motion-cut; no motion library",
|
||||
"spacing": "no named scale",
|
||||
"framework": "React 19 + TanStack Start + Vite 8",
|
||||
"preserve": ["routes", "information architecture", "read-only behavior"]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 58 KiB |
@@ -10,7 +10,7 @@ export function AppShell({
|
||||
return (
|
||||
<main className="app">
|
||||
<header className="app-header">
|
||||
<p className="brand">TWITTER LITE</p>
|
||||
<p className="brand">Twitter Lite</p>
|
||||
<nav aria-label="閲覧方法" className="tabs">
|
||||
<Link aria-current={active === 'user' ? 'page' : undefined} to="/">
|
||||
ユーザー
|
||||
|
||||
@@ -31,7 +31,7 @@ export function ListPage({ listId = '' }: { listId?: string }) {
|
||||
|
||||
return (
|
||||
<AppShell active="list">
|
||||
<h1>どのリストを読みますか？</h1>
|
||||
<h1 className="reader-title-long">どのリストを読みますか？</h1>
|
||||
<p className="intro">
|
||||
自分のリストを選ぶか、リストURLを入力してください。
|
||||
</p>
|
||||
|
||||
+598
-21
@@ -1,18 +1,25 @@
|
||||
/* Hallmark · genre: editorial · macrostructure: Workbench · theme: Garden · enrichment: none
|
||||
* tone: soft · anchor: leaf-green · nav: N3 · footer: none (app shell)
|
||||
* contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
|
||||
*/
|
||||
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
|
||||
@import "../tokens.css";
|
||||
|
||||
:root {
|
||||
--canvas: #dfe7e9;
|
||||
--surface: #f8faf9;
|
||||
--paper: #fff;
|
||||
--ink: #1e3238;
|
||||
--secondary: #506970;
|
||||
--accent: #255f6e;
|
||||
--accent-hover: #194d59;
|
||||
--border: #c1cfd2;
|
||||
--control-border: #748b91;
|
||||
--error: #8a3034;
|
||||
--canvas: var(--color-canvas);
|
||||
--surface: var(--color-paper-2);
|
||||
--paper: var(--color-paper);
|
||||
--ink: var(--color-ink);
|
||||
--secondary: var(--color-muted);
|
||||
--accent: var(--color-accent);
|
||||
--accent-hover: var(--color-accent-hover);
|
||||
--border: var(--color-rule);
|
||||
--control-border: var(--color-control-rule);
|
||||
--error: var(--color-error);
|
||||
color: var(--ink);
|
||||
background: var(--canvas);
|
||||
color-scheme: light;
|
||||
font-family: Inter, "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
|
||||
font-family: var(--font-body);
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
@@ -22,12 +29,14 @@
|
||||
|
||||
html {
|
||||
min-width: 320px;
|
||||
overflow-x: clip;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
button,
|
||||
@@ -40,9 +49,19 @@ a {
|
||||
text-underline-offset: 0.18em;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
a[aria-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 3px;
|
||||
outline: var(--rule-active) solid var(--color-focus);
|
||||
outline-offset: var(--space-2xs);
|
||||
}
|
||||
|
||||
.app {
|
||||
@@ -53,7 +72,7 @@ a {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1.15rem;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1.2rem 3rem rgb(30 50 56 / 10%);
|
||||
box-shadow: 0 var(--space-lg) var(--space-2xl) var(--color-shadow);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@@ -163,7 +182,7 @@ a {
|
||||
|
||||
.list-choices a[aria-current="page"] {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 7%, var(--paper));
|
||||
background: color-mix(in oklch, var(--accent) 7%, var(--paper));
|
||||
box-shadow: inset 3px 0 var(--accent);
|
||||
}
|
||||
|
||||
@@ -191,7 +210,7 @@ a {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
|
||||
background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
|
||||
}
|
||||
|
||||
.field {
|
||||
@@ -352,7 +371,7 @@ a {
|
||||
|
||||
.current-post {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent);
|
||||
}
|
||||
|
||||
.post-header {
|
||||
@@ -401,7 +420,7 @@ a {
|
||||
margin-top: 0.8rem;
|
||||
overflow: hidden;
|
||||
border-radius: 0.75rem;
|
||||
background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
|
||||
background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
|
||||
}
|
||||
|
||||
.media-grid > :only-child {
|
||||
@@ -412,7 +431,7 @@ a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 32rem;
|
||||
background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
|
||||
background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
|
||||
}
|
||||
|
||||
img.media {
|
||||
@@ -503,7 +522,7 @@ video.media {
|
||||
transparent 100%
|
||||
);
|
||||
content: "";
|
||||
animation: rail 1.1s ease-in-out infinite;
|
||||
animation: rail 1.1s var(--ease-in-out) infinite;
|
||||
}
|
||||
|
||||
@keyframes rail {
|
||||
@@ -585,7 +604,7 @@ video.media {
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
@@ -603,3 +622,561 @@ video.media {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Workbench layout: the routes are tools on a quiet side rail. */
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
width: 100%;
|
||||
min-height: 100svh;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: var(--paper);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: grid;
|
||||
align-items: start;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-lg) var(--space-md) 0;
|
||||
border-bottom: var(--rule-hairline) solid var(--border);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-md);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.reader > .reader-title-long {
|
||||
font-size: var(--text-display-long);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
min-height: 2.75rem;
|
||||
justify-content: center;
|
||||
padding: var(--space-sm) var(--space-xs);
|
||||
border-bottom: var(--rule-active) solid transparent;
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
color var(--dur-short) var(--ease-out),
|
||||
background-color var(--dur-short) var(--ease-out);
|
||||
}
|
||||
|
||||
.tabs a[aria-current="page"] {
|
||||
border-bottom-color: var(--accent);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reader {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: var(--space-xl) var(--space-md) var(--space-2xl);
|
||||
}
|
||||
|
||||
.reader > h1 {
|
||||
max-width: 18ch;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-s);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-width: 46ch;
|
||||
margin: var(--space-sm) 0 var(--space-xl);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.intent-form {
|
||||
gap: var(--space-md);
|
||||
align-items: end;
|
||||
padding: var(--space-lg);
|
||||
border: 0;
|
||||
border-block: var(--rule-hairline) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.field {
|
||||
gap: 0;
|
||||
grid-template-rows: auto auto minmax(1lh, auto);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.field > span:first-child {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.field input {
|
||||
min-height: 2.75rem;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: var(--rule-hairline) solid var(--control-border);
|
||||
border-radius: var(--radius-sm);
|
||||
outline: var(--rule-active) solid transparent;
|
||||
outline-offset: var(--space-3xs);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
transition: background-color var(--dur-short) var(--ease-out);
|
||||
}
|
||||
|
||||
.field input::placeholder {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.field input:focus-visible {
|
||||
border-color: var(--control-border);
|
||||
outline-color: var(--color-focus);
|
||||
}
|
||||
|
||||
.field input[aria-invalid="true"] {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.field input:disabled {
|
||||
border-color: var(--border);
|
||||
background: var(--color-paper-3);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
min-height: 1lh;
|
||||
margin-top: var(--space-2xs);
|
||||
color: var(--error);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.intent-form button,
|
||||
.list-picker-state button,
|
||||
.state button {
|
||||
min-height: 2.75rem;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border: var(--rule-hairline) solid var(--accent);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--paper);
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color var(--dur-short) var(--ease-out),
|
||||
color var(--dur-short) var(--ease-out),
|
||||
transform var(--dur-instant) var(--ease-out);
|
||||
}
|
||||
|
||||
.intent-form button:active,
|
||||
.list-picker-state button:active,
|
||||
.state button:active {
|
||||
transform: translateY(var(--rule-hairline));
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button[aria-disabled="true"] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
button[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
button[data-state="error"] {
|
||||
border-color: var(--error);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
button[data-state="success"] {
|
||||
border-color: var(--color-success);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.segmented {
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.segmented legend {
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.segmented label {
|
||||
min-height: 2.75rem;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: var(--rule-hairline) solid var(--control-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-size: var(--text-sm);
|
||||
transition:
|
||||
background-color var(--dur-short) var(--ease-out),
|
||||
color var(--dur-short) var(--ease-out);
|
||||
}
|
||||
|
||||
.segmented label:has(input:checked) {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--color-accent-ink);
|
||||
}
|
||||
|
||||
.segmented label:has(input:focus-visible) {
|
||||
outline: var(--rule-active) solid var(--color-focus);
|
||||
outline-offset: var(--space-3xs);
|
||||
}
|
||||
|
||||
.segmented label:active {
|
||||
background: var(--color-paper-3);
|
||||
}
|
||||
|
||||
.segmented label:has(input:disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.check {
|
||||
min-height: 2.75rem;
|
||||
gap: var(--space-xs);
|
||||
color: var(--ink);
|
||||
font-size: var(--text-sm);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-picker {
|
||||
margin-bottom: var(--space-xl);
|
||||
padding: var(--space-lg);
|
||||
border: 0;
|
||||
border-block: var(--rule-hairline) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.list-picker h2 {
|
||||
margin: 0 0 var(--space-md);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-md);
|
||||
font-style: normal;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.list-picker-state {
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.list-choices {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.list-choices a {
|
||||
gap: var(--space-2xs);
|
||||
padding: var(--space-md) var(--space-sm);
|
||||
border: 0;
|
||||
border-bottom: var(--rule-hairline) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.list-choices li:first-child a {
|
||||
border-top: var(--rule-hairline) solid var(--border);
|
||||
}
|
||||
|
||||
.list-choices a[aria-current="page"] {
|
||||
border-color: var(--border);
|
||||
background: var(--color-paper-3);
|
||||
box-shadow: inset var(--rule-active) 0 var(--accent);
|
||||
}
|
||||
|
||||
.list-choices small,
|
||||
.list-choices p {
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.focal-post,
|
||||
.feed {
|
||||
gap: 0;
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.focal-label {
|
||||
margin: 0 0 var(--space-sm);
|
||||
color: var(--accent);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.feed {
|
||||
border-top: var(--rule-hairline) solid var(--border);
|
||||
}
|
||||
|
||||
.post {
|
||||
min-width: 0;
|
||||
padding: var(--space-lg) 0;
|
||||
border: 0;
|
||||
border-bottom: var(--rule-hairline) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.current-post {
|
||||
padding-inline: var(--space-lg);
|
||||
border: var(--rule-hairline) solid var(--accent);
|
||||
background: var(--paper);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.handle,
|
||||
.post-header time {
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.post-text {
|
||||
margin: var(--space-md) 0;
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.media {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.article-card,
|
||||
.quote {
|
||||
margin-top: var(--space-md);
|
||||
padding: var(--space-md) 0 var(--space-md) var(--space-lg);
|
||||
border: 0;
|
||||
border-left: var(--rule-active) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
gap: var(--space-sm) var(--space-lg);
|
||||
margin-top: var(--space-lg);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.post-footer a {
|
||||
min-height: 2.75rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.state {
|
||||
margin: var(--space-xl) 0 0;
|
||||
padding: var(--space-lg);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.loading-rail {
|
||||
padding: var(--space-md);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.loading-rail::after {
|
||||
height: var(--rule-active);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.tabs a:hover {
|
||||
background: var(--surface);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.field input:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.intent-form button:hover,
|
||||
.list-picker-state button:hover,
|
||||
.state button:hover {
|
||||
border-color: var(--accent-hover);
|
||||
background: var(--accent);
|
||||
color: var(--color-accent-ink);
|
||||
}
|
||||
|
||||
.segmented label:hover {
|
||||
border-color: var(--control-border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.segmented label:has(input:checked):hover {
|
||||
border-color: var(--accent-hover);
|
||||
background: var(--accent-hover);
|
||||
color: var(--color-accent-ink);
|
||||
}
|
||||
|
||||
.list-choices a:hover {
|
||||
border-color: var(--border);
|
||||
background: var(--color-paper-3);
|
||||
color: var(--ink);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.intent-form {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.intent-form:has(.segmented) {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.intent-form:has(.segmented) .field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.intent-form:not(:has(.segmented)) > button {
|
||||
align-self: start;
|
||||
margin-top: calc(1lh + var(--space-xs));
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.post-header {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.post-header time {
|
||||
grid-column: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
body {
|
||||
padding-block: var(--space-lg);
|
||||
padding-inline: var(--space-xl);
|
||||
}
|
||||
|
||||
.app {
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 13.5rem minmax(0, 1fr);
|
||||
width: min(74rem, 100%);
|
||||
min-height: calc(100svh - (var(--space-lg) * 2));
|
||||
margin: 0 auto;
|
||||
border: var(--rule-hairline) solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 var(--space-lg) var(--space-2xl) var(--color-shadow);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: var(--space-lg);
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
align-self: start;
|
||||
gap: var(--space-xl);
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
border-right: var(--rule-hairline) solid var(--border);
|
||||
border-bottom: 0;
|
||||
border-radius: var(--radius-lg) 0 0 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.tabs a {
|
||||
justify-content: flex-start;
|
||||
padding-inline: var(--space-md);
|
||||
border-bottom: 0;
|
||||
border-left: var(--rule-active) solid transparent;
|
||||
}
|
||||
|
||||
.tabs a[aria-current="page"] {
|
||||
border-bottom: 0;
|
||||
border-left-color: var(--accent);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.reader {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
max-width: none;
|
||||
padding: var(--space-2xl) clamp(var(--space-xl), 6vw, var(--space-2xl))
|
||||
var(--space-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.tabs a,
|
||||
.field input,
|
||||
.intent-form button,
|
||||
.list-picker-state button,
|
||||
.state button,
|
||||
.segmented label {
|
||||
transition-duration: var(--dur-instant);
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
/* Hallmark · macrostructure: Workbench · tone: soft · anchor hue: leaf-green */
|
||||
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
|
||||
:root {
|
||||
--color-canvas: oklch(93% 0.018 125);
|
||||
--color-paper: oklch(98% 0.01 100);
|
||||
--color-paper-2: oklch(95% 0.018 115);
|
||||
--color-paper-3: oklch(90% 0.026 125);
|
||||
--color-ink: oklch(23% 0.025 145);
|
||||
--color-ink-2: oklch(32% 0.03 145);
|
||||
--color-muted: oklch(42% 0.026 145);
|
||||
--color-accent: oklch(38% 0.09 145);
|
||||
--color-accent-hover: oklch(31% 0.085 145);
|
||||
--color-accent-ink: oklch(98% 0.01 100);
|
||||
--color-rule: oklch(80% 0.025 125);
|
||||
--color-control-rule: oklch(55% 0.035 135);
|
||||
--color-focus: oklch(45% 0.15 65);
|
||||
--color-error: oklch(42% 0.13 25);
|
||||
--color-success: oklch(38% 0.1 145);
|
||||
--color-shadow: oklch(23% 0.025 145 / 10%);
|
||||
|
||||
--font-display:
|
||||
"YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", ui-serif, serif;
|
||||
--font-body:
|
||||
"Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", ui-sans-serif, sans-serif;
|
||||
|
||||
--space-3xs: 0.125rem;
|
||||
--space-2xs: 0.25rem;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 0.75rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2.5rem;
|
||||
--space-2xl: 4rem;
|
||||
--space-3xl: 6rem;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-md: 1.25rem;
|
||||
--text-lg: 1.5625rem;
|
||||
--text-xl: 1.9531rem;
|
||||
--text-display-s: clamp(1.75rem, 7.4vw + 0.25rem, 2.75rem);
|
||||
--text-display-long: clamp(1.5rem, 5.5vw + 0.4rem, 2.75rem);
|
||||
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--dur-instant: 100ms;
|
||||
--dur-short: 200ms;
|
||||
--dur-medium: 420ms;
|
||||
|
||||
--rule-hairline: 1px;
|
||||
--rule-active: 2px;
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.625rem;
|
||||
--radius-lg: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user