[READ-ONLY] Mirror of https://github.com/probablykasper/kadium. App for staying ontop of YouTube channels' uploads
kadium.kasper.space
linux
macos
notifications
tauri
windows
youtube
Adjust transition easing
+35
-34
+1
src/routes/+layout.svelte
+1
src/routes/+layout.svelte
+5
-9
src/routes/+page.svelte
+5
-9
src/routes/+page.svelte
···
332
332
</main>
333
333
334
334
<style lang="sass">
335
-
$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
336
335
.selectable
337
336
user-select: text
338
337
main
···
400
399
font-weight: 500
401
400
color: #ffffff
402
401
opacity: 1
403
-
transition: 100ms opacity $ease-md
404
402
margin-top: 1px
405
-
.channel
406
-
transition: 80ms opacity $ease-md
407
-
&:hover
408
-
color: hsl(210, 8%, 90%)
403
+
.channel:hover
404
+
color: hsl(210, 8%, 90%)
409
405
p.sub
410
406
font-size: 12px
411
407
color: hsl(210, 8%, 80%)
···
426
422
border: none
427
423
transform: translate3d(0, 0, 0) // fix glitch after transform/opacity
428
424
opacity: 0
429
-
transition: opacity 120ms $ease-md
425
+
transition: opacity 140ms var(--ease-out-cubic)
430
426
svg
431
427
fill: #ffffff
432
428
width: 16px
···
444
440
path.checkmark
445
441
transform: scale(1)
446
442
transform-origin: 20% 80%
447
-
transition: all 120ms $ease-md
443
+
transition: all 140ms var(--ease-out-cubic)
448
444
&:active path.checkmark
449
445
transform: scale(0.8)
450
446
opacity: 0
···
452
448
path.checkmark
453
449
transform: scale(0.8)
454
450
opacity: 0
455
-
transition: all 120ms $ease-md
451
+
transition: all 140ms var(--ease-out-cubic)
456
452
&:active path.checkmark
457
453
opacity: 1
458
454
transform: scale(1)
+4
-5
src/routes/_VideoBar.svelte
+4
-5
src/routes/_VideoBar.svelte
···
102
102
</header>
103
103
104
104
<style lang="sass">
105
-
$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
106
105
header
107
106
display: flex
108
107
align-items: center
···
134
133
.group
135
134
padding: 0px
136
135
height: 28px
137
-
transition: all 120ms $ease-md
136
+
transition: all 140ms var(--ease-out-cubic)
138
137
&:focus
139
138
border-color: hsla(220, 100%, 50%, 1)
140
139
box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
···
146
145
align-items: center
147
146
height: 100%
148
147
padding: 0px 11px
149
-
transition: background-color 120ms $ease-md
148
+
transition: background-color 140ms var(--ease-out-cubic)
150
149
&.selected
151
150
background-color: hsl(225, 14%, 28%)
152
151
button.tag
···
156
155
padding: 0px 8px
157
156
border-radius: 10px
158
157
margin-right: 5px
159
-
transition: all 120ms $ease-md
158
+
transition: all 140ms var(--ease-out-cubic)
160
159
&:hover
161
160
border-color: hsla(0, 0%, 50%, 0.5)
162
161
&:focus
···
173
172
height: 28px
174
173
box-sizing: border-box
175
174
padding: 0px 6px
176
-
transition: all 120ms $ease-md
175
+
transition: all 140ms var(--ease-out-cubic)
177
176
&:focus
178
177
border-color: hsla(220, 100%, 50%, 1)
179
178
box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
+3
-4
src/routes/channels/+page.svelte
+3
-4
src/routes/channels/+page.svelte
···
117
117
</main>
118
118
119
119
<style lang="sass">
120
-
$ease-md: cubic-bezier(0.4, 0.0, 0.2, 1)
121
120
main
122
121
display: flex
123
122
flex-direction: column
···
151
150
box-sizing: border-box
152
151
border: 1px solid hsla(0, 0%, 50%, 0.2)
153
152
background-color: hsl(225, 14%, 20%)
154
-
transition: all 120ms $ease-md
153
+
transition: all 120ms var(--ease-out-cubic)
155
154
&:hover
156
155
border-color: hsla(0, 0%, 50%, 0.5)
157
156
&:focus
···
168
167
display: flex
169
168
align-items: center
170
169
border-radius: 7px
171
-
transition: border 120ms $ease-md
170
+
transition: border 140ms var(--ease-out-cubic)
172
171
padding: 15px 5px
173
172
border: 1px solid transparent
174
173
@media screen and (min-width: 600px)
···
200
199
height: 28px
201
200
box-sizing: border-box
202
201
padding: 0px 6px
203
-
transition: all 120ms $ease-md
202
+
transition: all 120ms var(--ease-out-cubic)
204
203
&:focus
205
204
border-color: hsla(220, 100%, 50%, 1)
206
205
box-shadow: 0px 0px 0px 3px hsla(220, 100%, 50%, 0.5)
+13
-7
website/src/routes/+layout.svelte
+13
-7
website/src/routes/+layout.svelte
···
28
28
<nav
29
29
class="mx-auto flex max-w-5xl items-center px-3 py-4 text-base text-white text-opacity-60 sm:justify-between sm:px-6"
30
30
>
31
-
<Revealed class="sm:w-32" options={{ opacity: 0, x: -10, duration: 1000, delay: 300 }}>
31
+
<Revealed
32
+
class="ease-out-cubic sm:w-32"
33
+
options={{ opacity: 0, x: -10, duration: 1000, delay: 300 }}
34
+
>
32
35
<a
33
36
href="/"
34
-
class="ease-md flex items-center text-lg font-medium text-white sm:p-1.5 sm:text-xl"
37
+
class="flex items-center text-lg font-medium text-white sm:p-1.5 sm:text-xl"
35
38
style="-webkit-tap-highlight-color: hsla(0, 0%, 100%, 0.1);"
36
39
>
37
40
<img class="mr-2 h-8" src="/android-chrome-192x192.png" alt="" />
38
41
<span class="mr-1.5 max-[350px]:hidden">Kadium</span>
39
42
</a>
40
43
</Revealed>
41
-
<Revealed class="mx-1.5" options={{ opacity: 0, y: -10, duration: 1000, delay: 500 }}>
44
+
<Revealed
45
+
class="ease-out-cubic mx-1.5"
46
+
options={{ opacity: 0, y: -10, duration: 1000, delay: 500 }}
47
+
>
42
48
<a
43
-
class="ease-md mx-1.5 py-2 text-sm transition-colors duration-200 hover:text-white sm:text-base"
49
+
class="mx-1.5 py-2 text-sm transition-colors duration-150 hover:text-white sm:text-base"
44
50
class:font-medium={$page.url.pathname === '/'}
45
51
class:text-white={$page.url.pathname === '/'}
46
52
href="/">Overview</a
47
53
>
48
54
<a
49
-
class="ease-md mx-1.5 py-2 text-sm transition-colors duration-200 hover:text-white sm:text-base"
55
+
class="mx-1.5 py-2 text-sm transition-colors duration-150 hover:text-white sm:text-base"
50
56
class:font-medium={$page.url.pathname === '/changelog'}
51
57
class:text-white={$page.url.pathname === '/changelog'}
52
58
href="/changelog">Changelog</a
53
59
>
54
60
</Revealed>
55
61
<Revealed
56
-
class="ml-auto flex justify-end sm:ml-0 sm:w-32"
62
+
class="ease-out-cubic ml-auto flex justify-end sm:ml-0 sm:w-32"
57
63
options={{ opacity: 0, x: 10, duration: 1000, delay: 300 }}
58
64
>
59
65
<a
60
-
class="icon github ease-md sm:p-1.5"
66
+
class="icon github sm:p-1.5"
61
67
href="https://github.com/probablykasper/kadium"
62
68
aria-label="GitHub"
63
69
style="-webkit-tap-highlight-color: hsla(0, 0%, 100%, 0.1);"
+4
-4
website/src/routes/+page.svelte
+4
-4
website/src/routes/+page.svelte
···
8
8
</svelte:head>
9
9
10
10
<Revealed
11
-
class="mx-2 mb-4 mt-20 text-center transition-all ease-out"
11
+
class="ease-out-cubic mx-2 mb-4 mt-20 text-center transition-all"
12
12
options={{ opacity: 0, scale: 0.9, duration: 750 }}
13
13
>
14
14
<h1 class="inline-block text-7xl font-extrabold">Kadium</h1>
15
15
</Revealed>
16
16
<Revealed
17
-
class="mx-2 mb-12 text-center transition-all ease-out"
17
+
class="ease-out-cubic mx-2 mb-12 text-center transition-all"
18
18
options={{ opacity: 0, y: -10, duration: 550, delay: 250 }}
19
19
>
20
-
<p class="text-xl text-blue-100 opacity-60 transition-all duration-500 ease-out">
20
+
<p class="ease-out-cubic text-xl text-blue-100 opacity-60 transition-all duration-500">
21
21
An app for staying ontop of YouTube channels' uploads
22
22
</p>
23
23
</Revealed>
24
24
25
25
<Revealed
26
-
class="mb-24 flex justify-center transition-all ease-out"
26
+
class="ease-out-cubic mb-24 flex justify-center transition-all"
27
27
options={{ opacity: 0, scale: 0.9, duration: 550, delay: 450 }}
28
28
>
29
29
<div>
+4
-4
website/src/routes/Download.svelte
+4
-4
website/src/routes/Download.svelte
···
118
118
class:opacity-50={loading}
119
119
>
120
120
<div
121
-
class="opacity-0 transition-all duration-700 ease-out group-hover:opacity-40 group-focus:opacity-40"
121
+
class="ease-out-cubic opacity-0 transition-all duration-700 group-hover:opacity-40 group-focus:opacity-40"
122
122
>
123
123
<div
124
-
class="gradient gradient-3 scale-80 absolute inset-0 -z-10 transition-all duration-700 ease-out group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
124
+
class="gradient gradient-3 scale-80 ease-out-cubic absolute inset-0 -z-10 transition-all duration-700 group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
125
125
/>
126
126
</div>
127
127
Download for {suggestedVersion.os}
···
133
133
aria-label="Download for other platforms"
134
134
>
135
135
<div
136
-
class="opacity-0 transition-all duration-700 ease-out group-hover:opacity-40 group-focus:opacity-40"
136
+
class="ease-out-cubic opacity-0 transition-all duration-700 group-hover:opacity-40 group-focus:opacity-40"
137
137
>
138
138
<div
139
-
class="gradient gradient-3 scale-80 absolute inset-0 -z-10 transition-all duration-700 ease-out group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
139
+
class="gradient gradient-3 scale-80 ease-out-cubic absolute inset-0 -z-10 transition-all duration-700 group-hover:scale-100 group-hover:blur-md group-focus:scale-100 group-focus:blur-md"
140
140
/>
141
141
</div>
142
142
<svg