enzostvs HF staff commited on
Commit
c003b31
·
1 Parent(s): 72b2fe7

fix analysis

Browse files
Files changed (2) hide show
  1. src/routes/Counter.svelte +0 -102
  2. 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>