desertthunder.dev / voltx
a reactive (signals based) hypermedia web framework (wip) stormlightlabs.github.io/volt/
hypermedia frontend signals
fork atom

fix: css reference in demo

desertthunder.dev 93129402 20b4e28c

options
unified split
Changed files
+10 -12
lib
index.html
src
demo
index.ts
sections
interactivity.ts
plugins.ts
styles
components.css
index.css
variables.css
+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
··· 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
··· 43 43 placeholder: "Type here...", 44 44 required: true, 45 45 }), 46 + // FIXME: this needs to be the modal footer 46 47 dom.footer( 47 48 null, 48 49 dom.button({ type: "button", "data-volt-on-click": "closeDialog" }, "Cancel"),
+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
··· 119 119 padding: var(--space-md); 120 120 } 121 121 122 + 122 123 dialog header button[aria-label="Close"], 123 124 dialog header button[aria-label="close"] { 124 125 top: var(--space-md);
+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';
+1 -1
lib/src/styles/variables.css
··· 16 16 --font-size-4xl: 2.027rem; 17 17 --font-size-5xl: 2.566rem; 18 18 19 - --font-sans: "Inter", sans-serif; 19 + --font-sans: "DM Sans", sans-serif; 20 20 --font-serif: "Libre Baskerville", serif; 21 21 --font-mono: "Google Sans Code", monospace; 22 22