Jonas Kruckenberg
2 years ago
parent
a8f198afec
commit
900b8ccdb1
@ -1,63 +1,68 @@
|
|||||||
html, body {
|
html,
|
||||||
position: relative;
|
body {
|
||||||
width: 100%;
|
position: relative;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
|
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: rgb(0,100,200);
|
color: rgb(0, 100, 200);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: rgb(0,80,160);
|
color: rgb(0, 80, 160);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button, select, textarea {
|
input,
|
||||||
font-family: inherit;
|
button,
|
||||||
font-size: inherit;
|
select,
|
||||||
-webkit-padding: 0.4em 0;
|
textarea {
|
||||||
padding: 0.4em;
|
font-family: inherit;
|
||||||
margin: 0 0 0.5em 0;
|
font-size: inherit;
|
||||||
box-sizing: border-box;
|
-webkit-padding: 0.4em 0;
|
||||||
border: 1px solid #ccc;
|
padding: 0.4em;
|
||||||
border-radius: 2px;
|
margin: 0 0 0.5em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled {
|
input:disabled {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #f4f4f4;
|
background-color: #f4f4f4;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:disabled {
|
button:disabled {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(:disabled):active {
|
button:not(:disabled):active {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus {
|
button:focus {
|
||||||
border-color: #666;
|
border-color: #666;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
<head>
|
<title>Svelte app</title>
|
||||||
<meta charset='utf-8'>
|
|
||||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
||||||
|
|
||||||
<title>Svelte app</title>
|
<link rel="icon" type="image/png" href="favicon.png" />
|
||||||
|
<link rel="stylesheet" href="global.css" />
|
||||||
|
<link rel="stylesheet" href="build/bundle.css" />
|
||||||
|
|
||||||
<link rel='icon' type='image/png' href='favicon.png'>
|
<script defer src="build/bundle.js"></script>
|
||||||
<link rel='stylesheet' href='global.css'>
|
</head>
|
||||||
<link rel='stylesheet' href='build/bundle.css'>
|
|
||||||
|
|
||||||
<script defer src='build/bundle.js'></script>
|
<body></body>
|
||||||
</head>
|
</html>
|
||||||
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|||||||
@ -1,83 +1,87 @@
|
|||||||
import svelte from 'rollup-plugin-svelte';
|
import svelte from "rollup-plugin-svelte";
|
||||||
import commonjs from '@rollup/plugin-commonjs';
|
import commonjs from "@rollup/plugin-commonjs";
|
||||||
import resolve from '@rollup/plugin-node-resolve';
|
import resolve from "@rollup/plugin-node-resolve";
|
||||||
import livereload from 'rollup-plugin-livereload';
|
import livereload from "rollup-plugin-livereload";
|
||||||
import { terser } from 'rollup-plugin-terser';
|
import { terser } from "rollup-plugin-terser";
|
||||||
import sveltePreprocess from 'svelte-preprocess';
|
import sveltePreprocess from "svelte-preprocess";
|
||||||
import typescript from '@rollup/plugin-typescript';
|
import typescript from "@rollup/plugin-typescript";
|
||||||
import css from 'rollup-plugin-css-only';
|
import css from "rollup-plugin-css-only";
|
||||||
|
|
||||||
const production = !process.env.ROLLUP_WATCH;
|
const production = !process.env.ROLLUP_WATCH;
|
||||||
|
|
||||||
function serve() {
|
function serve() {
|
||||||
let server;
|
let server;
|
||||||
|
|
||||||
function toExit() {
|
function toExit() {
|
||||||
if (server) server.kill(0);
|
if (server) server.kill(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
writeBundle() {
|
writeBundle() {
|
||||||
if (server) return;
|
if (server) return;
|
||||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
server = require("child_process").spawn(
|
||||||
stdio: ['ignore', 'inherit', 'inherit'],
|
"npm",
|
||||||
shell: true
|
["run", "start", "--", "--dev"],
|
||||||
});
|
{
|
||||||
|
stdio: ["ignore", "inherit", "inherit"],
|
||||||
|
shell: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
process.on('SIGTERM', toExit);
|
process.on("SIGTERM", toExit);
|
||||||
process.on('exit', toExit);
|
process.on("exit", toExit);
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
input: 'src/main.ts',
|
input: "src/main.ts",
|
||||||
output: {
|
output: {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
format: 'iife',
|
format: "iife",
|
||||||
name: 'app',
|
name: "app",
|
||||||
file: 'public/build/bundle.js'
|
file: "public/build/bundle.js",
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
svelte({
|
svelte({
|
||||||
preprocess: sveltePreprocess(),
|
preprocess: sveltePreprocess(),
|
||||||
compilerOptions: {
|
compilerOptions: {
|
||||||
// enable run-time checks when not in production
|
// enable run-time checks when not in production
|
||||||
dev: !production
|
dev: !production,
|
||||||
}
|
},
|
||||||
}),
|
}),
|
||||||
// we'll extract any component CSS out into
|
// we'll extract any component CSS out into
|
||||||
// a separate file - better for performance
|
// a separate file - better for performance
|
||||||
css({ output: 'bundle.css' }),
|
css({ output: "bundle.css" }),
|
||||||
|
|
||||||
// If you have external dependencies installed from
|
// If you have external dependencies installed from
|
||||||
// npm, you'll most likely need these plugins. In
|
// npm, you'll most likely need these plugins. In
|
||||||
// some cases you'll need additional configuration -
|
// some cases you'll need additional configuration -
|
||||||
// consult the documentation for details:
|
// consult the documentation for details:
|
||||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||||
resolve({
|
resolve({
|
||||||
browser: true,
|
browser: true,
|
||||||
dedupe: ['svelte']
|
dedupe: ["svelte"],
|
||||||
}),
|
}),
|
||||||
commonjs(),
|
commonjs(),
|
||||||
typescript({
|
typescript({
|
||||||
sourceMap: !production,
|
sourceMap: !production,
|
||||||
inlineSources: !production
|
inlineSources: !production,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
// In dev mode, call `npm run start` once
|
// In dev mode, call `npm run start` once
|
||||||
// the bundle has been generated
|
// the bundle has been generated
|
||||||
!production && serve(),
|
!production && serve(),
|
||||||
|
|
||||||
// Watch the `public` directory and refresh the
|
// Watch the `public` directory and refresh the
|
||||||
// browser on changes when not in production
|
// browser on changes when not in production
|
||||||
!production && livereload('public'),
|
!production && livereload("public"),
|
||||||
|
|
||||||
// If we're building for production (npm run build
|
// If we're building for production (npm run build
|
||||||
// instead of npm run dev), minify
|
// instead of npm run dev), minify
|
||||||
production && terser()
|
production && terser(),
|
||||||
],
|
],
|
||||||
watch: {
|
watch: {
|
||||||
clearScreen: false
|
clearScreen: false,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import App from './App.svelte';
|
import App from "./App.svelte";
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.body,
|
target: document.body,
|
||||||
props: {}
|
props: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|||||||
Loading…
Reference in new issue