Copy index.html, App.svelte, global.css from rollup template

non25 · non25 · commit a0ca8ab986fa · 2021-01-22T13:06:28.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,17 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-	<meta charset='utf8'>
-	<meta name='viewport' content='width=device-width'>
+	<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='build/bundle.css'>
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
 </head>
 
 <body>
-	<script src='build/bundle.js'></script>
 </body>
 </html>
diff --git a/src/App.svelte b/src/App.svelte
@@ -2,10 +2,29 @@
 	export let name;
 </script>
 
+<main>
+	<h1>Hello {name}!</h1>
+	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+
 <style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
 	h1 {
-		color: purple;
+		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
 	}
-</style>
 
-<h1>Hello {name}!</h1>
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>
diff --git a/src/global.css b/src/global.css
@@ -32,6 +32,7 @@ label {
 input, button, select, textarea {
 	font-family: inherit;
 	font-size: inherit;
+	-webkit-padding: 0.4em 0;
 	padding: 0.4em;
 	margin: 0 0 0.5em 0;
 	box-sizing: border-box;
@@ -43,19 +44,20 @@ input:disabled {
 	color: #ccc;
 }
 
-input[type="range"] {
-	height: 0;
-}
-
 button {
+	color: #333;
 	background-color: #f4f4f4;
 	outline: none;
 }
 
-button:active {
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
 	background-color: #ddd;
 }
 
 button:focus {
 	border-color: #666;
-}
+}
