a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
hypermedia
frontend
signals
fix: css reference in demo
+10
-12
+1
-1
lib/index.html
+1
-1
lib/index.html
···
5
5
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
<title>Volt.js Demo - Reactive Framework & Volt CSS Showcase</title>
8
-
<link rel="stylesheet" href="/src/styles/base.css" />
8
+
<link rel="stylesheet" href="/src/styles/index.css" />
9
9
</head>
10
10
<body>
11
11
<div id="app"></div>
+2
-6
lib/src/demo/index.ts
+2
-6
lib/src/demo/index.ts
···
213
213
),
214
214
dom.footer(
215
215
null,
216
-
dom.hr(null),
217
216
dom.p(
218
217
null,
219
218
"Built with ",
220
219
dom.a({ href: "https://github.com/stormlightlabs/volt" }, "Volt.js"),
221
-
" - A lightweight reactive framework",
220
+
" - A lightweight, reactive hypermedia framework",
222
221
),
223
222
dom.p(
224
223
null,
225
-
dom.small(
226
-
null,
227
-
"This demo showcases both Volt.js reactive features and Volt CSS classless styling. View source to see how everything works!",
228
-
),
224
+
"This demo showcases both Volt.js reactive features and Volt CSS classless styling. View source to see how everything works!",
229
225
),
230
226
),
231
227
);
+1
lib/src/demo/sections/interactivity.ts
+1
lib/src/demo/sections/interactivity.ts
+3
-3
lib/src/demo/sections/plugins.ts
+3
-3
lib/src/demo/sections/plugins.ts
···
65
65
),
66
66
),
67
67
dom.div(
68
-
{ "data-volt-url:urlParam": "query" },
69
-
dom.label({ for: "url-input" }, "URL Parameter (synced with ?urlParam=...):"),
70
-
dom.input({
68
+
// FIXME: this needs to be constrained in the stylesheet to allow for the sidenotes
69
+
{ "data-volt-url:urlParam": "query", "style": "max-width: var(--content-width);" },
70
+
...dom.labelFor("URL Parameter (synced with ?urlParam=...)", {
71
71
type: "text",
72
72
id: "url-input",
73
73
"data-volt-model": "urlParam",
+1
lib/src/styles/components.css
+1
lib/src/styles/components.css
+1
-1
lib/src/styles/index.css
+1
-1
lib/src/styles/index.css
···
22
22
* Inspired by: magick.css, latex-css, sakura, matcha, mvp.css
23
23
*/
24
24
25
-
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
25
+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
26
26
27
27
/* Design system tokens */
28
28
@import './variables.css';