Spaces:
Running
Running
fix analysis
Browse files- src/routes/Counter.svelte +0 -102
- src/routes/Header.svelte +0 -129
src/routes/Counter.svelte
DELETED
@@ -1,102 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { spring } from 'svelte/motion';
|
3 |
-
|
4 |
-
let count = 0;
|
5 |
-
|
6 |
-
const displayed_count = spring();
|
7 |
-
$: displayed_count.set(count);
|
8 |
-
$: offset = modulo($displayed_count, 1);
|
9 |
-
|
10 |
-
function modulo(n: number, m: number) {
|
11 |
-
// handle negative numbers
|
12 |
-
return ((n % m) + m) % m;
|
13 |
-
}
|
14 |
-
</script>
|
15 |
-
|
16 |
-
<div class="counter">
|
17 |
-
<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
|
18 |
-
<svg aria-hidden="true" viewBox="0 0 1 1">
|
19 |
-
<path d="M0,0.5 L1,0.5" />
|
20 |
-
</svg>
|
21 |
-
</button>
|
22 |
-
|
23 |
-
<div class="counter-viewport">
|
24 |
-
<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
|
25 |
-
<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
|
26 |
-
<strong>{Math.floor($displayed_count)}</strong>
|
27 |
-
</div>
|
28 |
-
</div>
|
29 |
-
|
30 |
-
<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
|
31 |
-
<svg aria-hidden="true" viewBox="0 0 1 1">
|
32 |
-
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
|
33 |
-
</svg>
|
34 |
-
</button>
|
35 |
-
</div>
|
36 |
-
|
37 |
-
<style>
|
38 |
-
.counter {
|
39 |
-
display: flex;
|
40 |
-
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
41 |
-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
42 |
-
margin: 1rem 0;
|
43 |
-
}
|
44 |
-
|
45 |
-
.counter button {
|
46 |
-
width: 2em;
|
47 |
-
padding: 0;
|
48 |
-
display: flex;
|
49 |
-
align-items: center;
|
50 |
-
justify-content: center;
|
51 |
-
border: 0;
|
52 |
-
background-color: transparent;
|
53 |
-
touch-action: manipulation;
|
54 |
-
font-size: 2rem;
|
55 |
-
}
|
56 |
-
|
57 |
-
.counter button:hover {
|
58 |
-
background-color: var(--color-bg-1);
|
59 |
-
}
|
60 |
-
|
61 |
-
svg {
|
62 |
-
width: 25%;
|
63 |
-
height: 25%;
|
64 |
-
}
|
65 |
-
|
66 |
-
path {
|
67 |
-
vector-effect: non-scaling-stroke;
|
68 |
-
stroke-width: 2px;
|
69 |
-
stroke: #444;
|
70 |
-
}
|
71 |
-
|
72 |
-
.counter-viewport {
|
73 |
-
width: 8em;
|
74 |
-
height: 4em;
|
75 |
-
overflow: hidden;
|
76 |
-
text-align: center;
|
77 |
-
position: relative;
|
78 |
-
}
|
79 |
-
|
80 |
-
.counter-viewport strong {
|
81 |
-
position: absolute;
|
82 |
-
display: flex;
|
83 |
-
width: 100%;
|
84 |
-
height: 100%;
|
85 |
-
font-weight: 400;
|
86 |
-
color: var(--color-theme-1);
|
87 |
-
font-size: 4rem;
|
88 |
-
align-items: center;
|
89 |
-
justify-content: center;
|
90 |
-
}
|
91 |
-
|
92 |
-
.counter-digits {
|
93 |
-
position: absolute;
|
94 |
-
width: 100%;
|
95 |
-
height: 100%;
|
96 |
-
}
|
97 |
-
|
98 |
-
.hidden {
|
99 |
-
top: -100%;
|
100 |
-
user-select: none;
|
101 |
-
}
|
102 |
-
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/routes/Header.svelte
DELETED
@@ -1,129 +0,0 @@
|
|
1 |
-
<script>
|
2 |
-
import { page } from '$app/stores';
|
3 |
-
import logo from '$lib/images/svelte-logo.svg';
|
4 |
-
import github from '$lib/images/github.svg';
|
5 |
-
</script>
|
6 |
-
|
7 |
-
<header>
|
8 |
-
<div class="corner">
|
9 |
-
<a href="https://kit.svelte.dev">
|
10 |
-
<img src={logo} alt="SvelteKit" />
|
11 |
-
</a>
|
12 |
-
</div>
|
13 |
-
|
14 |
-
<nav>
|
15 |
-
<svg viewBox="0 0 2 3" aria-hidden="true">
|
16 |
-
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
|
17 |
-
</svg>
|
18 |
-
<ul>
|
19 |
-
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
|
20 |
-
<a href="/">Home</a>
|
21 |
-
</li>
|
22 |
-
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
|
23 |
-
<a href="/about">About</a>
|
24 |
-
</li>
|
25 |
-
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
|
26 |
-
<a href="/sverdle">Sverdle</a>
|
27 |
-
</li>
|
28 |
-
</ul>
|
29 |
-
<svg viewBox="0 0 2 3" aria-hidden="true">
|
30 |
-
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
|
31 |
-
</svg>
|
32 |
-
</nav>
|
33 |
-
|
34 |
-
<div class="corner">
|
35 |
-
<a href="https://github.com/sveltejs/kit">
|
36 |
-
<img src={github} alt="GitHub" />
|
37 |
-
</a>
|
38 |
-
</div>
|
39 |
-
</header>
|
40 |
-
|
41 |
-
<style>
|
42 |
-
header {
|
43 |
-
display: flex;
|
44 |
-
justify-content: space-between;
|
45 |
-
}
|
46 |
-
|
47 |
-
.corner {
|
48 |
-
width: 3em;
|
49 |
-
height: 3em;
|
50 |
-
}
|
51 |
-
|
52 |
-
.corner a {
|
53 |
-
display: flex;
|
54 |
-
align-items: center;
|
55 |
-
justify-content: center;
|
56 |
-
width: 100%;
|
57 |
-
height: 100%;
|
58 |
-
}
|
59 |
-
|
60 |
-
.corner img {
|
61 |
-
width: 2em;
|
62 |
-
height: 2em;
|
63 |
-
object-fit: contain;
|
64 |
-
}
|
65 |
-
|
66 |
-
nav {
|
67 |
-
display: flex;
|
68 |
-
justify-content: center;
|
69 |
-
--background: rgba(255, 255, 255, 0.7);
|
70 |
-
}
|
71 |
-
|
72 |
-
svg {
|
73 |
-
width: 2em;
|
74 |
-
height: 3em;
|
75 |
-
display: block;
|
76 |
-
}
|
77 |
-
|
78 |
-
path {
|
79 |
-
fill: var(--background);
|
80 |
-
}
|
81 |
-
|
82 |
-
ul {
|
83 |
-
position: relative;
|
84 |
-
padding: 0;
|
85 |
-
margin: 0;
|
86 |
-
height: 3em;
|
87 |
-
display: flex;
|
88 |
-
justify-content: center;
|
89 |
-
align-items: center;
|
90 |
-
list-style: none;
|
91 |
-
background: var(--background);
|
92 |
-
background-size: contain;
|
93 |
-
}
|
94 |
-
|
95 |
-
li {
|
96 |
-
position: relative;
|
97 |
-
height: 100%;
|
98 |
-
}
|
99 |
-
|
100 |
-
li[aria-current='page']::before {
|
101 |
-
--size: 6px;
|
102 |
-
content: '';
|
103 |
-
width: 0;
|
104 |
-
height: 0;
|
105 |
-
position: absolute;
|
106 |
-
top: 0;
|
107 |
-
left: calc(50% - var(--size));
|
108 |
-
border: var(--size) solid transparent;
|
109 |
-
border-top: var(--size) solid var(--color-theme-1);
|
110 |
-
}
|
111 |
-
|
112 |
-
nav a {
|
113 |
-
display: flex;
|
114 |
-
height: 100%;
|
115 |
-
align-items: center;
|
116 |
-
padding: 0 0.5rem;
|
117 |
-
color: var(--color-text);
|
118 |
-
font-weight: 700;
|
119 |
-
font-size: 0.8rem;
|
120 |
-
text-transform: uppercase;
|
121 |
-
letter-spacing: 0.1em;
|
122 |
-
text-decoration: none;
|
123 |
-
transition: color 0.2s linear;
|
124 |
-
}
|
125 |
-
|
126 |
-
a:hover {
|
127 |
-
color: var(--color-theme-1);
|
128 |
-
}
|
129 |
-
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|