Hugging Face's logo

Spaces:
julien-c
/
svelte-demo
Running

App Files Community
julien-c HF staff commited on
Commit
51a3c5e
·
verified ·
1 Parent(s): 8af255b

Use Play CDN for Tailwind

Browse files
Files changed (5) hide show
  1. .vscode/settings.json +3 -0
  2. public/global.css +0 -63
  3. public/index.html +4 -3
  4. src/App.svelte +6 -25
  5. src/main.ts +4 -6
.vscode/settings.json ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ {
2
+ "editor.formatOnSave": true
3
+ }
public/global.css DELETED
@@ -1,63 +0,0 @@
1
- html, body {
2
- position: relative;
3
- width: 100%;
4
- height: 100%;
5
- }
6
-
7
- body {
8
- color: #333;
9
- margin: 0;
10
- padding: 8px;
11
- box-sizing: border-box;
12
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13
- }
14
-
15
- a {
16
- color: rgb(0,100,200);
17
- text-decoration: none;
18
- }
19
-
20
- a:hover {
21
- text-decoration: underline;
22
- }
23
-
24
- a:visited {
25
- color: rgb(0,80,160);
26
- }
27
-
28
- label {
29
- display: block;
30
- }
31
-
32
- input, button, select, textarea {
33
- font-family: inherit;
34
- font-size: inherit;
35
- -webkit-padding: 0.4em 0;
36
- padding: 0.4em;
37
- margin: 0 0 0.5em 0;
38
- box-sizing: border-box;
39
- border: 1px solid #ccc;
40
- border-radius: 2px;
41
- }
42
-
43
- input:disabled {
44
- color: #ccc;
45
- }
46
-
47
- button {
48
- color: #333;
49
- background-color: #f4f4f4;
50
- outline: none;
51
- }
52
-
53
- button:disabled {
54
- color: #999;
55
- }
56
-
57
- button:not(:disabled):active {
58
- background-color: #ddd;
59
- }
60
-
61
- button:focus {
62
- border-color: #666;
63
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
public/index.html CHANGED
@@ -1,5 +1,6 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset='utf-8'>
5
  <meta name='viewport' content='width=device-width,initial-scale=1'>
@@ -7,12 +8,12 @@
7
  <title>Svelte app</title>
8
 
9
  <link rel='icon' type='image/png' href='./favicon.png'>
10
- <link rel='stylesheet' href='./global.css'>
11
- <link rel='stylesheet' href='./build/bundle.css'>
12
 
 
13
  <script defer src='./build/bundle.js'></script>
14
  </head>
15
 
16
  <body>
17
  </body>
18
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset='utf-8'>
6
  <meta name='viewport' content='width=device-width,initial-scale=1'>
 
8
  <title>Svelte app</title>
9
 
10
  <link rel='icon' type='image/png' href='./favicon.png'>
 
 
11
 
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
  <script defer src='./build/bundle.js'></script>
14
  </head>
15
 
16
  <body>
17
  </body>
18
+
19
+ </html>
src/App.svelte CHANGED
@@ -1,30 +1,11 @@
1
  <script lang="ts">
2
- export let name: string;
3
  </script>
4
 
5
  <main>
6
- <h1>Hello {name}!</h1>
7
- <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 
 
 
8
  </main>
9
-
10
- <style>
11
- main {
12
- text-align: center;
13
- padding: 1em;
14
- max-width: 240px;
15
- margin: 0 auto;
16
- }
17
-
18
- h1 {
19
- color: #ff3e00;
20
- text-transform: uppercase;
21
- font-size: 4em;
22
- font-weight: 100;
23
- }
24
-
25
- @media (min-width: 640px) {
26
- main {
27
- max-width: none;
28
- }
29
- }
30
- </style>
 
1
  <script lang="ts">
2
+ export let name = "World";
3
  </script>
4
 
5
  <main>
6
+ <h1 class="text-red-300">Hello {name}!</h1>
7
+ <p>
8
+ Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
9
+ how to build Svelte apps.
10
+ </p>
11
  </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/main.ts CHANGED
@@ -1,10 +1,8 @@
1
- import App from './App.svelte';
2
 
3
  const app = new App({
4
- target: document.body,
5
- props: {
6
- name: 'world'
7
- }
8
  });
9
 
10
- export default app;
 
1
+ import App from "./App.svelte";
2
 
3
  const app = new App({
4
+ target: document.body,
5
+ props: {},
 
 
6
  });
7
 
8
+ export default app;