@story-map/react-story-map 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -0
- package/dist/StoryMap.d.ts +4 -1
- package/dist/StoryMap.d.ts.map +1 -1
- package/dist/StoryMap.js +35 -4
- package/dist/StoryMap.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +4 -3
- package/src/styles.css +43 -19
package/README.md
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# @story-map/react-story-map
|
|
2
|
+
|
|
3
|
+
React renderer for StoryMap slides, with a Leaflet map, Markdown text, media, and
|
|
4
|
+
previous/next navigation. Requires React and React DOM 19.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```sh
|
|
9
|
+
npm install @story-map/react-story-map react@^19 react-dom@^19 leaflet@^1.9.4
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Leaflet is also a package dependency; installing it directly makes its stylesheet
|
|
13
|
+
available to your application's bundler. Import both stylesheets once in your app's
|
|
14
|
+
global CSS entry or root component:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import 'leaflet/dist/leaflet.css';
|
|
18
|
+
import '@story-map/react-story-map/styles.css';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
The renderer does not import either stylesheet automatically. Your host must bundle
|
|
22
|
+
them and provide a visible container height.
|
|
23
|
+
|
|
24
|
+
## Minimal example
|
|
25
|
+
|
|
26
|
+
Use this as `src/main.tsx` in a React 19 application with a CSS-aware bundler such
|
|
27
|
+
as Vite and an HTML `<div id="root"></div>`:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { createRoot } from 'react-dom/client';
|
|
31
|
+
import { StoryMap, type StoryMapConfig } from '@story-map/react-story-map';
|
|
32
|
+
import 'leaflet/dist/leaflet.css';
|
|
33
|
+
import '@story-map/react-story-map/styles.css';
|
|
34
|
+
|
|
35
|
+
const story: StoryMapConfig = {
|
|
36
|
+
schema: 'storymap/v1',
|
|
37
|
+
title: 'A walk through Taipei',
|
|
38
|
+
height: '520px',
|
|
39
|
+
map: {
|
|
40
|
+
zoom: 14,
|
|
41
|
+
tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
42
|
+
attribution: '© OpenStreetMap contributors',
|
|
43
|
+
showPath: true,
|
|
44
|
+
},
|
|
45
|
+
slides: [
|
|
46
|
+
{
|
|
47
|
+
title: 'Taipei Main Station',
|
|
48
|
+
text: 'Start your **walking tour** here.',
|
|
49
|
+
location: { lat: 25.0478, lng: 121.517 },
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
title: 'Dihua Street',
|
|
53
|
+
text: 'Explore the historic street.',
|
|
54
|
+
location: { lat: 25.0555, lng: 121.5097 },
|
|
55
|
+
notePath: '/notes/dihua-street',
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
createRoot(document.getElementById('root')!).render(<StoryMap story={story} />);
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Keep the `story` object stable between unrelated React renders. The renderer
|
|
64
|
+
recreates its Leaflet map when the story changes. The example requests map tiles
|
|
65
|
+
from OpenStreetMap; supply your own `tileUrl` and attribution for another provider.
|
|
66
|
+
|
|
67
|
+
For YAML parsing and built-in defaults, use the separate
|
|
68
|
+
`@story-map/story-map-core` package. This renderer accepts resolved
|
|
69
|
+
`StoryMapConfig` data; the host resolves note contents, folder discovery, routes,
|
|
70
|
+
and media URLs before rendering.
|
|
71
|
+
|
|
72
|
+
## Props
|
|
73
|
+
|
|
74
|
+
| Prop | Type / default | Purpose |
|
|
75
|
+
| --- | --- | --- |
|
|
76
|
+
| `story` | `StoryMapConfig`, required | Resolved story with map options and ordered slides. |
|
|
77
|
+
| `initialSlide` | `number`, `0` | Zero-based initial slide index, clamped to the available slides. |
|
|
78
|
+
| `className` | `string` | Additional class on the outer section. |
|
|
79
|
+
| `onSlideChange` | `(index: number, slide: StorySlide) => void` | Called for the active slide, including initial rendering. |
|
|
80
|
+
| `onNoteClick` | `(notePath: string, event: MouseEvent) => void` | Host navigation handler for a linked slide title. |
|
|
81
|
+
| `onNoteHover` | `(notePath: string, targetEl: HTMLElement, event: MouseEvent) => void` | Host preview handler for a linked slide title. |
|
|
82
|
+
| `noteLinkClassName` | `string` | Additional class on linked slide titles. |
|
|
83
|
+
|
|
84
|
+
Without note callbacks, a slide's `notePath` becomes a normal anchor `href`.
|
|
85
|
+
Providing either note callback prevents default click navigation; provide
|
|
86
|
+
`onNoteClick` as well if your host needs clicks to navigate. A title without
|
|
87
|
+
`notePath` renders as plain text. Slide text supports Markdown and GitHub-flavored
|
|
88
|
+
Markdown; note WikiLinks and embeds must be resolved by the host if needed.
|
|
89
|
+
|
|
90
|
+
`StoryMapProps`, `StoryMapConfig`, `StoryMapOptions`, `StoryNoteDisplay`,
|
|
91
|
+
`StorySlide`, `StoryLocation`, and `StoryMedia` are exported as TypeScript types.
|
|
92
|
+
|
|
93
|
+
## Server rendering
|
|
94
|
+
|
|
95
|
+
The JavaScript entry is safe to import during SSR. Leaflet loads dynamically in a
|
|
96
|
+
client effect, so the map is initialized only in the browser. The server can render
|
|
97
|
+
the slide panel and the client hydrates it. Import CSS through your framework's
|
|
98
|
+
supported global stylesheet entry. The renderer cleans up its map on unmount and
|
|
99
|
+
uses `ResizeObserver`, when available, to refresh map sizing after layout changes.
|
|
100
|
+
|
|
101
|
+
## Theme
|
|
102
|
+
|
|
103
|
+
Set these semantic CSS variables on the StoryMap or an ancestor to match your host:
|
|
104
|
+
|
|
105
|
+
```css
|
|
106
|
+
.my-story-theme {
|
|
107
|
+
--story-map-bg: #18212f;
|
|
108
|
+
--story-map-fg: #f3f4f6;
|
|
109
|
+
--story-map-muted: #cbd5e1;
|
|
110
|
+
--story-map-border: #475569;
|
|
111
|
+
--story-map-accent: #93c5fd;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
<StoryMap story={story} className="my-story-theme" />
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
These variables style the panel, text, links, borders, and navigation. The tile
|
|
120
|
+
provider controls the underlying map imagery.
|
|
121
|
+
|
|
122
|
+
## License
|
|
123
|
+
|
|
124
|
+
MIT.
|
package/dist/StoryMap.d.ts
CHANGED
|
@@ -4,6 +4,9 @@ export interface StoryMapProps {
|
|
|
4
4
|
initialSlide?: number;
|
|
5
5
|
className?: string;
|
|
6
6
|
onSlideChange?: (index: number, slide: StorySlide) => void;
|
|
7
|
+
onNoteClick?: (notePath: string, event: MouseEvent) => void;
|
|
8
|
+
onNoteHover?: (notePath: string, targetEl: HTMLElement, event: MouseEvent) => void;
|
|
9
|
+
noteLinkClassName?: string;
|
|
7
10
|
}
|
|
8
|
-
export declare function StoryMap({ story, initialSlide, className, onSlideChange }: StoryMapProps): import("react").JSX.Element;
|
|
11
|
+
export declare function StoryMap({ story, initialSlide, className, onSlideChange, onNoteClick, onNoteHover, noteLinkClassName, }: StoryMapProps): import("react").JSX.Element;
|
|
9
12
|
//# sourceMappingURL=StoryMap.d.ts.map
|
package/dist/StoryMap.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StoryMap.d.ts","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"StoryMap.d.ts","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAgB,EAChB,SAAS,EACT,aAAa,EACb,WAAW,EACX,WAAW,EACX,iBAAiB,GAClB,EAAE,aAAa,+BAqKf"}
|
package/dist/StoryMap.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import ReactMarkdown from 'react-markdown';
|
|
4
4
|
import remarkGfm from 'remark-gfm';
|
|
5
|
-
export function StoryMap({ story, initialSlide = 0, className, onSlideChange }) {
|
|
5
|
+
export function StoryMap({ story, initialSlide = 0, className, onSlideChange, onNoteClick, onNoteHover, noteLinkClassName, }) {
|
|
6
6
|
const mapElementRef = useRef(null);
|
|
7
7
|
const mapRef = useRef(null);
|
|
8
8
|
const markerLayerRef = useRef(null);
|
|
@@ -65,25 +65,56 @@ export function StoryMap({ story, initialSlide = 0, className, onSlideChange })
|
|
|
65
65
|
};
|
|
66
66
|
}, [story, locatedSlides]);
|
|
67
67
|
useEffect(() => {
|
|
68
|
-
const location = activeSlide
|
|
68
|
+
const location = activeSlide?.location;
|
|
69
69
|
if (location && mapRef.current) {
|
|
70
70
|
mapRef.current.flyTo([location.lat, location.lng], location.zoom ?? story.map.zoom, { duration: 1.1 });
|
|
71
71
|
}
|
|
72
72
|
updateMarkerStyles(story, activeIndex, markersRef.current);
|
|
73
|
-
|
|
73
|
+
if (activeSlide)
|
|
74
|
+
onSlideChange?.(activeIndex, activeSlide);
|
|
74
75
|
}, [activeIndex, activeSlide, onSlideChange, story]);
|
|
75
76
|
useEffect(() => {
|
|
76
77
|
setActiveIndex((current) => clamp(current, 0, story.slides.length - 1));
|
|
77
78
|
}, [story.slides.length]);
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
const element = mapElementRef.current;
|
|
81
|
+
if (!element || typeof ResizeObserver === 'undefined')
|
|
82
|
+
return;
|
|
83
|
+
const observer = new ResizeObserver(() => {
|
|
84
|
+
mapRef.current?.invalidateSize();
|
|
85
|
+
});
|
|
86
|
+
observer.observe(element);
|
|
87
|
+
return () => observer.disconnect();
|
|
88
|
+
}, []);
|
|
78
89
|
function goTo(next) {
|
|
79
90
|
setActiveIndex(clamp(next, 0, story.slides.length - 1));
|
|
80
91
|
}
|
|
92
|
+
if (!activeSlide) {
|
|
93
|
+
return (_jsx("section", { className: ['story-map', className].filter(Boolean).join(' '), style: { height: story.height }, "aria-label": story.title ?? 'Story map', children: _jsx("div", { className: "story-map__empty", children: "This StoryMap has no slides." }) }));
|
|
94
|
+
}
|
|
81
95
|
return (_jsxs("section", { className: ['story-map', className].filter(Boolean).join(' '), style: { height: story.height }, tabIndex: 0, "aria-label": story.title ?? 'Story map', onKeyDown: (event) => {
|
|
82
96
|
if (event.key === 'ArrowLeft')
|
|
83
97
|
goTo(activeIndex - 1);
|
|
84
98
|
if (event.key === 'ArrowRight')
|
|
85
99
|
goTo(activeIndex + 1);
|
|
86
|
-
}, children: [_jsx("div", { className: "story-map__map", ref: mapElementRef }), _jsxs("
|
|
100
|
+
}, children: [_jsx("div", { className: "story-map__map", ref: mapElementRef }), _jsxs("div", { className: "story-map__panel", children: [story.title && _jsx("div", { className: "story-map__story-title", children: story.title }), _jsx(SlideTitle, { slide: activeSlide, onNoteClick: onNoteClick, onNoteHover: onNoteHover, noteLinkClassName: noteLinkClassName }), _jsx(StoryMediaView, { slide: activeSlide }), activeSlide.text && (_jsx("div", { className: "story-map__text", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: activeSlide.text }) })), _jsxs("nav", { className: "story-map__nav", "aria-label": "Story navigation", children: [_jsx("button", { type: "button", disabled: activeIndex === 0, onClick: () => goTo(activeIndex - 1), children: "Previous" }), _jsxs("span", { children: [activeIndex + 1, " / ", story.slides.length] }), _jsx("button", { type: "button", disabled: activeIndex === story.slides.length - 1, onClick: () => goTo(activeIndex + 1), children: "Next" })] })] })] }));
|
|
101
|
+
}
|
|
102
|
+
function SlideTitle({ slide, onNoteClick, onNoteHover, noteLinkClassName, }) {
|
|
103
|
+
if (!slide.title)
|
|
104
|
+
return null;
|
|
105
|
+
const notePath = slide.notePath;
|
|
106
|
+
if (notePath === undefined)
|
|
107
|
+
return _jsx("h2", { children: slide.title });
|
|
108
|
+
const linkClassName = ['story-map__note-link', noteLinkClassName].filter(Boolean).join(' ');
|
|
109
|
+
if (onNoteClick === undefined && onNoteHover === undefined) {
|
|
110
|
+
return (_jsx("h2", { children: _jsx("a", { className: linkClassName, href: notePath, children: slide.title }) }));
|
|
111
|
+
}
|
|
112
|
+
return (_jsx("h2", { children: _jsx("a", { className: linkClassName, href: notePath, "data-href": notePath, onClick: (event) => {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
onNoteClick?.(notePath, event.nativeEvent);
|
|
115
|
+
}, onMouseOver: (event) => {
|
|
116
|
+
onNoteHover?.(notePath, event.currentTarget, event.nativeEvent);
|
|
117
|
+
}, children: slide.title }) }));
|
|
87
118
|
}
|
|
88
119
|
function StoryMediaView({ slide }) {
|
|
89
120
|
const media = slide.media;
|
package/dist/StoryMap.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StoryMap.js","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"StoryMap.js","sourceRoot":"","sources":["../src/StoryMap.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { StoryMap } from './StoryMap.js';
|
|
2
2
|
export type { StoryMapProps } from './StoryMap.js';
|
|
3
|
-
export type { StoryMapConfig, StoryMapOptions, StorySlide, StoryLocation, StoryMedia, } from '@story-map/story-map-core';
|
|
3
|
+
export type { StoryMapConfig, StoryMapOptions, StoryNoteDisplay, StorySlide, StoryLocation, StoryMedia, } from '@story-map/story-map-core';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EACV,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,UAAU,GACX,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,UAAU,GACX,MAAM,2BAA2B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@story-map/react-story-map",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "React and Leaflet renderer for the StoryMap v1 config format.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "git+https://github.com/kywk/story-map
|
|
8
|
+
"url": "git+https://github.com/kywk/story-map.git",
|
|
9
9
|
"directory": "packages/react-story-map"
|
|
10
10
|
},
|
|
11
11
|
"publishConfig": {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"src/styles.css"
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@story-map/story-map-core": "0.
|
|
30
|
+
"@story-map/story-map-core": "0.2.0",
|
|
31
31
|
"leaflet": "^1.9.4",
|
|
32
32
|
"react-markdown": "^10.1.0",
|
|
33
33
|
"remark-gfm": "^4.0.1"
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "tsc -b",
|
|
46
46
|
"typecheck": "tsc -b",
|
|
47
|
+
"test": "vitest run",
|
|
47
48
|
"clean": "rm -rf dist tsconfig.tsbuildinfo"
|
|
48
49
|
}
|
|
49
50
|
}
|
package/src/styles.css
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
.story-map {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--story-map-
|
|
2
|
+
/* Host-overridable semantic variables. Hosts (e.g. the Docusaurus/Infima
|
|
3
|
+
bridge on .story-map-host) set --story-map-* on an ancestor, so the
|
|
4
|
+
renderer must not re-declare them here. These private fallback variables
|
|
5
|
+
only provide defaults when no host sets the semantic variables. */
|
|
6
|
+
--story-map-bg-fallback: var(--background-primary, #ffffff);
|
|
7
|
+
--story-map-fg-fallback: var(--text-normal, #1f2937);
|
|
8
|
+
--story-map-muted-fallback: var(--text-muted, #6b7280);
|
|
9
|
+
--story-map-border-fallback: var(--background-modifier-border, rgba(0, 0, 0, 0.14));
|
|
10
|
+
--story-map-accent-fallback: var(--interactive-accent, #2563eb);
|
|
7
11
|
|
|
8
12
|
position: relative;
|
|
9
13
|
width: 100%;
|
|
10
14
|
min-height: 360px;
|
|
11
15
|
overflow: hidden;
|
|
12
|
-
border: 1px solid var(--story-map-border);
|
|
16
|
+
border: 1px solid var(--story-map-border, var(--story-map-border-fallback));
|
|
13
17
|
border-radius: 12px;
|
|
14
|
-
background: var(--story-map-bg);
|
|
15
|
-
color: var(--story-map-fg);
|
|
18
|
+
background: var(--story-map-bg, var(--story-map-bg-fallback));
|
|
19
|
+
color: var(--story-map-fg, var(--story-map-fg-fallback));
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
.story-map:focus-visible {
|
|
19
|
-
outline: 2px solid var(--story-map-accent);
|
|
23
|
+
outline: 2px solid var(--story-map-accent, var(--story-map-accent-fallback));
|
|
20
24
|
outline-offset: 2px;
|
|
21
25
|
}
|
|
22
26
|
|
|
@@ -26,7 +30,16 @@
|
|
|
26
30
|
z-index: 0;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
|
-
.story-
|
|
33
|
+
.story-map__empty {
|
|
34
|
+
display: grid;
|
|
35
|
+
place-items: center;
|
|
36
|
+
height: 100%;
|
|
37
|
+
min-height: 200px;
|
|
38
|
+
color: var(--story-map-muted, var(--story-map-muted-fallback));
|
|
39
|
+
font-size: 0.9rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.story-map .story-map__panel {
|
|
30
43
|
position: absolute;
|
|
31
44
|
z-index: 500;
|
|
32
45
|
left: 16px;
|
|
@@ -36,9 +49,9 @@
|
|
|
36
49
|
overflow: auto;
|
|
37
50
|
box-sizing: border-box;
|
|
38
51
|
padding: 16px;
|
|
39
|
-
border: 1px solid var(--story-map-border);
|
|
52
|
+
border: 1px solid var(--story-map-border, var(--story-map-border-fallback));
|
|
40
53
|
border-radius: 10px;
|
|
41
|
-
background: color-mix(in srgb, var(--story-map-bg) 94%, transparent);
|
|
54
|
+
background: color-mix(in srgb, var(--story-map-bg, var(--story-map-bg-fallback)) 94%, transparent);
|
|
42
55
|
backdrop-filter: blur(6px);
|
|
43
56
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
|
44
57
|
}
|
|
@@ -48,9 +61,20 @@
|
|
|
48
61
|
font-size: 1.2rem;
|
|
49
62
|
}
|
|
50
63
|
|
|
64
|
+
.story-map__note-link {
|
|
65
|
+
color: inherit;
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.story-map__note-link:hover {
|
|
71
|
+
color: var(--story-map-accent, var(--story-map-accent-fallback));
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
}
|
|
74
|
+
|
|
51
75
|
.story-map__story-title {
|
|
52
76
|
margin-bottom: 6px;
|
|
53
|
-
color: var(--story-map-muted);
|
|
77
|
+
color: var(--story-map-muted, var(--story-map-muted-fallback));
|
|
54
78
|
font-size: 0.82rem;
|
|
55
79
|
font-weight: 600;
|
|
56
80
|
text-transform: uppercase;
|
|
@@ -84,7 +108,7 @@
|
|
|
84
108
|
|
|
85
109
|
.story-map__figure figcaption {
|
|
86
110
|
margin-top: 4px;
|
|
87
|
-
color: var(--story-map-muted);
|
|
111
|
+
color: var(--story-map-muted, var(--story-map-muted-fallback));
|
|
88
112
|
font-size: 0.8rem;
|
|
89
113
|
}
|
|
90
114
|
|
|
@@ -97,11 +121,11 @@
|
|
|
97
121
|
}
|
|
98
122
|
|
|
99
123
|
.story-map__nav button {
|
|
100
|
-
border: 1px solid var(--story-map-border);
|
|
124
|
+
border: 1px solid var(--story-map-border, var(--story-map-border-fallback));
|
|
101
125
|
border-radius: 6px;
|
|
102
126
|
padding: 7px 10px;
|
|
103
|
-
background: var(--story-map-bg);
|
|
104
|
-
color: var(--story-map-fg);
|
|
127
|
+
background: var(--story-map-bg, var(--story-map-bg-fallback));
|
|
128
|
+
color: var(--story-map-fg, var(--story-map-fg-fallback));
|
|
105
129
|
cursor: pointer;
|
|
106
130
|
}
|
|
107
131
|
|
|
@@ -115,13 +139,13 @@
|
|
|
115
139
|
}
|
|
116
140
|
|
|
117
141
|
.story-map__nav span {
|
|
118
|
-
color: var(--story-map-muted);
|
|
142
|
+
color: var(--story-map-muted, var(--story-map-muted-fallback));
|
|
119
143
|
font-size: 0.85rem;
|
|
120
144
|
white-space: nowrap;
|
|
121
145
|
}
|
|
122
146
|
|
|
123
147
|
@media (max-width: 640px) {
|
|
124
|
-
.story-map__panel {
|
|
148
|
+
.story-map .story-map__panel {
|
|
125
149
|
left: 8px;
|
|
126
150
|
right: 8px;
|
|
127
151
|
bottom: 8px;
|